/* MINATOPUP UI-01 TEST REV7.4 — REV4 VISUAL SOURCE OF TRUTH
   Owner corrections dated 2026-07-30. This is the single active revision layer. */
:root{
  --catalog-blue:#285A9E;
  --catalog-blue-pill:#EEF4FF;
  --catalog-blue-pill-border:#D6E4FA;
  --catalog-blue-price:#315A91;
  --trust-fast:#C89500;
  --trust-safe:#356FB5;
  --trust-trusted:#27836B;
  --trust-qris:#7058B5;
  --motion-instant:110ms;
  --motion-fast:180ms;
  --motion-standard:280ms;
  --motion-panel:340ms;
  --ease-out:cubic-bezier(.22,.75,.22,1);
  --ease-in:cubic-bezier(.4,0,1,1);
  --bg:#FCFCFD;
  --line:#ECEFF3;
  --surface:#FFFFFF;
}

body{background:var(--bg)}
.quick-nav{background:rgba(252,252,253,.97)!important}

/* Header controls: search and burger use exactly the same color and interaction treatment. */
.icon-button,.product-card,.flash-card,.quick-chip,.catalog-toggle,.drawer-link,.drawer-support-card,.search-results a{
  -webkit-tap-highlight-color:transparent;
}
.header-actions .icon-button,
.header-actions .icon-button svg{
  color:var(--navy)!important;
}
.icon-button{
  transition:transform var(--motion-instant) ease,background-color var(--motion-fast) ease,border-color var(--motion-fast) ease,box-shadow var(--motion-fast) ease;
}
.icon-button:hover{background:#F7F9FC;border-color:#D8DEE8}
.icon-button:active{transform:scale(.965)!important}

/* Search remains closed initially. Both opening and closing are visibly animated. */
.header-search-panel{
  display:block!important;
  max-height:0!important;
  opacity:0!important;
  transform:translateY(-7px)!important;
  overflow:hidden!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transition:max-height 300ms var(--ease-out),opacity 210ms ease,transform 300ms var(--ease-out),visibility 0s linear 300ms!important;
}
.header-search-inner{
  transform:none!important;
  padding-bottom:0!important;
  transition:padding-bottom 300ms var(--ease-out)!important;
}
.site-header.search-open .header-search-panel{
  max-height:104px!important;
  opacity:1!important;
  transform:translateY(0)!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transition-delay:0s!important;
}
.site-header.search-open .header-search-inner{padding-bottom:12px!important}
.site-header.search-open.search-ready .header-search-panel{overflow:visible!important}
.site-header.search-closing .header-search-panel{overflow:hidden!important;pointer-events:none!important}
.search-trigger{position:relative}
.search-trigger .trigger-icon{
  position:absolute;
  color:var(--navy)!important;
  transition:transform var(--motion-fast) var(--ease-out),opacity var(--motion-fast) ease;
}
.search-trigger .trigger-icon-search{opacity:1;transform:rotate(0) scale(1)}
.search-trigger .trigger-icon-close{opacity:0;transform:rotate(-45deg) scale(.76)}
.search-open .search-trigger .trigger-icon-search{opacity:0;transform:rotate(45deg) scale(.76)}
.search-open .search-trigger .trigger-icon-close{opacity:1;transform:rotate(0) scale(1)}
.search-bar .search-icon{color:var(--navy)!important}
.search-clear{transition:transform var(--motion-fast) var(--ease-out),background-color var(--motion-fast) ease}
.search-clear:active{transform:scale(.9)}
.search-results{transform-origin:top center;animation:minaResultIn var(--motion-fast) var(--ease-out) both}
.search-results a{transition:background-color var(--motion-fast) ease,transform var(--motion-instant) ease}
.search-results a:active{transform:scale(.985)}
@keyframes minaResultIn{from{transform:translateY(-4px) scale(.99);opacity:.01}to{transform:translateY(0) scale(1);opacity:1}}

/* Trust indicators remain one neutral bar. All labels stay neutral navy;
   only the four icons carry the approved accent colors. */
.trust-bar{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0!important;
  background:#FDFEFE!important;
  border:1px solid #E9EDF2!important;
  border-radius:16px!important;
  overflow:hidden!important;
  box-shadow:0 1px 4px rgba(20,33,61,.035)!important;
}
.trust-item{
  min-width:0;
  min-height:48px;
  display:flex!important;
  align-items:center;
  justify-content:center;
  gap:6px!important;
  padding:10px 5px!important;
  border:0!important;
  border-right:1px solid #E9EDF2!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--navy)!important;
  font-size:clamp(9.7px,2.55vw,11.4px)!important;
  line-height:1.1;
  white-space:nowrap;
  overflow:visible!important;
}
.trust-item:last-child{border-right:0!important}
.trust-item svg{width:21px!important;height:21px!important;flex:none}
.trust-item span{font-weight:800;color:var(--navy)!important}
.trust-item--fast svg{color:var(--trust-fast)!important}
.trust-item--safe svg{color:var(--trust-safe)!important}
.trust-item--trusted svg{color:var(--trust-trusted)!important}
.trust-item--qris svg{color:var(--trust-qris)!important}

/* Flash Sale keeps the REV4 section. Artwork has no extra visual frame or background.
   The discount badge is physically anchored to the artwork's top-left corner. */
.flash-sale{
  background:#FFFFFF!important;
  border-color:#EEF1F4!important;
  box-shadow:0 1px 4px rgba(20,33,61,.035)!important;
}
.flash-scroll{
  padding-top:18px!important;
  padding-left:21px!important;
  padding-right:14px!important;
  scroll-padding-left:21px!important;
  overflow-y:visible!important;
}
.flash-media{
  position:relative;
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.flash-media img{
  display:block;
  width:100%;
  height:100%;
  border:0!important;
  border-radius:14px!important;
  clip-path:inset(0 round 14px);
  box-shadow:none!important;
  transition:filter var(--motion-standard) ease,transform var(--motion-standard) var(--ease-out);
}
.flash-media img.asset-mode-cover{object-fit:cover!important;padding:0!important}
.flash-media img.asset-mode-contain{object-fit:contain!important;padding:5%!important}
.discount-tag{
  top:0!important;
  left:0!important;
  transform:translate(-31%,-38%)!important;
  z-index:6!important;
  opacity:1!important;
  animation:none!important;
  transition:none!important;
  white-space:nowrap;
  border-radius:10px!important;
  background:linear-gradient(135deg,var(--gold) 0%,var(--orange-deep) 100%)!important;
  color:#fff!important;
  box-shadow:0 3px 9px rgba(245,132,31,.30)!important;
}
.flash-card[data-out-of-stock] .discount-tag{opacity:1!important;filter:none!important}
.flash-card{transition:transform var(--motion-fast) var(--ease-out),filter var(--motion-fast) ease}
.flash-card:hover{transform:translateY(-1px)}
.flash-card:active{transform:scale(.982)}
.flash-media img.asset-pending,.product-media img.asset-pending{filter:saturate(.76) brightness(.985)}
.flash-card[data-out-of-stock] .flash-media img{filter:grayscale(.28) saturate(.76) brightness(.95)!important;opacity:.72!important}
.stock-badge{transition:transform var(--motion-fast) var(--ease-out),background-color var(--motion-fast) ease}
.flash-card[data-out-of-stock]:active .stock-badge{transform:scale(.98)}

/* Timer label and countdown are separate groups. Digits update without animation. */
.flash-head{align-items:center!important}
.flash-timer{
  display:flex!important;
  align-items:center;
  justify-content:flex-end;
  gap:4px!important;
  min-width:0;
}
.flash-timer-label{display:block;white-space:nowrap;color:var(--muted);font-size:11.5px;font-weight:650}
.flash-countdown{
  display:inline-flex;
  align-items:center;
  gap:5px;
  flex:none;
  font-variant-numeric:tabular-nums;
}
.timer-box{
  display:inline-grid!important;
  place-items:center;
  min-width:30px;
  padding:4px 7px!important;
  transition:none!important;
  animation:none!important;
  transform:none!important;
}
.timer-separator{color:var(--orange);font-size:13px;font-weight:800;line-height:1}
.timer-box.is-ticking{transform:none!important}
.flash-ended-note{animation:minaStateIn var(--motion-standard) var(--ease-out) both}
@keyframes minaStateIn{from{transform:translateY(-4px);opacity:.01}to{transform:translateY(0);opacity:1}}

/* Category navigation: every pill remains neutral. Only active text and icon change color. */
.quick-chip{
  min-height:44px;
  color:#667085!important;
  border-color:#E2E7EF!important;
  background:#FFFFFF!important;
  box-shadow:none!important;
  transition:color var(--motion-fast) ease,transform var(--motion-instant) ease;
}
.quick-chip:active{transform:scale(.975)!important}
.quick-chip.is-active{
  color:var(--catalog-blue)!important;
  background:#FFFFFF!important;
  border-color:#E2E7EF!important;
  box-shadow:none!important;
}
.quick-chip.is-active svg{color:var(--catalog-blue)!important;transform:scale(1.04)}
.quick-chip svg{transition:color var(--motion-fast) ease,transform var(--motion-fast) var(--ease-out)}
.quick-nav{transition:box-shadow var(--motion-fast) ease,background-color var(--motion-fast) ease}
.quick-nav.is-stuck{box-shadow:0 7px 18px rgba(20,33,61,.055)}
.quick-nav-scroll{padding-right:20px}
.heading-icon{color:var(--catalog-blue)!important}

/* Product cards keep REV4 anatomy but blend more naturally with the page background. */
.product-card{
  display:grid!important;
  grid-template-columns:clamp(62px,18vw,76px) minmax(0,1fr)!important;
  min-height:112px;
  padding:9px!important;
  gap:8px!important;
  background:#FDFEFE!important;
  border-color:#EEF1F4!important;
  box-shadow:0 1px 3px rgba(20,33,61,.025)!important;
  transition:transform var(--motion-fast) var(--ease-out),border-color var(--motion-fast) ease,box-shadow var(--motion-fast) ease;
}
.product-card:hover{transform:translateY(-1px);border-color:#E1E7EF!important;box-shadow:0 3px 8px rgba(20,33,61,.045)!important}
.product-card:active{transform:scale(.985)}
.product-media{
  width:clamp(62px,18vw,76px)!important;
  height:clamp(62px,18vw,76px)!important;
  border-radius:14px!important;
  overflow:hidden!important;
  background:#F4F6F8!important;
}
.product-media img{width:100%;height:100%;padding:0!important;border-radius:0!important;box-shadow:none!important;transition:filter var(--motion-standard) ease,transform var(--motion-standard) var(--ease-out)}
.product-media img.asset-mode-cover{object-fit:cover!important}
.product-media img.asset-mode-contain{object-fit:contain!important;padding:7%!important}
.product-copy{width:100%;min-width:0}
.product-name{font-size:clamp(11.7px,3vw,13px)}
.product-price{
  max-width:100%!important;
  width:max-content;
  padding:2.5px 6px!important;
  font-size:clamp(8.8px,2.35vw,10.2px)!important;
  line-height:1.28;
  letter-spacing:-.12px;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
  background:var(--catalog-blue-pill)!important;
  border:1px solid var(--catalog-blue-pill-border)!important;
  color:var(--catalog-blue-price)!important;
  box-shadow:none!important;
}

/* "Lihat semua" and "Tutup" use the same neutral white surface and neutral border.
   Only the chevron carries the Minatopup yellow accent. */
.catalog-toggle{
  min-height:46px;
  color:#475467!important;
  border-color:#DDE2E8!important;
  background:#FFFFFF!important;
  box-shadow:none!important;
  transition:transform var(--motion-instant) ease,background-color var(--motion-fast) ease,border-color var(--motion-fast) ease,color var(--motion-fast) ease;
}
.catalog-toggle:hover{background:#FAFBFC!important;border-color:#D5DBE3!important;color:#344054!important}
.catalog-toggle:active{transform:scale(.99)}
.catalog-toggle[aria-expanded="true"]{background:#FFFFFF!important;border-color:#DDE2E8!important;color:#344054!important}
.catalog-toggle-chevron{color:var(--gold-deep)!important}
.popular-extra{margin-top:10px}

/* Reliable reveal motion for the ninth popular product and all catalog extras. */
.catalog-extra.is-expanded .product-card--extra{
  opacity:0;
  transform:translateY(9px) scale(.985);
}
.catalog-extra.is-expanded .product-card--extra.is-revealed{
  animation:catalogCardOpen 300ms var(--ease-out) both;
  animation-delay:min(calc(var(--reveal-index)*24ms),360ms);
}
.popular-extra.is-expanded .product-card--extra.is-revealed{animation-duration:340ms}
@keyframes catalogCardOpen{
  from{opacity:0;transform:translateY(9px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.catalog-extra.is-closing{animation:catalogClose 190ms var(--ease-in) both;overflow:hidden}
@keyframes catalogClose{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-5px)}}

/* Sidebar support entry: neutral, restrained and aligned with the menu system. */
.drawer-header{justify-content:flex-start!important}
.drawer-drag-hint{display:none!important}
.drawer-link,.drawer-support-card{transition:background-color var(--motion-fast) ease,transform var(--motion-instant) ease,border-color var(--motion-fast) ease}
.drawer-link:active,.drawer-support-card:active{transform:scale(.988)}
.drawer-link:hover{background:#F7F9FC}
.drawer-end,.drawer-support-chevron{transition:transform var(--motion-fast) var(--ease-out)}
.drawer-link:active .drawer-end,.drawer-support-card:active .drawer-support-chevron{transform:translateX(2px)}
.drawer-support-card{
  position:relative!important;
  margin-top:18px!important;
  display:grid!important;
  grid-template-columns:36px minmax(0,1fr) 18px!important;
  align-items:center!important;
  gap:10px!important;
  min-height:64px!important;
  padding:10px 11px!important;
  border:1px solid #E5EAF0!important;
  border-radius:12px!important;
  background:#F8FAFC!important;
  color:var(--navy)!important;
  box-shadow:none!important;
}
.drawer-support-card::before{content:none!important}
.drawer-support-card:hover{background:#F4F7FA!important;border-color:#DCE3EB!important}
.drawer-support-icon{
  width:36px!important;
  height:36px!important;
  border-radius:10px!important;
  background:#EAF0F6!important;
  color:#35516D!important;
}
.drawer-support-icon svg{width:20px!important;height:20px!important}
.drawer-support-copy{gap:2px!important}
.drawer-support-copy strong{font-size:12.8px!important;color:var(--navy)!important}
.drawer-support-copy small{font-size:10.5px!important;color:var(--muted)!important}
.drawer-support-chevron{color:#8B96A6!important}

/* Progressive section movement. Static content never depends on JS visibility. */
.motion-enabled .motion-section{transform:translateY(5px);transition:transform var(--motion-standard) var(--ease-out)}
.motion-enabled .motion-section.is-visible{transform:translateY(0)}
.motion-enabled .trust-item{transform:translateY(2px)}
.motion-enabled .trust-strip.is-visible .trust-item{transform:translateY(0);transition:transform var(--motion-standard) var(--ease-out)}
.motion-enabled .trust-strip.is-visible .trust-item:nth-child(2){transition-delay:35ms}
.motion-enabled .trust-strip.is-visible .trust-item:nth-child(3){transition-delay:70ms}
.motion-enabled .trust-strip.is-visible .trust-item:nth-child(4){transition-delay:105ms}

/* Approved owner correction carried into REV7.4: preserve the original gold–orange rounded discount badge visual.
   Only its approved top-left overlap position remains changed. Timer label is kept close to countdown. */
/* Responsive spacing and fit. */
@media(max-width:390px){
  .flash-head{gap:7px!important}
  .flash-timer{width:100%;justify-content:flex-end;gap:4px!important}
  .flash-countdown{gap:4px}
  .timer-box{min-width:29px;padding:4px 6px!important}
}
@media(max-width:350px){
  .trust-item{min-height:57px;flex-direction:column;gap:3px!important;padding:7px 2px!important;font-size:9.2px!important}
  .trust-item svg{width:21px!important;height:21px!important}
  .product-card{grid-template-columns:58px minmax(0,1fr)!important;min-height:104px;padding:8px!important;gap:7px!important}
  .product-media{width:58px!important;height:58px!important}
  .product-name{font-size:11.2px}
  .product-copy small{font-size:9.9px}
  .product-price{font-size:8.55px!important;padding:2px 5px!important;letter-spacing:-.18px}
  .flash-scroll{padding-left:20px!important;scroll-padding-left:20px!important}
  .flash-timer{display:flex!important;justify-content:flex-end;gap:3px!important;white-space:nowrap}
}
@media(max-width:330px){
  .product-card{grid-template-columns:54px minmax(0,1fr)!important;min-height:100px;padding:6px!important;gap:5px!important}
  .product-media{width:54px!important;height:54px!important}
  .product-name{font-size:10.9px}
  .product-copy small{font-size:9.6px}
  .product-price{font-size:8.35px!important;padding:2px 4px!important;letter-spacing:-.2px}
}
@media(min-width:371px) and (max-width:430px){
  .product-card{grid-template-columns:clamp(66px,18vw,74px) minmax(0,1fr)!important}
  .product-media{width:clamp(66px,18vw,74px)!important;height:clamp(66px,18vw,74px)!important}
}
@media(min-width:760px){
  .product-card{grid-template-columns:78px minmax(0,1fr)!important;min-height:116px}
  .product-media{width:78px!important;height:78px!important}
  .product-price{font-size:10.2px!important}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .motion-enabled .motion-section,.motion-enabled .trust-item{transform:none!important}
}

/* REV7 verification corrections: animate every extra card, including the ninth popular product. */
.catalog-extra.is-expanded .product-card{opacity:0;transform:translateY(9px) scale(.985)}
.catalog-extra.is-expanded .product-card.is-revealed{
  animation:catalogCardOpen 300ms var(--ease-out) both;
  animation-delay:min(calc(var(--reveal-index)*24ms),360ms);
}
.popular-extra.is-expanded .product-card.is-revealed{animation-duration:340ms}
@media(min-width:351px) and (max-width:370px){
  .product-price{padding:2px 4px!important;letter-spacing:-.2px}
}