/* Meilijewelry Public V7 — Soft Luxury Navy & Metallic Gold.
   Presentation-only: loaded AFTER V6. Component shape, depth, and spacing.
   Do not override widths, card media ratio, accessibility or application logic. */
html.ml-luxury-ui {
  --ml-radius-card: 21px;
  --ml-radius-control: 15px;
  --ml-public-radius: 21px;
  --ml-soft-shadow: 0 13px 30px rgba(12,37,70,.095), 0 2px 8px rgba(12,37,70,.035);
}
/* Gentle cool backdrop like employee dashboard; avoid strong gold wash. */
html.ml-luxury-ui body {
  background: radial-gradient(800px 320px at 90% -90px,rgba(245,207,107,.12),transparent 70%),
              radial-gradient(680px 340px at -10% -100px,rgba(101,181,251,.16),transparent 66%),
              linear-gradient(180deg,#f8fbff 0%,#edf5ff 48%,#edf3fa 100%) !important;
}
/* Header: restore the rounded, floating navbar, softened lighting. */
html.ml-luxury-ui nav.ml-global-nav .ml-navbar-shell {
  border-radius:21px !important;
  background: radial-gradient(450px 160px at 0% -25%,rgba(135,202,255,.21),transparent 68%),
              linear-gradient(120deg,#204f85,#0b2b54 57%,#07172d) !important;
  border:1px solid rgba(255,227,151,.19) !important;
  box-shadow: 0 12px 28px rgba(5,25,54,.16),inset 0 1px 0 rgba(255,255,255,.17) !important;
}
html.ml-luxury-ui nav.ml-global-nav .ml-navbar-logo {
  border-radius:15px !important;
  box-shadow:0 4px 11px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.7) !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 {
  border-radius:999px !important;
  box-shadow:0 4px 12px rgba(0,0,0,.11), inset 0 1px 0 rgba(255,255,255,.65) !important;
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease !important;
}
html.ml-luxury-ui nav.ml-global-nav .ml-navbar-search,
html.ml-luxury-ui nav.ml-global-nav .ml-navbar-account {padding-inline:15px !important;}
/* Spacious softly rounded panels across ALL public pages. */
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) {
  border-color:rgba(24,65,115,.105) !important;
  box-shadow:var(--ml-soft-shadow) !important;
}
html.ml-luxury-ui .section-head {
  border-radius:18px !important;
  border-color:rgba(20,63,116,.11) !important;
  background:linear-gradient(110deg,#f3f8ff,#fffdf3) !important;
}
html.ml-luxury-ui .intro-head,
html.ml-luxury-ui .zone-title-row {border-radius:18px 18px 0 0 !important;}
html.ml-luxury-ui .card-product {
  border-radius:20px !important;
  background:#fff !important;
  overflow:hidden !important;
}
html.ml-luxury-ui .card-product .media-wrap {
  border-radius:19px 19px 0 0 !important;
}
html.ml-luxury-ui .card-product:hover {
  transform:translateY(-3px) !important;
  box-shadow:0 17px 32px rgba(10,35,71,.13) !important;
}
/* Buttons rounded as compact soft rectangles, NOT sharp tiles or giant pills. */
html.ml-luxury-ui :is(.btn,.btn-pink,.btn-icon,.account-chip,
  .form-control,.form-select,.input-group-text,.search-input-wrap,
  .action-grid .btn,.pos-control-grid .form-select,.page-link,
  .quick-action,.scan-pill,.grade-price-pill,.type-mini) {
  border-radius:15px !important;
}
/* Navigation chips/pills are naturally rounded, with no square icon box. */
html.ml-luxury-ui :is(.tab-pill,.cat-pill,.cat-chip,.category-chip,.filter-chip,
  .stat-pill,.results-stat,.code-pill,.id-pill,.section-label,.sku-ribbon) {
  border-radius:999px !important;
}
html.ml-luxury-ui .form-control:focus,
html.ml-luxury-ui .form-select:focus {
  box-shadow:0 0 0 4px rgba(246,216,120,.19) !important;
}
/* Employee app style stays but has smoother, less blocky icon tiles. */
html.ml-luxury-ui.ml-page-home .cat-grid .cat-item {
  border-radius:20px !important;
  box-shadow:none !important;
}
html.ml-luxury-ui.ml-page-home .cat-grid .cat-item :is(img,.cat-fallback) {
  border-radius:23px !important;
  box-shadow:0 9px 20px rgba(10,44,93,.135),
             inset 0 1px 0 rgba(255,255,255,.68) !important;
}
html.ml-luxury-ui.ml-page-home .cat-grid .cat-item .ttl {line-height:1.25 !important;}
/* Search: one gently-rounded surface, no box-within-box feel. */
html.ml-luxury-ui.ml-page-index_product_search .pos-hero {
  border-radius:22px !important;
  background:linear-gradient(155deg,#fff,#f8fbff) !important;
  padding:12px !important;
}
html.ml-luxury-ui.ml-page-index_product_search .pos-hero .pos-search-panel {
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
html.ml-luxury-ui.ml-page-index_product_search .pos-hero .search-card {
  border-radius:18px !important;
  border-color:rgba(217,173,50,.20) !important;
  background:linear-gradient(160deg,#fff,#fbfdff) !important;
  box-shadow:0 3px 14px rgba(8,36,74,.045) !important;
}
html.ml-luxury-ui.ml-page-index_product_search .pos-hero :is(.search-input-wrap,.pos-control-grid .form-select,.action-grid .btn) {
  border-radius:15px !important;
}
html.ml-luxury-ui.ml-page-index_product_search #categoryChips .chip-link {
  border-radius:999px !important;
  min-height:43px !important;
  padding:6px 13px 6px 8px !important;
  box-shadow:0 3px 10px rgba(10,35,71,.06) !important;
}
html.ml-luxury-ui.ml-page-index_product_search #categoryChips .chip-link::before {
  content:'•' !important;
  width:24px !important;height:24px !important;flex:0 0 24px !important;
  border-radius:50% !important;
  font-size:1.15rem !important;
}
html.ml-luxury-ui.ml-page-index_product_search .section-card {border-radius:20px !important;}
html.ml-luxury-ui .pagination .page-link {border-radius:13px !important;}
@media(max-width:575.98px){
  html.ml-luxury-ui{--ml-radius-card:18px;--ml-radius-control:13px;--ml-public-radius:18px;}
  html.ml-luxury-ui nav.ml-global-nav .ml-navbar-shell {
    border-radius:18px !important;
    min-height:59px !important;
    padding:7px !important;
  }
  html.ml-luxury-ui nav.ml-global-nav .ml-navbar-logo {border-radius:12px !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 {
    border-radius:50px !important;
    min-width:34px !important;min-height:34px !important;
    padding:6px !important;
  }
  html.ml-luxury-ui.ml-page-home .cat-grid .cat-item :is(img,.cat-fallback) {border-radius:20px !important;}
  html.ml-luxury-ui.ml-page-index_product_search .pos-hero {padding:8px !important;}
  html.ml-luxury-ui.ml-page-index_product_search .pos-hero .search-card {border-radius:17px !important;}
}
@media(prefers-reduced-motion:reduce){
  html.ml-luxury-ui :is(.btn,.card-product,.cat-item,.ml-navbar-action){transition:none !important;}
}


/* ============================================================
   HOME CATEGORY ICON IMAGE FIX (V7.1)
   The image itself also acts as the colored tile. Large padding in
   the older rules made the product illustration much too small.
   Keep the colorful tile, its sizing, the grid and labels unchanged.
   ============================================================ */
html.ml-luxury-ui.ml-page-home .cat-grid .cat-item > img:not(.cat-fallback) {
  padding:4px !important; /* 64px tile; artwork uses ~56px */
  box-sizing:border-box !important;
  object-fit:contain !important;
}
@media (max-width: 575.98px) {
  html.ml-luxury-ui.ml-page-home .cat-grid .cat-item > img:not(.cat-fallback) {
    padding:3px !important; /* 58px tile; artwork uses ~52px */
  }
}
@media (max-width: 350px) {
  html.ml-luxury-ui.ml-page-home .cat-grid .cat-item > img:not(.cat-fallback) {
    padding:2px !important; /* 52px tile; artwork uses ~48px */
  }
}


/* ============================================================
   HOME CATEGORY ICON FINAL (V8)
   Use transparent PNG icons with no colored tile background.
   Keep the soft-luxury card grid but let the icon artwork stand out.
   ============================================================ */
html.ml-luxury-ui.ml-page-home .cat-grid .cat-item {
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(247,250,255,.94)) !important;
  border:1px solid rgba(21,58,103,.08) !important;
  box-shadow:0 10px 24px rgba(12,37,70,.055) !important;
}
html.ml-luxury-ui.ml-page-home .cat-grid .cat-item:hover {
  background:linear-gradient(180deg,#fff,#fbfdff) !important;
  border-color:rgba(217,173,50,.28) !important;
  box-shadow:0 14px 28px rgba(12,37,70,.09) !important;
}
html.ml-luxury-ui.ml-page-home .cat-grid .cat-item :is(img,.cat-fallback) {
  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
}
html.ml-luxury-ui.ml-page-home .cat-grid .cat-item > img:not(.cat-fallback) {
  width:72px !important;
  height:72px !important;
  padding:0 !important;
  box-sizing:border-box !important;
  object-fit:contain !important;
  filter:drop-shadow(0 8px 16px rgba(10,44,93,.16));
}
html.ml-luxury-ui.ml-page-home .cat-grid .cat-item .ttl {
  line-height:1.22 !important;
}
@media (max-width: 575.98px) {
  html.ml-luxury-ui.ml-page-home .cat-grid .cat-item > img:not(.cat-fallback) {
    width:64px !important;
    height:64px !important;
  }
}
@media (max-width: 350px) {
  html.ml-luxury-ui.ml-page-home .cat-grid .cat-item > img:not(.cat-fallback) {
    width:58px !important;
    height:58px !important;
  }
}

/* V8 FINAL: Reset the higher-specificity V6 nth-child tile backgrounds.
   Real product PNGs contain their own transparency. */
html.ml-luxury-ui.ml-page-home .cat-grid .cat-item:nth-child(n) :is(img,.cat-fallback) {
  background:transparent !important;
  box-shadow:none !important;
  border:0 !important;
  border-radius:0 !important;
}
html.ml-luxury-ui.ml-page-home .cat-grid .cat-item:nth-child(n) > img:not(.cat-fallback) {
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  padding:0 !important;
}


/* ===========================================================
   HOME CATEGORY COMPACT GRID (V9)
   Five real columns across all breakpoints (including phones).
   Resize ONLY category menu tiles and artwork: not product cards,
   not navigation, and not language/search behaviour.
   =========================================================== */
html.ml-luxury-ui.ml-page-home .cat-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  column-gap: clamp(3px, .55vw, 8px) !important;
  row-gap: 8px !important;
  align-items: start !important;
}
html.ml-luxury-ui.ml-page-home .cat-grid .cat-item {
  min-width: 0 !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: 5px 2px 6px !important;
  gap: 4px !important;
  align-items: center !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg,rgba(255,255,255,.98),rgba(247,250,255,.94)) !important;
  box-shadow: 0 5px 12px rgba(12,37,70,.05) !important;
}
html.ml-luxury-ui.ml-page-home .cat-grid .cat-item > img:not(.cat-fallback) {
  width: 52px !important;
  height: 52px !important;
  max-width: calc(100% - 2px) !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  object-fit: contain !important;
  border: 0 !important;
  filter: drop-shadow(0 3px 5px rgba(12,37,70,.1)) !important;
}
html.ml-luxury-ui.ml-page-home .cat-grid .cat-item > .cat-fallback {
  width: 52px !important;
  height: 52px !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  border-radius: 12px !important;
}
html.ml-luxury-ui.ml-page-home .cat-grid .cat-item .ttl {
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  font-size: .665rem !important;
  line-height: 1.13 !important;
  font-weight: 800 !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  -webkit-line-clamp: 3 !important;
  line-clamp: 3 !important;
}
@media (max-width: 575.98px) {
  html.ml-luxury-ui.ml-page-home .intro-body {
    padding: 9px 7px !important;
  }
  html.ml-luxury-ui.ml-page-home .cat-grid {
    column-gap: 3px !important;
    row-gap: 6px !important;
  }
  html.ml-luxury-ui.ml-page-home .cat-grid .cat-item {
    padding: 4px 1px 5px !important;
    gap: 3px !important;
    border-radius: 12px !important;
  }
  html.ml-luxury-ui.ml-page-home .cat-grid .cat-item > img:not(.cat-fallback),
  html.ml-luxury-ui.ml-page-home .cat-grid .cat-item > .cat-fallback {
    width: 43px !important;
    height: 43px !important;
  }
  html.ml-luxury-ui.ml-page-home .cat-grid .cat-item .ttl {
    font-size: .615rem !important;
    line-height: 1.12 !important;
  }
}
@media (max-width: 350px) {
  html.ml-luxury-ui.ml-page-home .cat-grid .cat-item > img:not(.cat-fallback),
  html.ml-luxury-ui.ml-page-home .cat-grid .cat-item > .cat-fallback {
    width: 39px !important;
    height: 39px !important;
  }
  html.ml-luxury-ui.ml-page-home .cat-grid .cat-item .ttl {
    font-size: .57rem !important;
  }
}


/* ==============================================================
   HOME CATEGORY ROW-ADAPTIVE HEIGHT (V11)
   Each row grows only as tall as the currently displayed language
   requires. Items in the SAME row keep equal heights, aligned icons.
   No fixed 100/108px minimum; no text truncation. JS-free: browser
   relayouts the grid when the existing language switch updates text.
   ============================================================== */
html.ml-luxury-ui.ml-page-home .cat-grid {
  align-items: stretch !important;
  grid-auto-rows: auto !important; /* not 1fr: no tallest-row height imposed on EVERY row */
  align-content: start !important;
}
html.ml-luxury-ui.ml-page-home .cat-grid .cat-item {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: center !important;
  height: 100% !important; /* fill this row only */
  min-height: 0 !important;
}
html.ml-luxury-ui.ml-page-home .cat-grid .cat-item :is(img,.cat-fallback) {
  flex-shrink: 0 !important;
}
html.ml-luxury-ui.ml-page-home .cat-grid .cat-item .ttl {
  display: block !important;
  min-height: 0 !important;
  height: auto !important;
  flex: 0 0 auto !important; /* do not stretch short names into empty space */
  overflow: visible !important;
  text-overflow: clip !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
  text-align: center !important;
}