/*
 * OLÉNO mobile ordering experience
 * Isolated from the desktop visual system. Business behavior remains in dashboard.js.
 */

:root {
  --oleno-ink: #2a2622;
  --oleno-muted: #82776d;
  --oleno-paper: #fbf8f3;
  --oleno-cream: #f3eadf;
  --oleno-line: #e7ddd0;
  --oleno-copper: #a35c38;
  --oleno-gold: #b7895d;
  --oleno-deep: #66462f;
  --oleno-shadow: 0 14px 34px rgba(73, 47, 29, .10);
  --oleno-display: Georgia, "Songti SC", "STSong", serif;
  --oleno-body: "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
}

/* ---------- Real mobile storefront ---------- */
.agent-mobile-portal {
  --mobile-theme: #a97854;
  position: relative !important;
  box-sizing: border-box !important;
  width: min(100%, 480px) !important;
  max-width: 480px !important;
  min-height: 100dvh !important;
  margin: 0 auto !important;
  padding: 0 18px max(108px, calc(88px + env(safe-area-inset-bottom))) !important;
  overflow: clip !important;
  color: var(--oleno-ink) !important;
  background-color: var(--mobile-bg, var(--oleno-paper)) !important;
  font-family: var(--oleno-body) !important;
}

.agent-mobile-brand {
  position: sticky !important;
  z-index: 30 !important;
  top: 0 !important;
  display: grid !important;
  grid-template-columns: 54px minmax(0, 1fr) 54px !important;
  align-items: center !important;
  min-height: 76px !important;
  margin: 0 -18px !important;
  padding: env(safe-area-inset-top) 8px 0 !important;
  overflow: hidden !important;
  color: var(--header-text, #fff) !important;
  background: var(--header-color, var(--mobile-theme)) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.16) inset !important;
}

.agent-mobile-brand::after {
  position: absolute;
  right: -12%;
  bottom: -28px;
  left: -12%;
  height: 40px;
  border-radius: 50%;
  background: var(--mobile-bg, var(--oleno-paper));
  content: "";
  opacity: .98;
}

.agent-mobile-brand.has-custom-image::after { display: none !important; }
.agent-mobile-brand > div { position: relative; z-index: 2; min-width: 0; text-align: center; }
.agent-mobile-brand b {
  display: block !important;
  color: inherit !important;
  font: 600 28px/1 var(--oleno-display) !important;
  letter-spacing: .08em !important;
}
.agent-mobile-brand small {
  display: block !important;
  margin-top: 5px !important;
  overflow: hidden;
  color: inherit !important;
  font-size: 10px !important;
  letter-spacing: .14em;
  opacity: .78 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-mobile-brand button {
  position: relative !important;
  z-index: 3 !important;
  display: grid !important;
  place-items: center !important;
  width: 48px !important;
  height: 48px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  color: inherit !important;
  background: transparent !important;
  font-size: 25px !important;
  transition: background .18s ease, transform .18s ease !important;
}
.agent-mobile-brand button:active { background: rgba(255,255,255,.14) !important; transform: scale(.94); }

.agent-home-intro {
  position: relative;
  margin: 0 -18px 28px;
  padding: 45px 26px 25px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 87% 10%, rgba(255,255,255,.18), transparent 28%),
    linear-gradient(145deg, color-mix(in srgb, var(--mobile-theme) 86%, #563722), color-mix(in srgb, var(--mobile-theme) 72%, #2f2018));
}
.agent-home-intro::before {
  position: absolute;
  top: 28px;
  right: -70px;
  width: 190px;
  height: 190px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;
  content: "";
}
.agent-home-intro > span {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #f5ddc5;
  font: 700 10px/1 var(--oleno-body);
  letter-spacing: .21em;
}
.agent-home-intro > span::before { width: 25px; height: 1px; background: currentColor; content: ""; }
.agent-home-intro h1 {
  position: relative;
  max-width: 330px;
  margin: 15px 0 7px;
  color: #fff !important;
  font: 600 30px/1.25 var(--oleno-display) !important;
  letter-spacing: .02em;
}
.agent-home-intro > p { position: relative; margin: 0; color: rgba(255,255,255,.73); font-size: 13px; }
.agent-home-intro > div {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 24px -10px -7px;
  border-top: 1px solid rgba(255,255,255,.17);
}
.agent-home-intro button {
  display: grid;
  gap: 3px;
  min-width: 0;
  min-height: 67px;
  padding: 13px 8px 7px;
  border: 0;
  border-right: 1px solid rgba(255,255,255,.14);
  color: #fff;
  background: transparent;
  text-align: center;
}
.agent-home-intro button:last-child { border-right: 0; }
.agent-home-intro button b { font: 600 22px/1 var(--oleno-display); }
.agent-home-intro button small { color: rgba(255,255,255,.67); font-size: 11px; }

.agent-editorial-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin: 25px 2px 14px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--oleno-line);
}
.agent-editorial-heading > span {
  order: 2;
  color: var(--oleno-gold);
  font: 700 9px/1 var(--oleno-body);
  letter-spacing: .16em;
}
.agent-editorial-heading h2 { margin: 0; color: var(--oleno-ink); font: 600 24px/1.2 var(--oleno-display); }
.agent-editorial-heading small { display: block; margin-top: 4px; color: var(--oleno-muted); font-size: 11px; }

.mobile-custom-text {
  margin: 18px 0 !important;
  padding: 20px 22px !important;
  border: 1px solid rgba(183,137,93,.28);
  border-radius: 2px !important;
  color: var(--oleno-deep) !important;
  background: rgba(255,255,255,.68) !important;
  box-shadow: none !important;
  font-family: var(--oleno-display);
  line-height: 1.8 !important;
}
.mobile-custom-image { margin: 18px 0 !important; }
.mobile-custom-image img { width: 100%; max-height: none !important; border-radius: 2px; object-fit: contain; box-shadow: var(--oleno-shadow); }

.agent-mobile-series { margin: 0 0 23px !important; padding: 0 !important; }
.agent-series-group {
  position: relative;
  margin: 0 0 12px !important;
  padding: 0 0 15px;
  border: 1px solid var(--oleno-line);
  border-radius: 4px;
  background: rgba(255,255,255,.74);
  box-shadow: 0 5px 18px rgba(73,47,29,.045);
}
.agent-series-group header {
  display: flex !important;
  align-items: center !important;
  min-height: 54px !important;
  padding: 0 17px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--oleno-line) !important;
  border-radius: 0 !important;
  color: var(--oleno-deep) !important;
  background: linear-gradient(90deg, rgba(243,234,223,.78), rgba(255,255,255,.42)) !important;
}
.agent-series-group header b { font: 600 20px/1.2 var(--oleno-display) !important; }
.agent-series-group header b::before {
  width: 2px !important;
  height: 21px !important;
  margin-right: 10px !important;
  background: var(--mobile-theme) !important;
  vertical-align: -4px !important;
}
.agent-series-group > div {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px !important;
  padding: 14px 14px 0 !important;
}
.agent-series-group button {
  position: relative;
  min-height: 47px !important;
  padding: 9px 12px !important;
  border: 1px solid #eadfd2 !important;
  border-radius: 2px !important;
  color: #6e5949 !important;
  background: #fff !important;
  font: 500 15px/1.25 var(--oleno-body) !important;
  box-shadow: none !important;
}
.agent-series-group button::after { margin-left: 7px; color: var(--oleno-gold); content: "›"; }
.agent-series-group button:active,
.agent-series-group button.active { border-color: var(--mobile-theme) !important; color: #fff !important; background: var(--mobile-theme) !important; }
.agent-series-group button.active::after { color: #fff; }

.agent-catalog-series { display: flex; gap: 9px; margin: 0 -18px 18px !important; padding: 0 18px 4px !important; overflow-x: auto; scroll-snap-type: x proximity; }
.agent-catalog-series .agent-series-group { flex: 0 0 84%; scroll-snap-align: start; }

.agent-view-all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 54px;
  margin: 8px 0 12px;
  padding: 0 18px;
  border: 1px solid var(--mobile-theme);
  border-radius: 2px;
  color: var(--mobile-theme);
  background: transparent;
  font-size: 15px;
  font-weight: 700;
}
.agent-view-all b { font: 400 22px/1 var(--oleno-display); }

.agent-mobile-list-head {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  margin: 22px 2px 12px !important;
  color: var(--oleno-ink) !important;
}
.agent-mobile-list-head b { font: 600 22px/1.2 var(--oleno-display) !important; }
.agent-mobile-list-head span { color: var(--oleno-muted) !important; font-size: 12px !important; }

.agent-mobile-products { display: grid !important; gap: 12px !important; }
.agent-mobile-products.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.agent-mobile-products.columns-1 { grid-template-columns: 1fr !important; }
.agent-mobile-products article {
  min-width: 0;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid var(--oleno-line) !important;
  border-radius: 3px !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 7px 22px rgba(73,47,29,.07) !important;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease !important;
}
.agent-mobile-products article:active { transform: translateY(1px) scale(.992); box-shadow: 0 3px 12px rgba(73,47,29,.06) !important; }
.agent-mobile-photo {
  width: 100% !important;
  aspect-ratio: 4 / 5 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #a39990 !important;
  background: #f7f3ed !important;
}
.agent-mobile-photo img { width: 100%; height: 100%; padding: 5px; object-fit: contain !important; background: #fff !important; }
.agent-card-copy { padding: 12px 12px 13px; }
.agent-card-series { display: block; margin-bottom: 7px; overflow: hidden; color: var(--oleno-gold); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-overflow: ellipsis; white-space: nowrap; }
.agent-mobile-products article h3 {
  min-height: 40px;
  margin: 0 0 4px !important;
  overflow: hidden !important;
  color: var(--oleno-ink) !important;
  font: 700 15px/1.35 var(--oleno-body) !important;
  white-space: normal !important;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.agent-mobile-products article small { color: var(--oleno-muted) !important; font: 11px/1.35 ui-monospace, Consolas, monospace; }
.agent-mobile-products article p { display: none !important; }
.agent-product-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; min-height: 28px; margin-top: 9px; }
.agent-product-price strong { margin: 0 !important; color: var(--oleno-deep) !important; font: 700 17px/1 var(--oleno-display) !important; }
.agent-product-price strong.discounted { color: var(--oleno-copper) !important; }
.agent-product-price del { display: inline !important; color: #aaa29a !important; font-size: 11px !important; }
.agent-mobile-products article button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 38px;
  margin-top: 11px;
  padding: 0 12px !important;
  border: 0;
  border-radius: 2px !important;
  color: #fff;
  background: var(--mobile-theme) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}
.agent-mobile-products article button i { font: normal 17px/1 var(--oleno-display); }

.empty-portal { padding: 48px 24px !important; border: 1px solid var(--oleno-line) !important; border-radius: 3px !important; background: rgba(255,255,255,.72) !important; text-align: center; }
.empty-portal b { display: block; margin-bottom: 6px; color: var(--oleno-deep); font-family: var(--oleno-display); font-size: 20px; }
.empty-portal p { margin: 0; color: var(--oleno-muted); line-height: 1.6; }

.agent-mobile-cart {
  position: fixed !important;
  z-index: 34 !important;
  right: max(calc((100vw - 480px) / 2 + 19px), 19px) !important;
  bottom: max(87px, calc(76px + env(safe-area-inset-bottom))) !important;
  display: grid !important;
  place-items: center !important;
  width: 56px !important;
  height: 56px !important;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,.42) !important;
  border-radius: 50% !important;
  color: #fff !important;
  background: var(--mobile-theme) !important;
  box-shadow: 0 9px 24px rgba(76,45,27,.24) !important;
}
.agent-cart-glyph { display: grid; place-items: center; }
.agent-cart-glyph svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.agent-mobile-cart i { top: -4px !important; right: -3px !important; min-width: 20px !important; height: 20px !important; border: 2px solid var(--oleno-paper) !important; background: var(--oleno-copper) !important; font-size: 10px !important; }

.agent-mobile-bottom {
  box-sizing: border-box !important;
  position: fixed !important;
  z-index: 32 !important;
  right: auto !important;
  bottom: 0 !important;
  left: 50% !important;
  display: grid !important;
  grid-template-columns: none !important;
  grid-auto-flow: column !important;
  grid-auto-columns: minmax(0, 1fr) !important;
  grid-template-rows: 1fr !important;
  width: min(480px, 100vw) !important;
  min-height: 72px !important;
  height: calc(72px + env(safe-area-inset-bottom)) !important;
  padding: 4px 12px env(safe-area-inset-bottom) !important;
  transform: translateX(-50%) !important;
  border-top: 1px solid var(--oleno-line) !important;
  background: rgba(252,249,244,.96) !important;
  box-shadow: 0 -8px 24px rgba(73,47,29,.07) !important;
  backdrop-filter: blur(16px);
}
.agent-mobile-bottom button {
  position: relative;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  gap: 2px !important;
  min-width: 0;
  min-height: 60px;
  padding: 0 !important;
  border: 0 !important;
  color: #82766c !important;
  background: transparent !important;
}
.agent-mobile-bottom button b { font-size: 22px !important; font-weight: 400 !important; line-height: 1 !important; }
.agent-mobile-bottom button span { font-size: 11px !important; font-weight: 700 !important; }
.agent-mobile-bottom button.active { color: var(--mobile-theme) !important; }
.agent-mobile-bottom button.active::before { position: absolute; top: 1px; width: 18px; height: 2px; border-radius: 2px; background: currentColor; content: ""; }

.agent-mobile-search-panel {
  top: 0 !important;
  width: min(480px, 100vw) !important;
  min-height: calc(76px + env(safe-area-inset-top)) !important;
  padding: env(safe-area-inset-top) 15px 0 !important;
  border-bottom: 1px solid var(--oleno-line);
  background: rgba(251,248,243,.98) !important;
  box-shadow: 0 9px 24px rgba(73,47,29,.12) !important;
}
.agent-mobile-search-panel label { height: 48px !important; border-color: var(--oleno-line) !important; border-radius: 2px !important; color: var(--oleno-gold) !important; background: #fff !important; }
.agent-mobile-search-panel > button { color: var(--oleno-deep) !important; background: var(--oleno-cream) !important; }

/* ---------- My page ---------- */
.agent-mobile-profile { padding: 0 0 20px !important; }
.agent-profile-hero {
  position: relative;
  gap: 7px !important;
  margin: 0 -18px !important;
  padding: 42px 22px 46px !important;
  overflow: hidden;
  background: linear-gradient(145deg, color-mix(in srgb, var(--mobile-theme) 88%, #563722), color-mix(in srgb, var(--mobile-theme) 68%, #3b291e)) !important;
}
.agent-profile-hero::after { position: absolute; right: -45px; bottom: -85px; width: 210px; height: 210px; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; content: ""; }
.agent-profile-hero .agent-avatar { position: relative; z-index: 1; width: 74px !important; height: 74px !important; border: 1px solid rgba(255,255,255,.55) !important; background: rgba(255,255,255,.15) !important; font: 600 29px/1 var(--oleno-display) !important; box-shadow: none !important; }
.agent-profile-hero h1 { position: relative; z-index: 1; font: 600 26px/1.2 var(--oleno-display) !important; }
.agent-profile-hero p,.agent-profile-hero small { position: relative; z-index: 1; font-size: 12px; opacity: .75 !important; }
.agent-profile-task {
  position: relative;
  z-index: 2;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  margin: -23px 0 14px !important;
  overflow: hidden;
  border: 1px solid var(--oleno-line) !important;
  border-radius: 4px !important;
  background: #fff !important;
  box-shadow: var(--oleno-shadow) !important;
}
.agent-profile-task > span { display: grid !important; gap: 5px; min-width: 0; padding: 15px 6px !important; border-right: 1px solid var(--oleno-line); color: var(--oleno-muted) !important; text-align: center; font-size: 10px !important; }
.agent-profile-task > span:last-child { border-right: 0; }
.agent-profile-task b { overflow: hidden; color: var(--oleno-deep) !important; font: 700 14px/1.2 var(--oleno-display) !important; text-overflow: ellipsis; white-space: nowrap; }
.agent-profile-status { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; margin: 0 0 14px !important; overflow: hidden; border: 1px solid var(--oleno-line) !important; border-radius: 4px !important; background: rgba(255,255,255,.82) !important; }
.agent-profile-status button { display: grid !important; gap: 5px; min-height: 74px; padding: 11px 6px !important; border: 0 !important; border-right: 1px solid var(--oleno-line) !important; color: var(--oleno-muted) !important; background: transparent !important; }
.agent-profile-status button:last-child { border-right: 0 !important; }
.agent-profile-status button b { color: var(--oleno-deep) !important; font: 600 20px/1 var(--oleno-display) !important; }
.agent-profile-status button span { font-size: 11px; }
.agent-profile-status button.active { background: var(--oleno-cream) !important; }
.agent-profile-menu { overflow: hidden; border: 1px solid var(--oleno-line); border-radius: 4px; background: rgba(255,255,255,.86); }
.agent-profile-menu > button { min-height: 58px !important; padding: 0 15px !important; border-bottom: 1px solid var(--oleno-line) !important; color: var(--oleno-ink) !important; background: transparent !important; }
.agent-profile-menu > button:last-child { border-bottom: 0 !important; }
.agent-profile-menu i { display: inline-grid; place-items: center; width: 29px; height: 29px; margin-right: 8px; border-radius: 50%; color: var(--mobile-theme); background: var(--oleno-cream); font-style: normal; }
.agent-profile-menu em { margin-left: auto; color: var(--oleno-muted); font-style: normal; font-size: 12px; }
.agent-profile-orders h2 { margin: 26px 2px 12px !important; color: var(--oleno-ink) !important; font: 600 21px/1.2 var(--oleno-display) !important; }
.agent-order-list { gap: 8px !important; }
.agent-order-list > button { min-height: 68px; padding: 13px 14px !important; border-color: var(--oleno-line) !important; border-radius: 4px !important; background: rgba(255,255,255,.86) !important; }
.agent-order-list strong { color: var(--oleno-copper) !important; font-family: var(--oleno-display); }
.agent-logout { min-height: 48px; margin-top: 22px !important; border-color: var(--oleno-line) !important; border-radius: 3px !important; color: var(--oleno-deep) !important; background: transparent !important; }

/* ---------- Mobile product, cart and checkout dialogs ---------- */
body:has(.agent-mobile-portal) .modal { align-items: flex-end; padding: 0; }
body:has(.agent-mobile-portal) .dialog {
  box-sizing: border-box;
  width: min(480px, 100vw) !important;
  max-width: 480px !important;
  max-height: 94dvh !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: auto !important;
  border: 0 !important;
  border-radius: 12px 12px 0 0 !important;
  color: var(--oleno-ink);
  background: var(--oleno-paper) !important;
  box-shadow: 0 -18px 50px rgba(49,31,20,.24) !important;
}
body:has(.agent-mobile-portal) .dialog > .close {
  position: sticky !important;
  z-index: 12 !important;
  top: 12px !important;
  float: right;
  width: 42px !important;
  height: 42px !important;
  margin: 12px 12px -54px 0;
  border: 1px solid rgba(89,66,49,.14) !important;
  border-radius: 50% !important;
  color: var(--oleno-deep) !important;
  background: rgba(255,255,255,.90) !important;
  box-shadow: 0 5px 16px rgba(73,47,29,.10);
}
.sku-detail-page { padding: 0 0 max(92px, calc(78px + env(safe-area-inset-bottom))) !important; }
.sku-detail-image { display: grid; place-items: center; width: 100%; min-height: 300px; aspect-ratio: 1/1; padding: 16px; color: var(--oleno-muted); background: #fff; }
.sku-detail-image img { width: 100%; height: 100%; object-fit: contain; }
.sku-detail-info { padding: 20px 20px 16px !important; border-top: 1px solid var(--oleno-line); background: var(--oleno-paper); }
.sku-detail-info h2 { margin: 0 45px 5px 0 !important; color: var(--oleno-ink) !important; font: 600 25px/1.3 var(--oleno-display) !important; }
.sku-detail-info p { margin: 0 !important; color: var(--oleno-muted) !important; font: 12px/1.4 ui-monospace, Consolas, monospace; letter-spacing: .04em; }
.sku-detail-table-wrap { overflow: visible !important; }
.sku-detail-table { width: 100% !important; table-layout: fixed !important; border-collapse: collapse !important; }
.sku-detail-table th { position: sticky; z-index: 5; top: 0; height: 45px; padding: 7px 4px !important; border-color: var(--oleno-line) !important; color: var(--oleno-deep) !important; background: var(--oleno-cream) !important; font-size: 12px !important; }
.sku-detail-table td { height: 54px; padding: 7px 3px !important; border-color: var(--oleno-line) !important; color: var(--oleno-ink); font-size: 12px !important; text-align: center !important; }
.sku-detail-table th:nth-child(1),.sku-detail-table td:nth-child(1){width:25%}.sku-detail-table th:nth-child(2),.sku-detail-table td:nth-child(2){width:12%}.sku-detail-table th:nth-child(3),.sku-detail-table td:nth-child(3){width:13%}.sku-detail-table th:nth-child(4),.sku-detail-table td:nth-child(4){width:19%}.sku-detail-table th:nth-child(5),.sku-detail-table td:nth-child(5){width:31%}
.sku-price-cell strong { color: var(--oleno-deep); font-family: var(--oleno-display); }
.sku-price-cell .sku-sale-price { color: var(--oleno-copper) !important; }
.sku-price-cell del { display: block; margin-top: 3px; color: #aca49b; font-size: 9px; }
.sku-qty-control { display: grid !important; grid-template-columns: 30px minmax(22px, 1fr) 30px !important; align-items: center; gap: 3px !important; }
.sku-qty-control > button { display: grid; place-items: center; width: 30px !important; height: 30px !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; color: #fff !important; background: var(--oleno-gold) !important; font-size: 18px !important; }
.sku-qty-value { min-width: 22px; font-size: 14px; }
.sku-inline-qty-editor { display: grid !important; gap: 5px; }
.sku-inline-qty-editor > input { width: 100% !important; height: 34px !important; padding: 0 4px !important; border: 1px solid var(--mobile-theme) !important; border-radius: 2px !important; text-align: center; }
.sku-inline-qty-editor > span { display: grid !important; grid-template-columns: 1fr 1fr; gap: 3px; }
.sku-inline-qty-editor button { min-width: 0 !important; padding: 4px 2px !important; border: 0 !important; border-radius: 2px !important; color: #fff !important; background: var(--mobile-theme) !important; font-size: 9px !important; }
.sku-order-footer {
  position: fixed !important;
  z-index: 11 !important;
  right: 0;
  bottom: 0 !important;
  left: 50%;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  width: min(480px, 100vw);
  min-height: 70px;
  padding: 10px 16px max(10px, env(safe-area-inset-bottom)) !important;
  transform: translateX(-50%);
  border-top: 1px solid var(--oleno-line) !important;
  background: rgba(251,248,243,.97) !important;
  box-shadow: 0 -8px 20px rgba(73,47,29,.08);
}
.sku-order-footer b { color: var(--oleno-deep); font: 600 16px/1 var(--oleno-display); }
.sku-order-footer button { min-width: 150px; min-height: 46px; border: 0 !important; border-radius: 2px !important; background: var(--mobile-theme) !important; }
.mobile-cart-view,.mobile-confirm-order,.mobile-order-success { padding: 30px 20px max(28px, env(safe-area-inset-bottom)) !important; }
.mobile-cart-view h2,.mobile-confirm-order h2,.mobile-order-success h2 { color: var(--oleno-ink) !important; font: 600 25px/1.25 var(--oleno-display) !important; }
.mobile-checkout-steps { margin: 0 48px 28px 0 !important; color: var(--oleno-muted) !important; }
.mobile-checkout-steps b,.mobile-checkout-steps em { background: var(--mobile-theme) !important; }
.mobile-cart-lines,.mobile-confirm-lines { border-top: 1px solid var(--oleno-line); }
.mobile-cart-lines > div,.mobile-confirm-lines > div { padding: 15px 0 !important; border-bottom-color: var(--oleno-line) !important; }
.mobile-cart-lines button { border: 0 !important; border-radius: 50% !important; color: #fff !important; background: var(--oleno-gold) !important; }
.mobile-cart-summary,.mobile-price-summary { border-color: var(--oleno-line) !important; border-radius: 3px !important; background: var(--oleno-cream) !important; }
.mobile-cart-summary strong,.mobile-price-summary .payable b,.mobile-order-success strong { color: var(--oleno-copper) !important; font-family: var(--oleno-display); }
.mobile-cart-actions button,.mobile-submit-order,.mobile-success-actions button { min-height: 47px; border-radius: 2px !important; }
.mobile-cart-actions .primary,.mobile-submit-order,.mobile-success-actions .primary { background: var(--mobile-theme) !important; }
.mobile-confirm-customer,.mobile-price-note { border-color: var(--oleno-line) !important; border-radius: 3px !important; }

/* ---------- Publish-settings interactive preview ---------- */
.mobile-phone-screen { --preview-theme: #a97854; color: var(--oleno-ink) !important; background-color: var(--preview-bg, var(--oleno-paper)) !important; font-family: var(--oleno-body) !important; }
.mobile-demo-brand { min-height: 68px !important; color: var(--preview-header-text,#fff) !important; background: var(--preview-header,var(--preview-theme)) !important; }
.mobile-demo-brand b { font: 600 25px/1 var(--oleno-display) !important; letter-spacing: .08em; }
.mobile-demo-brand small { font-size: 8px !important; letter-spacing: .12em; opacity: .74; }
.mobile-preview-mode { padding: 5px 8px !important; color: #7d5d43 !important; background: #fff5dc !important; font-size: 9px !important; letter-spacing: .02em; }
.mobile-preview-content { padding-bottom: 86px !important; }
.mobile-preview-home-intro {
  margin: 0 0 11px;
  padding: 24px 16px 13px;
  color: #fff;
  background:
    radial-gradient(circle at 90% 10%, rgba(255,255,255,.16), transparent 30%),
    linear-gradient(145deg, color-mix(in srgb, var(--preview-theme) 86%, #563722), color-mix(in srgb, var(--preview-theme) 70%, #35241a));
}
.mobile-preview-home-intro > span { color: #f5ddc5; font-size: 7px; font-weight: 800; letter-spacing: .17em; }
.mobile-preview-home-intro h2 { margin: 8px 0 3px; color: #fff; font: 600 20px/1.25 var(--oleno-display); }
.mobile-preview-home-intro > p { margin: 0; color: rgba(255,255,255,.70); font-size: 8px; }
.mobile-preview-home-intro > div { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 14px; border-top: 1px solid rgba(255,255,255,.17); }
.mobile-preview-home-intro button { display: grid; gap: 2px; min-height: 42px; padding: 8px 3px 0; border: 0; border-right: 1px solid rgba(255,255,255,.14); color: #fff; background: transparent; }
.mobile-preview-home-intro button:last-child { border-right: 0; }
.mobile-preview-home-intro button b { font: 600 15px/1 var(--oleno-display); }
.mobile-preview-home-intro button small { color: rgba(255,255,255,.68); font-size: 7px; }
.mobile-preview-editorial-head { display: flex; align-items: baseline; justify-content: space-between; margin: 13px 11px 0; padding-bottom: 7px; border-bottom: 1px solid var(--oleno-line); }
.mobile-preview-editorial-head b { color: var(--oleno-ink); font: 600 16px/1.2 var(--oleno-display); }
.mobile-preview-editorial-head small { color: var(--oleno-muted); font-size: 8px; }
.mobile-demo-series { padding: 12px 10px 0 !important; }
.mobile-demo-series-group { margin-bottom: 10px !important; border: 1px solid var(--oleno-line) !important; border-radius: 3px !important; background: rgba(255,255,255,.78) !important; }
.mobile-demo-series-group header { min-height: 43px !important; border-bottom: 1px solid var(--oleno-line) !important; color: var(--oleno-deep) !important; background: var(--oleno-cream) !important; }
.mobile-demo-series-group header b { font-family: var(--oleno-display); }
.mobile-demo-series-group > div { gap: 7px !important; padding: 9px !important; }
.mobile-demo-series-group button { min-height: 36px !important; border-color: var(--oleno-line) !important; border-radius: 2px !important; color: var(--oleno-deep) !important; background: #fff !important; }
.mobile-preview-product-card { border-color: var(--oleno-line) !important; border-radius: 3px !important; box-shadow: 0 5px 14px rgba(73,47,29,.06) !important; }
.mobile-preview-product-card > button,.mobile-preview-add-cart { border-radius: 2px !important; background: var(--preview-theme) !important; }
.mobile-demo-photo { aspect-ratio: 4/5 !important; border-radius: 0 !important; }
.mobile-demo-nav { border-top-color: var(--oleno-line) !important; background: rgba(251,248,243,.97) !important; box-shadow: 0 -6px 16px rgba(73,47,29,.07) !important; }
.mobile-demo-nav button.active { color: var(--preview-theme) !important; }
.mobile-demo-cart { color: #fff !important; background: var(--preview-theme) !important; }

@media (max-width: 600px) {
  html, body, #root, #page { min-height: 100%; }
  body:has(.agent-mobile-portal) { margin: 0; background: var(--oleno-paper); }
  body:has(.agent-mobile-portal) .app { display: block !important; min-height: 100dvh !important; }
  body:has(.agent-mobile-portal) .side,
  body:has(.agent-mobile-portal) main > .top { display: none !important; }
  body:has(.agent-mobile-portal) .app > main { display: block !important; width: 100% !important; min-width: 0 !important; height: auto !important; overflow: visible !important; }
  body:has(.agent-mobile-portal) #page { padding: 0 !important; }
  .agent-mobile-portal { width: 100% !important; max-width: none !important; padding-right: 14px !important; padding-left: 14px !important; }
  .agent-mobile-brand { margin-right: -14px !important; margin-left: -14px !important; }
  .agent-home-intro { margin-right: -14px; margin-left: -14px; }
  .agent-catalog-series { margin-right: -14px !important; margin-left: -14px !important; padding-right: 14px !important; padding-left: 14px !important; }
  .agent-mobile-products { gap: 9px !important; }
  .agent-card-copy { padding: 10px; }
  .agent-mobile-products article h3 { font-size: 14px !important; }
  .agent-mobile-cart { right: 17px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .agent-mobile-portal *, .mobile-phone-screen * { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}