/* Meilijewelry Public v6 — employee/index.php dashboard visual reference.
   UI-only layer. Keep business logic, field names, URLs, data attributes and JS intact.
   Must load after meili-public-layout.css / employee-style.css.
   Screenshot reference: navy flat bar, fresh pale-blue background, colourful app icons.
*/
html.ml-luxury-ui {
  --ml-public-max: 1360px;
  --ml-public-gutter: 16px;
  --ml-public-radius: 15px;
  --ml-radius-card: 15px;
  --ml-radius-control: 11px;
  --ml-app-blue: linear-gradient(145deg,#e0f2ff 0%,#78c7ff 43%,#3779f5 100%);
  --ml-app-green: linear-gradient(145deg,#ddfff4 0%,#64efd0 43%,#18b8a0 100%);
  --ml-app-gold: linear-gradient(145deg,#fff9dc 0%,#ffe27b 43%,#d9ad32 100%);
  --ml-app-slate: linear-gradient(145deg,#fff 0%,#dfe8f3 43%,#9fb0c7 100%);
  --ml-app-rose: linear-gradient(145deg,#fff1f3 0%,#ffb1bb 43%,#ed647b 100%);
}
html.ml-luxury-ui body {
  background:
    radial-gradient(760px 320px at 90% -100px,rgba(246,216,120,.19),transparent 65%),
    radial-gradient(650px 280px at -10% -100px,rgba(115,184,255,.17),transparent 65%),
    linear-gradient(180deg,#f7fbff 0%,#eef6ff 45%,#edf4fb 100%) !important;
}
/* Employee navigation: one aligned shell on all 8 public pages.
   Unlike V5, nav controls are distinguished by their actual function. */
html.ml-luxury-ui nav.ml-global-nav.navbar {
  padding-block:8px 4px !important;
}
html.ml-luxury-ui nav.ml-global-nav .ml-navbar-shell {
  min-height:72px !important;
  border-radius:9px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  padding:11px clamp(12px,1.35vw,20px) !important;
  background:
    radial-gradient(480px 180px at 12% -20%,rgba(255,255,255,.12),transparent 60%),
    linear-gradient(135deg,#123a70,#0a2347 55%,#06152b) !important;
  box-shadow:0 10px 29px rgba(6,21,43,.17) !important;
}
html.ml-luxury-ui nav.ml-global-nav .ml-navbar-logo {
  width:46px !important;min-width:46px !important;height:46px !important;
  border-radius:13px !important;
  background:linear-gradient(135deg,#fff6d5,#f6d878 33%,#d9ad32 80%,#9c6c08) !important;
}
html.ml-luxury-ui nav.ml-global-nav .ml-navbar-brandtext strong {
  font-weight:900 !important;letter-spacing:.015em;font-size:1rem !important;
}
html.ml-luxury-ui nav.ml-global-nav .ml-navbar-actions {gap:7px !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:40px !important;min-width:40px !important;
  border-radius:12px !important;padding:8px 11px !important;
  font-weight:800 !important;
  color:#112440 !important;
  background:linear-gradient(145deg,#fff,#e0e9f5) !important;
  border:1px solid rgba(255,255,255,.32) !important;
  box-shadow:0 5px 12px rgba(0,0,0,.13),inset 0 1px 0 rgba(255,255,255,.7) !important;
}
/* App-like search action in blue, sharing in slate, language and account in gold. */
html.ml-luxury-ui nav.ml-global-nav .ml-navbar-search {
  color:#fff !important;
  background:linear-gradient(145deg,#76bdff,#1f69d5 68%,#164994) !important;
  border-color:rgba(200,225,255,.5) !important;
}
html.ml-luxury-ui nav.ml-global-nav .ml-navbar-search :is(i,span){color:#fff !important;}
html.ml-luxury-ui nav.ml-global-nav .ml-navbar-share,
html.ml-luxury-ui nav.ml-global-nav #shareBtn,
html.ml-luxury-ui nav.ml-global-nav #btnShare {
  background:linear-gradient(145deg,#eef3fa,#869db9) !important;
}
html.ml-luxury-ui nav.ml-global-nav .ml-navbar-lang,
html.ml-luxury-ui nav.ml-global-nav .ml-navbar-account,
html.ml-luxury-ui nav.ml-global-nav #langBtn,
html.ml-luxury-ui nav.ml-global-nav #btnLangSwitch {
  background:linear-gradient(145deg,#fff8db,#f6d878 50%,#d9ad32) !important;
  border-color:rgba(255,234,162,.55) !important;
}
html.ml-luxury-ui nav.ml-global-nav .ml-navbar-logout {
  background:linear-gradient(145deg,#fff9df,#d9ad32) !important;
}
html.ml-luxury-ui nav.ml-global-nav .ml-navbar-action:hover {filter:brightness(1.07) !important;transform:translateY(-1px) !important;}
/* Less visual noise: no golden frame around every product card, white surfaces. */
html.ml-luxury-ui :is(.card,.section-card,.contact-box,.product-card,.card-product,
  .hero-panel,.pos-hero,.info-card,.stat-card,.filter-card,.search-card,
  .detail-panel,.product-tile) {
  border-color:rgba(10,35,71,.11) !important;
  box-shadow:0 9px 25px rgba(10,25,60,.085) !important;
}
html.ml-luxury-ui .card-product {
  background:#fff !important;
}
html.ml-luxury-ui .section-head,
html.ml-luxury-ui .intro-head {
  background:linear-gradient(110deg,#e8f3ff,#fff7e5) !important;
  border-bottom-color:rgba(10,35,71,.1) !important;
}
/* HOME category menu: the actual employee design, not a two-column pill list.
   Four app icons per row on phones and in the home category panel. */
html.ml-luxury-ui.ml-page-home .cat-grid {
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:14px 7px !important;
  align-items:start !important;
}
html.ml-luxury-ui.ml-page-home .cat-grid .cat-item {
  min-width:0 !important;
  padding:2px 0 0 !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  align-items:center !important;
  gap:7px !important;
  text-align:center !important;
  color:#17345f !important;
  background:transparent !important;
  border:0 !important;
  border-radius:12px !important;
  box-shadow:none !important;
  line-height:1.15 !important;
  white-space:normal !important;
  overflow:visible !important;
  text-decoration:none !important;
}
html.ml-luxury-ui.ml-page-home .cat-grid .cat-item :is(img,.cat-fallback) {
  width:64px !important;height:64px !important;
  max-width:100% !important;flex:0 0 auto !important;
  padding:12px !important;
  display:grid !important;place-items:center !important;
  object-fit:contain !important;
  border-radius:20px !important;
  background:var(--ml-app-blue) !important;
  box-shadow:0 10px 18px rgba(10,25,60,.16),inset 0 1px 0 rgba(255,255,255,.65),inset 0 -8px 12px rgba(0,0,0,.055) !important;
  border:1px solid rgba(255,255,255,.55) !important;
  font-weight:900 !important;font-size:1.38rem !important;
}
html.ml-luxury-ui.ml-page-home .cat-grid .cat-item:nth-child(5n + 2) :is(img,.cat-fallback) {background:var(--ml-app-slate) !important;}
html.ml-luxury-ui.ml-page-home .cat-grid .cat-item:nth-child(5n + 3) :is(img,.cat-fallback) {background:var(--ml-app-green) !important;}
html.ml-luxury-ui.ml-page-home .cat-grid .cat-item:nth-child(5n + 4) :is(img,.cat-fallback) {background:var(--ml-app-gold) !important;}
html.ml-luxury-ui.ml-page-home .cat-grid .cat-item:nth-child(5n + 5) :is(img,.cat-fallback) {background:var(--ml-app-rose) !important;}
html.ml-luxury-ui.ml-page-home .cat-grid .cat-item .ttl {
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;-webkit-line-clamp:3 !important;
  line-clamp:3 !important;
  overflow:hidden !important;text-overflow:ellipsis !important;
  white-space:normal !important;word-break:break-word !important;
  width:100% !important;min-height:2.5em !important;
  color:#17345f !important;font-size:.74rem !important;font-weight:800 !important;
  text-decoration:none !important;
  line-height:1.17 !important;
}
html.ml-luxury-ui.ml-page-home .cat-grid .cat-item:focus-visible {
  outline:3px solid #f6d878 !important;outline-offset:3px !important;
}
html.ml-luxury-ui.ml-page-home .cat-grid .cat-item:hover {
  transform:translateY(-2px) !important;
  filter:drop-shadow(0 5px 8px rgba(10,25,60,.12)) !important;
}
/* Search page: simpler form surface matching employee white dashboard card. */
html.ml-luxury-ui.ml-page-index_product_search .pos-hero,
html.ml-luxury-ui.ml-page-index_product_search .pos-hero .search-card {
  background:#fff !important;
  border-color:rgba(10,35,71,.11) !important;
}
html.ml-luxury-ui.ml-page-index_product_search .pos-hero .search-card {
  padding:clamp(12px,1.4vw,19px) !important;
}
html.ml-luxury-ui.ml-page-index_product_search .search-title {font-size:.97rem !important;}
html.ml-luxury-ui.ml-page-index_product_search .search-input-wrap,
html.ml-luxury-ui.ml-page-index_product_search .form-select {
  border-color:rgba(18,58,112,.21) !important;
  border-radius:11px !important;
  background:#fff !important;
}
html.ml-luxury-ui.ml-page-index_product_search .action-grid .btn-gold {
  background:linear-gradient(135deg,#fff1bc,#f6d878 48%,#d9ad32) !important;
  border-color:#d6bd69 !important;color:#1f2d43 !important;
}
html.ml-luxury-ui.ml-page-index_product_search .action-grid .btn-clear {
  background:linear-gradient(140deg,#f6faff,#e6edf8) !important;
  color:#17345f !important;border:1px solid #cfdaea !important;
}
/* Quick category chips: coloured mini app squares rather than plain gold dots. */
html.ml-luxury-ui.ml-page-index_product_search #categoryChips .chip-link {
  display:inline-flex !important;align-items:center !important;gap:9px !important;
  padding:6px 12px 6px 6px !important;
  min-height:46px !important;
  background:#fff !important;
  border:1px solid #dae4f0 !important;
  color:#17345f !important;
  border-radius:11px !important;
  box-shadow:0 2px 8px rgba(10,35,71,.06) !important;
}
html.ml-luxury-ui.ml-page-index_product_search #categoryChips .chip-link::before {
  content:'◈' !important;
  display:grid !important;place-items:center !important;
  width:31px !important;height:31px !important;flex:0 0 31px !important;
  border-radius:9px !important;
  background:var(--ml-app-blue) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.62) !important;
  color:#fff !important;font-size:1.05rem !important;
}
html.ml-luxury-ui.ml-page-index_product_search #categoryChips .chip-link:nth-child(4n + 2)::before {background:var(--ml-app-slate) !important;color:#314e6d !important;}
html.ml-luxury-ui.ml-page-index_product_search #categoryChips .chip-link:nth-child(4n + 3)::before {background:var(--ml-app-green) !important;color:#065f46 !important;}
html.ml-luxury-ui.ml-page-index_product_search #categoryChips .chip-link:nth-child(4n + 4)::before {background:var(--ml-app-gold) !important;color:#765400 !important;}
html.ml-luxury-ui.ml-page-index_product_search #categoryChips .chip-link.active {
  background:linear-gradient(130deg,#123a70,#06152b) !important;
  color:#fff !important;
  border-color:rgba(217,173,50,.5) !important;
}
/* Responsive: preserve four icons like employee, avoid horizontal overflow. */
@media(max-width:991.98px){
 html.ml-luxury-ui.ml-page-home .cat-grid {gap:12px 5px !important;}
 html.ml-luxury-ui.ml-page-home .cat-grid .cat-item :is(img,.cat-fallback) {width:60px !important;height:60px !important;border-radius:18px !important;}
}
@media(max-width:575.98px){
 html.ml-luxury-ui{--ml-public-gutter:10px;}
 html.ml-luxury-ui nav.ml-global-nav.navbar{padding-block:5px 4px !important;}
 html.ml-luxury-ui nav.ml-global-nav .ml-navbar-shell{min-height:60px !important;padding:7px !important;border-radius:8px !important;}
 html.ml-luxury-ui nav.ml-global-nav .ml-navbar-logo{width:40px !important;min-width:40px !important;height:40px !important;border-radius:11px !important;}
 html.ml-luxury-ui nav.ml-global-nav .ml-navbar-actions{gap:5px !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:35px !important;min-width:35px !important;padding:6px !important;border-radius:10px !important;
 }
 html.ml-luxury-ui.ml-page-home .cat-grid .cat-item :is(img,.cat-fallback){width:58px !important;height:58px !important;border-radius:18px !important;padding:11px !important;}
 html.ml-luxury-ui.ml-page-home .cat-grid .cat-item .ttl{font-size:.72rem !important;}
 html.ml-luxury-ui.ml-page-home .intro-body{padding:13px 8px !important;}
}
@media(max-width:350px){
 html.ml-luxury-ui{--ml-public-gutter:8px;}
 html.ml-luxury-ui.ml-page-home .cat-grid .cat-item :is(img,.cat-fallback){width:52px !important;height:52px !important;padding:9px !important;border-radius:16px !important;}
 html.ml-luxury-ui.ml-page-home .cat-grid .cat-item .ttl{font-size:.67rem !important;}
}
@media(prefers-reduced-motion:reduce){
 html.ml-luxury-ui nav.ml-global-nav .ml-navbar-action,
 html.ml-luxury-ui.ml-page-home .cat-grid .cat-item {transition:none !important;}
}