/* Generations Kid — mellowkids-inspired theme (teal + pink) */
:root{
  --ink:#1e293b;
  --muted:#64748b;
  --line:#e5e7eb;
  --bg:#ffffff;
  --bg-soft:#f9fafb;
  --primary:#0f6e6e;
  --primary-600:#138a8a;
  --primary-500:#17a5a5;
  --primary-400:#1bbfbf;
  --primary-100:#cceff0;
  --primary-50:#f0fafa;
  --accent:#e5608a;
  --accent-soft:#fff5f9;
  --orange:#fb923c;
  --sale:#ef4444;
}

body{
  background:var(--bg) !important;
  color:var(--ink) !important;
  font-family:"Noto Sans Thai","Manrope",system-ui,sans-serif !important;
}

/* ===== Top promo bar ===== */
header.sticky.bg-black > div.bg-black,
header.sticky.bg-black > div.hidden.sm\:block{
  background:linear-gradient(90deg,#17a5a5,#e5608a) !important;
  color:#fff !important;
  border-bottom:none !important;
}
header.sticky.bg-black > div.hidden.sm\:block p,
header.sticky.bg-black > div.bg-black p{
  color:#fff !important;
  font-weight:600 !important;
}

/* ===== Header ===== */
header.sticky.bg-black{
  background:rgba(255,255,255,.95) !important;
  color:var(--ink) !important;
  border-bottom:1px solid rgba(15,110,110,.12) !important;
  backdrop-filter:blur(10px);
}
header.sticky.bg-black > nav,
header.sticky.bg-black nav.container-custom{
  background:transparent !important;
}
header.sticky.bg-black button,
header.sticky.bg-black a{
  color:var(--primary) !important;
}
header.sticky.bg-black a[href="/cart"] span,
header.sticky.bg-black a[href="/wishlist"] span{
  background:var(--accent) !important;
  color:#fff !important;
}
header.sticky.bg-black .bg-white\/15{
  background:rgba(15,110,110,.08) !important;
}
header.sticky.bg-black nav.container-custom{
  padding-left:12px !important;
  padding-right:12px !important;
}
header.sticky.bg-black nav.container-custom > div.flex{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  min-height:56px !important;
  gap:.4rem !important;
}
header.sticky.bg-black nav button,
header.sticky.bg-black nav a[href="/cart"],
header.sticky.bg-black nav a[href="/wishlist"],
header.sticky.bg-black nav a[href="/login"]{
  position:relative !important;
  z-index:3 !important;
  flex-shrink:0 !important;
}
header.sticky.bg-black nav a[href="/"]{
  position:static !important;
  transform:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  flex:0 0 auto !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  z-index:1 !important;
  max-width:170px !important;
}
header.sticky.bg-black nav img[alt="Generations Kid"],
header.sticky.bg-black nav img[alt="Thaimart"]{
  display:block !important;
  height:auto !important;
  width:auto !important;
  max-height:2.4rem !important;
  max-width:170px !important;
  margin:0 !important;
  object-fit:contain !important;
  object-position:left center !important;
  filter:none !important;
}
@media (min-width:1024px){
  header.sticky.bg-black nav a[href="/"]{
    max-width:240px !important;
    margin:0 .35rem 0 0 !important;
  }
  header.sticky.bg-black nav img[alt="Generations Kid"],
  header.sticky.bg-black nav img[alt="Thaimart"]{
    max-height:2.8rem !important;
    max-width:240px !important;
  }
}
header.sticky.bg-black .flex.items-center.gap-2,
header.sticky.bg-black .flex.items-center.gap-1\.5,
header.sticky.bg-black .flex.items-center.shrink-0{
  flex-shrink:0 !important;
  max-width:42% !important;
}
header.sticky.bg-black a[href="/login"]{
  background:linear-gradient(90deg,#e5608a,#fb923c) !important;
  color:#fff !important;
  border:none !important;
  border-radius:999px !important;
  font-weight:600 !important;
  font-size:.75rem !important;
  min-height:30px;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  padding:.3rem .75rem !important;
  white-space:nowrap !important;
  box-shadow:0 4px 12px rgba(229,96,138,.28) !important;
}
@media (max-width:1023px){
  header.sticky.bg-black a[href="/login"]{
    font-size:0 !important;
    width:32px !important;
    height:32px !important;
    min-width:32px !important;
    padding:0 !important;
    background:linear-gradient(90deg,#e5608a,#fb923c) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='3.2'/%3E%3Cpath d='M5 19.2c1.4-2.8 3.8-4.2 7-4.2s5.6 1.4 7 4.2'/%3E%3C/svg%3E") center / 16px no-repeat !important;
  }
}

/* Search pill */
header.sticky.bg-black .tm-search{
  flex:1 1 auto !important;
  min-width:0 !important;
  margin:0 !important;
}
header.sticky.bg-black .tm-search-pill{
  display:flex !important;
  align-items:center !important;
  height:36px !important;
  background:var(--bg-soft) !important;
  border:1px solid var(--primary-100) !important;
  border-radius:999px !important;
  padding:0 4px 0 12px !important;
  gap:2px !important;
}
header.sticky.bg-black .tm-search-input{
  flex:1 1 auto !important;
  width:100% !important;
  min-width:0 !important;
  border:0 !important;
  outline:none !important;
  background:transparent !important;
  color:var(--ink) !important;
  font-size:14px !important;
  padding:0 !important;
  box-shadow:none !important;
}
header.sticky.bg-black .tm-search-input::placeholder{ color:#94a3b8 !important; }
header.sticky.bg-black .tm-search-btn{
  width:30px !important;
  height:30px !important;
  border:0 !important;
  border-radius:999px !important;
  background:transparent !important;
  color:var(--primary) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  flex-shrink:0 !important;
}
header.sticky.bg-black .tm-search-ico{
  width:18px !important;
  height:18px !important;
  display:block !important;
}

/* ===== Hero banner (mellowkids-like) ===== */
.shein-hero{
  position:relative !important;
  width:calc(100% - 24px) !important;
  margin:12px 12px 0 !important;
  padding:0 !important;
  max-height:none !important;
  border-radius:18px !important;
  box-shadow:0 10px 28px rgba(15,110,110,.12) !important;
  aspect-ratio:1931 / 814 !important;
  background:linear-gradient(135deg,#cceff0,#fff5f9) !important;
  overflow:hidden !important;
}
.shein-hero > div.absolute.inset-0{ inset:0 !important; }
.shein-hero-img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  opacity:1 !important;
  pointer-events:none !important;
}
.shein-hero-shade,
.shein-hero .shein-hero-copy,
.shein-hero .hidden,
.shein-hero a:not(.shein-hero-hit),
.shein-hero button{
  display:none !important;
}
.shein-hero-hit{
  position:absolute !important;
  inset:0 !important;
  z-index:10 !important;
  display:block !important;
  background:transparent !important;
}

/* ===== Trust / feature icons (teal tiles like mellowkids) ===== */
.border-b.border-primary-100.bg-white{
  background:#fff !important;
  border-color:transparent !important;
  padding:1rem 0 1.1rem !important;
}
.border-b.border-primary-100 .grid{
  gap:.75rem .9rem !important;
}
.border-b.border-primary-100 .text-secondary-800{
  color:var(--ink) !important;
  font-weight:700 !important;
  font-size:.82rem !important;
  line-height:1.25 !important;
}
.border-b.border-primary-100 .text-secondary-500{
  color:var(--muted) !important;
  font-size:.68rem !important;
  line-height:1.3 !important;
}
.border-b.border-primary-100 .text-primary-600{
  color:var(--primary) !important;
}
.border-b.border-primary-100 .flex.items-start,
.border-b.border-primary-100 .flex.items-center{
  gap:.65rem !important;
}
.border-b.border-primary-100 svg{
  width:1.35rem !important;
  height:1.35rem !important;
  flex-shrink:0 !important;
  color:var(--primary) !important;
  stroke:var(--primary) !important;
}
/* wrap icon in soft teal tile look */
.border-b.border-primary-100 svg{
  padding:.55rem !important;
  width:2.35rem !important;
  height:2.35rem !important;
  box-sizing:content-box !important;
  background:var(--primary-100) !important;
  border-radius:14px !important;
}

/* ===== Sections ===== */
.section-padding{
  background:#fff !important;
  padding-top:1.25rem !important;
  padding-bottom:1.5rem !important;
}
.section-padding .flex.items-end.justify-between,
.section-padding .flex.items-center.justify-between{
  align-items:flex-end !important;
  gap:.75rem !important;
  flex-wrap:nowrap !important;
}
.section-padding .flex.items-end.justify-between > a,
.section-padding .flex.items-center.justify-between > a{
  flex-shrink:0 !important;
  white-space:nowrap !important;
  font-size:.8125rem !important;
  color:var(--primary) !important;
  font-weight:600 !important;
}
.section-padding img.object-cover{ border-radius:14px !important; }
.section-padding a.group.relative,
.section-padding a.relative.block{
  border-radius:16px !important;
  overflow:hidden !important;
  box-shadow:0 4px 16px rgba(15,110,110,.08) !important;
}
.section-padding a.group.relative img,
.section-padding a.relative.block img{
  aspect-ratio:1 / 1 !important;
  object-fit:cover !important;
}

/* Primary color overrides (replace red skin) */
.text-primary-600,.text-primary-700,.text-primary-800{ color:var(--primary) !important; }
.bg-primary-500,.bg-primary-600{ background-color:var(--primary) !important; }
.border-primary-100,.border-primary-200{ border-color:var(--primary-100) !important; }
.from-primary-500,.to-primary-600{ --tw-gradient-from:var(--primary) !important; }
h2.text-secondary-900,.text-secondary-900{ color:var(--ink) !important; }

/* Soft section labels like mellowkids */
.section-padding .uppercase.tracking-\[0\.14em\],
.section-padding .tracking-\[0\.14em\],
.section-padding p.uppercase{
  color:var(--accent) !important;
  letter-spacing:.12em !important;
  font-weight:700 !important;
  font-size:.68rem !important;
}

.rounded-2xl{ border-radius:16px !important; }
.shadow-sm{ box-shadow:0 1px 3px rgba(15,110,110,.06) !important; }
.shadow-md,.shadow-xl{ box-shadow:0 8px 24px rgba(15,110,110,.1) !important; }

/* ===== Bottom nav ===== */
nav.fixed.bottom-0{
  border-top:1px solid rgba(15,110,110,.12) !important;
  background:rgba(255,255,255,.96) !important;
  backdrop-filter:blur(10px);
  box-shadow:0 -4px 20px rgba(15,110,110,.06) !important;
}
nav.fixed .text-primary-600,
nav.fixed .text-\[\#E10600\],
nav.fixed a.text-primary-600,
nav.fixed [aria-current="page"],
nav.fixed a[aria-current="page"]{
  color:var(--primary) !important;
}
nav.fixed svg{ stroke-width:1.75 !important; }
nav.fixed a{ color:#94a3b8 !important; font-size:.65rem !important; }
nav.fixed a[aria-current="page"] span,
nav.fixed a.text-primary-600 span{ color:var(--primary) !important; font-weight:700 !important; }

/* Auth */
.shein-auth-page{ background:#fff !important; }
.shein-auth-page .input{
  border-width:1px !important; border-color:#e5e7eb !important; border-radius:12px !important;
  background:#f9fafb !important;
}
.shein-auth-submit{
  background:linear-gradient(90deg,#e5608a,#fb923c) !important;
  color:#fff !important;
  border-radius:999px !important;
}
body:has(.shein-auth-page) header a[href="/login"],
body:has(.shein-auth-page) footer,
body:has(.shein-auth-page) nav.fixed.bottom-0{ display:none !important; }
.shein-logo-light{ filter:none !important; }

/* ===== Category circles / home cats ===== */
.tm-cats{
  background:#fff !important;
  padding:14px 0 4px !important;
}
.tm-cats-row{
  display:flex !important;
  gap:14px !important;
  overflow-x:auto !important;
  padding:2px 14px 14px !important;
  scrollbar-width:none !important;
}
.tm-cats-row::-webkit-scrollbar{ display:none !important; }
.tm-cat{
  flex:0 0 72px !important;
  width:72px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:7px !important;
  text-decoration:none !important;
  color:var(--ink) !important;
}
.tm-cat-ico{
  width:62px !important;
  height:62px !important;
  border-radius:18px !important;
  overflow:hidden !important;
  background:var(--primary-50) !important;
  border:1px solid var(--primary-100) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-shadow:0 4px 12px rgba(15,110,110,.08) !important;
}
.tm-cat-all .tm-cat-ico{
  background:linear-gradient(135deg,#17a5a5,#e5608a) !important;
  border-color:transparent !important;
  color:#fff !important;
  font-size:11px !important;
  font-weight:700 !important;
}
.tm-cat-ico img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}
.tm-cat-name{
  font-size:11px !important;
  line-height:1.25 !important;
  text-align:center !important;
  color:#334155 !important;
  max-width:76px !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
}

/* Home category cards grid (mellowkids style) */
a[href*="/category/"] .aspect-square,
a[href*="/category/"] .aspect-\[1\/1\]{
  border-radius:16px !important;
  overflow:hidden !important;
}
section.section-padding a[href*="/category/"]{
  transition:transform .2s ease, box-shadow .2s ease;
}
section.section-padding a[href*="/category/"]:hover{
  transform:translateY(-2px);
}

/* ===== Product cards ===== */
a.group.block.h-full > div{
  border:1px solid rgba(15,110,110,.08) !important;
  border-radius:16px !important;
  background:#fff !important;
  box-shadow:0 4px 14px rgba(15,110,110,.07) !important;
  overflow:hidden !important;
}
a.group.block.h-full .aspect-\[4\/5\]{
  aspect-ratio:1 / 1 !important;
  background:var(--bg-soft) !important;
  border-radius:16px 16px 0 0 !important;
}
a.group.block.h-full .p-3\.5 .uppercase,
a.group.block.h-full .tracking-\[0\.14em\]{
  display:none !important;
}
a.group.block.h-full h3{
  color:var(--ink) !important;
  font-size:13px !important;
  min-height:2.4em !important;
  font-weight:600 !important;
}
a.group.block.h-full .text-\[\#2a2118\],
a.group.block.h-full .text-\[\#E10600\],
a.group.block.h-full [class*="text-[#E10600]"]{
  color:var(--accent) !important;
  font-weight:800 !important;
}
/* sale badges */
.bg-\[\#E10600\],
.bg-red-500,
.bg-rose-500{
  background:var(--accent) !important;
}

/* Buttons / CTAs */
a.bg-black,
button.bg-black,
.bg-black.text-white{
  background:linear-gradient(90deg,#e5608a,#fb923c) !important;
  border:none !important;
}
a.rounded-full.bg-\[\#E10600\],
button.rounded-full.bg-\[\#E10600\]{
  background:linear-gradient(90deg,#e5608a,#fb923c) !important;
}

/* Footer soft kids tone */
footer{
  background:linear-gradient(180deg,#f0fafa 0%, #fff 40%) !important;
  border-top:1px solid var(--primary-100) !important;
}
footer a:hover{ color:var(--primary) !important; }

/* Hide marketplace empty section noise when no items */
section:has(h2:contains("มือสอง")){ /* not supported */ }

/* Price strike / sale */
.line-through{ color:#94a3b8 !important; }