*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

:root{
  --dark:#111827;
  --muted:#706873;
  --soft:#fffaf7;
  --danger:#ad3434;
  --success:#198754;
  --shadow:0 12px 30px rgba(0,0,0,.08);
}

html{
  scroll-behavior:smooth;
}


html,
body{
  width:100%;
  max-width:100%;
  overflow-x:clip;
}

main,
section,
article,
header,
footer,
div{
  max-width:100%;
}

img,
video,
iframe,
canvas,
svg{
  max-width:100%;
}

body{
  min-height:100vh;
  background:#fff;
  color:var(--dark);
  overflow-x:hidden;
}

body.drawer-open{
  overflow:hidden;
}

button,
input,
textarea,
select{
  font-family:inherit;
}

button{
  cursor:pointer;
}

.app{
  width:100%;
  overflow-x:clip;
  max-width:var(--app-max-width, 100%);
  min-height:100vh;
  margin:0 auto;
  padding-top:55px;
  padding-bottom:calc(72px + env(safe-area-inset-bottom, 0px));
  background:#fff;
  position:relative;
}

/* TOP HEADER */
.topbar{
  height:55px;
  width:100%;
  max-width:var(--app-max-width, 100%);
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 8px;
  position:fixed;
  top:0;
  left:50%;
  transform:translateX(-50%);
  z-index:100;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  border-bottom:1px solid rgba(0,0,0,.05);
}

.left-tools,
.right-tools{
  display:flex;
  align-items:center;
  gap:7px;
  position:relative;
  z-index:5;
  flex-shrink:0;
}

/* MARKETPLACE BRAND + SEARCH */
.mg-brand-chip{
  display:flex;
  align-items:center;
  gap:7px;
  text-decoration:none;
  min-width:0;
}

.mg-brand-label{
  font-size:18px;
  font-weight:950;
  letter-spacing:.15px;
  background:linear-gradient(100deg,#ff6b35,#7b2cff,#00a9ff,#00c896);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  white-space:nowrap;
}

.home-search-bar{
  flex:1;
  min-width:0;
  height:30px;
  margin:0 7px;
  padding:0 10px;
  border-radius:999px;
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:7px;
  border:1px solid rgba(123,44,255,.17);
  background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(241,248,255,.92));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75), 0 7px 16px rgba(15,23,42,.08);
}

.search-icon{
  width:20px;
  height:20px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#0ea5e9,#7b2cff);
  flex-shrink:0;
}

.search-icon svg{
  width:13px;
  height:13px;
  stroke:#fff;
  stroke-width:2.5;
  fill:none;
}

.search-placeholder{
  font-size:12.5px;
  font-weight:700;
  color:#5a6280;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* TOP ICONS */
.top-icon-btn{
  width:28px;
  height:28px;
  border:0;
  border-radius:10px;
  display:grid;
  place-items:center;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  z-index:3;
  text-decoration:none;
  flex-shrink:0;
  box-shadow:
    inset 0 0 6px rgba(255,255,255,.45),
    0 4px 8px rgba(0,0,0,.07);
}

.top-icon-btn::after{
  content:"";
  position:absolute;
  top:-60%;
  left:-80%;
  width:42%;
  height:180%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.68),transparent);
  transform:rotate(28deg);
  animation:iconShine 3.5s ease-in-out infinite;
}

.menu-grad{
  background:linear-gradient(135deg,#ffb347,#ff5f6d);
}

.search-grad{
  background:linear-gradient(135deg,#0d6efd,#38bdf8);
}

.bag-grad{
  background:linear-gradient(135deg,#ffb347,#ff4f9a,#8b5cf6);
}

.bell-grad{
  background:linear-gradient(135deg,#8b5cf6,#ec4899);
}

.profile-grad{
  background:linear-gradient(135deg,#20c997,#22c55e);
}

.top-icon-btn svg{
  width:16px;
  height:16px;
  stroke:#fff;
  stroke-width:2.5;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  position:relative;
  z-index:2;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.20));
}

.hamburger{
  width:17px;
  height:13px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  position:relative;
  z-index:2;
}

.hamburger span{
  height:2.2px;
  width:100%;
  background:#fff;
  border-radius:999px;
  box-shadow:0 2px 3px rgba(0,0,0,.20);
}

.notify-dot{
  display:none;
  position:absolute;
  top:2px;
  right:2px;
  width:7px;
  height:7px;
  background:red;
  border-radius:50%;
  border:1.4px solid #fff;
  z-index:4;
  box-shadow:0 0 8px rgba(255,0,0,.55);
}

.top-icon-btn.has-notification .notify-dot{
  display:block;
}

/* BAG BADGE */
.bag-count{
  display:none;
  position:absolute;
  top:-3px;
  right:-3px;
  min-width:15px;
  height:15px;
  padding:0 4px;
  border-radius:999px;
  background:linear-gradient(135deg,#ff1744,#ff4f9a);
  color:#fff;
  font-size:9px;
  font-weight:950;
  line-height:15px;
  text-align:center;
  z-index:6;
  border:1.4px solid #fff;
  box-shadow:0 0 10px rgba(255,23,68,.45);
}

.top-icon-btn.has-bag-items .bag-count{
  display:block;
}

/* MG LOGO */
.premium-mg-logo{
  width:42px;
  height:42px;
  border-radius:50%;
  padding:3px;
  background:conic-gradient(
    from 0deg,
    rgba(255,209,102,.85),
    rgba(38,211,255,.65),
    rgba(116,255,161,.70),
    rgba(255,143,203,.65),
    rgba(181,143,255,.70),
    rgba(255,209,102,.85)
  );
  animation:premiumLogoRingMove 6s linear infinite;
  box-shadow:
    0 0 10px rgba(255,209,102,.30),
    0 0 20px rgba(38,211,255,.18),
    0 10px 22px rgba(0,0,0,.10);
  position:relative;
  z-index:3;
  flex-shrink:0;
}

.premium-mg-logo::before{
  content:"";
  position:absolute;
  inset:-5px;
  border-radius:50%;
  background:conic-gradient(
    from 180deg,
    rgba(255,209,102,.26),
    rgba(38,211,255,.18),
    rgba(116,255,161,.20),
    rgba(255,143,203,.18),
    rgba(181,143,255,.20),
    rgba(255,209,102,.26)
  );
  filter:blur(10px);
  opacity:.58;
  z-index:-1;
  animation:premiumLogoAura 3s ease-in-out infinite alternate;
}

.premium-mg-logo-inner{
  width:100%;
  height:100%;
  border-radius:50%;
  background:
    radial-gradient(circle at 25% 20%, rgba(255,255,255,.95), transparent 24%),
    radial-gradient(circle at 75% 25%, rgba(38,211,255,.55), transparent 26%),
    radial-gradient(circle at 30% 80%, rgba(116,255,161,.55), transparent 28%),
    radial-gradient(circle at 80% 78%, rgba(255,143,203,.55), transparent 28%),
    linear-gradient(135deg,#fff4b8,#bfffea 33%,#d7d8ff 66%,#ffd4ea);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}

.premium-mg-logo-inner::after{
  content:"";
  position:absolute;
  top:-65%;
  left:-80%;
  width:55%;
  height:230%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent);
  transform:rotate(28deg);
  animation:premiumLogoShine 3.5s ease-in-out infinite;
  z-index:2;
}

.premium-mg-text{
  position:relative;
  z-index:3;
  font-size:15px;
  font-weight:950;
  letter-spacing:.5px;
  background:linear-gradient(
    90deg,
    #ff8a00,
    #18b86a,
    #0b8fff,
    #8b3fc7,
    #ff4f9a,
    #ff8a00
  );
  background-size:300% 300%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:premiumMgTextColor 3s ease-in-out infinite;
  filter:drop-shadow(0 3px 6px rgba(25,16,13,.14));
}

/* MENU DRAWER */
.drawer-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.32);
  opacity:0;
  visibility:hidden;
  transition:.25s ease;
  z-index:998;
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}

.drawer-overlay.show{
  opacity:1;
  visibility:visible;
}

.menu-drawer{
  position:fixed;
  top:0;
  right:0;
  left:auto;
  width:82%;
  max-width:390px;
  height:100vh;
  background:
    radial-gradient(circle at top left, rgba(255,122,61,.14), transparent 30%),
    radial-gradient(circle at top right, rgba(13,110,253,.13), transparent 32%),
    radial-gradient(circle at bottom left, rgba(32,201,151,.12), transparent 35%),
    linear-gradient(180deg,#ffffff,#fffaf7 55%,#ffffff);
  color:#111;
  z-index:999;
  transform:translateX(105%);
  transition:.32s ease;
  overflow-y:auto;
  padding:34px 26px 36px;
  box-shadow:-20px 0 45px rgba(0,0,0,.22);
  border-left:1px solid rgba(0,0,0,.06);
}

.menu-drawer.show{
  transform:translateX(0);
}

.drawer-close{
  position:absolute;
  top:18px;
  right:18px;
  width:36px;
  height:36px;
  border:0;
  border-radius:14px;
  background:linear-gradient(135deg,#fff,#fff4ee);
  color:#111;
  font-size:25px;
  line-height:36px;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(0,0,0,.10);
}

.drawer-profile{
  text-align:center;
  padding-top:34px;
}

.drawer-avatar{
  width:90px;
  height:90px;
  border-radius:50%;
  margin:0 auto 18px;
  background:
    radial-gradient(circle at 50% 35%, #ffffff 0 20%, transparent 21%),
    radial-gradient(circle at 50% 86%, #ffffff 0 34%, transparent 35%),
    conic-gradient(from 0deg,#ff7a3d,#ffd166,#20c997,#0d6efd,#8b5cf6,#ff4f9a,#ff7a3d);
  box-shadow:
    0 0 18px rgba(255,122,61,.18),
    0 0 26px rgba(13,110,253,.12);
  animation:drawerAvatarColor 5s linear infinite;
}

.drawer-profile .hello{
  font-size:21px;
  font-weight:700;
  margin-bottom:8px;
  background:linear-gradient(90deg,#ff7a3d,#0d6efd,#20c997,#ff4f9a);
  background-size:260% 260%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:drawerTextColor 4s ease-in-out infinite;
}

.drawer-profile .guest{
  font-size:31px;
  font-weight:850;
  margin-bottom:20px;
  background:linear-gradient(90deg,#111,#8b5cf6,#0d6efd,#20c997,#111);
  background-size:260% 260%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:drawerTextColor 4s ease-in-out infinite;
}

.drawer-login{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:132px;
  padding:11px 28px;
  border-radius:999px;
  background:linear-gradient(135deg,#ff4fb0,#ff7bd2,#ffd166);
  background-size:220% 220%;
  color:#111;
  text-decoration:none;
  font-size:20px;
  font-weight:950;
  box-shadow:
    0 10px 24px rgba(255,79,176,.28),
    0 0 18px rgba(255,209,102,.18);
  animation:loginGlow 2.6s ease-in-out infinite;
  position:relative;
  overflow:hidden;
}

.drawer-login::after{
  content:"";
  position:absolute;
  top:-80%;
  left:-70%;
  width:45%;
  height:230%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);
  transform:rotate(28deg);
  animation:loginShine 2.7s ease-in-out infinite;
}

.drawer-line{
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,122,61,.25),rgba(13,110,253,.22),transparent);
  margin:68px 0 32px;
}

.drawer-links{
  display:flex;
  flex-direction:column;
  gap:28px;
}

.drawer-links a{
  text-decoration:none;
  font-size:23px;
  font-weight:760;
  letter-spacing:-.35px;
  background:linear-gradient(
    90deg,
    #111,
    #ff7a3d,
    #0d6efd,
    #20c997,
    #8b5cf6,
    #ff4f9a,
    #111
  );
  background-size:320% 320%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:drawerTextColor 4.5s ease-in-out infinite;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.06));
  transition:.2s ease;
}

.drawer-links a:active{
  transform:scale(.98);
}

/* HOME */
.home-content{
  padding:8px 16px calc(130px + env(safe-area-inset-bottom, 0px));
  min-height:calc(100vh - 170px);
  overflow-x:hidden;
  background:#fff;
}

/* V171 Home bottom spacer normalize: avoid double bottom whitespace while keeping bottom nav safe */
.app.mg-home-feed-page{
  padding-bottom:calc(56px + env(safe-area-inset-bottom, 0px));
}

.app.mg-home-feed-page .home-content{
  padding-bottom:10px;
}

.hero-banner{
  min-height:176px;
  border-radius:30px;
  padding:18px;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.95), transparent 28%),
    linear-gradient(135deg,#ff7a59,#ff4fb0 35%,#7b61ff 65%,#12c99b);
  box-shadow:0 8px 18px rgba(38,25,75,.07);
  position:relative;
  overflow:hidden;
  color:#fff;
  width:calc(100% + 12px);
  max-width:none;
  margin-left:-6px;
  margin-right:-6px;
  margin-bottom:7px;
}

.hero-banner::before{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  border-radius:50%;
  right:-55px;
  top:-45px;
  background:rgba(255,255,255,.18);
  filter:blur(1px);
}

.hero-banner::after{
  content:"";
  position:absolute;
  top:-70%;
  left:-70%;
  width:45%;
  height:240%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  transform:rotate(28deg);
  animation:iconShine 4s ease-in-out infinite;
}

.hero-badge{
  display:inline-flex;
  padding:6px 11px;
  border-radius:999px;
  background:rgba(255,255,255,.22);
  font-size:11px;
  font-weight:900;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  margin-bottom:10px;
  position:relative;
  z-index:2;
}

.hero-title{
  font-size:25px;
  font-weight:950;
  line-height:1.08;
  max-width:260px;
  position:relative;
  z-index:2;
}

.hero-text{
  margin-top:9px;
  font-size:12.5px;
  font-weight:700;
  line-height:1.45;
  max-width:250px;
  opacity:.96;
  position:relative;
  z-index:2;
}

.hero-btn{
  display:inline-flex;
  margin-top:14px;
  padding:10px 16px;
  border-radius:999px;
  background:#fff;
  color:#111;
  border:0;
  text-decoration:none;
  font-size:13px;
  font-weight:950;
  box-shadow:0 10px 22px rgba(0,0,0,.14);
  position:relative;
  z-index:2;
}

.hero-art{
  position:absolute;
  right:14px;
  bottom:14px;
  width:94px;
  height:94px;
  border-radius:28px;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.9), transparent 24%),
    linear-gradient(135deg,#ffffff,#fff1c2,#d9fdf2);
  display:grid;
  place-items:center;
  font-size:42px;
  box-shadow:0 12px 28px rgba(0,0,0,.16);
  z-index:2;
  animation:floatArt 3s ease-in-out infinite;
}

.service-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-bottom:18px;
}

.service-card{
  min-height:82px;
  border:0;
  border-radius:22px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(255,185,85,.16);
  box-shadow:0 10px 24px rgba(0,0,0,.05);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:10px 6px;
}

.service-icon{
  width:34px;
  height:34px;
  border-radius:14px;
  display:grid;
  place-items:center;
  color:#fff;
  font-size:17px;
  font-weight:900;
  margin-bottom:7px;
  box-shadow:0 8px 16px rgba(0,0,0,.10);
}

.cod-icon{
  background:linear-gradient(135deg,#ff7a59,#ff4fb0);
}

.delivery-icon{
  background:linear-gradient(135deg,#0d6efd,#20c997);
}

.track-icon{
  background:linear-gradient(135deg,#8b5cf6,#ec4899);
}

.service-card span{
  font-size:11px;
  font-weight:900;
  color:#3f3b43;
  line-height:1.2;
}


.track-inline-panel{
  grid-column:1 / -1;
  margin-top:4px;
  margin-bottom:4px;
}

.track-inline-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.track-inline-head h3{
  margin:0;
}

.track-inline-close{
  width:30px;
  height:30px;
  border:0;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:rgba(17,24,39,.08);
  color:#1f2937;
  font-size:20px;
  font-weight:800;
  line-height:1;
}

.track-inline-close:active{
  transform:scale(.96);
}


.marketplace-shortcuts{
  width:calc(100% + 12px);
  max-width:none;
  margin-left:-6px;
  margin-right:-6px;
  margin-bottom:1px;
  background:transparent;
}

.marketplace-shortcuts-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:0 0 7px;
}

.marketplace-shortcuts-head h3{
  font-size:19px;
  font-weight:950;
  background:linear-gradient(90deg,#111,#ff2fb3,#0b8fff,#00c896);
  background-size:300% 300%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:drawerTextColor 4s ease infinite;
}

.marketplace-shortcuts-badge{
  font-size:10.5px;
  font-weight:900;
  color:#7b2cff;
  border-radius:999px;
  padding:5px 10px;
  background:linear-gradient(135deg,rgba(139,92,246,.14),rgba(6,182,212,.12));
  border:1px solid rgba(123,44,255,.2);
}

.marketplace-shortcuts-row{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding:2px 0 6px;
  scrollbar-width:none;
  -ms-overflow-style:none;
}

.marketplace-shortcuts-row::-webkit-scrollbar{ display:none; }

.marketplace-chip{
  position:relative;
  width:112px;
  min-width:112px;
  height:74px;
  border-radius:21px;
  padding:9px 8px;
  border:1px solid transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(130deg,#ff8a3d,#ff4f9a,#8b5cf6,#06b6d4,#22c55e) border-box;
  box-shadow:0 6px 14px rgba(17,24,39,.06);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  text-decoration:none;
  color:inherit;
  overflow:hidden;
  animation:chipSoftPulse 3.6s ease-in-out infinite;
}

.marketplace-chip::after{
  content:"";
  position:absolute;
  top:-65%;
  left:-78%;
  width:42%;
  height:220%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.78),transparent);
  transform:rotate(28deg);
  animation:chipShine 3.8s ease-in-out infinite;
  pointer-events:none;
}

.marketplace-chip-label{
  font-size:12px;
  font-weight:950;
  color:#3f3b43;
  line-height:1;
  text-align:center;
}

.marketplace-chip-icon{
  width:34px;
  height:34px;
  border-radius:15px;
  display:grid;
  place-items:center;
  color:#fff;
  font-size:17px;
  font-weight:900;
  box-shadow:0 8px 16px rgba(0,0,0,.13);
  animation:iconFloat 2.6s ease-in-out infinite;
}

.track-order-icon{ background:linear-gradient(135deg,#8b5cf6,#d946ef,#ff4f9a); }
.cod-shortcut-icon{ background:linear-gradient(135deg,#ff4f9a,#ff8a3d,#fbbf24); }
.fast-delivery-icon{ background:linear-gradient(135deg,#22c55e,#14b8a6,#38bdf8); }
.for-you-icon{ background:linear-gradient(135deg,#ec4899,#fb7185,#fbbf24); }
.new-arrival-icon{ background:linear-gradient(135deg,#22c55e,#14b8a6,#38bdf8); }
.offers-icon{ background:linear-gradient(135deg,#ff3f8e,#ff8a3d,#ffd166); }
.brands-icon{ background:linear-gradient(135deg,#8b5cf6,#ec4899,#06b6d4); }
.categories-icon{ background:linear-gradient(135deg,#06b6d4,#14b8a6,#22c55e); }

.section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:8px 2px 14px;
}

.section-title{
  font-size:20px;
  font-weight:950;
  background:linear-gradient(90deg,#111,#ff2fb3,#0b8fff,#00c896);
  background-size:300% 300%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:drawerTextColor 4s ease infinite;
}

.see-all{
  border:0;
  background:transparent;
  font-size:12px;
  font-weight:900;
  color:#0d6efd;
  text-decoration:none;
}

.product-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:13px;
}

.product-card{
  background:#fff;
  border:1px solid rgba(20,26,39,.08);
  border-radius:14px;
  box-shadow:0 8px 20px rgba(17,24,39,.06);
  overflow:hidden;
  position:relative;
  cursor:pointer;
}


.product-img{
  aspect-ratio:1/1;
  display:grid;
  place-items:center;
  font-size:44px;
  background:linear-gradient(145deg,#fff7ef,#fff1f8,#f2f8ff);
  position:relative;
  overflow:hidden;
}

.product-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  position:relative;
  z-index:1;
}

.product-img.is-fallback{
  display:grid;
  place-items:center;
}

.product-img-fallback{
  font-size:46px;
  line-height:1;
  position:relative;
  z-index:1;
}

.discount-badge{
  position:absolute;
  top:8px;
  left:8px;
  border-radius:8px;
  padding:3px 7px;
  font-size:10px;
  font-weight:900;
  color:#fff;
  background:linear-gradient(135deg,#ff4f9f,#ff6a59);
  z-index:2;
}

.product-info{
  padding:9px 10px 11px;
}

.product-name{
  font-size:12.8px;
  font-weight:800;
  line-height:1.3;
  color:#202733;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:34px;
}

.price-row{
  margin-top:7px;
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}

.price{
  font-size:15px;
  font-weight:950;
  color:#d81b60;
}

.old-price{
  font-size:11px;
  font-weight:700;
  color:#98a0ad;
  text-decoration:line-through;
}

.product-meta{
  margin-top:6px;
  font-size:11px;
  color:#6f7783;
  font-weight:700;
}

/* Customer product-card presentation moved to css/customer/product-card.css (single source). */

.offer-strip{
  margin:18px 0;
  border-radius:26px;
  padding:16px;
  min-height:100px;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.7), transparent 26%),
    linear-gradient(135deg,#111827,#7b2cff,#ff2fb3);
  color:#fff;
  box-shadow:0 18px 36px rgba(123,44,255,.18);
  position:relative;
  overflow:hidden;
}

.offer-strip h3{
  font-size:22px;
  font-weight:950;
}

.offer-strip p{
  margin-top:6px;
  font-size:13px;
  font-weight:700;
  opacity:.92;
  max-width:270px;
}

.track-card{
  margin-top:18px;
  border-radius:28px;
  padding:18px;
  background:
    radial-gradient(circle at top left, rgba(13,110,253,.10), transparent 30%),
    linear-gradient(180deg,#fff,#fffaf7);
  border:1px solid rgba(13,110,253,.10);
  box-shadow:0 12px 30px rgba(0,0,0,.05);
}


.track-card.track-focus-highlight{
  border-color:rgba(32,201,151,.45);
  box-shadow:
    0 0 0 3px rgba(32,201,151,.20),
    0 18px 38px rgba(32,201,151,.24);
  transition:box-shadow .25s ease, border-color .25s ease;
}
.track-card h3{
  font-size:21px;
  font-weight:950;
  background:linear-gradient(90deg,#0d6efd,#20c997,#ff4fb0);
  background-size:300% 300%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:drawerTextColor 4s ease infinite;
}

.track-card p{
  margin-top:6px;
  color:#706873;
  font-size:13px;
  font-weight:700;
}

.track-row-input{
  margin-top:14px;
  display:flex;
  gap:8px;
  width:100%;
}

.track-row-input input{
  flex:1;
  min-width:0;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  border-radius:999px;
  padding:12px 14px;
  font-size:13px;
  font-weight:800;
  outline:none;
}

.track-row-input button{
  flex-shrink:0;
  border:0;
  border-radius:999px;
  padding:0 16px;
  background:linear-gradient(135deg,#0d6efd,#20c997);
  color:#fff;
  font-size:13px;
  font-weight:950;
  box-shadow:0 10px 22px rgba(13,110,253,.18);
}

/* TRACK RESULT */
.track-result{
  display:none;
  margin-top:14px;
  border-radius:18px;
  padding:14px;
  background:#fff;
  border:1px solid rgba(255,185,85,.18);
  box-shadow:0 8px 18px rgba(25,16,13,.04);
}

.track-result.show{
  display:block;
}

.track-result.error{
  display:block;
  border-color:rgba(173,52,52,.28);
  background:#fff1f1;
  color:#9b1c1c;
}

.track-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
  flex-wrap:wrap;
}

.track-head b{
  font-size:16px;
}

.status-pill{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:850;
  background:#fff3cd;
  color:#8a5a00;
  border:1px solid rgba(138,90,0,.18);
}

.status-accepted,
.status-confirmed{
  background:#eafff1;
  color:#198754;
  border-color:rgba(25,135,84,.22);
}

.status-processing{
  background:#efe8ff;
  color:#5b2cc7;
  border-color:rgba(91,44,199,.22);
}

.status-cancelled{
  background:#fff1f1;
  color:#ad3434;
  border-color:rgba(173,52,52,.25);
}

.status-delivered{
  background:#eef6ff;
  color:#0b5ed7;
  border-color:rgba(11,94,215,.18);
}

.track-grid{
  display:grid;
  gap:8px;
}

.track-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  border-bottom:1px solid rgba(255,185,85,.12);
  padding:8px 0;
  font-size:13px;
}

.track-row span{
  color:var(--muted);
}

.track-row b{
  text-align:right;
  word-break:break-word;
}

.track-items{
  white-space:pre-wrap;
  line-height:1.7;
  font-size:13px;
  background:var(--soft);
  border-radius:14px;
  padding:10px;
  margin-top:8px;
  color:var(--dark);
}

.cancel-panel{
  margin-top:12px;
  background:#fff1f1;
  border:1px solid rgba(173,52,52,.25);
  border-radius:18px;
  padding:13px;
  color:#7d1d1d;
}

.cancel-panel h4{
  font-size:15px;
  margin-bottom:6px;
  color:#9b1c1c;
}

.cancel-panel p{
  font-size:12px;
  line-height:1.6;
  color:#9b1c1c;
  margin-bottom:10px;
}

.cancel-panel textarea{
  width:100%;
  border:1px solid rgba(173,52,52,.28);
  background:#fff;
  border-radius:14px;
  padding:11px;
  outline:none;
  resize:vertical;
  min-height:65px;
  margin-bottom:9px;
}

.cancel-btn{
  border:0;
  border-radius:16px;
  padding:12px 14px;
  background:var(--danger);
  color:#fff;
  font-weight:850;
  width:100%;
}

.cancel-info{
  margin-top:12px;
  background:#f7f2ea;
  border:1px solid rgba(255,185,85,.20);
  border-radius:16px;
  padding:11px;
  font-size:12px;
  line-height:1.6;
  color:var(--muted);
}

/* COMMON PAGE PLACEHOLDER */
.page-section{
  min-height:calc(100vh - 170px);
  padding:18px 16px 30px;
}

.page-card{
  min-height:650px;
  border-radius:30px;
  background:
    radial-gradient(circle at top left, rgba(255,209,102,.10), transparent 30%),
    radial-gradient(circle at top right, rgba(38,211,255,.10), transparent 30%),
    linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,250,245,.90));
  border:1px solid rgba(201,151,75,.10);
  box-shadow:0 12px 30px rgba(0,0,0,.04);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:24px;
}

.page-title,
.page-card h1{
  font-size:30px;
  line-height:1.1;
  font-weight:950;
  margin-bottom:12px;
  background:linear-gradient(90deg,#ff6a00,#ff2fa8,#8b3cff,#0b8fff,#00c985,#ffd000,#ff6a00);
  background-size:500% 500%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:brandNameRainbowMove 1.7s linear infinite;
}

.page-subtitle,
.page-card p{
  font-size:17px;
  color:#6c6670;
  font-weight:650;
  line-height:1.55;
}

/* MODALS */
.modal{
  position:fixed;
  inset:0;
  background:rgba(17,24,39,.55);
  z-index:500;
  display:none;
  align-items:flex-end;
  justify-content:center;
  padding:12px;
}

.modal.show{
  display:flex;
}

.sheet{
  background:#fff;
  width:min(560px,100%);
  min-width:0;
  max-height:92vh;
  overflow:auto;
  border-radius:28px;
  padding:15px;
  box-shadow:0 22px 60px rgba(0,0,0,.28);
}

.sheet-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}

.sheet-head h3{
  font-size:20px;
  font-weight:950;
}

#detailModal #detailTitle{
  display:none;
}

#detailModal .sheet-head{
  justify-content:flex-end;
  margin-bottom:8px;
}

.close{
  width:38px;
  height:38px;
  border:0;
  border-radius:50%;
  background:#fff4ee;
  font-size:20px;
  cursor:pointer;
}

.detail-product-art{
  width:100%;
  min-height:260px;
  border-radius:22px;
  margin-bottom:12px;
  display:grid;
  gap:10px;
  font-size:92px;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.90), transparent 26%),
    linear-gradient(135deg,#fff1c2,#ffd6e8,#d8f7ff);
  border:1px solid rgba(255,255,255,.7);
  padding:10px;
}

.detail-media-main{
  min-height:230px;
  border-radius:18px;
  overflow:hidden;
  background:linear-gradient(135deg,#fff8ef,#f8f8ff);
  border:1px solid rgba(255,185,85,.2);
  position:relative;
  touch-action:pan-y pinch-zoom;
  -webkit-user-select:none;
  user-select:none;
}

.detail-media-track{
  width:100%;
  min-height:230px;
  height:100%;
  display:flex;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}

.detail-media-track::-webkit-scrollbar{
  display:none;
}

.detail-media-slide{
  flex:0 0 100%;
  min-height:230px;
  scroll-snap-align:center;
  position:relative;
}

.detail-main-image{
  width:100%;
  height:100%;
  min-height:230px;
  object-fit:cover;
  display:block;
}

.detail-video-slide{
  width:100%;
  height:100%;
  min-height:230px;
  background:#000;
  border-radius:0;
  overflow:hidden;
  display:grid;
  place-items:center;
}

.detail-video-slide iframe,
.detail-video-slide video{
  width:100%;
  height:100%;
  min-height:230px;
  border:0;
  object-fit:cover;
  display:block;
}

.detail-video-slide.detail-video-fallback{
  background:linear-gradient(145deg,#111827,#1f2937);
  gap:10px;
  color:#fff;
}

.detail-video-slide .video-fallback-icon{
  font-size:34px;
}

.detail-video-slide.detail-video-fallback a{
  color:#fff;
  text-decoration:none;
  font-weight:800;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.28);
  border-radius:999px;
  padding:8px 12px;
}

.detail-fallback-visual{
  width:100%;
  height:100%;
  min-height:230px;
  display:grid;
  place-items:center;
  gap:8px;
  text-align:center;
  background:
    radial-gradient(circle at 20% 20%,rgba(255,255,255,.95),transparent 34%),
    linear-gradient(145deg,#fff0cd,#ffdbe9,#dbf1ff);
}

.detail-fallback-icon{
  font-size:56px;
  line-height:1;
}

.detail-fallback-text{
  font-size:14px;
  font-weight:800;
  color:#6a5977;
  letter-spacing:.2px;
}

.detail-thumbs{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(58px,70px);
  gap:8px;
  overflow-x:auto;
  padding:2px 1px 4px;
}

.detail-thumb{
  border:1.5px solid rgba(255,185,85,.35);
  background:#fff;
  border-radius:12px;
  padding:2px;
  height:58px;
}

.detail-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:9px;
  display:block;
}

.detail-thumb-video{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  font-size:11px;
  font-weight:850;
  color:#5f4f68;
  background:linear-gradient(135deg,#f4f0ff,#fff2f8);
}

.detail-thumb-video .video-thumb-icon{
  font-size:12px;
  line-height:1;
}

.detail-thumb.is-active{
  border-color:#ff5ca8;
  box-shadow:0 0 0 2px rgba(255,92,168,.18);
}

.detail-extra-section{
  margin-top:10px;
  border:1px solid rgba(255,185,85,.18);
  border-radius:16px;
  padding:10px 12px;
  background:#fffdf9;
}

.detail-extra-section h4{
  font-size:13px;
  font-weight:900;
  color:#5c4a68;
  margin-bottom:8px;
}

.detail-related-product-section{
  margin-top:16px;
}


.detail-video-link{
  display:inline-block;
  text-decoration:none;
  font-size:13px;
  font-weight:800;
  color:#1d4ed8;
  background:rgba(37,99,235,.08);
  border:1px solid rgba(37,99,235,.18);
  border-radius:999px;
  padding:8px 12px;
}

.detail-variants-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.detail-variant-chip{
  display:inline-flex;
  align-items:center;
  padding:7px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:750;
  color:#5f4f68;
  background:linear-gradient(135deg,#fff3ec,#fff9f2);
  border:1px solid rgba(255,185,85,.25);
}

.detail-meta{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  margin:8px 0;
}

.detail-product-title{
  font-size:22px;
  line-height:1.3;
  font-weight:950;
  color:#22162c;
  margin:2px 0 2px;
}

.detail-sub-meta{
  display:grid;
  gap:4px;
  margin:4px 0 8px;
}

.detail-sub-meta span{
  font-size:12px;
  line-height:1.45;
  color:#6a6170;
}

.detail-sub-meta b{
  color:#473954;
}

.detail-meta b{
  font-size:22px;
  color:#ff2f7a;
}

.code{
  font-size:12px;
  color:var(--muted);
}

.desc{
  font-size:14px;
  color:var(--muted);
  line-height:1.7;
  margin:10px 0 14px;
  white-space:pre-line;
}

.option{
  background:var(--soft);
  border:1px solid rgba(255,185,85,.16);
  border-radius:18px;
  padding:12px;
  margin:8px 0;
  font-size:13px;
  color:var(--muted);
  line-height:1.6;
}

#detailModal .detail-sheet{
  display:flex;
  flex-direction:column;
  width:min(920px, calc(100vw - 24px));
  max-width:calc(100vw - 24px);
  padding:0;
  overflow:hidden;
}

#detailModal .detail-scroll{
  flex:1 1 auto;
  overflow:auto;
  padding:15px 15px 20px;
}

.wide-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:0;
  flex:0 0 auto;
  padding:10px 15px 14px;
  border-top:1px solid rgba(255,185,85,.22);
  background:linear-gradient(180deg,rgba(255,255,255,.92),#fff 55%);
  box-shadow:0 -6px 18px rgba(17,24,39,.06);
}

#detailDescriptionSection .desc{
  margin:0 0 10px;
}

#detailDescriptionSection .desc:last-child{
  margin-bottom:0;
}

.wide-actions button,
.wide-actions a{
  border:0;
  border-radius:18px;
  padding:13px 12px;
  text-decoration:none;
  text-align:center;
  font-weight:900;
  cursor:pointer;
}

.wide-actions .add{
  background:linear-gradient(135deg,#ff4fb0,#ff7a59,#ffd166);
  color:#111;
}

.wide-actions .order{
  background:linear-gradient(135deg,#25d366,#1da851);
  color:#fff;
}

/* CART */
.cart-item{
  display:grid;
  grid-template-columns:64px 1fr auto;
  gap:10px;
  align-items:center;
  padding:10px 0;
  border-bottom:1px solid rgba(255,185,85,.15);
}

.cart-emoji,
.cart-art{
  width:64px;
  height:64px;
  border-radius:18px;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.90), transparent 26%),
    linear-gradient(135deg,#fff1c2,#ffd6e8,#d8f7ff);
  font-size:34px;
}

.cart-item h4{
  font-size:13px;
  line-height:1.35;
}

.cart-item p{
  font-size:12px;
  color:var(--muted);
}

.qty{
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:7px;
}

.qty button{
  width:26px;
  height:26px;
  border:0;
  border-radius:50%;
  background:#fff4ee;
  font-weight:900;
}

.remove{
  border:0;
  background:#fff0f0;
  color:var(--danger);
  padding:8px;
  border-radius:12px;
  font-weight:900;
}

.empty{
  background:#fff;
  border:1px dashed rgba(255,185,85,.4);
  border-radius:20px;
  padding:25px;
  text-align:center;
  color:var(--muted);
  font-size:14px;
  font-weight:700;
}

.summary{
  background:var(--soft);
  border:1px solid rgba(255,185,85,.16);
  border-radius:18px;
  padding:12px;
  margin:13px 0;
}

.field-label{
  display:block;
  font-size:13px;
  color:var(--muted);
  font-weight:800;
  margin-bottom:8px;
}

.summary-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  font-size:14px;
  color:var(--muted);
  padding:5px 0;
}

.summary-row.total{
  font-size:19px;
  color:var(--dark);
  font-weight:950;
  border-top:1px solid rgba(255,185,85,.18);
  margin-top:6px;
  padding-top:11px;
}

.delivery-select{
  border:1px solid rgba(255,185,85,.24);
  background:#fff;
  border-radius:16px;
  padding:12px;
  outline:none;
  width:100%;
}

.form{
  display:grid;
  gap:10px;
}

.form input,
.form textarea,
.form select{
  border:1px solid rgba(255,185,85,.24);
  border-radius:16px;
  padding:12px;
  outline:none;
  background:#fff;
}

.form textarea{
  min-height:70px;
  resize:vertical;
}

.cart-checkout-actions{
  display:grid;
  gap:10px;
}

.cart-checkout-actions .checkout{
  width:100%;
}

.checkout{
  border:0;
  border-radius:18px;
  padding:14px;
  color:#fff;
  font-weight:900;
  font-size:15px;
  cursor:pointer;
}

.checkout.whatsapp{
  background:linear-gradient(135deg,#25d366,#1da851);
}

.checkout.website{
  background:linear-gradient(135deg,#ffb347,#ffd166);
  color:#19100d;
}

.note{
  font-size:12px;
  color:var(--muted);
  line-height:1.6;
  margin-top:8px;
}

/* BOTTOM NAV */
.bottom-nav-wrap{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:100;
  display:flex;
  justify-content:center;
  pointer-events:none;
}

.bottom-nav{
  width:100%;
  max-width:var(--app-max-width, 100%);
  height:90px;
  background:rgba(248,248,248,.96);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  display:grid;
  grid-template-columns:1fr 1fr 1fr 1fr 1fr;
  align-items:center;
  padding:9px 10px 10px;
  box-shadow:0 -8px 22px rgba(0,0,0,.08);
  pointer-events:auto;
  border-top:1px solid rgba(0,0,0,.05);
}

.nav-item{
  border:0;
  background:transparent;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  color:#4c4c55;
  font-size:12.5px;
  font-weight:800;
  cursor:pointer;
  min-width:0;
  height:68px;
  text-decoration:none;
}

.color-icon{
  width:33px;
  height:33px;
  border-radius:14px;
  display:grid;
  place-items:center;
  box-shadow:
    inset 0 0 10px rgba(255,255,255,.55),
    0 8px 16px rgba(0,0,0,.10);
  position:relative;
  overflow:hidden;
}

.color-icon::after{
  content:"";
  position:absolute;
  top:-55%;
  left:-70%;
  width:55%;
  height:200%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.70),transparent);
  transform:rotate(28deg);
  animation:navShine 3.4s ease-in-out infinite;
}

.color-icon svg{
  width:21px;
  height:21px;
  stroke:#fff;
  stroke-width:2.7;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  position:relative;
  z-index:2;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.20));
}

.home-grad{
  background:linear-gradient(135deg,#111,#3b3b3b);
}

.brand-grad{
  background:linear-gradient(135deg,#ffb347,#ff5f6d);
}

.cat-grad{
  background:linear-gradient(135deg,#20c997,#0dcaf0);
}

.review-grad{
  background:linear-gradient(135deg,#8b5cf6,#ec4899);
}

.chat-grad{
  background:linear-gradient(135deg,#0d6efd,#22c55e);
}

.nav-item.active{
  background:#000;
  color:#fff;
  border-radius:999px;
  height:52px;
  flex-direction:row;
  gap:7px;
  padding:0 14px;
  box-shadow:0 10px 22px rgba(0,0,0,.24);
  margin-top:-6px;
}

.nav-item.active .color-icon{
  width:29px;
  height:29px;
  border-radius:12px;
  background:linear-gradient(135deg,#ffffff,#eaf7ff);
  box-shadow:none;
}

.nav-item.active .color-icon svg{
  stroke:#000;
  width:20px;
  height:20px;
  filter:none;
}

.nav-item.active .color-icon::after,
.nav-item.active span{
  display:none;
}

/* TOAST */
.toast{
  position:fixed;
  left:50%;
  bottom:106px;
  transform:translateX(-50%) translateY(20px);
  max-width:calc(100% - 34px);
  background:#111827;
  color:#fff;
  padding:12px 16px;
  border-radius:999px;
  font-size:13px;
  font-weight:850;
  box-shadow:0 16px 36px rgba(0,0,0,.25);
  z-index:1200;
  opacity:0;
  visibility:hidden;
  transition:.22s ease;
  text-align:center;
}

.toast.show{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
}

/* FINAL UPDATE: UNIFIED ORDER SUMMARY */
.mg-status-flow-strip{
  display:grid;
  grid-template-columns:repeat(5,minmax(54px,1fr));
  gap:7px;
  margin:12px 0 14px;
}

.mg-flow-btn{
  min-height:74px;
  border-radius:18px;
  border:1px solid rgba(102,112,133,.11);
  background:rgba(255,255,255,.92);
  box-shadow:0 9px 20px rgba(16,24,40,.045);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  overflow:hidden;
}

.mg-flow-dot{
  width:31px;
  height:31px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:14px;
  font-weight:950;
  background:#eef4ff;
  color:#3b82f6;
}

.mg-flow-btn span{
  font-size:9.8px;
  font-weight:900;
  color:#667085;
  line-height:1.1;
  text-align:center;
}

.mg-flow-btn.done{
  background:linear-gradient(180deg,#fff,#f4fff8);
  border-color:rgba(34,197,94,.20);
}

.mg-flow-btn.done .mg-flow-dot{
  background:linear-gradient(135deg,#22c55e,#14b8a6);
  color:#fff;
}

.mg-flow-btn.active{
  background:linear-gradient(180deg,#fff,#fff7ed);
  border-color:rgba(255,170,80,.30);
  box-shadow:0 10px 22px rgba(255,170,80,.10);
}

.mg-flow-btn.active .mg-flow-dot{
  background:linear-gradient(135deg,#ffb703,#ff7a59);
  color:#fff;
}

.mg-flow-btn.cancel{
  background:linear-gradient(180deg,#fff,#fff5f5);
  border-color:rgba(239,68,68,.22);
}

.mg-flow-btn.cancel .mg-flow-dot{
  background:linear-gradient(135deg,#fb7185,#ef4444);
  color:#fff;
}

.mg-flow-btn.inactive{
  opacity:.72;
}

.mg-order-summary-card{
  background:
    radial-gradient(circle at top left, rgba(255,79,176,.045), transparent 30%),
    radial-gradient(circle at bottom right, rgba(32,201,151,.06), transparent 34%),
    linear-gradient(180deg,#fff,#fffaf7);
  border:1px solid rgba(255,170,80,.16);
  border-radius:26px;
  padding:18px;
  box-shadow:0 18px 44px rgba(16,24,40,.08);
  overflow:hidden;
  margin-top:10px;
}

.mg-order-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:16px;
}

.mg-order-head h2{
  font-size:22px;
  font-weight:950;
  color:#101828;
  letter-spacing:-.3px;
  line-height:1.2;
}

.mg-status-pill{
  padding:9px 14px;
  border-radius:999px;
  font-size:14px;
  font-weight:950;
  white-space:nowrap;
  border:1px solid rgba(16,24,40,.08);
  box-shadow:0 8px 18px rgba(16,24,40,.06);
}

.mg-status-pending{
  background:#fff5cc;
  color:#8a5a00;
  border-color:rgba(255,170,80,.28);
}

.mg-status-accepted{
  background:#eef6ff;
  color:#0b5ed7;
  border-color:rgba(11,94,215,.18);
}

.mg-status-processing{
  background:#f4edff;
  color:#6f42c1;
  border-color:rgba(111,66,193,.18);
}

.mg-status-delivered{
  background:#ecfff5;
  color:#0f8f52;
  border-color:rgba(15,143,82,.18);
}

.mg-status-cancelled{
  background:#fff1f2;
  color:#b42318;
  border-color:rgba(180,35,24,.18);
}

.mg-info-list{
  background:rgba(255,255,255,.82);
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(102,112,133,.08);
  box-shadow:0 10px 24px rgba(16,24,40,.035);
}

.mg-info-row{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:13px 0;
  margin:0 15px;
  border-bottom:1px solid rgba(102,112,133,.08);
  align-items:flex-start;
}

.mg-info-row:last-child{
  border-bottom:0;
}

.mg-info-row span{
  color:#667085;
  font-size:15px;
  font-weight:650;
  flex:0 0 auto;
}

.mg-info-row b{
  color:#101828;
  font-size:15px;
  font-weight:900;
  text-align:right;
  word-break:break-word;
  line-height:1.45;
}

.mg-order-items-value{
  max-width:58%;
  text-align:right;
}

.mg-order-items-value b{
  display:block;
  font-size:15px;
  font-weight:900;
  color:#101828;
  line-height:1.45;
}

.mg-order-items-value small{
  display:block;
  margin-top:3px;
  color:#667085;
  font-size:12px;
  font-weight:750;
  line-height:1.35;
}

.mg-visual-items-card{
  margin-top:13px;
  background:
    radial-gradient(circle at top left, rgba(255,79,176,.10), transparent 30%),
    radial-gradient(circle at bottom right, rgba(32,201,151,.12), transparent 34%),
    linear-gradient(135deg,#fff7fb,#f1fffb 55%,#fffaf2);
  border:1px solid rgba(255,170,80,.16);
  border-radius:22px;
  padding:15px;
  box-shadow:0 10px 24px rgba(16,24,40,.045);
  display:grid;
  gap:10px;
}

.mg-visual-title{
  font-size:13px;
  color:#667085;
  font-weight:800;
  margin-bottom:2px;
}

.mg-visual-item{
  display:flex;
  gap:12px;
  align-items:flex-start;
  color:#344054;
  line-height:1.65;
  font-size:15px;
  font-weight:760;
}

.mg-item-icon{
  width:44px;
  height:44px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#ffe8f4,#e8f7ff);
  font-size:22px;
  flex:0 0 auto;
  box-shadow:inset 0 0 16px rgba(255,255,255,.75);
}

/* ORDER PDF BUTTON UPDATE */
.pdf-button-wrap,
.mg-admin-pdf-wrap{
  margin-top:18px;
  padding-bottom:8px;
}

.download-pdf-btn,
.mg-download-pdf-btn{
  width:100%;
  border:0;
  border-radius:22px;
  padding:15px 18px;
  background:linear-gradient(135deg,#ff4fb0,#ff7a59,#ffd166);
  color:#111;
  font-size:16px;
  font-weight:950;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  box-shadow:
    0 14px 28px rgba(255,79,176,.22),
    0 0 18px rgba(255,209,102,.16);
  position:relative;
  overflow:hidden;
  cursor:pointer;
}

.download-pdf-btn::after,
.mg-download-pdf-btn::after{
  content:"";
  position:absolute;
  top:-70%;
  left:-80%;
  width:45%;
  height:240%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent);
  transform:rotate(28deg);
  animation:pdfButtonShine 2.8s ease-in-out infinite;
}

.download-pdf-btn span,
.download-pdf-btn svg,
.mg-download-pdf-btn span,
.mg-download-pdf-btn svg{
  position:relative;
  z-index:2;
}

.download-pdf-btn svg,
.mg-download-pdf-btn svg{
  width:22px;
  height:22px;
  stroke:#111;
  stroke-width:2.4;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.download-pdf-btn:active,
.mg-download-pdf-btn:active{
  transform:scale(.98);
}

.pdf-note,
.mg-pdf-note{
  text-align:center;
  margin-top:8px;
  font-size:12px;
  color:#77717b;
  font-weight:650;
  line-height:1.45;
}

.mg-admin-extra-details{
  margin-top:16px;
  padding:14px;
  border-radius:20px;
  background:linear-gradient(180deg,#fff,#fffaf7);
  border:1px solid rgba(255,185,85,.18);
  box-shadow:0 8px 18px rgba(0,0,0,.035);
}

.mg-admin-extra-title{
  font-size:15px;
  font-weight:950;
  margin-bottom:10px;
  color:#111827;
}

.mg-admin-extra-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:8px 0;
  border-bottom:1px solid rgba(255,185,85,.13);
  font-size:13px;
}

.mg-admin-extra-row:last-child{
  border-bottom:0;
}

.mg-admin-extra-row span{
  color:#706873;
}

.mg-admin-extra-row b{
  text-align:right;
  word-break:break-word;
}

.mg-admin-extra-address{
  margin-top:10px;
  padding:12px;
  border-radius:16px;
  background:#fff;
  border:1px solid rgba(255,185,85,.14);
  font-size:13px;
  line-height:1.65;
}

.mg-admin-extra-address span{
  display:block;
  color:#706873;
  margin-bottom:5px;
  font-weight:750;
}

.mg-admin-extra-address b{
  display:block;
  color:#111827;
  word-break:break-word;
}

/* ANIMATIONS */
@keyframes iconShine{
  0%{
    left:-85%;
    opacity:0;
  }
  40%{
    opacity:.72;
  }
  75%{
    left:135%;
    opacity:0;
  }
  100%{
    left:135%;
    opacity:0;
  }
}

@keyframes navShine{
  0%{
    left:-80%;
    opacity:0;
  }
  40%{
    opacity:.75;
  }
  75%{
    left:130%;
    opacity:0;
  }
  100%{
    left:130%;
    opacity:0;
  }
}

@keyframes premiumLogoRingMove{
  0%{
    filter:hue-rotate(0deg);
  }
  100%{
    filter:hue-rotate(360deg);
  }
}

@keyframes premiumLogoAura{
  from{
    opacity:.42;
    transform:scale(.98);
  }
  to{
    opacity:.68;
    transform:scale(1.04);
  }
}

@keyframes premiumLogoShine{
  0%{
    left:-85%;
    opacity:0;
  }
  35%{
    opacity:.72;
  }
  70%{
    left:135%;
    opacity:0;
  }
  100%{
    left:135%;
    opacity:0;
  }
}

@keyframes premiumMgTextColor{
  0%{
    background-position:0% 50%;
  }
  50%{
    background-position:100% 50%;
  }
  100%{
    background-position:0% 50%;
  }
}

@keyframes drawerAvatarColor{
  0%{
    filter:hue-rotate(0deg);
  }
  100%{
    filter:hue-rotate(360deg);
  }
}

@keyframes drawerTextColor{
  0%{
    background-position:0% 50%;
  }
  50%{
    background-position:100% 50%;
  }
  100%{
    background-position:0% 50%;
  }
}

@keyframes loginGlow{
  0%{
    background-position:0% 50%;
    box-shadow:0 10px 24px rgba(255,79,176,.28),0 0 18px rgba(255,209,102,.18);
  }
  50%{
    background-position:100% 50%;
    box-shadow:0 12px 28px rgba(255,79,176,.36),0 0 24px rgba(13,110,253,.16);
  }
  100%{
    background-position:0% 50%;
    box-shadow:0 10px 24px rgba(255,79,176,.28),0 0 18px rgba(255,209,102,.18);
  }
}

@keyframes loginShine{
  0%{
    left:-80%;
    opacity:0;
  }
  40%{
    opacity:.8;
  }
  80%{
    left:130%;
    opacity:0;
  }
  100%{
    left:130%;
    opacity:0;
  }
}

@keyframes brandNameRainbowMove{
  0%{
    background-position:0% 50%;
  }
  50%{
    background-position:100% 50%;
  }
  100%{
    background-position:0% 50%;
  }
}

@keyframes brandNameGlowPulse{
  0%{
    filter:hue-rotate(0deg) brightness(1);
    transform:scale(1);
  }
  100%{
    filter:hue-rotate(360deg) brightness(1.12);
    transform:scale(1.015);
  }
}

@keyframes brandSubGlowPulse{
  0%{
    filter:hue-rotate(0deg) brightness(1);
  }
  100%{
    filter:hue-rotate(360deg) brightness(1.15);
  }
}

@keyframes brandNameColorSlide{
  0%{
    background-position:0% 50%;
  }
  100%{
    background-position:500% 50%;
  }
}

@keyframes floatArt{
  0%,100%{
    transform:translateY(0);
  }
  50%{
    transform:translateY(-8px);
  }
}

@keyframes pdfButtonShine{
  0%{
    left:-85%;
    opacity:0;
  }
  40%{
    opacity:.75;
  }
  78%{
    left:135%;
    opacity:0;
  }
  100%{
    left:135%;
    opacity:0;
  }
}



@media (min-width:768px){
  .app,
  .topbar,
  .bottom-nav{
    max-width:min(100%, 960px);
  }

  .home-content,
  .page-section{
    padding-left:20px;
    padding-right:20px;
  }

  .product-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .service-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (min-width:1100px){
  .app,
  .topbar,
  .bottom-nav{
    max-width:min(100%, 1100px);
  }

  .product-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}

@media (min-width:768px) and (hover:none), (min-width:768px) and (pointer:coarse){
  .product-card{
    border-radius:16px;
  }

  .product-img img{
    object-position:center;
  }
}

/* RESPONSIVE */
@media(max-width:430px){
  .mg-status-flow-strip{
    grid-template-columns:repeat(5,minmax(52px,1fr));
    gap:6px;
  }

  .mg-flow-btn{
    min-height:68px;
    border-radius:16px;
  }

  .mg-flow-dot{
    width:28px;
    height:28px;
    font-size:13px;
  }

  .mg-flow-btn span{
    font-size:8.7px;
  }

  .mg-order-summary-card{
    padding:14px;
    border-radius:24px;
  }

  .mg-order-head h2{
    font-size:20px;
  }

  .mg-info-row span,
  .mg-info-row b,
  .mg-order-items-value b{
    font-size:14px;
  }
}

@media(max-width:390px){
  .topbar{
    padding:0 12px;
  }

  .left-tools,
  .right-tools{
    gap:6px;
  }

  .mg-brand-label{
    display:none;
  }

  .home-search-bar{
    height:37px;
    margin:0 5px;
    padding:0 9px;
  }

  .top-icon-btn{
    width:28px;
    height:28px;
    border-radius:10px;
  }

  .top-icon-btn svg{
    width:16px;
    height:16px;
  }

  .hamburger{
    width:17px;
    height:13px;
  }

  .premium-mg-logo{
    width:40px;
    height:40px;
  }

  .product-img{
    height:128px;
  }

  .hero-title{
    font-size:23px;
  }

  .nav-item{
    font-size:11.5px;
  }

  .color-icon{
    width:31px;
    height:31px;
  }

  .color-icon svg{
    width:20px;
    height:20px;
  }

  .menu-drawer{
    width:86%;
    padding:32px 24px 34px;
  }

  .drawer-links a{
    font-size:22px;
  }
}

@media(max-width:360px){
  .topbar{
    padding:0 10px;
  }

  .left-tools,
  .right-tools{
    gap:5px;
  }

  .home-search-bar{
    height:36px;
    margin:0 4px;
    padding:0 8px;
  }

  .search-placeholder{
    font-size:11.6px;
  }

  .top-icon-btn{
    width:27px;
    height:27px;
    border-radius:9px;
  }

  .premium-mg-logo{
    width:38px;
    height:38px;
  }

  .service-card span{
    font-size:10px;
  }

  .product-grid{
    gap:10px;
  }

  .product-name{
    font-size:12.5px;
  }

  .track-row-input{
    flex-direction:column;
  }

  .track-row-input button{
    min-height:42px;
  }

  .wide-actions{
    grid-template-columns:1fr;
  }

  .cart-item{
    grid-template-columns:56px 1fr auto;
  }

  .cart-emoji,
  .cart-art{
    width:56px;
    height:56px;
    font-size:30px;
  }

  .drawer-links a{
    font-size:20px;
  }

  .mg-info-row{
    flex-direction:column;
    gap:4px;
  }

  .mg-info-row b,
  .mg-order-items-value{
    text-align:left;
    max-width:100%;
  }

  .mg-order-head{
    flex-direction:column;
  }
}


/* SOFT_HERO_COLOR_START */
.hero-card,
.hero-banner,
.home-hero,
.hero-section,
.main-hero {
  background:
    radial-gradient(circle at 15% 20%, rgba(255,255,255,0.35), transparent 28%),
    radial-gradient(circle at 85% 20%, rgba(255,255,255,0.22), transparent 32%),
    linear-gradient(135deg, #f6a8c8 0%, #a892f4 45%, #5fc7d8 100%) !important;
  box-shadow: 0 18px 45px rgba(118, 99, 180, 0.22) !important;
}
/* SOFT_HERO_COLOR_END */



/* BRANDS PAGE */
.brands-page{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.brands-intro{
  padding:8px 4px 2px;
}

.brands-state{
  border-radius:16px;
  border:1px solid rgba(255,185,85,.22);
  background:linear-gradient(135deg,#fffdf8,#fff6f0);
  color:#7a6078;
  font-weight:700;
  padding:12px 14px;
}

.brand-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.brand-card{
  border:1px solid rgba(255,185,85,.2);
  border-radius:18px;
  padding:10px;
  background:linear-gradient(160deg,#ffffff,#fff6fa);
  box-shadow:0 10px 24px rgba(0,0,0,.05);
  text-align:left;
  cursor:pointer;
}

.brand-card.is-active{
  border-color:rgba(255,71,155,.45);
  box-shadow:0 12px 28px rgba(255,71,155,.15);
}

.brand-cover{
  width:100%;
  aspect-ratio:1/1;
  border-radius:14px;
  object-fit:cover;
  background:linear-gradient(135deg,#ffecd2,#fcb69f);
  margin-bottom:8px;
}

.brand-name{
  font-size:15px;
  font-weight:900;
  color:#241428;
}

.brand-meta{
  margin-top:3px;
  font-size:12px;
  font-weight:700;
  color:#7b647a;
}

.brand-products{
  border-radius:20px;
  border:1px solid rgba(98,134,255,.2);
  background:linear-gradient(180deg,#fefcff,#f8fbff);
  padding:12px;
}

.brand-products-head{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
}

.brand-products-head h3{
  font-size:18px;
  font-weight:900;
}

.brand-back-btn{
  border:0;
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  font-weight:800;
  color:#fff;
  background:linear-gradient(135deg,#8b5cf6,#ff2fa8);
}

.brand-products-list{
  display:grid;
  grid-template-columns:1fr;
  gap:9px;
}

.brand-product-card{
  display:grid;
  grid-template-columns:64px 1fr;
  gap:10px;
  border-radius:14px;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  padding:8px;
}

.brand-product-img{
  width:64px;
  height:64px;
  object-fit:cover;
  border-radius:10px;
  background:linear-gradient(135deg,#dff6ff,#ffe3f1);
}

.brand-product-name{
  font-size:14px;
  font-weight:850;
}

.brand-product-code,.brand-product-tags{
  font-size:11px;
  color:#6f6573;
  margin-top:2px;
}

.brand-product-price{
  margin-top:4px;
  font-size:13px;
  font-weight:900;
  color:#0c7f4f;
}

.brand-product-price .old{
  color:#9f95a4;
  text-decoration:line-through;
  font-weight:700;
  margin-left:6px;
}

@media (max-width:360px){
  .brand-grid{grid-template-columns:1fr;}
}

/* Brands page: fix brand card name position only */
.brands-page .brand-card .brand-name{
  position: static !important;
  inset: auto !important;
  transform: none !important;
  display: block !important;
  width: 100% !important;
  margin: 12px 0 4px !important;
  padding: 0 !important;
  text-align: left !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  color: #111827 !important;
  font-weight: 900 !important;
}

.brands-page .brand-card .brand-cover + .brand-name{
  margin-top: 12px !important;
}

/* Brands page: show only brand name on brand cards */
.brands-page .brand-card .brand-meta{
  display: none !important;
}

.brands-page .brand-card .brand-name{
  margin-bottom: 0 !important;
}


/* BRANDS FINAL PREMIUM CARD DESIGN START */

/* JS hide/show must stay working */
.brands-page .brands-intro[hidden],
.brands-page #brandGrid[hidden],
.brands-page .brand-grid[hidden],
.brands-page #brandProductsSection[hidden],
.brands-page .brand-products[hidden]{
  display:none !important;
}

/* Brand page background */
.page-section.brands-page,
.brands-page{
  background:
    radial-gradient(circle at 15% 10%, rgba(255,74,169,.14), transparent 28%),
    radial-gradient(circle at 85% 5%, rgba(0,210,255,.13), transparent 32%),
    linear-gradient(180deg, #ffffff 0%, #fff7fb 45%, #f5fffd 100%) !important;
}

.page-section.brands-page{
  padding:34px 26px 130px !important;
}

/* All Brands title */
.brands-page .brands-intro:not([hidden]){
  display:block !important;
  text-align:center !important;
  padding:0 !important;
}

.brands-page .brands-intro h1,
.brands-page .brands-intro h2,
.brands-page .page-title{
  text-align:center !important;
  font-size:48px !important;
  font-weight:950 !important;
  line-height:1.05 !important;
  letter-spacing:-1px !important;
  margin:0 !important;
  background:linear-gradient(90deg,#ff8a00,#ff2ea6,#7c3aed,#00c2ff,#13c98b,#ff8a00) !important;
  background-size:360% 100% !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
  animation:mgBrandsTitleFlow 4.2s ease-in-out infinite !important;
  text-shadow:0 14px 35px rgba(255,55,165,.12) !important;
}

.brands-page .brands-intro p,
.brands-page .page-subtitle{
  margin-top:10px !important;
  text-align:center !important;
  font-size:14px !important;
  line-height:1.25 !important;
  color:#6b6473 !important;
  font-weight:750 !important;
  white-space:nowrap !important;
  letter-spacing:-.15px !important;
}

/* Remove loading/status hint from grid view */
.brands-page #brandsState,
.brands-page .brands-state{
  display:none !important;
  height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
}

/* Brand grid */
.brands-page .brand-grid:not([hidden]){
  margin-top:34px !important;
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:26px !important;
}

/* Brand card design */
.brands-page .brand-card{
  position:relative !important;
  isolation:isolate !important;
  min-height:318px !important;
  width:100% !important;
  border:2px solid transparent !important;
  border-radius:34px !important;
  padding:18px !important;
  text-align:center !important;
  overflow:hidden !important;
  cursor:pointer !important;
  user-select:none !important;
  background:
    linear-gradient(white, white) padding-box,
    linear-gradient(135deg, rgba(255,62,159,.85), rgba(255,198,77,.55), rgba(32,210,194,.65), rgba(96,91,255,.7)) border-box !important;
  box-shadow:
    0 20px 52px rgba(255,79,166,.16),
    0 10px 28px rgba(17,24,39,.06) !important;
  transform:translateZ(0) !important;
  transition:transform .25s ease, box-shadow .25s ease !important;
}

.brands-page .brand-card::before{
  content:"" !important;
  position:absolute !important;
  z-index:0 !important;
  inset:-40% !important;
  background:conic-gradient(
    from 90deg,
    transparent,
    rgba(255,53,166,.20),
    rgba(0,213,255,.18),
    transparent 35%
  ) !important;
  animation:mgBrandSpinGlow 8s linear infinite !important;
  opacity:.9 !important;
  pointer-events:none !important;
}

.brands-page .brand-card::after{
  content:"" !important;
  position:absolute !important;
  z-index:0 !important;
  inset:2px !important;
  border-radius:32px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,249,252,.82)) !important;
  pointer-events:none !important;
}

.brands-page .brand-card > *{
  position:relative !important;
  z-index:2 !important;
}

/* Brand image/cover area */
.brands-page .brand-card .brand-cover{
  height:185px !important;
  width:100% !important;
  border-radius:27px !important;
  display:grid !important;
  place-items:center !important;
  background:
    radial-gradient(circle at 26% 26%, rgba(255,255,255,.95), transparent 18%),
    linear-gradient(135deg,#ffe5b5 0%,#ffd8df 44%,#ddf8ff 100%) !important;
  overflow:hidden !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7) !important;
}

.brands-page .brand-card .brand-cover:empty::before{
  content:"🛍️" !important;
  font-size:72px !important;
  filter:drop-shadow(0 18px 25px rgba(0,0,0,.12)) !important;
  animation:mgBrandFloatBag 3s ease-in-out infinite !important;
}

.brands-page .brand-card img.brand-cover{
  object-fit:cover !important;
}

.brands-page .brand-card .brand-cover img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  border-radius:27px !important;
}

/* Brand name: no blur, no hidden transparent issue */
.brands-page .brand-card .brand-name{
  position:static !important;
  inset:auto !important;
  transform:none !important;
  display:block !important;
  width:100% !important;
  margin:18px auto 0 !important;
  padding:0 !important;
  text-align:center !important;
  line-height:1.05 !important;
  white-space:normal !important;
  font-size:34px !important;
  font-weight:950 !important;
  letter-spacing:-.45px !important;
  opacity:1 !important;
  filter:none !important;
  mix-blend-mode:normal !important;
  background:none !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
  -webkit-text-fill-color:#ff006e !important;
  color:#ff006e !important;
  animation:mgBrandNameRealColor 3.2s ease-in-out infinite, mgBrandNamePulse 2.7s ease-in-out infinite !important;
  text-shadow:
    0 8px 18px rgba(255,0,110,.20),
    0 3px 12px rgba(0,194,255,.16) !important;
}

.brands-page .brand-card .brand-name::before,
.brands-page .brand-card .brand-name::after{
  content:none !important;
  display:none !important;
}

.brands-page .brand-card .brand-meta{
  display:none !important;
}

/* Product view must still show */
.brands-page #brandProductsSection:not([hidden]),
.brands-page .brand-products:not([hidden]){
  display:block !important;
}

@keyframes mgBrandsTitleFlow{
  0%,100%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
}

@keyframes mgBrandSpinGlow{
  to{transform:rotate(360deg);}
}

@keyframes mgBrandFloatBag{
  0%,100%{transform:translateY(0) scale(1);}
  50%{transform:translateY(-8px) scale(1.04);}
}

@keyframes mgBrandNameRealColor{
  0%{
    color:#ff006e;
    -webkit-text-fill-color:#ff006e;
    text-shadow:0 8px 18px rgba(255,0,110,.22);
  }
  25%{
    color:#8338ec;
    -webkit-text-fill-color:#8338ec;
    text-shadow:0 8px 18px rgba(131,56,236,.22);
  }
  50%{
    color:#00a6ff;
    -webkit-text-fill-color:#00a6ff;
    text-shadow:0 8px 18px rgba(0,166,255,.24);
  }
  75%{
    color:#00a86b;
    -webkit-text-fill-color:#00a86b;
    text-shadow:0 8px 18px rgba(0,168,107,.22);
  }
  100%{
    color:#ff006e;
    -webkit-text-fill-color:#ff006e;
    text-shadow:0 8px 18px rgba(255,0,110,.22);
  }
}

@keyframes mgBrandNamePulse{
  0%,100%{transform:translateY(0) scale(1);}
  50%{transform:translateY(-1px) scale(1.015);}
}

@media (max-width:360px){
  .page-section.brands-page{
    padding-left:20px !important;
    padding-right:20px !important;
  }

  .brands-page .brands-intro h1,
  .brands-page .brands-intro h2,
  .brands-page .page-title{
    font-size:43px !important;
  }

  .brands-page .brands-intro p,
  .brands-page .page-subtitle{
    font-size:13px !important;
  }

  .brands-page .brand-card .brand-name{
    font-size:30px !important;
  }
}
/* BRANDS FINAL PREMIUM CARD DESIGN END */


/* BRANDS ALL TITLE GRADIENT ANIMATION START */
.brands-page .brands-intro h1,
.brands-page .brands-intro h2,
.brands-page .page-title{
  font-size:40px !important;
  line-height:1.08 !important;
  font-weight:950 !important;
  text-align:center !important;
  letter-spacing:-.6px !important;

  background:linear-gradient(
    90deg,
    #ff006e,
    #ff8a00,
    #ffd000,
    #00c985,
    #00c2ff,
    #7c3aed,
    #ff2ea6,
    #ff006e
  ) !important;
  background-size:500% 100% !important;

  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;

  animation:mgAllBrandsGradientMove 2.8s linear infinite !important;
  text-shadow:0 10px 24px rgba(255,46,166,.14) !important;
}

@keyframes mgAllBrandsGradientMove{
  0%{
    background-position:0% 50%;
  }
  100%{
    background-position:500% 50%;
  }
}

@media (max-width:360px){
  .brands-page .brands-intro h1,
  .brands-page .brands-intro h2,
  .brands-page .page-title{
    font-size:36px !important;
  }
}
/* BRANDS ALL TITLE GRADIENT ANIMATION END */


/* Brand page final layout polish start */

/* Brand page background polish */
.app:has(.brands-page){
  background:
    radial-gradient(circle at 15% 10%, rgba(255,74,169,.14), transparent 28%),
    radial-gradient(circle at 85% 5%, rgba(0,210,255,.13), transparent 32%),
    linear-gradient(180deg, #ffffff 0%, #fff7fb 45%, #f5fffd 100%) !important;
}

/* Brands page spacing */
.brands-page{
  padding:34px 26px 30px !important;
}

/* All Brands title colorful animation */
.brands-page .page-title{
  margin:0 auto 10px !important;
  text-align:center !important;
  font-size:40px !important;
  font-weight:950 !important;
  letter-spacing:-.7px !important;
  line-height:1.06 !important;
  background:linear-gradient(90deg,#ff8a00,#ff2ea6,#7c3aed,#00c2ff,#13c98b,#ff8a00) !important;
  background-size:360% 100% !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
  animation:abirBrandsTitleFlow 4.5s ease-in-out infinite !important;
  text-shadow:0 14px 35px rgba(255,55,165,.12) !important;
}

/* subtitle one line */
.brands-page .page-subtitle{
  margin:0 auto 30px !important;
  text-align:center !important;
  font-size:14px !important;
  line-height:1.25 !important;
  color:#6b6473 !important;
  font-weight:750 !important;
  white-space:nowrap !important;
  letter-spacing:-.15px !important;
}

/* hide Select a brand box */
.brands-page .brands-state{
  display:none !important;
}

/* brand grid */
.brands-page .brand-grid{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:26px !important;
  margin-top:0 !important;
}

/* Large brand card */
.brands-page .brand-card{
  position:relative !important;
  min-height:318px !important;
  border-radius:34px !important;
  padding:18px !important;
  text-align:center !important;
  overflow:hidden !important;
  cursor:pointer !important;
  user-select:none !important;
  isolation:isolate !important;
  background:
    linear-gradient(white, white) padding-box,
    linear-gradient(135deg, rgba(255,62,159,.85), rgba(255,198,77,.55), rgba(32,210,194,.65), rgba(96,91,255,.7)) border-box !important;
  border:2px solid transparent !important;
  box-shadow:
    0 20px 52px rgba(255,79,166,.16),
    0 10px 28px rgba(17,24,39,.06) !important;
  transform:translateZ(0) !important;
}

/* animated glow behind content */
.brands-page .brand-card::before{
  content:"" !important;
  position:absolute !important;
  inset:-40% !important;
  background:conic-gradient(
    from 90deg,
    transparent,
    rgba(255,53,166,.20),
    rgba(0,213,255,.18),
    transparent 35%
  ) !important;
  animation:abirBrandsCardSpinGlow 8s linear infinite !important;
  opacity:.9 !important;
  pointer-events:none !important;
  z-index:0 !important;
}

/* soft inside layer must stay behind content */
.brands-page .brand-card::after{
  content:"" !important;
  position:absolute !important;
  inset:2px !important;
  border-radius:32px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,249,252,.82)) !important;
  pointer-events:none !important;
  z-index:0 !important;
}

/* keep card content above overlays */
.brands-page .brand-card > *{
  position:relative !important;
  z-index:2 !important;
}

/* brand cover */
.brands-page .brand-cover{
  height:185px !important;
  width:100% !important;
  border-radius:27px !important;
  display:grid !important;
  place-items:center !important;
  background:
    radial-gradient(circle at 26% 26%, rgba(255,255,255,.95), transparent 18%),
    linear-gradient(135deg,#ffe5b5 0%,#ffd8df 44%,#ddf8ff 100%) !important;
  overflow:hidden !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7) !important;
  object-fit:cover !important;
}

.brands-page img.brand-cover{
  object-fit:cover !important;
}

/* fallback bag icon if no image */
.brands-page div.brand-cover::before{
  content:"🛍️" !important;
  font-size:72px !important;
  filter:drop-shadow(0 18px 25px rgba(0,0,0,.12)) !important;
  animation:abirBrandsFloatBag 3s ease-in-out infinite !important;
}

/* brand card should show only brand name, no meta */
.brands-page .brand-card .brand-meta{
  display:none !important;
}

/* Brand name clear, centered, colorful, not blur */
.brands-page .brand-card .brand-name{
  position:relative !important;
  inset:auto !important;
  transform:none !important;
  display:block !important;
  width:100% !important;
  margin:18px auto 0 !important;
  padding:0 !important;
  text-align:center !important;
  line-height:1.08 !important;
  white-space:normal !important;
  font-size:34px !important;
  font-weight:950 !important;
  letter-spacing:-.45px !important;
  opacity:1 !important;
  filter:none !important;
  mix-blend-mode:normal !important;
  background:none !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
  -webkit-text-fill-color:#ff006e !important;
  color:#ff006e !important;
  animation:abirBrandNameColor 3.2s ease-in-out infinite, abirBrandNamePulse 2.7s ease-in-out infinite !important;
  text-shadow:
    0 8px 18px rgba(255,0,110,.20),
    0 3px 12px rgba(0,194,255,.16) !important;
}

.brands-page .brand-card .brand-name::before,
.brands-page .brand-card .brand-name::after{
  content:none !important;
  display:none !important;
}

/* Product view container */
.brands-page .brand-products{
  margin-top:22px !important;
  border-radius:20px !important;
  border:1px solid rgba(98,134,255,.2) !important;
  background:linear-gradient(180deg,#fefcff,#f8fbff) !important;
  padding:12px !important;
}

.brands-page .brand-products-head{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  margin-bottom:10px !important;
}

.brands-page .brand-products-head h3{
  font-size:18px !important;
  font-weight:900 !important;
  color:#111827 !important;
}

.brands-page .brand-back-btn{
  border:0 !important;
  border-radius:999px !important;
  padding:8px 13px !important;
  font-size:12px !important;
  font-weight:900 !important;
  color:#fff !important;
  background:linear-gradient(135deg,#8b5cf6,#ff2fa8) !important;
}

.brands-page .brand-products-list{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:9px !important;
}

/* Product list/card style restore */
.brands-page .brand-product-card{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  padding:10px !important;
  border-radius:18px !important;
  background:#fff !important;
  border:1px solid rgba(15,23,42,.08) !important;
  box-shadow:0 8px 20px rgba(15,23,42,.05) !important;
  overflow:hidden !important;
}

.brands-page .brand-product-img{
  width:74px !important;
  height:74px !important;
  border-radius:14px !important;
  object-fit:cover !important;
  flex:0 0 74px !important;
  background:linear-gradient(135deg,#e0f2fe,#fce7f3) !important;
}

.brands-page div.brand-product-img{
  display:block !important;
}

.brands-page .brand-product-card > div:last-child{
  min-width:0 !important;
  flex:1 1 auto !important;
}

.brands-page .brand-product-name{
  font-size:15px !important;
  font-weight:900 !important;
  color:#111827 !important;
  line-height:1.2 !important;
}

.brands-page .brand-product-code,
.brands-page .brand-product-tags{
  margin-top:3px !important;
  font-size:12px !important;
  color:#6b7280 !important;
  line-height:1.25 !important;
}

.brands-page .brand-product-price{
  margin-top:5px !important;
  font-size:15px !important;
  font-weight:900 !important;
  color:#0c7f4f !important;
}

.brands-page .brand-product-price .old{
  margin-left:6px !important;
  color:#9ca3af !important;
  text-decoration:line-through !important;
  font-weight:700 !important;
}

/* animations */
@keyframes abirBrandsTitleFlow{
  0%,100%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
}

@keyframes abirBrandsCardSpinGlow{
  to{transform:rotate(360deg);}
}

@keyframes abirBrandsFloatBag{
  0%,100%{transform:translateY(0) scale(1);}
  50%{transform:translateY(-8px) scale(1.04);}
}

@keyframes abirBrandNameColor{
  0%{color:#ff006e;-webkit-text-fill-color:#ff006e;}
  25%{color:#8338ec;-webkit-text-fill-color:#8338ec;}
  50%{color:#00a6ff;-webkit-text-fill-color:#00a6ff;}
  75%{color:#00a86b;-webkit-text-fill-color:#00a86b;}
  100%{color:#ff006e;-webkit-text-fill-color:#ff006e;}
}

@keyframes abirBrandNamePulse{
  0%,100%{transform:translateY(0) scale(1);}
  50%{transform:translateY(-1px) scale(1.015);}
}

@media (max-width:360px){
  .brands-page{
    padding-left:20px !important;
    padding-right:20px !important;
  }

  .brands-page .page-title{
    font-size:36px !important;
  }

  .brands-page .page-subtitle{
    font-size:13px !important;
  }

  .brands-page .brand-card .brand-name{
    font-size:30px !important;
  }
}

/* Brand page final layout polish end */


/* Brand title gradient polish start */
/* Only All Brands title + brand card name color animation */

.brands-page .page-title{
  background:linear-gradient(90deg,#ff8a00,#ff2ea6,#7c3aed,#00c2ff,#13c98b,#ff8a00) !important;
  background-size:360% 100% !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
  animation:abirOnlyTextGradientMove 4.5s ease-in-out infinite !important;
}

.brands-page .brand-card .brand-name{
  background:linear-gradient(90deg,#111827,#ff2ea6,#ff8a00,#13c98b,#00c2ff,#7c3aed,#111827) !important;
  background-size:420% 100% !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
  opacity:1 !important;
  filter:none !important;
  mix-blend-mode:normal !important;
  position:relative !important;
  z-index:5 !important;
  animation:abirOnlyBrandNameGradientMove 4s ease-in-out infinite !important;
  text-shadow:0 10px 24px rgba(255,46,166,.10) !important;
}

@keyframes abirOnlyTextGradientMove{
  0%,100%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
}

@keyframes abirOnlyBrandNameGradientMove{
  0%,100%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
}
/* Brand title gradient polish end */


/* Brand title size polish start */
/* Only All Brands title size reduced */
.brands-page .page-title{
  font-size:34px !important;
  line-height:1.08 !important;
}

@media (max-width:360px){
  .brands-page .page-title{
    font-size:30px !important;
  }
}
/* Brand title size polish end */

/* Categories page (Step 5 dynamic) */
.categories-page .categories-intro{
  width:100% !important;
  display:block !important;
  text-align:center !important;
  margin:0 auto 18px !important;
}

.categories-page .categories-intro .page-title{
  width:100% !important;
  display:block !important;
  text-align:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.categories-page .categories-intro .page-subtitle{
  width:100% !important;
  display:block !important;
  text-align:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.categories-page .categories-state{margin:8px 0 14px;font-size:13px;font-weight:700;color:#7a6078;}
.categories-page .category-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.categories-page .category-card{border:1px solid rgba(255,185,85,.2);border-radius:16px;background:#fff;box-shadow:0 8px 20px rgba(0,0,0,.06);padding:10px;text-align:center;}
.categories-page .category-cover{width:100%;height:118px;border-radius:12px;object-fit:cover;background:linear-gradient(135deg,#fff3ec,#fff8f0);border:1px solid rgba(0,0,0,.04);}
.categories-page .category-name{margin-top:8px;font-size:15px;font-weight:900;line-height:1.2;background:linear-gradient(90deg,#111827,#ff2ea6,#ff8a00,#13c98b,#00c2ff,#7c3aed,#111827);background-size:420% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:categoriesCardNameGradientMove 4s ease-in-out infinite;text-align:center;}
.categories-page .category-meta{display:inline-flex !important;align-items:center !important;justify-content:center !important;margin:8px auto 0 !important;padding:5px 13px !important;border-radius:999px !important;background:linear-gradient(135deg,#fff7ed,#fdf2f8,#eef8ff) !important;border:1px solid rgba(255,145,77,.28) !important;box-shadow:0 6px 14px rgba(255,120,100,.10), inset 0 1px 0 rgba(255,255,255,.85) !important;color:#7a4f67 !important;font-size:11.5px !important;font-weight:850 !important;line-height:1 !important;text-align:center !important;}
.categories-page .category-products{margin-top:6px;}
.categories-page .category-products-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;}
.categories-page .category-products-head h3{font-size:18px;font-weight:900;color:#2a1f2a;}
.categories-page .category-back-btn{border:1px solid rgba(255,185,85,.35);background:#fff;border-radius:999px;padding:8px 12px;font-size:13px;font-weight:800;color:#6f4c7a;}
.categories-page .category-products-list{display:grid;gap:10px;}
.categories-page .category-product-card{display:grid;grid-template-columns:82px 1fr;gap:10px;padding:10px;border-radius:14px;background:#fff;border:1px solid rgba(0,0,0,.07);}
.categories-page .category-product-img{width:82px;height:82px;border-radius:10px;object-fit:cover;background:linear-gradient(135deg,#fff3ec,#fff8f0);}
.categories-page .category-product-name{font-size:14px;font-weight:900;color:#2a1f2a;line-height:1.25;}
.categories-page .category-product-code,.categories-page .category-product-tags{margin-top:4px;font-size:12px;font-weight:700;color:#7a6078;}
.categories-page .category-product-price{margin-top:6px;font-size:14px;font-weight:900;color:#1c8f46;display:flex;align-items:center;gap:8px;}
.categories-page .category-product-price .old{text-decoration:line-through;font-size:12px;color:#9a8a9b;font-weight:700;}
.categories-page .categories-intro[hidden],.categories-page #categoryGrid[hidden],.categories-page #categoryProductsSection[hidden]{display:none !important;}
@media (max-width:380px){.categories-page .category-grid{grid-template-columns:1fr;}}

.categories-page .page-title{
  background:linear-gradient(90deg,#ff8a00,#ff2ea6,#7c3aed,#00c2ff,#13c98b,#ff8a00) !important;
  background-size:360% 100% !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
  animation:categoriesTitleGradientMove 4.5s ease-in-out infinite !important;
}

@keyframes categoriesTitleGradientMove{
  0%,100%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
}

@keyframes categoriesCardNameGradientMove{
  0%,100%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
}


/* Category product header layout polish start */
/* Product view header: keep back button left, title balanced beside it */
.categories-page .category-products-head{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:12px !important;
  margin-bottom:12px !important;
}

.categories-page .category-products-head .category-back-btn{
  flex:0 0 auto !important;
}

.categories-page .category-products-head h3{
  flex:1 1 auto !important;
  text-align:center !important;
  margin:0 !important;
  padding-right:8px !important;
}
/* Category product header layout polish end */

/* Step 6: Search page */
.search-page .search-intro{margin-bottom:14px;text-align:center;}
.search-page .search-intro .page-title{font-size:30px;font-weight:950;line-height:1.15;background:linear-gradient(90deg,#ff6a00,#ff2fa8,#8b3cff,#0b8fff,#00c985,#ffd000,#ff6a00);background-size:500% 500%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:brandNameColorSlide 1.7s linear infinite;}
.search-page .search-intro .page-subtitle{margin-top:10px;font-size:14px;font-weight:700;color:#756d78;line-height:1.5;}
.search-page .search-box-wrap{background:#fff;border:1px solid rgba(255,185,85,.24);border-radius:16px;padding:12px;box-shadow:0 8px 22px rgba(0,0,0,.05);}
.search-page .search-label{display:block;font-size:12px;font-weight:850;color:#d6a86f;margin-bottom:8px;letter-spacing:.15px;}
.search-page .search-input{width:100%;height:44px;border-radius:12px;border:1px solid rgba(255,185,85,.35);padding:0 12px;font-size:14px;font-weight:700;color:#251b2e;background:linear-gradient(180deg,#fff,#fff9f4);outline:none;}
.search-page .search-input:focus{border-color:#ff9352;box-shadow:0 0 0 3px rgba(255,147,82,.18);}
.search-page .search-state{margin:12px 0 8px;font-size:13px;font-weight:700;color:#7a6078;}
.search-page .search-count{margin:6px 0 10px;font-size:12px;font-weight:800;color:#6f4c7a;}
.search-page .search-results{display:grid;gap:10px;}
.search-page .search-result-card{display:grid;grid-template-columns:84px 1fr;gap:10px;background:#fff;border:1px solid rgba(0,0,0,.07);border-radius:14px;padding:10px;box-shadow:0 6px 18px rgba(0,0,0,.04);}
.search-page .search-result-img{width:84px;height:84px;border-radius:10px;object-fit:cover;background:linear-gradient(135deg,#fff3ec,#fff8f0);border:1px solid rgba(0,0,0,.04);}
.search-page .search-result-body{min-width:0;}
.search-page .search-result-name{font-size:14px;font-weight:900;color:#2a1f2a;line-height:1.25;}
.search-page .search-result-meta{margin-top:3px;font-size:12px;font-weight:700;color:#7a6078;line-height:1.3;}
.search-page .search-result-price{margin-top:6px;font-size:14px;font-weight:900;color:#1c8f46;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.search-page .search-result-price .old{text-decoration:line-through;font-size:12px;color:#9a8a9b;font-weight:700;}
@media (max-width:380px){.search-page .search-result-card{grid-template-columns:1fr;}.search-page .search-result-img{width:100%;height:170px;}}


/* Search input premium border polish start */
/* Soft premium animated gradient border for search input */
.search-page .search-input{
  border:2px solid transparent !important;
  background:
    linear-gradient(180deg,#ffffff,#fffaf6) padding-box,
    linear-gradient(120deg,#c39ad8,#ff8fc8,#ffb86b,#63d9ff,#c39ad8) border-box !important;
  background-size:auto, 300% 300% !important;
  animation:abirSearchInputBorderGlow 4.5s ease infinite !important;
  box-shadow:0 8px 20px rgba(195,154,216,.10), inset 0 1px 0 rgba(255,255,255,.90) !important;
}

.search-page .search-input:focus{
  border:2px solid transparent !important;
  background:
    linear-gradient(180deg,#ffffff,#fff8fb) padding-box,
    linear-gradient(120deg,#9b5de5,#f15bb5,#ff9f1c,#00bbf9,#9b5de5) border-box !important;
  background-size:auto, 280% 280% !important;
  box-shadow:0 0 0 3px rgba(195,154,216,.16), 0 10px 24px rgba(241,91,181,.14) !important;
}

@keyframes abirSearchInputBorderGlow{
  0%{background-position:0 0,0% 50%;}
  50%{background-position:0 0,100% 50%;}
  100%{background-position:0 0,0% 50%;}
}
/* Search input premium border polish end */

#detailVideoSection{
  display:none !important;
}


@media(min-width:768px){
  .topbar{
    padding:0 16px;
  }

  .home-search-bar{
    max-width:460px;
    margin:0 auto;
  }
}


/* FINAL HEADER SEARCH SIZE OVERRIDE */
.home-search-bar{
  height:30px !important;
  padding:0 8px !important;
}

.home-search-bar .search-icon,
.home-search-bar .search-icon-circle,
.home-search-bar .search-icon-box{
  width:20px !important;
  height:20px !important;
  min-width:20px !important;
}

.home-search-bar svg,
.home-search-bar .search-icon svg{
  width:13px !important;
  height:13px !important;
}

.mg-brand-label,
.brand-chip .mg-brand-label{
  font-size:18px !important;
}

@keyframes chipSoftPulse{
  0%,100%{ box-shadow:0 10px 24px rgba(17,24,39,.09); transform:translateY(0); }
  50%{ box-shadow:0 13px 28px rgba(255,79,154,.14); transform:translateY(-1px); }
}

@keyframes chipShine{
  0%{ left:-78%; opacity:0; }
  18%{ opacity:.9; }
  55%{ left:125%; opacity:0; }
  100%{ left:125%; opacity:0; }
}

@keyframes iconFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-2px); }
}


/* G41B CUSTOMER DETAIL ADVANCED */
.detail-advanced-sections{
  display:grid;
  gap:10px;
  margin-top:10px;
}

.detail-advanced-section{
  border:1px solid rgba(255,185,85,.18);
  border-radius:18px;
  padding:12px;
  background:
    radial-gradient(circle at top left,rgba(255,255,255,.88),transparent 32%),
    linear-gradient(135deg,#fffdf9,#fff6fb,#f4fbff);
  box-shadow:0 8px 18px rgba(17,24,39,.04);
}

.detail-advanced-head h4{
  font-size:14px;
  font-weight:950;
  color:#33223f;
  margin-bottom:3px;
}

.detail-advanced-head p{
  font-size:11.5px;
  font-weight:800;
  color:#8a7d91;
  margin:0 0 10px;
  line-height:1.45;
}

.detail-info-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}

.detail-info-card{
  border-radius:15px;
  padding:10px;
  background:#fff;
  border:1px solid rgba(255,185,85,.18);
  box-shadow:0 6px 14px rgba(17,24,39,.04);
}

.detail-info-card span{
  display:block;
  font-size:10.5px;
  font-weight:900;
  color:#8a7d91;
  margin-bottom:4px;
}

.detail-info-card b{
  display:block;
  font-size:12.5px;
  font-weight:950;
  color:#31263b;
  line-height:1.35;
  word-break:break-word;
}

.detail-info-card.price b,
.detail-info-card.offer b{
  color:#e91e63;
}

.detail-info-card.old b{
  color:#8a7d91;
  text-decoration:line-through;
}

.detail-mini-table{
  margin-top:10px;
  display:grid;
  gap:7px;
}

.detail-mini-title{
  display:block;
  font-size:12px;
  font-weight:950;
  color:#5c4a68;
}

.detail-mini-row{
  display:grid;
  gap:3px;
  border-radius:14px;
  padding:9px 10px;
  background:#fff;
  border:1px solid rgba(255,185,85,.20);
}

.detail-mini-row span{
  font-size:12px;
  font-weight:900;
  color:#4b3f56;
}

.detail-mini-row b{
  font-size:12px;
  color:#e91e63;
}

.detail-mini-row small{
  font-size:11px;
  line-height:1.45;
  color:#8a7d91;
  font-weight:750;
}

.detail-variant-card{
  width:100%;
  border-radius:16px;
  padding:10px;
  background:linear-gradient(135deg,#fff,#fff8f1,#f7fbff);
  border:1px solid rgba(255,185,85,.24);
  box-shadow:0 7px 16px rgba(17,24,39,.04);
}

.detail-variant-card.is-default{
  border-color:rgba(255,79,176,.42);
  box-shadow:0 0 0 2px rgba(255,79,176,.10),0 7px 16px rgba(17,24,39,.04);
}

.detail-variant-card-head{
  display:flex;
  justify-content:space-between;
  gap:8px;
  align-items:center;
  margin-bottom:8px;
}

.detail-variant-card-head b{
  font-size:13px;
  color:#30243a;
  line-height:1.35;
}

.detail-variant-card-head span{
  border-radius:999px;
  padding:4px 8px;
  background:linear-gradient(135deg,#ff4fb0,#0b8fff);
  color:#fff;
  font-size:10px;
  font-weight:950;
}

.detail-variant-card-meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.detail-variant-card-meta span{
  border-radius:999px;
  padding:5px 8px;
  background:#fff;
  color:#62546d;
  border:1px solid rgba(255,185,85,.18);
  font-size:11px;
  font-weight:850;
}

.detail-variant-price{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:8px;
}

.detail-variant-price b{
  color:#e91e63;
  font-size:14px;
  font-weight:950;
}

.detail-variant-price del{
  color:#9aa0aa;
  font-size:12px;
  font-weight:800;
}

.detail-policy-text{
  border-radius:14px;
  padding:10px;
  background:#fff;
  border:1px solid rgba(255,185,85,.16);
  margin-bottom:8px;
}

.detail-policy-text:last-child{
  margin-bottom:0;
}

.detail-policy-text b{
  display:block;
  font-size:12px;
  font-weight:950;
  color:#5c4a68;
  margin-bottom:5px;
}

.detail-policy-text p{
  font-size:12px;
  line-height:1.55;
  color:#756a7d;
  font-weight:700;
  white-space:pre-line;
}

.wide-actions .add{
  background:linear-gradient(135deg,#ff4fb0,#ff7a59,#ffd166);
  color:#111;
}

.wide-actions .order{
  background:linear-gradient(135deg,#0b8fff,#20c997,#22c55e);
  color:#fff;
}

@media(max-width:420px){
  .detail-info-grid{
    grid-template-columns:1fr;
  }
}


/* G41C CHOOSE OPTIONS BOTTOM SHEET */
.product-options-modal{
  align-items:flex-end;
  padding:0;
}

.product-options-sheet{
  width:100%;
  max-width:620px;
  max-height:88vh;
  overflow:auto;
  border-radius:30px 30px 0 0;
  padding:22px 18px 24px;
  background:
    radial-gradient(circle at top left,rgba(255,255,255,.95),transparent 32%),
    linear-gradient(135deg,#fffdf8,#fff5fb,#edfaff);
  box-shadow:0 -18px 50px rgba(15,23,42,.24);
  position:relative;
  animation:mgOptionSlideUp .22s ease-out;
}

@keyframes mgOptionSlideUp{
  from{transform:translateY(28px);opacity:.2}
  to{transform:translateY(0);opacity:1}
}

.option-close{
  position:absolute;
  right:14px;
  top:14px;
}

.option-sheet-head{
  display:grid;
  grid-template-columns:82px 1fr;
  gap:14px;
  align-items:center;
  padding-right:46px;
  margin-bottom:14px;
}

.option-product-media{
  width:82px;
  height:82px;
  border-radius:24px;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#fff,#fff4fb,#ecfbff);
  border:1px solid rgba(255,185,85,.28);
  box-shadow:0 10px 24px rgba(17,24,39,.08);
  font-size:34px;
}

.option-product-media img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.option-sheet-head h3{
  font-size:20px;
  font-weight:950;
  color:#1f1730;
  line-height:1.2;
}

.option-sheet-head p{
  font-size:12px;
  font-weight:800;
  color:#817589;
  margin-top:5px;
}

.option-price-line{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-top:8px;
}

.option-price-line b{
  font-size:20px;
  color:#e91e63;
  font-weight:950;
}

.option-price-line span{
  border-radius:999px;
  padding:5px 9px;
  background:#fff;
  border:1px solid rgba(255,185,85,.25);
  color:#65536f;
  font-size:11px;
  font-weight:900;
}

.option-section{
  border:1px solid rgba(255,185,85,.20);
  background:rgba(255,255,255,.76);
  border-radius:22px;
  padding:12px;
  margin-top:10px;
  box-shadow:0 8px 18px rgba(17,24,39,.04);
}

.option-title-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  margin-bottom:10px;
}

.option-title-row b{
  font-size:14px;
  color:#30243a;
  font-weight:950;
}

.option-title-row span{
  font-size:11px;
  color:#8c7d95;
  font-weight:850;
  text-align:right;
}

.option-variant-grid{
  display:grid;
  gap:9px;
}

.option-variant-card{
  border:1px solid rgba(255,185,85,.22);
  border-radius:18px;
  padding:11px;
  background:#fff;
  text-align:left;
  display:grid;
  gap:5px;
  box-shadow:0 6px 14px rgba(17,24,39,.04);
}

.option-variant-card.is-selected{
  border-color:rgba(255,79,176,.65);
  box-shadow:0 0 0 3px rgba(255,79,176,.10),0 8px 18px rgba(17,24,39,.05);
  background:linear-gradient(135deg,#fff,#fff4fb,#f4fbff);
}

.option-variant-card b{
  font-size:14px;
  color:#21182b;
  font-weight:950;
}

.option-variant-card span{
  font-size:12px;
  color:#6b5d72;
  font-weight:800;
}

.option-variant-card small{
  font-size:11px;
  color:#8c7d95;
  font-weight:800;
}

.option-variant-card strong{
  color:#e91e63;
  font-size:14px;
  font-weight:950;
}

.option-qty-row{
  display:grid;
  grid-template-columns:54px 1fr 54px;
  gap:10px;
}

.option-qty-row button{
  border:0;
  border-radius:16px;
  background:linear-gradient(135deg,#ff4fb0,#0b8fff);
  color:#fff;
  font-size:24px;
  font-weight:950;
}

.option-qty-row input{
  min-height:52px;
  border-radius:16px;
  border:1px solid rgba(255,185,85,.25);
  background:#fff;
  text-align:center;
  font-size:18px;
  font-weight:950;
  color:#1f1730;
}

.option-tier-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}

.option-tier-chip{
  border:1px solid rgba(255,185,85,.25);
  border-radius:16px;
  padding:9px;
  background:#fff;
  display:grid;
  gap:4px;
  text-align:left;
}

.option-tier-chip.is-active{
  background:linear-gradient(135deg,#fff4fb,#eaf9ff);
  border-color:rgba(11,143,255,.36);
}

.option-tier-chip span{
  font-size:11px;
  color:#6b5d72;
  font-weight:900;
}

.option-tier-chip b{
  font-size:12px;
  color:#e91e63;
  font-weight:950;
}

.option-summary-card{
  margin-top:12px;
  border-radius:20px;
  padding:12px;
  background:linear-gradient(135deg,#fff,#fff6e8,#ecfbff);
  border:1px solid rgba(255,185,85,.22);
  display:grid;
  gap:8px;
}

.option-summary-card div{
  display:flex;
  justify-content:space-between;
  gap:12px;
}

.option-summary-card span{
  font-size:12px;
  color:#817589;
  font-weight:900;
}

.option-summary-card b{
  font-size:13px;
  color:#21182b;
  font-weight:950;
  text-align:right;
}

.option-confirm-btn{
  width:100%;
  border:0;
  border-radius:20px;
  margin-top:12px;
  padding:15px 16px;
  color:#fff;
  font-size:16px;
  font-weight:950;
  background:linear-gradient(135deg,#ff4fb0,#0b8fff,#22c55e);
  box-shadow:0 12px 26px rgba(11,143,255,.20);
}

.cart-option-meta{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:7px;
}

.cart-option-meta span{
  border-radius:999px;
  padding:4px 7px;
  background:#fff8f1;
  border:1px solid rgba(255,185,85,.25);
  color:#65536f;
  font-size:10.5px;
  font-weight:800;
}

@media(max-width:420px){
  .product-options-sheet{
    border-radius:26px 26px 0 0;
  }

  .option-tier-list{
    grid-template-columns:1fr;
  }
}

.checkout-account-identity{
  width:100%;
  border:1px solid rgba(201,151,75,.24);
  border-radius:18px;
  padding:11px 13px;
  background:
    radial-gradient(circle at 12% 20%,rgba(255,123,0,.10),transparent 42%),
    radial-gradient(circle at 88% 12%,rgba(47,107,255,.10),transparent 44%),
    linear-gradient(135deg,rgba(255,255,255,.96),rgba(255,250,247,.92));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 10px 20px rgba(38,25,75,.06);
  display:grid;
  gap:4px;
}

.checkout-account-status{
  color:#3f3650;
  font-size:13px;
  font-weight:950;
  line-height:1.25;
}

.checkout-account-detail{
  color:#756d78;
  font-size:12px;
  font-weight:750;
  line-height:1.35;
  overflow-wrap:anywhere;
}

.checkout-account-identity.is-customer-account{
  border-color:rgba(47,107,255,.28);
  background:
    radial-gradient(circle at 12% 20%,rgba(30,203,135,.12),transparent 42%),
    radial-gradient(circle at 88% 12%,rgba(47,107,255,.13),transparent 44%),
    linear-gradient(135deg,rgba(255,255,255,.96),rgba(245,251,255,.92));
}

.wishlist-toggle{
  border:0;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  color:#8b4a66;
  background:rgba(255,255,255,.88);
  box-shadow:0 10px 24px rgba(25,16,13,.10), inset 0 1px 0 rgba(255,255,255,.75);
  transition:transform .16s ease, box-shadow .16s ease, color .16s ease, background .16s ease;
}

.wishlist-toggle:disabled{
  cursor:wait;
  opacity:.72;
}

.wishlist-toggle:active{
  transform:translateY(1px) scale(.96);
}

.wishlist-toggle.is-saved{
  color:#fff;
  background:linear-gradient(135deg,#ff4f9f,#ff6a59,#7b2cff);
  box-shadow:0 12px 24px rgba(255,47,146,.20),0 0 16px rgba(123,44,255,.14);
}

.product-wishlist-toggle{
  position:absolute;
  top:9px;
  right:9px;
  z-index:4;
  width:36px;
  height:36px;
  border-radius:50%;
  font-size:21px;
  backdrop-filter:blur(10px);
}

.detail-wishlist-toggle{
  min-height:44px;
  border-radius:999px;
  padding:0 15px;
  margin:10px 0 12px;
  font-size:14px;
  font-weight:950;
  align-self:flex-start;
}

.detail-wishlist-toggle .wishlist-toggle-icon{
  font-size:19px;
  line-height:1;
}

.customer-wishlist-prompt{
  position:fixed;
  left:50%;
  bottom:92px;
  z-index:900;
  width:min(420px,calc(100vw - 28px));
  transform:translate(-50%,18px);
  opacity:0;
  pointer-events:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:18px;
  padding:12px 13px 12px 15px;
  color:#3f3650;
  background:rgba(255,255,255,.94);
  box-shadow:0 18px 44px rgba(38,25,75,.18),0 0 22px rgba(255,47,146,.12);
  backdrop-filter:blur(14px);
  transition:opacity .2s ease, transform .2s ease;
}

.customer-wishlist-prompt.is-visible{
  opacity:1;
  transform:translate(-50%,0);
  pointer-events:auto;
}

.customer-wishlist-prompt span{
  font-size:13px;
  font-weight:850;
  line-height:1.35;
}

.customer-wishlist-prompt a{
  flex:0 0 auto;
  min-height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:0 12px;
  color:#fff;
  font-size:12px;
  font-weight:950;
  text-decoration:none;
  background:linear-gradient(135deg,#ff7b00,#ff2f92,#2f6bff,#1ecb87);
  box-shadow:0 10px 18px rgba(47,107,255,.15),0 0 14px rgba(255,47,146,.11);
}

.checkout-address-book-panel{
  width:100%;
  border:1px solid rgba(47,107,255,.18);
  border-radius:20px;
  padding:12px;
  background:linear-gradient(135deg,rgba(245,251,255,.96),rgba(255,255,255,.96));
  box-shadow:0 12px 24px rgba(38,25,75,.06);
  display:grid;
  gap:10px;
}

.checkout-address-book-panel[hidden]{
  display:none;
}

.checkout-address-book-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.checkout-address-book-head strong{
  display:block;
  color:#302942;
  font-size:14px;
  font-weight:950;
}

.checkout-address-book-head small{
  display:block;
  color:#746c7c;
  font-size:12px;
  line-height:1.4;
  margin-top:2px;
}

.checkout-address-book-head a,
.checkout-address-book-status a,
.checkout-selected-address-summary a,
.checkout-address-book-card a{
  color:#175cff;
  font-size:12px;
  font-weight:900;
  text-decoration:none;
}

.checkout-address-book-status{
  border-radius:16px;
  padding:11px 12px;
  color:#5d5368;
  background:#fff;
  border:1px dashed rgba(47,107,255,.22);
  font-size:12.5px;
  line-height:1.55;
  font-weight:750;
}

.checkout-address-book-status[hidden]{
  display:none;
}

.checkout-address-book-status.is-empty{
  color:#6b4d1e;
  background:#fff9ec;
  border-color:rgba(255,185,85,.34);
}

.checkout-address-book-list{
  display:grid;
  gap:9px;
}

.checkout-address-book-card{
  cursor:pointer;
  display:flex;
  gap:10px;
  padding:11px;
  border:1px solid rgba(201,151,75,.22);
  border-radius:18px;
  background:#fff;
  box-shadow:0 8px 18px rgba(38,25,75,.05);
}

.checkout-address-book-card:has(input:checked){
  border-color:rgba(37,99,235,.45);
  background:linear-gradient(135deg,rgba(239,246,255,.98),rgba(255,255,255,.98));
}

.checkout-address-book-card input{
  width:auto;
  margin-top:3px;
  accent-color:#2563eb;
}

.checkout-address-book-card-body{
  min-width:0;
  display:grid;
  gap:4px;
  color:#4e4658;
  font-size:12px;
  line-height:1.45;
}

.checkout-address-book-card-body p{
  margin:0;
}

.checkout-address-book-card-head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:7px;
  color:#302942;
}

.checkout-address-book-default{
  border-radius:999px;
  padding:3px 8px;
  background:#eafff1;
  color:#16804f;
  font-size:10px;
  font-weight:950;
}

.checkout-selected-address-summary{
  display:grid;
  gap:4px;
  border-radius:18px;
  padding:11px 12px;
  background:linear-gradient(135deg,rgba(234,255,241,.95),rgba(245,251,255,.95));
  border:1px solid rgba(25,135,84,.18);
  color:#3d4555;
  font-size:12px;
  line-height:1.45;
}

.checkout-selected-address-summary[hidden]{
  display:none;
}

.checkout-selected-address-summary strong{
  color:#17603f;
  font-size:12.5px;
}

/* V154 Shopping Bag Page Foundation */
.bag-page-section{
  min-height:calc(100vh - 170px);
  padding:18px 16px 110px;
}

.bag-shell-card{
  width:min(1080px,100%);
  margin:0 auto;
  border:2px solid transparent;
  border-radius:30px;
  padding:16px;
  background:
    linear-gradient(rgba(255,255,255,.96),rgba(255,255,255,.92)) padding-box,
    conic-gradient(from 0deg,#ff7b00,#ff2f92,#2f6bff,#1ecb87,#ffd84d,#ff7b00) border-box;
  box-shadow:
    0 18px 34px rgba(38,25,75,.12),
    0 0 0 1px rgba(255,255,255,.75) inset,
    0 0 22px rgba(255,47,146,.14),
    0 0 34px rgba(47,107,255,.10),
    0 0 40px rgba(30,203,135,.08);
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

.bag-shell-card::before{
  content:"";
  position:absolute;
  inset:-65%;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(255,47,146,.26) 70deg,rgba(47,107,255,.22) 140deg,rgba(30,203,135,.20) 220deg,transparent 300deg);
  animation:mgAccessCardSpin 7s linear infinite;
  z-index:-2;
}

.bag-shell-card::after{
  content:"";
  position:absolute;
  inset:7px;
  border-radius:24px;
  background:
    radial-gradient(circle at 20% 20%,rgba(255,123,0,.10),transparent 45%),
    radial-gradient(circle at 80% 25%,rgba(47,107,255,.11),transparent 48%),
    radial-gradient(circle at 35% 85%,rgba(30,203,135,.10),transparent 50%),
    linear-gradient(160deg,rgba(255,255,255,.92),rgba(255,255,255,.86));
  z-index:-1;
}

.bag-hero-row{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:14px;
  align-items:center;
  padding:10px 4px 16px;
}

.bag-hero-icon,
.bag-empty-icon{
  width:76px;
  height:76px;
  border-radius:26px;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 25% 20%,rgba(255,255,255,.94),transparent 24%),
    linear-gradient(135deg,#fff4b8,#bfffea 33%,#d7d8ff 66%,#ffd4ea);
  box-shadow:0 16px 30px rgba(47,107,255,.14),0 0 22px rgba(255,47,146,.12);
  position:relative;
  overflow:hidden;
}

.bag-hero-icon::after,
.bag-empty-icon::after{
  content:"";
  position:absolute;
  top:-60%;
  left:-80%;
  width:42%;
  height:180%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.70),transparent);
  transform:rotate(28deg);
  animation:iconShine 3.5s ease-in-out infinite;
}

.bag-hero-icon svg{
  width:38px;
  height:38px;
  stroke:#7b5cff;
  stroke-width:2.25;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 3px 5px rgba(47,107,255,.18));
  position:relative;
  z-index:1;
}

.bag-kicker{
  display:inline-flex;
  margin-bottom:4px;
  font-size:11px;
  font-weight:900;
  color:#7a5572;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.bag-page-title{
  margin:0;
  font-size:clamp(28px,5vw,46px);
  font-weight:950;
  line-height:1.05;
  background:linear-gradient(90deg,#ff7b00,#ff2f92,#2f6bff,#1ecb87,#ff7b00);
  background-size:300% 300%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:mgAccessTextShift 3.8s ease-in-out infinite;
}

.bag-page-subtitle{
  margin:8px 0 0;
  max-width:720px;
  color:#756d78;
  font-size:14px;
  font-weight:700;
  line-height:1.55;
}

.bag-status-card,
.bag-toolbar,
.bag-summary-card,
.bag-item-card,
.bag-empty-state{
  background:linear-gradient(135deg,rgba(255,250,242,.96),rgba(255,255,255,.94));
  border:1px solid rgba(201,151,75,.22);
  border-radius:22px;
  box-shadow:0 14px 30px rgba(38,25,75,.08);
}

.bag-status-card{
  margin:0 0 12px;
  padding:11px 13px;
  color:#5f4c43;
  font-weight:800;
}

.bag-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px;
  margin-bottom:12px;
}

.bag-select-all,
.bag-item-select{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:900;
  color:#3f3346;
}

.bag-select-all input,
.bag-item-select input{
  width:18px;
  height:18px;
  accent-color:#ff2f92;
}

.bag-toolbar-summary{
  display:grid;
  gap:2px;
  text-align:right;
}

.bag-toolbar-summary strong{
  color:#2f2260;
  font-weight:950;
}

.bag-toolbar-summary span{
  color:#ff2f92;
  font-weight:900;
}

.bag-danger-action,
.bag-primary-link,
.bag-secondary-link{
  border:0;
  border-radius:999px;
  min-height:40px;
  padding:10px 14px;
  font-weight:950;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.bag-danger-action,


.bag-danger-action:disabled{
  opacity:.48;
  cursor:not-allowed;
}

.bag-list{
  display:grid;
  gap:12px;
}

.bag-item-card{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) minmax(185px,auto);
  gap:12px;
  align-items:center;
  padding:12px;
  transition:transform .18s ease, box-shadow .18s ease;
}

.bag-item-card:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 34px rgba(38,25,75,.11),0 0 16px rgba(47,107,255,.08);
}

.bag-item-content{
  min-width:0;
  color:inherit;
  text-decoration:none;
  display:grid;
  grid-template-columns:86px minmax(0,1fr);
  gap:12px;
  align-items:center;
}

.bag-item-media{
  width:86px;
  height:86px;
  border-radius:22px;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:linear-gradient(135deg,#fff1c2,#ffd6e8,#d8f7ff);
  font-size:34px;
}

.bag-item-media img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.bag-item-info h3{
  margin:0;
  color:#23142c;
  font-size:15px;
  font-weight:950;
  line-height:1.25;
}

.bag-item-code,
.bag-item-variant{
  margin:5px 0 0;
  color:#756d78;
  font-size:12px;
  line-height:1.4;
}

.bag-price-line{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:8px;
}

.bag-price-line strong{
  color:#ff2f7a;
  font-size:16px;
  font-weight:950;
}

.bag-price-line del{
  color:#9d94a4;
  font-size:12px;
}

.bag-item-side{
  display:grid;
  justify-items:end;
  gap:8px;
}

.bag-qty{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px;
  border-radius:999px;
  background:#fff4ee;
  border:1px solid rgba(255,185,85,.18);
}

.bag-qty button{
  width:30px;
  height:30px;
  border:0;
  border-radius:50%;
  background:#fff;
  color:#3f3346;
  font-size:18px;
  font-weight:950;
  box-shadow:0 8px 14px rgba(38,25,75,.08);
}

.bag-qty b{
  min-width:20px;
  text-align:center;
  color:#23142c;
}

.bag-subtotal{
  display:grid;
  gap:1px;
  text-align:right;
}

.bag-subtotal span{
  color:#756d78;
  font-size:11px;
  font-weight:800;
}

.bag-subtotal b{
  color:#2f2260;
  font-size:15px;
  font-weight:950;
}

.bag-item-actions{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.bag-item-actions button{
  border:1px solid rgba(201,151,75,.22);
  border-radius:999px;
  background:#fff;
  color:#5f4c43;
  padding:8px 10px;
  font-size:12px;
  font-weight:900;
  cursor:pointer;
}

.bag-item-actions button:last-child{
  color:#ff3d71;
}

.bag-summary-card{
  margin-top:12px;
  padding:13px;
}

.bag-summary-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:8px 0;
  color:#6a6170;
  font-weight:800;
  border-bottom:1px solid rgba(201,151,75,.14);
}

.bag-summary-row.total{
  border-bottom:0;
  color:#23142c;
  font-size:18px;
  font-weight:950;
}


.bag-empty-state{
  min-height:420px;
  display:grid;
  place-items:center;
  text-align:center;
  padding:34px 18px;
}

.bag-empty-icon{
  margin:0 auto 14px;
  font-size:36px;
}

.bag-empty-state h2{
  margin:0;
  color:#23142c;
  font-size:24px;
  font-weight:950;
}

.bag-empty-state p{
  margin:8px 0 18px;
  color:#756d78;
  font-weight:700;
}

.bag-empty-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}

.bag-primary-link,


.bag-secondary-link{
  color:#33333a;
  background:linear-gradient(135deg,#ffffff,#fff4ee);
  border:1px solid rgba(255,185,85,.20);
}





@media (max-width:720px){
  .bag-page-section{ padding-inline:10px; }
  .bag-shell-card{ border-radius:26px; padding:12px; }
  .bag-hero-row{ grid-template-columns:1fr; text-align:center; justify-items:center; }
  .bag-page-subtitle{ font-size:13px; }
  .bag-toolbar{ align-items:stretch; flex-wrap:wrap; }
  .bag-toolbar-summary{ margin-left:auto; }
  .bag-danger-action{ width:100%; }
  .bag-item-card{ grid-template-columns:auto minmax(0,1fr); align-items:start; }
  .bag-item-content{ grid-template-columns:74px minmax(0,1fr); }
  .bag-item-media{ width:74px; height:74px; border-radius:20px; }
  .bag-item-side{ grid-column:2; justify-items:start; width:100%; }
  .bag-subtotal{ text-align:left; }
  .bag-item-actions{ justify-content:flex-start; }
  }

.bag-toolbar[hidden],
.bag-summary-card[hidden],
.bag-status-card[hidden]{
  display:none !important;
}


/* === V154 MANUAL BAG POLISH 2 START === */
.bag-page-section{
  padding:14px 12px 118px;
}

.bag-shell-card{
  border-radius:28px;
  padding:14px;
}

.bag-toolbar{
  border:1px solid rgba(255,255,255,.78);
  background:
    linear-gradient(135deg,rgba(255,255,255,.96),rgba(255,250,245,.92)) padding-box,
    linear-gradient(135deg,rgba(255,123,0,.22),rgba(255,47,146,.18),rgba(47,107,255,.16),rgba(30,203,135,.16)) border-box;
  box-shadow:0 14px 30px rgba(38,25,75,.08),0 0 18px rgba(255,47,146,.08);
}

.bag-danger-action{
  min-height:34px;
  padding:7px 16px;
  font-size:12.5px;
  border-radius:999px;
  background:linear-gradient(135deg,#ff5e8d,#ffb09f);
}

.bag-danger-action:disabled{
  opacity:.44;
  filter:saturate(.75);
}

.bag-item-card{
  position:relative;
  border:1.5px solid transparent;
  border-radius:24px;
  padding:12px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.97),rgba(255,253,248,.93)) padding-box,
    linear-gradient(135deg,rgba(255,123,0,.38),rgba(255,47,146,.28),rgba(47,107,255,.22),rgba(30,203,135,.24)) border-box;
  box-shadow:
    0 14px 28px rgba(38,25,75,.09),
    0 0 18px rgba(47,107,255,.07),
    0 0 16px rgba(255,47,146,.06);
}

.bag-item-content{
  grid-template-columns:76px minmax(0,1fr);
  gap:11px;
}

.bag-item-media{
  width:76px;
  height:76px;
  border-radius:20px;
  box-shadow:0 10px 20px rgba(38,25,75,.10);
}

.bag-item-info h3{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  font-size:15.5px;
  line-height:1.23;
}

.bag-item-code{
  font-size:11.5px;
  color:#7b7280;
}

.bag-item-variant{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  color:#6f6775;
  font-size:11.5px;
  line-height:1.42;
  max-width:100%;
}

.bag-price-line{
  margin-top:6px;
}

.bag-price-line strong{
  font-size:16px;
}

.bag-item-side{
  gap:6px;
}

.bag-qty{
  gap:5px;
  padding:3px 6px;
  min-height:28px;
  border-radius:999px;
  background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(255,246,241,.92));
  border:1px solid rgba(255,185,85,.18);
  box-shadow:0 8px 18px rgba(38,25,75,.07);
}

.bag-qty button{
  width:22px;
  height:22px;
  min-width:22px;
  border-radius:50%;
  font-size:14px;
  line-height:1;
  box-shadow:0 5px 10px rgba(38,25,75,.08);
}

.bag-qty b{
  min-width:14px;
  font-size:13px;
  line-height:1;
}

.bag-subtotal span{
  font-size:10.5px;
}

.bag-subtotal b{
  font-size:14px;
}

.bag-item-actions{
  width:100%;
  display:flex;
  justify-content:flex-end;
}

.bag-item-actions [data-bag-wishlist]{
  display:none !important;
}

.bag-item-actions button{
  min-height:30px;
  padding:6px 15px;
  font-size:12px;
  border-color:rgba(255,47,146,.22);
  background:linear-gradient(135deg,#fff,#fff8fb);
}

.bag-item-actions .bag-remove-action,
.bag-item-actions button:last-child{
  color:#ff2f7a;
}







@media (max-width:720px){
  .bag-page-section{
    padding-inline:10px;
    padding-bottom:116px;
  }

  .bag-shell-card{
    padding:11px;
    border-radius:26px;
  }

  .bag-toolbar{
    padding:11px;
    border-radius:22px;
  }

  .bag-item-card{
    grid-template-columns:26px minmax(0,1fr);
    gap:9px;
    padding:11px;
    border-radius:23px;
  }

  .bag-item-select{
    align-self:start;
    padding-top:3px;
  }

  .bag-item-content{
    grid-template-columns:72px minmax(0,1fr);
    gap:10px;
  }

  .bag-item-media{
    width:72px;
    height:72px;
    border-radius:19px;
  }

  .bag-item-info h3{
    font-size:15px;
  }

  .bag-item-side{
    grid-column:2 / 3;
    width:100%;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:8px;
    margin-top:2px;
  }

  .bag-subtotal{
    text-align:left;
  }

  .bag-item-actions{
    justify-content:flex-end;
  }

  .bag-item-actions button{
    min-height:30px;
    padding:6px 13px;
  }

  }

@media (max-width:420px){
  .bag-item-side{
    grid-template-columns:auto 1fr;
  }

  .bag-item-actions{
    grid-column:1 / 3;
    justify-content:flex-start;
  }

  .bag-item-actions button{
    width:auto;
  }
}
/* === V154 MANUAL BAG POLISH 2 END === */


/* === V154 BAG FINAL POLISH 3 START === */
/* Final manual visual polish: compact cards, animated selected stats, visible checkout */
.bag-page-section{
  padding-bottom:210px !important;
}

.bag-shell-card{
  padding:12px !important;
  border-radius:26px !important;
}

.bag-hero-row{
  padding:12px !important;
  gap:10px !important;
}

.bag-hero-icon{
  width:44px !important;
  height:44px !important;
  min-width:44px !important;
}

.bag-page-title{
  font-size:clamp(25px,6vw,34px) !important;
}

.bag-page-subtitle{
  font-size:13px !important;
  line-height:1.45 !important;
}

.bag-toolbar{
  padding:10px !important;
  gap:10px !important;
}

.bag-toolbar-summary strong{
  font-size:18px !important;
}

.bag-toolbar-summary span{
  font-size:18px !important;
  background:linear-gradient(90deg,#ff7b00,#ff2f92,#2f6bff,#1ecb87);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent !important;
}

.bag-danger-action{
  width:100%;
  min-height:32px !important;
  margin-top:2px;
}

.bag-list{
  gap:12px !important;
}

.bag-item-card{
  padding:10px !important;
  border-radius:22px !important;
  grid-template-columns:24px minmax(0,1fr) !important;
  gap:8px !important;
  align-items:start !important;
}

.bag-item-select{
  padding-top:3px !important;
}

.bag-item-select span,
.bag-select-all span::before{
  width:20px !important;
  height:20px !important;
  border-radius:6px !important;
}

.bag-item-content{
  grid-template-columns:64px minmax(0,1fr) !important;
  gap:10px !important;
  align-items:start !important;
}

.bag-item-media{
  width:64px !important;
  height:64px !important;
  border-radius:18px !important;
}

.bag-item-info h3{
  font-size:14.5px !important;
  line-height:1.22 !important;
  margin-bottom:4px !important;
}

.bag-item-code{
  font-size:11px !important;
  margin-bottom:3px !important;
}

.bag-item-variant{
  font-size:11px !important;
  line-height:1.32 !important;
  -webkit-line-clamp:1 !important;
  margin-bottom:4px !important;
}

.bag-price-line{
  margin-top:3px !important;
  gap:7px !important;
}

.bag-price-line strong{
  font-size:15.5px !important;
}

.bag-price-line del{
  font-size:12px !important;
}

.bag-item-side{
  grid-column:2 / 3 !important;
  width:100% !important;
  display:grid !important;
  grid-template-columns:auto 1fr auto !important;
  align-items:end !important;
  gap:7px !important;
  margin-top:0 !important;
}

.bag-qty{
  padding:2px 5px !important;
  min-height:26px !important;
  gap:4px !important;
  align-self:end !important;
}

.bag-qty button{
  width:21px !important;
  height:21px !important;
  min-width:21px !important;
  font-size:13px !important;
}

.bag-qty b{
  min-width:13px !important;
  font-size:12.5px !important;
}

.bag-subtotal{
  text-align:left !important;
  align-self:end !important;
}

.bag-subtotal span{
  font-size:10px !important;
  line-height:1.1 !important;
}

.bag-subtotal b{
  font-size:13.5px !important;
  line-height:1.1 !important;
}

.bag-item-actions{
  justify-content:flex-end !important;
  align-self:end !important;
  width:auto !important;
}

.bag-item-actions button{
  min-height:27px !important;
  padding:5px 12px !important;
  font-size:11.5px !important;
  border-radius:999px !important;
  box-shadow:0 8px 16px rgba(255,47,122,.10) !important;
}













@keyframes mgBagShine{
  0%,55%{transform:rotate(20deg) translateX(-75%);opacity:0}
  70%{opacity:.9}
  100%{transform:rotate(20deg) translateX(75%);opacity:0}
}



@media (max-width:420px){
  .bag-item-card{
    padding:9px !important;
  }

  .bag-item-content{
    grid-template-columns:60px minmax(0,1fr) !important;
    gap:9px !important;
  }

  .bag-item-media{
    width:60px !important;
    height:60px !important;
    border-radius:16px !important;
  }

  .bag-item-side{
    grid-template-columns:auto 1fr auto !important;
    gap:6px !important;
  }

  .bag-item-actions button{
    padding:5px 10px !important;
    font-size:11px !important;
  }






  }
/* === V154 BAG FINAL POLISH 3 END === */





/* === V154 BAG REMOVE COMPACT 5 START === */
/* Move Remove button to bottom-right and remove extra card height */
.bag-item-card{
  position:relative !important;
  padding-bottom:10px !important;
  min-height:auto !important;
}

.bag-item-side{
  position:static !important;
  grid-template-columns:auto minmax(0,1fr) !important;
  align-items:end !important;
  padding-right:88px !important;
  margin-top:-1px !important;
  min-height:30px !important;
}

.bag-item-actions{
  position:absolute !important;
  right:12px !important;
  bottom:10px !important;
  width:auto !important;
  display:flex !important;
  justify-content:flex-end !important;
  align-items:center !important;
  z-index:3 !important;
}

.bag-item-actions .bag-remove-action,
.bag-item-actions button:last-child{
  min-height:28px !important;
  padding:5px 13px !important;
  border-radius:999px !important;
  color:#ff2f7a !important;
  font-size:11.5px !important;
  font-weight:900 !important;
  background:
    linear-gradient(135deg,rgba(255,255,255,.98),rgba(255,246,251,.94)) padding-box,
    linear-gradient(135deg,rgba(255,123,0,.28),rgba(255,47,146,.55),rgba(47,107,255,.22)) border-box !important;
  border:1px solid transparent !important;
  box-shadow:0 8px 16px rgba(255,47,122,.12),0 0 12px rgba(255,47,146,.08) !important;
}

.bag-item-actions .bag-remove-action:active,
.bag-item-actions button:last-child:active{
  transform:scale(.97);
}

.bag-qty{
  align-self:end !important;
}

.bag-subtotal{
  align-self:end !important;
  text-align:left !important;
}

.bag-item-info h3{
  margin-bottom:3px !important;
}

.bag-item-code{
  margin-bottom:2px !important;
}

.bag-item-variant{
  margin-bottom:3px !important;
}

.bag-price-line{
  margin-top:2px !important;
  margin-bottom:0 !important;
}

@media (max-width:720px){
  .bag-item-card{
    padding-bottom:9px !important;
  }

  .bag-item-side{
    grid-column:2 / 3 !important;
    grid-template-columns:auto minmax(0,1fr) !important;
    padding-right:84px !important;
    gap:7px !important;
  }

  .bag-item-actions{
    right:11px !important;
    bottom:9px !important;
  }
}

@media (max-width:420px){
  .bag-item-card{
    padding-bottom:8px !important;
  }

  .bag-item-side{
    grid-template-columns:auto minmax(0,1fr) !important;
    padding-right:78px !important;
    gap:6px !important;
  }

  .bag-item-actions{
    right:10px !important;
    bottom:8px !important;
  }

  .bag-item-actions .bag-remove-action,
  .bag-item-actions button:last-child{
    min-height:27px !important;
    padding:5px 11px !important;
    font-size:11px !important;
  }
}
/* === V154 BAG REMOVE COMPACT 5 END === */


/* === V154 BAG MINI HEIGHT 6 START === */
/* Only reduce the sticky 3 mini-card height/spacing. Keep same design. */
.bag-page-section{
  padding-bottom:148px !important;
}







@media (max-width:720px){
  .bag-page-section{
    padding-bottom:146px !important;
  }



}

@media (max-width:420px){
  .bag-page-section{
    padding-bottom:144px !important;
  }





}
/* === V154 BAG MINI HEIGHT 6 END === */


/* === V154 CHECKOUT ACTIVE CARD 7 START === */
/* Only active selected checkout card polish. Before item selection stays unchanged. */

/* When selected, show only one clean bigger Checkout text */


/* Keep disabled/unselected checkout card exactly soft and simple */



@keyframes mgCheckoutActiveFlow{
  0%{
    background-position:0% 50%;
    transform:translateY(0);
  }
  50%{
    background-position:100% 50%;
    transform:translateY(-1px);
  }
  100%{
    background-position:0% 50%;
    transform:translateY(0);
  }
}

@media (max-width:420px){
}
/* === V154 CHECKOUT ACTIVE CARD 7 END === */

/* Legacy V159 listing product-card overrides retired: canonical customer product grid is css/customer/product-card.css. */

/* Legacy V161B home/detail product-grid overrides retired: canonical customer product grid is css/customer/product-card.css. */

/* V164C feed batch load more */
.mg-load-more-wrap {
  display: flex;
  justify-content: center;
  margin: 18px 0 6px;
}

.mg-load-more-wrap[hidden] {
  display: none !important;
}

.mg-load-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(15, 23, 42, 0.18);
  border-radius: 999px;
  background: #fff;
  color: inherit;
  font: inherit;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.mg-load-more-btn:hover,
.mg-load-more-btn:focus-visible {
  border-color: rgba(15, 23, 42, 0.32);
}

.mg-load-more-btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.mg-load-more-btn[hidden],
.mg-load-more-btn:disabled {
  display: none !important;
  cursor: default;
}


.mg-scroll-load-sentinel {
  display: block;
  width: 100%;
  min-height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

.mg-scroll-load-sentinel[hidden] {
  display: none !important;
}

.mg-scroll-load-sentinel .mg-load-more-btn {
  display: none !important;
}


/* V166C Home cursor skeleton: no blank/no loading text/no empty text */
.product-card-skeleton {
  pointer-events: none;
  cursor: default;
}

.product-card-skeleton-media,
.product-card-skeleton-line {
  display: block;
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(148, 163, 184, 0.14), rgba(148, 163, 184, 0.30), rgba(148, 163, 184, 0.14));
  background-size: 240% 100%;
  animation: mgSkeletonPulse 1.35s ease-in-out infinite;
}

.product-card-skeleton-media {
  width: 100%;
  min-height: 170px;
}

.product-card-skeleton-line {
  height: 12px;
  margin: 10px 0;
}

.product-card-skeleton-title {
  width: 84%;
}

.product-card-skeleton-price {
  width: 48%;
  height: 16px;
}

.product-card-skeleton-meta {
  width: 66%;
}

@keyframes mgSkeletonPulse {
  0% {
    background-position: 120% 0;
  }
  100% {
    background-position: -120% 0;
  }
}


/* V166D first-paint skeleton guard */
#featuredProductGrid {
  min-height: 420px;
}

.home-static-skeleton-card {
  opacity: 1;
}

/* V166F home single-row card height guard */
#featuredProductGrid {
  align-items: start;
  align-content: start;
}

#featuredProductGrid > .product-card {
  align-self: start;
}

/* V172B Search Suggestions UX */
.search-suggestions {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid rgba(181, 120, 224, .18);
  border-radius: 22px;
  background:
    radial-gradient(circle at 0 0, rgba(255, 216, 244, .58), transparent 36%),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,244,255,.92));
  box-shadow: 0 14px 34px rgba(115, 72, 160, .12);
}

.search-suggestions[hidden] {
  display: none !important;
}

.search-suggestions-title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 10px;
  color: #6a4871;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .02em;
}

.search-suggestions-title::before {
  content: "✦";
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  color: #fff;
  font-size: 10px;
  box-shadow: 0 8px 18px rgba(217, 70, 239, .25);
}

.search-suggestion-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.search-suggestion-chip {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,246,253,.96)) padding-box,
    linear-gradient(135deg, #f59e0b, #ec4899, #3b82f6) border-box;
  border: 1px solid transparent;
  box-shadow: 0 8px 18px rgba(115, 72, 160, .13);
  color: #51365f;
  cursor: pointer;
  font: 900 12px/1.15 system-ui, -apple-system, Segoe UI, sans-serif;
  padding: 9px 12px;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.search-suggestion-chip::before {
  content: "⌕";
  margin-right: 5px;
  color: #9b4dd8;
  font-weight: 900;
}

.search-suggestion-chip:active {
  transform: scale(.97);
  filter: brightness(.98);
}

@media (min-width: 768px) {
  .search-suggestion-chip:hover {
    box-shadow: 0 12px 26px rgba(115, 72, 160, .2);
    transform: translateY(-1px);
  }
}

/* V172C Search Filter Sort Foundation */
.search-filter-sort {
  margin: 12px 0 10px;
  padding: 13px;
  border: 1px solid rgba(120, 91, 191, .15);
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0, rgba(59,130,246,.12), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,248,252,.92));
  box-shadow: 0 12px 30px rgba(91, 59, 136, .1);
}

.search-filter-sort[hidden] {
  display: none !important;
}

.search-filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 11px;
}

.search-filter-kicker {
  color: #b4767b;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.search-filter-head h3 {
  margin: 2px 0 0;
  color: #3c2847;
  font-size: 15px;
  font-weight: 950;
}

.search-filter-reset {
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #fff, #fff4fb);
  box-shadow: 0 7px 18px rgba(145, 71, 178, .13);
  color: #704276;
  font: 900 12px/1 system-ui, -apple-system, Segoe UI, sans-serif;
  padding: 9px 12px;
}

.search-filter-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
}

.search-filter-field {
  display: grid;
  gap: 6px;
  color: #6f5677;
  font-size: 11px;
  font-weight: 900;
}

.search-filter-field select,
.search-filter-field input {
  width: 100%;
  min-height: 40px;
  border: 1px solid rgba(185, 122, 205, .28);
  border-radius: 14px;
  background: linear-gradient(180deg, #fff, #fff9fd);
  color: #2b1f31;
  font: 850 13px/1.2 system-ui, -apple-system, Segoe UI, sans-serif;
  outline: none;
  padding: 0 11px;
}

.search-filter-field select:focus,
.search-filter-field input:focus {
  border-color: rgba(236, 72, 153, .45);
  box-shadow: 0 0 0 3px rgba(236, 72, 153, .12);
}

.search-filter-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 11px;
}

.search-filter-toggle {
  border: 1px solid rgba(245, 158, 11, .22);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,249,237,.92));
  box-shadow: 0 8px 18px rgba(158, 91, 25, .09);
  color: #68425d;
  font: 900 12px/1.15 system-ui, -apple-system, Segoe UI, sans-serif;
  padding: 10px 12px;
}

.search-filter-toggle[data-active="true"] {
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(250,245,255,.92)) padding-box,
    linear-gradient(135deg, #f59e0b, #ec4899, #3b82f6) border-box;
  border: 1px solid transparent;
  color: #3f2b59;
  box-shadow: 0 10px 24px rgba(136, 82, 181, .16);
}

@media (min-width: 560px) {
  .search-filter-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* V172D Search UX Production Polish */
.search-page .search-box-wrap {
  border-radius: 26px;
  background:
    radial-gradient(circle at 0 0, rgba(255, 216, 244, .46), transparent 38%),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,250,245,.95));
  box-shadow: 0 18px 46px rgba(119, 69, 143, .11);
}

.search-page .search-input {
  min-height: 52px;
  border-radius: 18px;
  border-color: rgba(224, 120, 201, .36);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

.search-page .search-state {
  border-radius: 18px;
  color: #765579;
  font-size: 14px;
  line-height: 1.4;
}

.search-page .search-count {
  color: #6b4578;
  font-size: 14px;
  font-weight: 950;
}

.search-active-filters {
  margin: 10px 0 12px;
}

.search-active-filters[hidden] {
  display: none !important;
}

.search-active-filter-summary {
  margin: 0 0 8px;
  color: #7a6078;
  font-size: 12px;
  font-weight: 900;
}

.search-active-filter-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.search-active-filter-chip,
.search-active-filter-clear {
  appearance: none;
  -webkit-appearance: none;
  border-radius: 999px;
  cursor: pointer;
  font: 900 12px/1.15 system-ui, -apple-system, Segoe UI, sans-serif;
  padding: 9px 12px;
}

.search-active-filter-chip {
  border: 1px solid rgba(236, 72, 153, .22);
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,244,251,.95)) padding-box,
    linear-gradient(135deg, #f59e0b, #ec4899, #3b82f6) border-box;
  border: 1px solid transparent;
  color: #51365f;
  box-shadow: 0 9px 20px rgba(126, 75, 156, .12);
}

.search-active-filter-chip span {
  margin-left: 7px;
  color: #c0267a;
}

.search-active-filter-clear {
  border: 0;
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  color: #fff;
  box-shadow: 0 10px 24px rgba(168, 85, 247, .2);
}

.search-filter-reset {
  transition: transform .16s ease, box-shadow .16s ease;
}

.search-filter-reset:active,
.search-active-filter-chip:active,
.search-active-filter-clear:active {
  transform: scale(.97);
}

.search-filter-toggle[data-active="true"]::before {
  content: "✓";
  margin-right: 6px;
  color: #16a34a;
  font-weight: 950;
}

@media (max-width: 520px) {
  .search-filter-sort {
    border-radius: 24px;
    padding: 14px;
  }

  .search-filter-grid {
    gap: 10px;
  }

  .search-suggestions,
  .search-filter-sort {
    margin-left: -1px;
    margin-right: -1px;
  }
}

/* V172E Search Final Behavior Polish */
.search-page .search-box-wrap {
  overflow: hidden;
}

.search-page .search-count {
  display: inline-flex;
  align-items: center;
  width: auto;
  min-height: 34px;
  padding: 7px 13px;
  border: 1px solid rgba(186, 126, 206, .16);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,246,252,.88));
  box-shadow: 0 8px 20px rgba(124, 74, 153, .08);
}

.search-state[hidden] {
  display: none !important;
}

.search-state-card {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 12px 0 10px;
  padding: 13px 14px;
  border: 1px solid rgba(186, 126, 206, .16);
  border-radius: 22px;
  background:
    radial-gradient(circle at 0 0, rgba(255,216,244,.38), transparent 36%),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(250,247,255,.92));
  box-shadow: 0 12px 30px rgba(112, 67, 141, .1);
  color: #634a6d;
}

.search-state-icon {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  color: #fff;
  font-weight: 950;
  box-shadow: 0 9px 20px rgba(168, 85, 247, .22);
}

.search-state-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.search-state-copy strong {
  color: #3d2a48;
  font-size: 14px;
  font-weight: 950;
  line-height: 1.25;
}

.search-state-copy span {
  color: #765c7e;
  font-size: 13px;
  font-weight: 760;
  line-height: 1.35;
}

.search-state-error .search-state-icon {
  background: linear-gradient(135deg, #ef4444, #ec4899);
}

.search-state-filter .search-state-icon {
  background: linear-gradient(135deg, #f59e0b, #8b5cf6);
}

.search-filter-sort {
  scroll-margin-top: 96px;
}

.search-active-filter-chip,
.search-active-filter-clear,
.search-filter-reset,
.search-filter-toggle,
.search-suggestion-chip {
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 420px) {
  .search-state-card {
    padding: 12px;
    border-radius: 20px;
  }

  .search-state-copy strong {
    font-size: 13px;
  }

  .search-state-copy span {
    font-size: 12px;
  }

  .search-page .search-count {
    font-size: 13px;
  }
}

/* V179N nav relocation: bottom Account is a drawer button, styled like a nav item */
.bottom-nav button.nav-item{
  border:0;
  background:transparent;
  padding:0;
  font:inherit;
  color:inherit;
  -webkit-appearance:none;
  appearance:none;
}

/* V179O compact header bottom nav spacing */
.topbar{
  min-height:55px;
}

.home-search-bar{
  height:28px;
  margin-left:6px;
  margin-right:6px;
}

.premium-mg-logo{
  width:36px;
  height:36px;
}

.mg-brand-label{
  font-size:16px;
}

.top-icon-btn{
  width:26px;
  height:26px;
  border-radius:9px;
}

.top-icon-btn svg{
  width:15px;
  height:15px;
}

.bottom-nav-wrap{
  padding-top:7px;
  padding-bottom:calc(7px + env(safe-area-inset-bottom, 0px));
}

.bottom-nav{
  min-height:58px;
  padding:7px 9px;
}

.bottom-nav .nav-item{
  min-height:46px;
  font-size:10.5px;
  gap:3px;
}

.bottom-nav .color-icon{
  width:28px;
  height:28px;
}

.bottom-nav .color-icon svg{
  width:18px;
  height:18px;
}

.bottom-nav .bag-count{
  top:-4px;
  right:-5px;
}

@media(max-width:390px){
  .topbar{
    height:55px;
    min-height:55px;
    padding-left:10px;
    padding-right:10px;
  }

  .home-search-bar{
    height:28px;
    margin-left:4px;
    margin-right:4px;
    padding-left:8px;
    padding-right:8px;
  }

  .premium-mg-logo{
    width:34px;
    height:34px;
  }

  .top-icon-btn{
    width:25px;
    height:25px;
    border-radius:9px;
  }

  .top-icon-btn svg{
    width:14px;
    height:14px;
  }

  .bottom-nav{
    min-height:56px;
    padding:6px 8px;
  }

  .bottom-nav .nav-item{
    min-height:44px;
    font-size:10px;
  }

  .bottom-nav .color-icon{
    width:27px;
    height:27px;
  }

  .bottom-nav .color-icon svg{
    width:17px;
    height:17px;
  }
}

@media(max-width:360px){
  .topbar{
    height:54px;
    min-height:54px;
  }

  .home-search-bar{
    height:27px;
  }

  .premium-mg-logo{
    width:33px;
    height:33px;
  }

  .bottom-nav{
    min-height:54px;
  }

  .bottom-nav .nav-item{
    min-height:42px;
    font-size:9.8px;
  }

  .bottom-nav .color-icon{
    width:26px;
    height:26px;
  }
}

/* V179O2 tight bottom nav surface and soft active state */
.bottom-nav-wrap{
  padding-top:0;
  padding-bottom:0;
}

.bottom-nav{
  height:58px;
  min-height:58px;
  padding:2px 8px 3px;
}

.bottom-nav .nav-item{
  height:50px;
  min-height:50px;
  gap:2px;
  font-size:10px;
  line-height:1.1;
}

.bottom-nav .color-icon{
  width:26px;
  height:26px;
  border-radius:11px;
}

.bottom-nav .color-icon svg{
  width:17px;
  height:17px;
}

.bottom-nav .nav-item.active{
  background:transparent;
  color:#262631;
  border-radius:0;
  height:50px;
  min-height:50px;
  flex-direction:column;
  gap:2px;
  padding:0;
  box-shadow:none;
  margin-top:0;
}

.bottom-nav .nav-item.active .color-icon{
  width:26px;
  height:26px;
  border-radius:11px;
  background:inherit;
  box-shadow:
    inset 0 0 10px rgba(255,255,255,.42),
    0 7px 14px rgba(0,0,0,.12);
  filter:saturate(1.22) brightness(.86) contrast(1.08);
}

.bottom-nav .nav-item.active .color-icon svg{
  width:17px;
  height:17px;
  stroke:#fff;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.20));
}

.bottom-nav .nav-item.active .color-icon::after,
.bottom-nav .nav-item.active span{
  display:block;
}

.bottom-nav .nav-item.active span{
  color:#202027;
  font-weight:900;
}

@media(max-width:390px){
  .bottom-nav{
    height:56px;
    min-height:56px;
    padding:2px 7px 2px;
  }

  .bottom-nav .nav-item,
  .bottom-nav .nav-item.active{
    height:48px;
    min-height:48px;
    font-size:9.7px;
    gap:2px;
  }

  .bottom-nav .color-icon,
  .bottom-nav .nav-item.active .color-icon{
    width:25px;
    height:25px;
    border-radius:10px;
  }

  .bottom-nav .color-icon svg,
  .bottom-nav .nav-item.active .color-icon svg{
    width:16px;
    height:16px;
  }
}

@media(max-width:360px){
  .bottom-nav{
    height:54px;
    min-height:54px;
    padding:1px 7px 2px;
  }

  .bottom-nav .nav-item,
  .bottom-nav .nav-item.active{
    height:46px;
    min-height:46px;
    font-size:9.5px;
  }

  .bottom-nav .color-icon,
  .bottom-nav .nav-item.active .color-icon{
    width:24px;
    height:24px;
  }
}

/* V179O3 normalize bottom account button font and final tight nav */
.bottom-nav{
  height:54px;
  min-height:54px;
  padding:1px 8px 2px;
}

.bottom-nav .nav-item,
.bottom-nav button.nav-item,
.bottom-nav .nav-item.active,
.bottom-nav button.nav-item.active{
  height:46px;
  min-height:46px;
  gap:1px;
  font-size:9.6px;
  line-height:1.08;
  font-family:inherit;
  font-weight:800;
  letter-spacing:0;
  text-decoration:none;
  transform:none;
}

.bottom-nav button.nav-item{
  border:0;
  background:transparent;
  padding:0;
  margin:0;
  color:#4c4c55;
  -webkit-appearance:none;
  appearance:none;
}

.bottom-nav .color-icon,
.bottom-nav .nav-item.active .color-icon{
  width:24px;
  height:24px;
  border-radius:10px;
}

.bottom-nav .color-icon svg,
.bottom-nav .nav-item.active .color-icon svg{
  width:16px;
  height:16px;
}

.bottom-nav .nav-item.active{
  background:transparent;
  color:#202027;
  border-radius:0;
  flex-direction:column;
  padding:0;
  box-shadow:none;
  margin-top:0;
}

.bottom-nav .nav-item.active span{
  display:block;
  color:#202027;
  font-size:9.6px;
  line-height:1.08;
  font-weight:900;
}

.bottom-nav .nav-item.active .color-icon{
  filter:saturate(1.2) brightness(.86) contrast(1.08);
}

@media(max-width:390px){
  .bottom-nav{
    height:52px;
    min-height:52px;
    padding:1px 7px 1px;
  }

  .bottom-nav .nav-item,
  .bottom-nav button.nav-item,
  .bottom-nav .nav-item.active,
  .bottom-nav button.nav-item.active{
    height:44px;
    min-height:44px;
    font-size:9.2px;
  }

  .bottom-nav .nav-item.active span{
    font-size:9.2px;
  }

  .bottom-nav .color-icon,
  .bottom-nav .nav-item.active .color-icon{
    width:23px;
    height:23px;
  }

  .bottom-nav .color-icon svg,
  .bottom-nav .nav-item.active .color-icon svg{
    width:15px;
    height:15px;
  }
}

@media(max-width:360px){
  .bottom-nav{
    height:50px;
    min-height:50px;
  }

  .bottom-nav .nav-item,
  .bottom-nav button.nav-item,
  .bottom-nav .nav-item.active,
  .bottom-nav button.nav-item.active{
    height:42px;
    min-height:42px;
    font-size:9px;
  }

  .bottom-nav .nav-item.active span{
    font-size:9px;
  }

  .bottom-nav .color-icon,
  .bottom-nav .nav-item.active .color-icon{
    width:22px;
    height:22px;
  }
}

/* V179Q premium active bottom nav icon color and animated label */
.bottom-nav .nav-item.active .color-icon{
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.45), transparent 28%),
    linear-gradient(135deg,#ffb347 0%,#ff2fb3 34%,#7b2cff 66%,#00c896 100%);
  filter:none;
  color:#24113f;
  box-shadow:
    inset 0 0 8px rgba(255,255,255,.42),
    0 6px 12px rgba(123,44,255,.16);
}

.bottom-nav .nav-item.active .color-icon svg,
.bottom-nav .nav-item.active .color-icon svg *{
  stroke:#24113f !important;
  color:#24113f !important;
}

.bottom-nav .nav-item.active > span{
  background:linear-gradient(
    90deg,
    #ff6b35,
    #ff2fb3,
    #7b2cff,
    #009dff,
    #00c896,
    #ffb300,
    #ff6b35
  );
  background-size:600% 600%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:
    bottomNavActiveLabelRainbow 1.7s linear infinite,
    bottomNavActiveLabelGlow 1.25s ease-in-out infinite alternate;
}

@keyframes bottomNavActiveLabelRainbow{
  0%{background-position:0% 50%;}
  100%{background-position:100% 50%;}
}

@keyframes bottomNavActiveLabelGlow{
  0%{
    filter:drop-shadow(0 0 2px rgba(255,47,179,.12));
  }
  100%{
    filter:drop-shadow(0 0 5px rgba(0,157,255,.22));
  }
}

/* V179Q2 keep bottom bag count visible during active nav animation */
.bottom-nav .nav-item.active .color-icon .bag-count,
.bottom-nav .nav-item.active .bag-count{
  background:linear-gradient(135deg,#ff1744,#ff4f9a) !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  animation:none !important;
  filter:none !important;
  text-shadow:none !important;
}

/* V179Q3 show bottom bag count and prevent clipping */
.bottom-nav .bag-grad{
  overflow:visible;
}

.bottom-nav .bag-grad::after{
  display:none;
}

.bottom-nav .bag-grad.has-bag-items .bag-count,
.bottom-nav .nav-item.active .bag-grad.has-bag-items .bag-count,
.bottom-nav .nav-item.active .color-icon.bag-grad.has-bag-items .bag-count{
  display:block !important;
  top:-7px;
  right:-7px;
  min-width:15px;
  height:15px;
  padding:0 4px;
  line-height:15px;
  font-size:9px;
  z-index:30;
  pointer-events:none;
  background:linear-gradient(135deg,#ff1744,#ff4f9a) !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  animation:none !important;
  filter:none !important;
  text-shadow:none !important;
  box-shadow:0 0 10px rgba(255,23,68,.45);
}

/* V179Q4 keep bottom bag badge fully inside icon corner */
.bottom-nav .bag-grad.has-bag-items .bag-count,
.bottom-nav .nav-item.active .bag-grad.has-bag-items .bag-count,
.bottom-nav .nav-item.active .color-icon.bag-grad.has-bag-items .bag-count{
  top:-1px !important;
  right:-1px !important;
  min-width:13px !important;
  width:auto !important;
  height:13px !important;
  padding:0 3px !important;
  line-height:13px !important;
  font-size:8px !important;
  border:1px solid #fff !important;
  box-sizing:border-box !important;
  z-index:60 !important;
}

/* V179Q5 hide zero bottom bag badge and show only real count */
.bottom-nav .nav-item.active .bag-count{
  display:none !important;
}

.bottom-nav .bag-grad.has-bag-items .bag-count,
.bottom-nav .nav-item.active .bag-grad.has-bag-items .bag-count,
.bottom-nav .nav-item.active .color-icon.bag-grad.has-bag-items .bag-count{
  display:block !important;
}

/* V179R account full page top three dot menu */
.account-fullpage-topbar{
  justify-content:flex-start;
  gap:0;
  padding-left:14px;
  padding-right:14px;
}

.account-three-dot-menu{
  position:relative;
  display:block;
}

.account-three-dot-trigger{
  width:34px;
  height:34px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:3px;
  cursor:pointer;
  list-style:none;
  background:linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,248,244,.92));
  border:1px solid rgba(255,122,61,.18);
  box-shadow:0 8px 18px rgba(17,24,39,.08), inset 0 0 0 1px rgba(255,255,255,.72);
}

.account-three-dot-trigger::-webkit-details-marker{
  display:none;
}

.account-dot{
  width:4px;
  height:4px;
  border-radius:999px;
  background:linear-gradient(135deg,#ff6b35,#ff2fb3,#009dff,#00c896);
  box-shadow:0 0 8px rgba(255,47,179,.24);
}

.account-three-dot-panel{
  position:absolute;
  top:42px;
  left:0;
  width:min(292px, calc(100vw - 28px));
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:16px;
  border-radius:22px;
  background:linear-gradient(145deg, rgba(255,255,255,.98), rgba(246,252,255,.94));
  border:1px solid rgba(255,122,61,.16);
  box-shadow:0 18px 44px rgba(17,24,39,.16);
  z-index:120;
}

.account-three-dot-panel a{
  display:block;
  padding:11px 12px;
  border-radius:16px;
  text-decoration:none;
  font-weight:900;
  font-size:15px;
  color:#4a2a23;
  background:linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,250,246,.86));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.8), 0 7px 18px rgba(17,24,39,.06);
}

.account-three-dot-panel a:nth-child(even){
  color:#6d3cc9;
}

.account-three-dot-panel a:active{
  transform:scale(.985);
}

/* V179R2 account title moved to top header */
.account-fullpage-topbar{
  position:relative;
}

.account-fullpage-title{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  margin:0;
  white-space:nowrap;
  font-size:20px;
  line-height:1;
  font-weight:1000;
  letter-spacing:-.3px;
  background:linear-gradient(90deg,#ff6b35,#ff2fb3,#7b2cff,#009dff,#00c896,#ff6b35);
  background-size:500% 500%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:bottomNavActiveLabelRainbow 2.2s linear infinite;
}

@media(max-width:390px){
  .account-fullpage-title{
    font-size:18px;
  }
}

@media(max-width:360px){
  .account-fullpage-title{
    font-size:17px;
  }
}

/* V179R3 profile icon state and header settings panel */
.account-fullpage-topbar{
  position:fixed;
  top:0;
  left:50%;
  transform:translateX(-50%);
  justify-content:flex-start;
}

.account-header-profile-icon,
.account-profile-settings-menu{
  display:none;
}

.account-header-profile-icon,
.account-header-settings-trigger{
  width:34px;
  height:34px;
  border-radius:14px;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#ff6b35,#ff2fb3,#7b2cff,#009dff,#00c896);
  box-shadow:0 8px 18px rgba(123,44,255,.18), inset 0 0 0 1px rgba(255,255,255,.56);
  color:#1f1730;
}

.account-header-profile-icon svg,
.account-header-settings-trigger svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:#24113f;
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.account-profile-settings-menu{
  position:relative;
  margin-left:auto;
}

.account-header-settings-trigger{
  display:inline-flex;
  cursor:pointer;
  list-style:none;
}

.account-header-settings-trigger::-webkit-details-marker{
  display:none;
}

.account-profile-settings-panel{
  position:absolute;
  top:42px;
  right:0;
  width:min(330px, calc(100vw - 28px));
  padding:12px;
  border-radius:24px;
  background:linear-gradient(145deg, rgba(255,255,255,.98), rgba(246,252,255,.95));
  border:1px solid rgba(255,122,61,.16);
  box-shadow:0 18px 44px rgba(17,24,39,.16);
  z-index:150;
}

.account-profile-settings-panel .account-summary-card{
  border:0;
  border-radius:20px;
  background:transparent;
  box-shadow:none;
  padding:4px 2px 2px;
}

.account-profile-settings-panel .account-summary-card::before,
.account-profile-settings-panel .account-summary-card::after{
  display:none;
}

.account-profile-settings-panel .account-summary-icon{
  width:50px;
  height:50px;
  border-radius:18px;
}

.account-profile-settings-panel .account-summary-icon svg{
  width:30px;
  height:30px;
}

.account-profile-settings-panel .account-summary-card h2{
  font-size:19px;
}

.account-profile-settings-panel .account-summary-status{
  font-size:13px;
}

.account-profile-settings-panel .account-summary-details{
  border-radius:17px;
  padding:11px 10px;
}

.account-profile-settings-panel .account-logout-btn{
  min-height:46px;
  border-radius:16px;
}

.app:has(#loggedInDashboardView:not([hidden])) .account-three-dot-menu{
  display:none;
}

.app:has(#loggedInDashboardView:not([hidden])) .account-header-profile-icon{
  display:inline-grid;
}

.app:has(#loggedInDashboardView:not([hidden])) .account-profile-settings-menu{
  display:block;
}

@media(max-width:390px){
  .account-profile-settings-panel{
    right:-6px;
    width:min(316px, calc(100vw - 20px));
  }
}

@media(max-width:360px){
  .account-profile-settings-panel{
    right:-8px;
    width:min(300px, calc(100vw - 16px));
  }
}

/* V179R4 original icon style and full profile settings page */
.account-header-profile-icon{
  background:
    radial-gradient(circle at 25% 20%,rgba(255,255,255,.94),transparent 26%),
    linear-gradient(135deg,rgba(255,224,171,.72),rgba(196,239,255,.70),rgba(226,219,255,.70),rgba(255,219,238,.72));
  box-shadow:inset 0 0 16px rgba(255,255,255,.70),0 10px 22px rgba(47,107,255,.12),0 0 18px rgba(255,47,146,.13);
  animation:accountIconFloat 2.8s ease-in-out infinite;
}

.account-header-profile-icon svg{
  stroke:rgba(68,58,92,.68);
  stroke-width:2.4;
  filter:drop-shadow(0 0 8px rgba(47,107,255,.18));
}

.account-header-settings-link{
  text-decoration:none;
}

.account-header-settings-link .account-header-settings-trigger{
  background:linear-gradient(135deg,rgba(255,244,217,.96),rgba(235,247,255,.96));
  color:#5a5570;
  box-shadow:0 10px 22px rgba(47,107,255,.12), inset 0 0 0 1px rgba(255,255,255,.70);
  filter:drop-shadow(0 0 7px rgba(47,107,255,.20));
}

.account-header-settings-link .account-header-settings-trigger svg{
  stroke:#5a5570;
  stroke-width:2.25;
  filter:drop-shadow(0 0 7px rgba(47,107,255,.16));
}

.profile-settings-fullscreen{
  min-height:100vh;
  margin:0;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,122,61,.10), transparent 32%),
    radial-gradient(circle at 100% 0%, rgba(21,184,255,.12), transparent 34%),
    linear-gradient(180deg,#fff,#fffaf7 64%,#fff);
}

.profile-settings-page{
  min-height:100vh;
  width:100%;
  max-width:var(--app-max-width, 100%);
  margin:0 auto;
  padding:18px 14px 24px;
  display:grid;
  place-items:center;
}

.profile-settings-view{
  width:100%;
}

.profile-settings-full-card{
  width:100%;
  min-height:calc(100vh - 42px);
  border:2px solid transparent;
  border-radius:30px;
  padding:20px 16px;
  display:grid;
  align-content:center;
  justify-items:center;
  gap:13px;
  text-align:center;
  background:
    linear-gradient(rgba(255,255,255,.96),rgba(255,255,255,.92)) padding-box,
    conic-gradient(from 0deg,#ff7b00,#ff2f92,#2f6bff,#1ecb87,#ffd84d,#ff7b00) border-box;
  box-shadow:
    0 18px 34px rgba(38,25,75,.11),
    0 0 0 1px rgba(255,255,255,.78) inset,
    0 0 22px rgba(255,47,146,.13),
    0 0 34px rgba(47,107,255,.11),
    0 0 40px rgba(30,203,135,.09);
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

.profile-settings-full-card::after{
  content:"";
  position:absolute;
  inset:7px;
  border-radius:24px;
  background:
    radial-gradient(circle at 18% 18%,rgba(255,123,0,.11),transparent 43%),
    radial-gradient(circle at 82% 22%,rgba(47,107,255,.12),transparent 46%),
    radial-gradient(circle at 35% 88%,rgba(30,203,135,.10),transparent 50%),
    linear-gradient(160deg,rgba(255,255,255,.94),rgba(255,255,255,.88));
  z-index:-1;
}

.profile-settings-full-card h1{
  margin:0;
  font-size:28px;
  line-height:1.12;
  font-weight:950;
  background:linear-gradient(90deg,#ff7b00,#ff2f92,#2f6bff,#1ecb87,#ff7b00);
  background-size:300% 300%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:accountTextShift 3.8s ease-in-out infinite;
}

.profile-settings-full-card p{
  max-width:520px;
  margin:0;
  color:#756d78;
  font-size:14.5px;
  font-weight:800;
  line-height:1.45;
}

.profile-settings-primary-link,
.profile-settings-return{
  display:inline-flex;
  min-height:44px;
  align-items:center;
  justify-content:center;
  padding:0 18px;
  border-radius:999px;
  text-decoration:none;
  font-weight:950;
  color:#fff;
  background:linear-gradient(135deg,#ff7b00,#ff2f92,#2f6bff,#1ecb87);
  box-shadow:0 12px 24px rgba(47,107,255,.16),0 0 16px rgba(255,47,146,.13);
}

.profile-settings-return{
  position:absolute;
  left:16px;
  top:16px;
  min-height:38px;
  padding:0 14px;
  font-size:13px;
}

.profile-settings-main-icon{
  margin-top:18px;
}

.profile-settings-summary-card{
  width:100%;
  max-width:520px;
  border:0;
  background:transparent;
  box-shadow:none;
}

.profile-settings-summary-card::before,
.profile-settings-summary-card::after{
  display:none;
}

@media(max-width:560px){
  .profile-settings-page{
    padding:12px 10px 18px;
  }

  .profile-settings-full-card{
    min-height:calc(100vh - 30px);
    border-radius:26px;
    padding:18px 12px;
  }

  .profile-settings-full-card h1{
    font-size:24px;
  }
}

/* V179R5 simple settings list and my profile page */
.settings-fullscreen{
  margin:0;
  min-height:100vh;
  background:#f5f5f5;
  color:#202124;
  font-family:inherit;
}

.settings-page{
  width:100%;
  min-height:100vh;
  max-width:var(--app-max-width, 100%);
  margin:0 auto;
  padding:0 0 28px;
  background:#f5f5f5;
}

.settings-page-header{
  height:82px;
  padding:18px 20px 0;
  display:flex;
  align-items:center;
  gap:16px;
  background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.10);
  position:sticky;
  top:0;
  z-index:20;
}

.settings-page-header h1{
  margin:0;
  font-size:28px;
  line-height:1;
  font-weight:900;
  color:#2a2a2a;
}

.settings-back-btn{
  width:42px;
  height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  text-decoration:none;
  font-size:46px;
  line-height:1;
  color:#333;
  transform:translateY(-2px);
}

.settings-section{
  margin-top:12px;
  background:#fff;
}

.settings-section + .settings-section{
  margin-top:10px;
}

.settings-row{
  min-height:58px;
  width:100%;
  padding:0 20px;
  display:grid;
  grid-template-columns:1fr auto auto;
  align-items:center;
  gap:10px;
  border:0;
  border-bottom:1px solid #ededed;
  background:#fff;
  color:#111;
  text-decoration:none;
  font:inherit;
  text-align:left;
}

.settings-row:last-child{
  border-bottom:0;
}

.settings-row span{
  font-size:18px;
  font-weight:500;
  color:#111;
}

.settings-row strong{
  font-size:16px;
  font-weight:500;
  color:#777;
}

.settings-row i{
  font-style:normal;
  font-size:34px;
  line-height:1;
  color:#9c9c9c;
}

.settings-signout-row{
  grid-template-columns:1fr;
}

.settings-signout-row span{
  font-size:18px;
  font-weight:500;
}

.settings-message{
  margin:14px 20px 0;
  font-size:13px;
  font-weight:700;
  color:#6f6f6f;
}

.settings-hidden-auth-data{
  display:none !important;
}

.settings-profile-card{
  margin:14px;
  min-height:calc(100vh - 112px);
  border:2px solid transparent;
  border-radius:28px;
  padding:22px 14px;
  display:grid;
  align-content:center;
  justify-items:center;
  gap:14px;
  text-align:center;
  background:
    linear-gradient(rgba(255,255,255,.96),rgba(255,255,255,.92)) padding-box,
    conic-gradient(from 0deg,#ff7b00,#ff2f92,#2f6bff,#1ecb87,#ffd84d,#ff7b00) border-box;
  box-shadow:0 16px 30px rgba(38,25,75,.10);
}

.my-profile-page .account-summary-card{
  width:100%;
  max-width:540px;
}

@media(max-width:390px){
  .settings-page-header{
    height:76px;
    padding:16px 18px 0;
  }

  .settings-page-header h1{
    font-size:26px;
  }

  .settings-row{
    min-height:56px;
    padding:0 18px;
  }

  .settings-row span{
    font-size:17px;
  }
}

@media(max-width:360px){
  .settings-page-header h1{
    font-size:24px;
  }

  .settings-row span{
    font-size:16px;
  }

  .settings-row strong{
    font-size:15px;
  }
}

/* V179R6 my profile settings-style list page */
.settings-centered-header{
  position:sticky;
  justify-content:center;
}

.settings-centered-header .settings-back-btn{
  position:absolute;
  left:18px;
}

.settings-profile-top{
  min-height:112px;
  padding:22px 20px 18px;
  display:grid;
  grid-template-columns:82px 1fr;
  align-items:center;
  gap:18px;
  background:#fff;
  border-bottom:1px solid #ececec;
}

.settings-profile-avatar{
  width:78px;
  height:78px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:28px;
  font-weight:950;
  color:#ff6b00;
  background:linear-gradient(135deg,#fff3e8,#fff,#edf8ff);
  border:1px solid #e8e8e8;
  box-shadow:inset 0 -22px 0 rgba(0,0,0,.32);
}

.settings-profile-name-block{
  min-width:0;
}

.settings-profile-name-block h2{
  margin:0 0 8px;
  font-size:22px;
  line-height:1.1;
  font-weight:950;
  color:#222;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-transform:none;
}

.settings-profile-name-block p{
  margin:0;
  font-size:15px;
  line-height:1.2;
  font-weight:600;
  color:#777;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.my-profile-page .settings-row strong{
  max-width:56%;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.settings-connected-section{
  background:#fff;
  margin-top:10px;
  padding:18px 0 0;
}

.settings-connected-section h2{
  margin:0 20px 10px;
  font-size:20px;
  font-weight:900;
  color:#202124;
}

.settings-connected-section > p{
  margin:0 20px 14px;
  max-width:560px;
  color:#777;
  font-size:15px;
  line-height:1.35;
  font-weight:500;
}

.settings-connected-section .settings-section{
  margin-top:0;
}

.settings-connected-row span{
  display:inline-flex;
  align-items:center;
  gap:12px;
}

.settings-google-mark,
.settings-facebook-mark{
  width:26px;
  height:26px;
  display:inline-grid;
  place-items:center;
  border-radius:50%;
  font-size:20px;
  line-height:1;
  font-weight:950;
  font-family:Arial, sans-serif;
}

.settings-google-mark{
  color:#4285f4;
  background:#fff;
}

.settings-facebook-mark{
  color:#fff;
  background:#1877f2;
}

@media(max-width:390px){
  .settings-profile-top{
    grid-template-columns:74px 1fr;
    gap:15px;
    padding:20px 18px 16px;
  }

  .settings-profile-avatar{
    width:72px;
    height:72px;
    font-size:25px;
  }

  .settings-profile-name-block h2{
    font-size:20px;
  }

  .settings-profile-name-block p{
    font-size:14px;
  }
}

@media(max-width:360px){
  .settings-profile-top{
    grid-template-columns:68px 1fr;
    gap:13px;
    padding:18px 16px 15px;
  }

  .settings-profile-avatar{
    width:66px;
    height:66px;
    font-size:23px;
  }

  .settings-profile-name-block h2{
    font-size:18px;
  }
}

/* V179R14 real profile data rows only */
.my-profile-page .settings-profile-avatar-only{
  justify-content:center;
}

.my-profile-page .settings-profile-avatar-only .settings-profile-avatar{
  margin:0 auto;
}

.my-profile-page .settings-row .settings-real-profile-value{
  width:100%;
  max-width:none;
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  text-align:right;
  line-height:1.12;
}

.my-profile-page .settings-row .settings-real-profile-value[data-email-mask="true"]{
  font-size:16px;
  letter-spacing:-.15px;
}

/* V179R15 centered simple profile icon */
.my-profile-page .settings-profile-avatar-only{
  justify-content:center;
  align-items:center;
  padding:16px 0 14px;
  min-height:120px;
}

.my-profile-page .settings-profile-avatar-only .settings-profile-avatar{
  margin:0 auto;
}

.my-profile-page .settings-profile-simple-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:104px;
  height:104px;
  border-radius:28px;
  background:linear-gradient(135deg, rgba(255,245,236,.95), rgba(240,243,255,.95));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    0 8px 20px rgba(80, 76, 110, .08);
}

.my-profile-page .settings-profile-simple-icon-svg{
  width:60px;
  height:60px;
  display:block;
}

.my-profile-page .settings-profile-simple-icon-panel{
  fill:rgba(255,255,255,.28);
  stroke:rgba(126, 120, 145, .08);
  stroke-width:1;
}

.my-profile-page .settings-profile-simple-icon-stroke{
  stroke:#7f7a93;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
}

/* V179R16 profile icon in header */
.my-profile-page .settings-profile-header-with-icon{
  position:relative;
  min-height:62px;
  padding-top:9px;
  padding-bottom:9px;
}

.my-profile-page .settings-profile-header-with-icon h1{
  line-height:1.1;
}

.my-profile-page .settings-header-profile-icon{
  position:absolute;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:15px;
  background:linear-gradient(135deg, rgba(255,245,236,.96), rgba(240,243,255,.96));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.78),
    0 7px 16px rgba(80, 76, 110, .08);
}

.my-profile-page .settings-header-profile-icon-svg{
  width:28px;
  height:28px;
  display:block;
}

.my-profile-page .settings-header-profile-icon-panel{
  fill:rgba(255,255,255,.28);
  stroke:rgba(126, 120, 145, .08);
  stroke-width:1;
}

.my-profile-page .settings-header-profile-icon-stroke{
  stroke:#7f7a93;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
}

.my-profile-page #loggedInDashboardView > .settings-section:first-of-type{
  margin-top:0;
}

/* V179R17 bigger header profile and real social logos */
.my-profile-page .settings-header-profile-icon{
  width:53px;
  height:53px;
  right:16px;
  border-radius:18px;
}

.my-profile-page .settings-header-profile-icon-svg{
  width:36px;
  height:36px;
}

.my-profile-page .settings-connected-label{
  display:inline-flex;
  align-items:center;
  gap:14px;
  min-width:0;
}

.my-profile-page .settings-google-logo,
.my-profile-page .settings-facebook-logo{
  width:30px;
  height:30px;
  display:inline-block;
  flex:0 0 auto;
}

.my-profile-page .settings-connected-row span{
  font-size:20px;
  line-height:1.2;
}

/* V179R18 full real profile row values */
.my-profile-page .settings-row strong,
.my-profile-page .settings-row .settings-real-profile-value,
.my-profile-page .settings-row .settings-profile-status-value{
  width:auto !important;
  max-width:none !important;
  min-width:max-content !important;
  overflow:visible !important;
  white-space:nowrap !important;
  text-overflow:clip !important;
  text-align:right;
}

.my-profile-page .settings-row .settings-real-profile-value[data-email-mask="true"]{
  font-size:16px;
  letter-spacing:-.35px;
}

.my-profile-page .settings-row{
  grid-template-columns:minmax(0,1fr) auto auto;
}

.my-profile-page .settings-connected-row strong{
  font-size:18px;
}

/* V179S1 profile edit pages */
.settings-edit-page{
  min-height:100vh;
  background:#fff;
}

.settings-edit-page .settings-centered-header{
  box-shadow:none;
  border-bottom:0;
}

.settings-edit-card{
  padding:22px 20px 0;
  background:#fff;
}

.settings-edit-form{
  display:grid;
  gap:18px;
}

.settings-floating-field{
  min-height:72px;
  padding:10px 20px 8px;
  display:grid;
  align-content:center;
  gap:4px;
  border:1.5px solid #d9d9d9;
  border-radius:12px;
  background:#fff;
}

.settings-floating-field:focus-within{
  border-color:#242424;
}

.settings-floating-field span{
  color:#777;
  font-size:14px;
  line-height:1.1;
  font-weight:500;
}

.settings-floating-field input{
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  color:#222;
  font-size:18px;
  line-height:1.2;
  font-weight:500;
  font-family:inherit;
}

.settings-save-button{
  margin-top:70px;
  min-height:64px;
  width:100%;
  border:0;
  border-radius:999px;
  background:#e23d00;
  color:#fff;
  font-size:20px;
  font-weight:900;
  font-family:inherit;
  box-shadow:0 12px 22px rgba(226,61,0,.16);
}

.settings-save-button:disabled{
  opacity:.72;
}

.settings-edit-feedback{
  margin:4px 0 0;
}

.profile-action-feedback{
  margin-top:10px;
}

.settings-message.is-success{
  color:#0f8a4b;
}

.settings-message.is-error{
  color:#d93025;
}

/* V179S2B single email update system */
.email-update-page .settings-current-email{
  margin:0 0 10px;
  color:#777;
  font-size:15px;
  font-weight:600;
  line-height:1.35;
  word-break:break-word;
}

.email-update-page .settings-edit-description{
  margin:0 0 18px;
  color:#777;
  font-size:15px;
  font-weight:500;
  line-height:1.4;
}


/* V179S2B single email update visibility guard */
.settings-edit-form[hidden]{
  display:none !important;
}

/* V185 mirror Home product-grid for Brand/Category inner product lists */
.brands-page #brandProductsSection:not([hidden]) .brand-products-list,
.categories-page #categoryProductsSection:not([hidden]) .category-products-list{
  display:grid !important;
  grid-template-columns:repeat(2,1fr) !important;
  gap:13px !important;
}

@media (min-width:768px){
  .brands-page #brandProductsSection:not([hidden]) .brand-products-list,
  .categories-page #categoryProductsSection:not([hidden]) .category-products-list{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}

@media (min-width:1100px){
  .brands-page #brandProductsSection:not([hidden]) .brand-products-list,
  .categories-page #categoryProductsSection:not([hidden]) .category-products-list{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }
}

/* V186 Responsive Product Grid Scale */
:root{
  --mg-product-grid-gap:13px;
}

.product-grid,
.search-page #searchResults.search-results,
.brands-page #brandProductsSection:not([hidden]) .brand-products-list,
.categories-page #categoryProductsSection:not([hidden]) .category-products-list{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:var(--mg-product-grid-gap) !important;
}

.product-card{
  height:100%;
  display:flex;
  flex-direction:column;
}

.product-img{
  aspect-ratio:1/1;
}

.product-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
}

.product-info{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
}

@media (min-width:768px){
  :root{
    --mg-product-grid-gap:13px;
  }

  .app,
  .topbar,
  .bottom-nav{
    max-width:min(100%, 960px);
  }

  .product-grid,
  .search-page #searchResults.search-results,
  .brands-page #brandProductsSection:not([hidden]) .brand-products-list,
  .categories-page #categoryProductsSection:not([hidden]) .category-products-list{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}

@media (min-width:1024px){
  :root{
    --mg-product-grid-gap:14px;
  }

  .app,
  .topbar,
  .bottom-nav{
    max-width:min(100%, 1180px);
  }

  .product-grid,
  .search-page #searchResults.search-results,
  .brands-page #brandProductsSection:not([hidden]) .brand-products-list,
  .categories-page #categoryProductsSection:not([hidden]) .category-products-list{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }
}

@media (min-width:1400px){
  :root{
    --mg-product-grid-gap:16px;
  }

  .app,
  .topbar,
  .bottom-nav{
    max-width:min(100%, 1360px);
  }

  .product-grid,
  .search-page #searchResults.search-results,
  .brands-page #brandProductsSection:not([hidden]) .brand-products-list,
  .categories-page #categoryProductsSection:not([hidden]) .category-products-list{
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  }
}

@media (min-width:1600px){
  .app,
  .topbar,
  .bottom-nav{
    max-width:min(100%, 1560px);
  }

  .product-grid,
  .search-page #searchResults.search-results,
  .brands-page #brandProductsSection:not([hidden]) .brand-products-list,
  .categories-page #categoryProductsSection:not([hidden]) .category-products-list{
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  }
}

/* V189B product detail page normalize: keep header visible, replace bottom nav with detail actions */
body.product-detail-open{
  overflow:hidden;
}

body.product-detail-open .bottom-nav-wrap{
  display:none;
}

#detailModal{
  position:fixed;
  inset:55px 0 0 0;
  background:#fff;
  z-index:90;
  align-items:stretch;
  justify-content:stretch;
  padding:0;
  overflow:hidden;
  overscroll-behavior-y:auto;
  touch-action:pan-y;
}

#detailModal.show{
  display:block;
}

#detailModal .detail-sheet{
  position:relative;
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:var(--app-max-width, 100%);
  height:100%;
  height:calc(100vh - 55px);
  height:calc(100svh - 55px);
  max-height:100%;
  margin:0 auto;
  padding:0;
  overflow:hidden;
  border-radius:0;
  box-shadow:none;
}

@supports (height:100dvh){
  #detailModal .detail-sheet{
    height:calc(100dvh - 55px);
  }
}

#detailModal .sheet-head{
  display:none;
}

#detailModal .detail-scroll{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  padding:14px 15px calc(106px + env(safe-area-inset-bottom, 0px));
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:auto;
  touch-action:pan-y;
}

#detailModal .wide-actions{
  position:fixed;
  left:50%;
  right:auto;
  bottom:0;
  z-index:510;
  width:100%;
  max-width:var(--app-max-width, 100%);
  transform:translateX(-50%);
  padding:10px 15px calc(10px + env(safe-area-inset-bottom, 0px));
}

#detailModal .detail-product-art{
  min-height:0;
  margin-bottom:12px;
  padding:0;
  gap:10px;
  border:0;
  border-radius:0;
  background:transparent;
  font-size:inherit;
}

#detailModal .detail-media-main{
  min-height:320px;
  min-height:min(58svh, 460px);
  border:0;
  border-radius:0;
  background:#fff;
  overflow:hidden;
}

#detailModal .detail-media-track,
#detailModal .detail-media-slide,
#detailModal .detail-main-image,
#detailModal .detail-video-slide,
#detailModal .detail-video-slide iframe,
#detailModal .detail-video-slide video{
  min-height:320px;
  min-height:min(58svh, 460px);
}

#detailModal .detail-main-image{
  object-fit:contain;
  background:#fff;
}



/* V198D4 clean modal stack order */
#productOptionsModal.show{
  z-index:12000;
}

#cartModal.show{
  z-index:13000;
}

/* V198D4 clean single bag summary owner */
.bag-page-section{
  padding-bottom:122px;
}

#bagSummaryCard.bag-summary-premium{
  position:fixed;
  left:0;
  right:0;
  bottom:52px;
  transform:none;
  width:100%;
  max-width:var(--app-max-width, 100%);
  z-index:99;
  margin:0 auto;
  padding:5px 8px;
  border:0;
  background:rgba(248,248,248,.96);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 -8px 22px rgba(0,0,0,.08);
  border-radius:0;
}

#bagSummaryCard .bag-summary-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  align-items:center;
  gap:6px;
}

#bagSummaryCard .bag-stat-card{
  position:relative;
  overflow:hidden;
  min-height:40px;
  justify-content:center;
  text-align:center;
  border-radius:14px;
  padding:5px 6px;
  background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(255,248,252,.88));
  border:1px solid rgba(201,151,75,.22);
  box-shadow:0 10px 22px rgba(38,25,75,.08);
}

#bagSummaryCard .bag-stat-card span{
  display:block;
  font-size:10px;
  font-weight:850;
  color:#6d6274;
  line-height:1.05;
}

#bagSummaryCard .bag-stat-card b{
  display:block;
  margin-top:2px;
  font-size:15px;
  font-weight:950;
  line-height:1.1;
  background:linear-gradient(90deg,#ff7b00,#ff2f92,#2f6bff,#1ecb87);
  background-size:240% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:mgGradientText 4.8s ease-in-out infinite;
}

#bagSummaryCard .bag-stat-card.is-checkout b{
  font-size:19px;
}

#bagSummaryCard .bag-stat-card.is-checkout.is-ready{
  cursor:pointer;
  background:linear-gradient(135deg,#ff7b00,#ff2f92,#2f6bff,#1ecb87);
  box-shadow:0 13px 26px rgba(47,107,255,.22),0 0 20px rgba(255,47,146,.14);
}

#bagSummaryCard .bag-stat-card.is-checkout.is-ready b{
  background:none;
  color:#fff;
  animation:none;
}

#bagSummaryCard .bag-stat-card.is-checkout[aria-disabled="true"]{
  opacity:.72;
  cursor:not-allowed;
}