/* Meilijewelry Public UI v5 — employee-inspired Blue-Navy + Metallic Gold.
 * PRESENTATION ONLY. Scope all rules to the eight public routes via ml-luxury-ui.
 * This stylesheet must load AFTER page CSS, search CSS and the layout stylesheet.
 * Shared geometry is still owned solely by meili-public-layout.css.
 */
html.ml-luxury-ui {
  --ml-ink:#102849;
  --ml-navy:#06152b;
  --ml-deep:#0a2347;
  --ml-blue:#123a70;
  --ml-gold:#d9ad32;
  --ml-gold-bright:#f6d878;
  --ml-cream:#fff6d5;
  --ml-outline:rgba(18,58,112,.15);
  --ml-outline-gold:rgba(217,173,50,.29);
  --ml-surface:#fff;
  --ml-radius-card:14px;
  --ml-radius-control:10px;
  --ml-shadow:0 7px 22px rgba(12,37,70,.075);
  --ml-shadow-nav:0 7px 19px rgba(6,21,43,.15);
  color-scheme:light;
  scroll-padding-top:88px;
}
html.ml-luxury-ui body {
  font-family:'Sarabun',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--ml-ink);
  background:radial-gradient(780px 310px at 95% -90px,rgba(246,216,120,.11),transparent 65%),
             linear-gradient(180deg,#f7faff,#f1f6fc 48%,#edf4fb 100%) !important;
  overflow-x:clip;
}
/* Employee dashboard style: slim, square-shouldered premium header. */
html.ml-luxury-ui nav.ml-global-nav.navbar {
  padding-block:10px 6px !important;
}
html.ml-luxury-ui nav.ml-global-nav .ml-navbar-shell {
  min-height:66px !important;
  padding:9px clamp(10px,1.2vw,18px) !important;
  border-radius:13px !important;
  border:1px solid rgba(246,216,120,.35) !important;
  background:radial-gradient(480px 180px at 10% -35%,rgba(255,255,255,.12),transparent 70%),
    linear-gradient(125deg,#123a70 0%,#0a2347 58%,#06152b 100%) !important;
  box-shadow:var(--ml-shadow-nav) !important;
}
html.ml-luxury-ui nav.ml-global-nav .ml-navbar-logo {
  width:43px !important;min-width:43px !important;height:43px !important;
  border-radius:10px !important;
  box-shadow:0 3px 9px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.6) !important;
}
html.ml-luxury-ui nav.ml-global-nav .ml-navbar-action,
html.ml-luxury-ui nav.ml-global-nav #langBtn,
html.ml-luxury-ui nav.ml-global-nav #shareBtn,
html.ml-luxury-ui nav.ml-global-nav #btnLangSwitch,
html.ml-luxury-ui nav.ml-global-nav #btnShare {
  min-height:38px !important;
  min-width:38px !important;
  padding:7px 10px !important;
  border-radius:9px !important;
  color:#0a2347 !important;
  background:linear-gradient(180deg,#fffdf4,#ffebaf) !important;
  border:1px solid #dec472 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.88) !important;
}
html.ml-luxury-ui nav.ml-global-nav .ml-navbar-action:hover,
html.ml-luxury-ui nav.ml-global-nav #langBtn:hover,
html.ml-luxury-ui nav.ml-global-nav #btnLangSwitch:hover {
  background:linear-gradient(180deg,#fff6d5,#f6d878) !important;
}
html.ml-luxury-ui nav.ml-global-nav .ml-navbar-brandtext strong {font-size:.95rem !important;}
html.ml-luxury-ui nav.ml-global-nav .ml-navbar-brandtext small {opacity:.9;}
/* Surfaces: cleaner than the previous layered-gradient glass cards. */
html.ml-luxury-ui :is(.top-banner,.hero-frame,.hero-card,.hero-panel,.pos-hero,.pos-search-panel,
   .card,.section-card,.contact-box,.section-head,.intro-head,.search-card,.product-card,
   .zone-card,.info-card,.social-card,.results-card,.form-card,.filter-card,.panel-card,
   .product-panel,.detail-panel,.price-panel,.estimate-card,.estimator-panel,
   .item-card,.stat-card,.product-tile,.cat-panel) {
  border-radius:var(--ml-radius-card) !important;
}
html.ml-luxury-ui :is(.hero-card,.hero-panel,.pos-hero,.card,.section-card,.contact-box,
   .product-card,.zone-card,.info-card,.social-card,.results-card,.form-card,.panel-card,
   .detail-panel,.estimate-card,.estimator-panel,.item-card,.stat-card,.product-tile) {
  box-shadow:var(--ml-shadow) !important;
  border-color:var(--ml-outline) !important;
}
html.ml-luxury-ui :is(.card,.section-card,.search-card,.product-card,.contact-box,
   .zone-card,.info-card,.social-card,.item-card,.product-tile) {
  background-color:var(--ml-surface);
}
html.ml-luxury-ui :is(.section-head,.intro-head,.zone-title-row,.search-title) {
  border-radius:11px !important;
}
html.ml-luxury-ui .section-head {
  background:linear-gradient(110deg,#fff,#f2f7fe) !important;
  border:1px solid var(--ml-outline) !important;
  padding:.72rem 1rem !important;
  box-shadow:0 3px 13px rgba(12,37,70,.045) !important;
}
html.ml-luxury-ui .section-head::before {width:4px !important;}
html.ml-luxury-ui .section-head::after {opacity:.25 !important;}
html.ml-luxury-ui .intro-head {
  background:linear-gradient(110deg,#f7faff,#fff9e8) !important;
  border-bottom:1px solid var(--ml-outline-gold) !important;
}
html.ml-luxury-ui .card-product {
  background:#fff !important;
  border:1px solid var(--ml-outline) !important;
  border-radius:13px !important;
  box-shadow:var(--ml-shadow) !important;
}
html.ml-luxury-ui .card-product .card-body {
  background:#fff !important;
}
html.ml-luxury-ui .card-product .media-wrap {
  border-radius:12px 12px 0 0 !important;
  background:#f7f9fd !important;
}
html.ml-luxury-ui .card-product:hover {transform:translateY(-2px) !important;box-shadow:0 11px 24px rgba(10,35,71,.11) !important;}
html.ml-luxury-ui .product-card {background:#fff !important;}
/* Controls: employee-style compact rectangles, not giant capsules. */
html.ml-luxury-ui :is(.btn,.btn-pink,.btn-icon,.account-chip,.cat-item,
   .form-control,.form-select,.input-group-text,.search-input-wrap,
   .action-grid .btn,.pos-control-grid .form-select,.page-link,
   .tab-pill,.cat-pill,.cat-chip,.category-chip,.quick-action,.sku-ribbon,
   .scan-pill,.stat-pill,.results-stat,.code-pill,.id-pill,
   .filter-chip,.grade-price-pill,.type-mini,.section-label) {
  border-radius:var(--ml-radius-control) !important;
}
html.ml-luxury-ui :is(.form-control,.form-select,select,input[type='search'],input[type='text'],input[type='number']) {
  border-color:rgba(18,58,112,.20);
  background-color:#fff;
}
html.ml-luxury-ui :is(.form-control,.form-select):focus {
  border-color:#c3a34c !important;
  box-shadow:0 0 0 3px rgba(246,216,120,.2) !important;
}
html.ml-luxury-ui :is(.btn-primary,.btn-pink,.btn-search,.search-submit,.action-grid button[type='submit']) {
  color:#112440 !important;
  background:linear-gradient(125deg,#fff2be,#f3d36d 54%,#d7aa2c) !important;
  border:1px solid rgba(164,119,17,.36) !important;
  box-shadow:0 3px 9px rgba(156,108,8,.12) !important;
}
html.ml-luxury-ui :is(.btn-outline-primary,.btn-outline-secondary,.btn-light) {
  border-color:rgba(18,58,112,.2) !important;
  color:#0a2347 !important;
  background:#f6f9fd !important;
}
html.ml-luxury-ui .btn:focus-visible,
html.ml-luxury-ui .cat-item:focus-visible {outline:3px solid #f6d878 !important;outline-offset:2px !important;}
html.ml-luxury-ui .cat-item {
  border:1px solid rgba(18,58,112,.12) !important;
  background:#fff !important;
  box-shadow:0 2px 7px rgba(10,35,71,.04) !important;
  padding:.55rem .7rem !important;
}
html.ml-luxury-ui .cat-item:hover {background:#fffaf0 !important;border-color:#d9ad32 !important;}
html.ml-luxury-ui .cat-fallback {border-radius:7px !important;}
/* Search: a single properly sized panel, no excessive nested padding or unused space. */
html.ml-page-index_product_search .pos-hero {
  background:#fff !important;
  border:1px solid var(--ml-outline) !important;
  padding:8px !important;
  box-shadow:var(--ml-shadow) !important;
}
html.ml-page-index_product_search .pos-hero .pos-search-panel {
  border:none !important;
  background:transparent !important;
  padding:8px !important;
  box-shadow:none !important;
}
html.ml-page-index_product_search .pos-hero .search-card {
  background:linear-gradient(180deg,#fff,#f9fbff) !important;
  border:1px solid var(--ml-outline-gold) !important;
  border-radius:12px !important;
  box-shadow:none !important;
  padding:clamp(12px,1.3vw,18px) !important;
}
html.ml-page-index_product_search .pos-hero .search-title {margin-bottom:4px !important;}
html.ml-page-index_product_search .pos-hero .search-input-wrap,
html.ml-page-index_product_search .pos-hero .pos-control-grid .form-select,
html.ml-page-index_product_search .pos-hero .action-grid .btn {
  border-radius:9px !important;
}
html.ml-page-index_product_search .section-card {
  background:#fff !important;
  padding:clamp(12px,1.4vw,19px) !important;
}
html.ml-page-index_product_search .product-card,
html.ml-page-index_product_amulet .card {
  border-radius:12px !important;
}
/* Keep custom horizontal category scroller functional: change visuals only. */
html.ml-page-index_product_search :is(.category-pill,.cat-pill,.cat-chip,.category-chip) {
  border-radius:9px !important;
  box-shadow:none !important;
}
html.ml-luxury-ui .pagination .page-link {border-radius:8px !important;}
/* Mobile: same component shapes, but retain four menu icons and two product cards. */
@media (max-width:767.98px) {
  html.ml-luxury-ui {--ml-radius-card:12px;--ml-radius-control:9px;scroll-padding-top:70px;}
  html.ml-luxury-ui nav.ml-global-nav.navbar {padding-block:6px 4px !important;}
  html.ml-luxury-ui nav.ml-global-nav .ml-navbar-shell {
    min-height:55px !important;padding:6px 8px !important;border-radius:11px !important;
  }
  html.ml-luxury-ui nav.ml-global-nav .ml-navbar-logo {
    width:36px !important;min-width:36px !important;height:36px !important;border-radius:9px !important;
  }
  html.ml-luxury-ui nav.ml-global-nav .ml-navbar-action,
  html.ml-luxury-ui nav.ml-global-nav #langBtn,
  html.ml-luxury-ui nav.ml-global-nav #shareBtn,
  html.ml-luxury-ui nav.ml-global-nav #btnLangSwitch,
  html.ml-luxury-ui nav.ml-global-nav #btnShare {
    min-height:34px !important;min-width:34px !important;padding:6px !important;border-radius:8px !important;
  }
  html.ml-page-index_product_search .pos-hero {padding:5px !important;}
  html.ml-page-index_product_search .pos-hero .pos-search-panel {padding:3px !important;}
  html.ml-page-index_product_search .pos-hero .search-card {padding:10px !important;}
  html.ml-luxury-ui :is(.section-head,.intro-head) {padding:.7rem .75rem !important;}
}
@media (prefers-reduced-motion:reduce) {
  html.ml-luxury-ui :is(.btn,.card,.card-product,.cat-item) {transition:none !important;}
}