:root{--navy:#14213D;--navy-soft:#2C3A5E;--gold:#FFC72C;--gold-deep:#F5A623;--orange:#F5841F;--orange-deep:#FF7A00;--orange-pale:#FFF1DC;--bg:#F7F8FA;--surface:#FFF;--line:#E7E9EE;--muted:#6B7180;--muted-light:#9AA1B0;--radius-lg:20px;--radius-md:14px;--radius-sm:10px;--radius-pill:999px;--shadow-card:0 2px 10px rgba(20,33,61,.06);--font-display:'Poppins','Plus Jakarta Sans',sans-serif;--font-body:'Plus Jakarta Sans','Poppins',sans-serif;--gutter:16px}
*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:78px}body{margin:0;background:var(--bg);color:var(--navy);font-family:var(--font-body);-webkit-font-smoothing:antialiased;overflow-x:clip}body.drawer-open{overflow:hidden}a{text-decoration:none;color:inherit}button,input{font:inherit}img{display:block;max-width:100%}svg{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}:focus-visible{outline:3px solid var(--gold);outline-offset:3px}.page-shell{min-height:100dvh;display:flex;flex-direction:column}.site-header{background:var(--surface)}.header-inner,.main-wrap,.footer-inner{width:min(100%,480px);margin-inline:auto;padding-inline:var(--gutter)}.header-inner{height:72px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:10px;min-width:0;animation:brandEnter .32s ease-out both}.brand-mark{position:relative;width:40px;height:40px;flex:none;overflow:hidden;border-radius:8px}.brand-mark>img{width:100%;height:100%;object-fit:contain}.brand-specular{position:absolute;inset:0;background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.9) 48%,transparent 75%);background-size:250% 100%;background-position:180% 0;opacity:0;-webkit-mask:url('../img/brand/minatopup-m-official.png') center/contain no-repeat;mask:url('../img/brand/minatopup-m-official.png') center/contain no-repeat;animation:logoSpecular 8s cubic-bezier(.4,0,.2,1) infinite;pointer-events:none}.brand-wordmark{font-family:var(--font-display);font-size:19px;font-weight:800;letter-spacing:.2px;color:var(--navy);white-space:nowrap}@supports((-webkit-background-clip:text) or (background-clip:text)){.brand-wordmark{background:linear-gradient(90deg,var(--navy) 0%,var(--navy) 43%,var(--gold-deep) 50%,var(--navy) 57%,var(--navy) 100%);background-size:280% 100%;background-position:150% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:wordSweep 8s ease-in-out infinite}}.header-actions{display:flex;gap:8px}.icon-button{width:40px;height:40px;border:1.5px solid var(--line);border-radius:var(--radius-pill);display:grid;place-items:center;background:#fff;color:var(--navy);flex:none}.icon-button svg{width:19px;height:19px}.main-wrap{padding-bottom:36px}.search-section{position:relative}.search-bar{height:52px;display:flex;align-items:center;gap:10px;padding:0 16px;border:1.5px solid var(--line);border-radius:var(--radius-pill);background:#fff}.search-icon{width:19px;height:19px;color:var(--muted-light);flex:none}.search-bar input{width:100%;height:100%;border:0;outline:0;background:transparent;color:var(--navy);font-size:14.5px}.search-bar input::placeholder{color:var(--muted-light)}.search-bar:focus-within{border-color:var(--gold-deep);box-shadow:0 0 0 3px rgba(255,199,44,.14)}.search-clear{width:28px;height:28px;border:0;border-radius:50%;display:grid;place-items:center;background:var(--line);color:var(--muted)}.search-results{position:absolute;z-index:40;inset-inline:0;top:calc(100% + 7px);padding:6px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 28px rgba(20,33,61,.14);max-height:330px;overflow:auto}.search-results a{min-height:48px;padding:7px 9px;border-radius:10px;display:flex;align-items:center;gap:10px}.search-results a:hover{background:var(--bg)}.search-results img{width:36px;height:36px;border-radius:9px}.search-results span{display:grid}.search-results strong{font-size:13px}.search-results small{font-size:11px;color:var(--muted)}.search-empty{padding:13px;color:var(--muted);font-size:13px}.trust-strip{padding-top:14px}.trust-scroll{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}.trust-scroll::-webkit-scrollbar,.flash-scroll::-webkit-scrollbar,.quick-nav-scroll::-webkit-scrollbar{display:none}.trust-chip{flex:none;display:flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-pill);padding:9px 14px;font-size:12.5px;font-weight:600;white-space:nowrap}.trust-chip svg{width:15px;height:15px;color:var(--gold-deep)}.flash-sale{margin-top:18px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px 14px 16px;box-shadow:var(--shadow-card)}.flash-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:14px}.flash-title-cluster{display:flex;align-items:center;gap:8px}.flash-title-cluster>strong{font-size:12px}.flash-badge{display:flex;align-items:center;gap:5px;background:linear-gradient(90deg,var(--gold) 0%,var(--orange-deep) 100%);color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.3px;padding:6px 10px;border-radius:var(--radius-pill);box-shadow:0 5px 14px rgba(245,132,31,.18)}.flash-badge svg{width:12px;height:12px;fill:currentColor;stroke:none}.flash-timer{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);font-weight:600}.timer-box{background:var(--orange-pale);color:var(--orange);font-weight:800;font-size:12.5px;border-radius:6px;padding:4px 7px;font-variant-numeric:tabular-nums}.flash-scroll{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:inline mandatory;scrollbar-width:none;margin-inline:-14px;padding:0 14px 4px}.flash-card{flex:none;width:130px;scroll-snap-align:start}.flash-media{position:relative;display:block;width:130px;height:130px;border-radius:14px;overflow:hidden;margin-bottom:8px;background:#f4f5f7}.flash-media img{width:100%;height:100%;object-fit:cover}.discount-tag{position:absolute;z-index:2;top:8px;left:8px;background:var(--gold);color:var(--navy);font-size:11px;font-weight:800;padding:3px 7px;border-radius:10px}.flash-card>strong{display:block;font-size:13px;line-height:1.3;margin-bottom:2px}.flash-card>small{display:block;font-size:11.5px;color:var(--muted);margin-bottom:6px}.flash-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px;font-size:14px;font-weight:800;color:var(--gold-deep)}.flash-price del{font-size:11.5px;font-weight:500;color:var(--muted-light)}.quick-nav{position:sticky;top:0;z-index:30;margin-inline:calc(var(--gutter)*-1);padding:10px var(--gutter) 8px;background:rgba(247,248,250,.96);}.quick-nav-scroll{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}.quick-chip{flex:none;display:flex;align-items:center;gap:6px;padding:10px 16px;border-radius:var(--radius-pill);border:1px solid var(--line);background:#fff;font-size:13px;font-weight:700;color:var(--navy)}.quick-chip svg{width:15px;height:15px}.quick-chip.is-active{background:var(--gold);border-color:transparent;color:var(--navy);box-shadow:0 4px 10px rgba(255,199,44,.28)}.catalog-section{padding-top:22px;}.catalog-heading{display:flex;align-items:flex-start;gap:10px;margin-bottom:13px}.heading-icon{width:30px;height:30px;display:grid;place-items:center;color:var(--gold-deep);flex:none}.heading-icon svg{width:23px;height:23px}.catalog-heading h2{margin:0;font-family:var(--font-display);font-size:20px;line-height:1.25}.catalog-heading p{margin:3px 0 0;color:var(--muted);font-size:12.5px}.product-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.product-card{min-width:0;min-height:100px;padding:10px;background:#fff;border:1px solid var(--line);border-radius:14px;display:flex;align-items:center;gap:10px;box-shadow:var(--shadow-card)}.product-media{width:56px;height:56px;border-radius:10px;overflow:hidden;flex:none;background:#f4f5f7}.product-media img{width:100%;height:100%;object-fit:cover}.product-copy{min-width:0;display:flex;flex-direction:column;align-items:flex-start}.product-name{font-size:13px;line-height:1.3;font-weight:700;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.product-copy small{margin-top:2px;font-size:11px;color:var(--muted)}.product-price{margin-top:6px;max-width:100%;padding:4px 8px;border-radius:var(--radius-pill);background:#FFF4C7;color:#785500;font-size:11.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.catalog-more{margin-top:12px}.catalog-more summary{min-height:46px;padding:0 14px;border:1px solid var(--gold);border-radius:12px;background:#fff;display:grid;grid-template-columns:1fr 20px;align-items:center;font-size:13px;font-weight:700;cursor:pointer;list-style:none}.catalog-more summary::-webkit-details-marker{display:none}.summary-open,.summary-close{display:flex;align-items:center;justify-content:center;gap:7px}.summary-open svg{width:17px;height:17px;color:var(--gold-deep)}.summary-close{display:none}.catalog-more[open] .summary-open{display:none}.catalog-more[open] .summary-close{display:flex}.summary-chevron{transition:transform .18s}.catalog-more[open] .summary-chevron{transform:rotate(90deg)}.catalog-extra{margin-top:10px}.catalog-more[open] .product-card--extra{animation:cardReveal .22s ease-out both;animation-delay:min(calc(var(--reveal-index)*26ms),420ms)}.site-footer{margin-top:auto;background:#fff;border-top:1px solid var(--line)}.footer-inner{padding-block:16px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}.footer-brand{display:flex;align-items:center;gap:8px}.footer-brand img{width:30px;height:30px;object-fit:contain}.footer-brand span{display:grid}.footer-brand strong{font-size:12.5px}.footer-brand small{font-size:10.5px;color:var(--muted)}.footer-links{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:10.5px;color:var(--muted)}.footer-links a{font-weight:700;color:var(--navy)}.side-drawer{position:fixed;z-index:60;inset:0 auto 0 0;width:min(86vw,340px);padding:16px;background:#fff;box-shadow:18px 0 42px rgba(20,33,61,.22);transform:translateX(-104%);transition:transform .24s ease;overflow:auto}.side-drawer.is-open,.side-drawer:target{transform:translateX(0)}.drawer-header{height:60px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.drawer-brand{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:17px;font-weight:800}.drawer-brand img{width:32px;height:32px;object-fit:contain}.drawer-greeting{padding:16px 3px;display:grid;gap:3px}.drawer-greeting strong{font-family:var(--font-display);font-size:17px}.drawer-greeting span{font-size:12px;color:var(--muted)}.drawer-nav{display:grid;gap:3px}.drawer-link{min-height:49px;padding:8px 8px;display:grid;grid-template-columns:24px 1fr 18px;align-items:center;gap:9px;border-radius:11px;font-size:13px;font-weight:600}.drawer-link:hover{background:var(--bg)}.drawer-link--primary{position:relative;font-weight:750}.drawer-link--primary::before{content:'';position:absolute;left:-16px;width:3px;height:28px;border-radius:0 3px 3px 0;background:var(--gold)}.drawer-link--primary>svg:first-child{color:var(--gold-deep)}.drawer-end{width:17px;height:17px;color:var(--muted-light)}.drawer-divider{height:1px;background:var(--line);margin:8px 0}.drawer-scrim{position:fixed;z-index:50;inset:0;background:rgba(20,33,61,.46);opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s linear .2s}.drawer-open .drawer-scrim,.side-drawer:target+.drawer-scrim{opacity:1;visibility:visible;transition-delay:0s}.offline-bar{position:fixed;z-index:80;left:50%;bottom:18px;transform:translateX(-50%);width:min(calc(100% - 32px),420px);padding:11px 13px;border-radius:11px;background:var(--navy);color:#fff;text-align:center;font-size:12px;box-shadow:0 8px 22px rgba(20,33,61,.2)}@keyframes brandEnter{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}@keyframes logoSpecular{0%,6%{background-position:180% 0;opacity:0}9%{opacity:.65}18%{background-position:-80% 0;opacity:0}100%{background-position:-80% 0;opacity:0}}@keyframes wordSweep{0%,10%{background-position:150% 0}20%{background-position:-50% 0}100%{background-position:-50% 0}}@keyframes cardReveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.page-hidden .brand-specular,.page-hidden .brand-wordmark{animation-play-state:paused}
@media(min-width:520px){:root{--gutter:20px}.header-inner,.main-wrap,.footer-inner{width:min(100%,600px)}.brand-wordmark{font-size:20px}.flash-card{width:142px}.flash-media{width:142px;height:142px}.product-grid{gap:12px}.product-card{min-height:104px}.quick-nav{margin-inline:calc(var(--gutter)*-1)}}
@media(min-width:760px){.header-inner,.main-wrap,.footer-inner{width:min(100%,860px)}.product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.header-inner{height:76px}.brand-mark{width:42px;height:42px}.brand-wordmark{font-size:21px}.flash-card{width:150px}.flash-media{width:150px;height:150px}.side-drawer{width:340px}}
@media(max-width:370px){.brand-wordmark{font-size:18px}.flash-head{align-items:flex-start}.flash-timer{width:100%;justify-content:flex-end}.product-card{padding:8px;gap:8px}.product-media{width:52px;height:52px}.product-price{font-size:10.5px;padding-inline:6px}.quick-chip{padding-inline:14px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.brand,.brand-specular,.brand-wordmark,.product-card--extra,.summary-chevron{animation:none!important;transition:none!important}.quick-chip{scroll-behavior:auto}}

/* ========================================================================== 
   OWNER ACC FINAL REVISION — 2026-07-28
   ========================================================================== */
:root{
  --flash-price-gold:#9F6B00;
  --neutral-control:#F3F5F7;
  --neutral-control-border:#E2E6EB;
  --current-header-height:72px;
  --quick-nav-height:62px;
}
*{-webkit-tap-highlight-color:transparent}
button,a,input{-webkit-tap-highlight-color:transparent}
button{color:inherit}
button:focus:not(:focus-visible),a:focus:not(:focus-visible),input:focus:not(:focus-visible){outline:none}
button::-moz-focus-inner{border:0}

.site-header{
  position:sticky;
  top:0;
  z-index:70;
  background:#fff;
  border-bottom:1px solid transparent;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.site-header.is-scrolled,.site-header.search-open{
  border-bottom-color:rgba(20,33,61,.07);
  box-shadow:0 5px 18px rgba(20,33,61,.055);
}
.header-actions button{padding:0}
.icon-button:active{transform:none;box-shadow:none}
.header-search-panel{
  max-height:0;
  opacity:0;
  transform:translateY(-4px);
  overflow:hidden;
  pointer-events:none;
  transition:max-height .21s ease,opacity .18s ease,transform .21s ease;
}
.site-header.search-open .header-search-panel{
  max-height:82px;
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.site-header.search-ready .header-search-panel{overflow:visible}
.header-search-inner{
  width:min(100%,480px);
  margin-inline:auto;
  padding:0 var(--gutter) 14px;
}
.search-section{position:relative}
.search-bar{height:50px;padding:0 10px 0 16px;box-shadow:0 4px 14px rgba(32,36,43,.055)}
.search-bar:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,199,44,.14)}
.search-bar input{padding-right:4px}
.search-bar input::-webkit-search-cancel-button,.search-bar input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.search-clear{
  width:34px;
  height:34px;
  flex:0 0 34px;
  padding:0;
  border:0;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#F1F3F5;
  color:var(--navy);
}
.search-clear svg{width:17px;height:17px}
.search-clear:active{background:#F1F3F5;transform:none}
.search-results{top:calc(100% + 8px);max-height:min(48vh,360px);z-index:90}
.search-results>a{min-height:54px;padding:7px 8px;display:flex;align-items:center;gap:11px;border-radius:10px}
.search-results>a:active{background:#F7F8FA}
.search-results>a img{width:38px;height:38px;object-fit:contain;border-radius:9px;background:#F4F5F7}
.search-results>a span{min-width:0;display:grid;gap:2px}
.search-results>a strong{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-results>a small{font-size:11.5px;color:var(--muted)}
.search-empty{min-height:76px;padding:14px;display:grid;place-content:center;gap:3px;text-align:center}
.search-empty strong{font-size:13px}.search-empty span{font-size:11.5px;color:var(--muted)}

.main-wrap{padding-top:0}
.trust-strip{padding-top:14px}
.quick-nav{
  top:var(--current-header-height);
  z-index:55;
  transition:top .2s ease;
}
.catalog-section{scroll-margin-top:calc(var(--current-header-height) + var(--quick-nav-height) + 12px)}

.flash-title-cluster{gap:0}
.flash-scroll{gap:13px;scroll-padding-inline:14px}
.flash-card>strong,.flash-card>.flash-variant,.flash-card>.flash-price{margin-inline:6px 4px}
.flash-card>strong{margin-top:10px}
.flash-variant{
  min-width:0;
  margin-top:4px;
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--muted);
}
.flash-variant-icon{
  width:18px;
  height:18px;
  flex:0 0 18px;
  display:grid;
  place-items:center;
  border-radius:6px;
  background:#F5F6F8;
  color:var(--gold-deep);
}
.flash-variant-icon svg{width:14px;height:14px;stroke-width:1.8}
.flash-variant small{min-width:0;font-size:11.5px;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.flash-price{margin-top:7px;gap:6px;color:var(--flash-price-gold);font-size:15px}
.flash-price del{color:#9298A1;font-size:11px;font-weight:500}
.flash-timer{gap:5px}
.flash-timer>span:first-child{margin-right:1px}
.timer-box{
  min-width:31px;
  padding:5px 6px;
  border:1px solid var(--neutral-control-border);
  background:var(--neutral-control);
  color:var(--navy);
  border-radius:9px;
  text-align:center;
  font-size:13px;
}
.flash-timer>b{color:var(--gold);font-weight:800}

.quick-chip{position:relative;background:#fff;color:#596273;border-color:#E4E7EC;overflow:hidden}
.quick-chip.is-active{
  background:#fff;
  color:var(--navy);
  border-color:#DDE2E8;
  box-shadow:0 3px 10px rgba(20,33,61,.055);
}
.quick-chip.is-active::after{
  content:'';
  position:absolute;
  left:18px;
  right:18px;
  bottom:3px;
  height:3px;
  border-radius:3px;
  background:var(--gold);
}
.quick-chip.is-active svg{color:var(--gold-deep)}
.quick-chip:active{transform:none}

.catalog-heading{align-items:center}
.catalog-heading p{margin-top:3px}
.product-card{
  min-height:110px;
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  align-items:center;
  gap:10px;
  padding:10px;
}
.product-media{
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  align-self:center;
  margin:0;
  border-radius:11px;
}
.product-media img{
  width:100%;
  height:100%;
  padding:4px;
  object-fit:contain;
  object-position:center;
}
.product-copy{align-self:center}
.product-price{
  position:relative;
  min-height:27px;
  padding:5px 9px 5px 12px;
  border:1px solid var(--neutral-control-border);
  background:var(--neutral-control);
  color:var(--navy);
}
.product-price::before{
  content:'';
  position:absolute;
  left:6px;
  top:7px;
  bottom:7px;
  width:2px;
  border-radius:2px;
  background:var(--gold);
}

.catalog-extra{margin-top:10px}
.catalog-toggle{
  display:none;
  width:100%;
  min-height:46px;
  margin-top:12px;
  padding:0 14px;
  border:1px solid var(--gold);
  border-radius:12px;
  background:#fff;
  align-items:center;
  justify-content:center;
  gap:7px;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
}
.ui-enhanced .catalog-toggle{display:flex}
.ui-enhanced .catalog-extra:not(.is-expanded){display:none}
.catalog-toggle-chevron{width:17px;height:17px;color:var(--gold-deep);transition:transform .18s ease}
.catalog-toggle[aria-expanded="true"] .catalog-toggle-chevron{transform:rotate(-90deg)}
.catalog-toggle:disabled{opacity:.7}
.catalog-extra.is-expanded .product-card--extra{opacity:0;transform:translateY(7px)}
.catalog-extra.is-expanded .product-card--extra.is-revealed{
  animation:cardReveal .2s ease-out both;
  animation-delay:min(calc(var(--reveal-index)*26ms),420ms);
}
.catalog-extra.is-closing{animation:catalogClose .19s ease-in both;overflow:hidden}
@keyframes catalogClose{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-5px)}}

.drawer-close{
  width:40px;
  height:40px;
  padding:0;
  border:0;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:transparent;
  color:#596273;
}
.drawer-close svg{width:19px;height:19px}
.drawer-close:active{background:transparent;transform:none}
.drawer-scrim{padding:0;border:0}
.side-drawer{z-index:100}
.drawer-scrim{z-index:90}

@media(min-width:520px){
  .header-search-inner{width:min(100%,600px);padding-inline:20px}
  .product-card{min-height:112px}
}
@media(min-width:760px){
  .header-search-inner{width:min(100%,860px)}
}
@media(max-width:370px){
  .product-card{grid-template-columns:60px minmax(0,1fr);min-height:106px;padding:8px;gap:8px}
  .product-media{width:60px;height:60px}
  .flash-scroll{gap:12px}
  .flash-card>strong,.flash-card>.flash-variant,.flash-card>.flash-price{margin-inline:5px 3px}
}
@media(prefers-reduced-motion:reduce){
  .site-header,.header-search-panel,.catalog-toggle-chevron,.catalog-extra,.product-card--extra{transition:none!important;animation:none!important}
}

/* Final mobile product-card optical fit */
.product-media img{padding:0;transform:none;transform-origin:center}
.product-price{
  padding:4px 4px 4px 9px;
  font-size:clamp(9.6px,2.7vw,11.5px);
  letter-spacing:-.12px;
}
.product-price::before{left:4px;top:7px;bottom:7px}

/* Precision fit after 390 px visual review */
@media(max-width:519px){
  .flash-head{flex-wrap:nowrap;gap:6px}
  .flash-badge{font-size:11px;padding:6px 9px;gap:4px}
  .flash-timer{font-size:10.5px;gap:4px;white-space:nowrap}
  .timer-box{min-width:29px;padding:4px 5px;font-size:12.5px}
  .product-card{padding:9px;gap:8px}
  .product-price{padding:4px 3px 4px 8px;font-size:clamp(9.35px,2.5vw,10.7px);letter-spacing:-.16px}
  .product-price::before{left:3px}
}
@media(max-width:370px){
  .flash-head{gap:4px}
  .flash-badge{font-size:10.5px;padding-inline:8px}
  .flash-timer>span:first-child{font-size:10px}
  .timer-box{min-width:27px;padding-inline:4px}
  .product-card{grid-template-columns:60px minmax(0,1fr);padding:8px;gap:7px}
  .product-price{font-size:9.25px;padding-right:2px}
}

/* ==========================================================================
   REVISI OWNER — 2026-07-29
   ========================================================================== */

/* 1. Drawer: no close button, drag handle hint + real-time swipe close */
.drawer-header{justify-content:flex-start;gap:10px}
.drawer-drag-hint{width:34px;height:4px;border-radius:3px;background:var(--line);margin-left:auto}
.side-drawer{touch-action:pan-y}
.side-drawer.is-dragging{transition:none}

/* 2. Search default visible handled in markup (search-open + search-ready classes) */

/* 3. Flash timer: shift left, larger legible text, orange, no background block */
.flash-head{justify-content:flex-start;gap:12px}
.flash-timer{gap:6px;font-size:13px;color:var(--muted)}
.flash-timer>span:first-child{font-size:12.5px;font-weight:700;color:var(--orange-deep);margin-right:0}
.flash-timer>b{color:var(--orange-deep);font-weight:800}
.timer-box{
  background:transparent;
  border:none;
  color:var(--orange-deep);
  font-size:14.5px;
  font-weight:800;
  padding:2px 2px;
  min-width:24px;
  border-radius:0;
}

/* 4. Flash sale icons slightly smaller + more spacing between cards */
.flash-scroll{gap:16px;padding-top:12px}
.flash-card{width:118px}
.flash-media{width:118px;height:118px;overflow:visible;background:transparent}
.flash-media img{border-radius:18px;object-fit:cover;box-shadow:none}

/* Discount badge: half in / half out of the icon, white text (points 4 & 20) */
.discount-tag{
  top:0;
  left:10px;
  transform:translateY(-45%);
  background:linear-gradient(135deg,var(--gold) 0%,var(--orange-deep) 100%);
  color:#fff;
  box-shadow:0 3px 9px rgba(245,132,31,.3);
  z-index:3;
}

/* 5 & 6. Flash sale price: more vivid color, crossed-out price moved right and fades via opacity mask, stays inside card */
.flash-price{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:6px;
  background:linear-gradient(90deg,var(--gold-deep) 0%,var(--orange-deep) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:var(--orange-deep);
}
.flash-price del{
  -webkit-text-fill-color:var(--muted-light);
  color:var(--muted-light);
  background:none;
  flex:0 1 auto;
  min-width:0;
  max-width:46%;
  overflow:hidden;
  white-space:nowrap;
  -webkit-mask-image:linear-gradient(to right,#000 60%,transparent 96%);
  mask-image:linear-gradient(to right,#000 60%,transparent 96%);
}

/* 7. Trust strip as one unified bar (not 4 separate pills), icons slightly larger */
.trust-strip{padding-top:14px}
.trust-bar{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  box-shadow:var(--shadow-card);
}
.trust-item{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:11px 4px;
  font-size:11.5px;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  border-right:1px solid var(--line);
  color:var(--navy);
}
.trust-item:last-child{border-right:0}
.trust-item svg{width:17px;height:17px;flex:none;color:var(--gold-deep)}

/* Quick-nav category icons slightly larger */
.quick-chip svg{width:17px;height:17px}

/* 8. Active category tab: remove yellow underline, clearer active/inactive contrast */
.quick-chip.is-active{
  background:var(--navy);
  color:#fff;
  border-color:var(--navy);
  box-shadow:0 5px 12px rgba(20,33,61,.2);
}
.quick-chip.is-active svg{color:var(--gold)}
.quick-chip.is-active::after{content:none}

/* 9. "Mulai X" price pill: more attractive color, smaller pill + text, no gold accent line */
.product-price{
  background:#FFDE85;
  color:#7A4A00;
  border:none;
  padding:3px 8px;
  font-size:10.2px;
  min-height:auto;
  font-weight:800;
}
.product-price::before{content:none}

/* 10. Slightly larger product artwork inside catalog cards (card size unchanged) */
.product-card{grid-template-columns:70px minmax(0,1fr)}
.product-media{width:70px;height:70px;background:transparent;box-shadow:none}
.product-media img{padding:2px;border-radius:22%;box-shadow:none}

/* 11. Blend product-card & flash icon backgrounds subtly with the page, remove shadows */
.product-card{
  background:#FBFCFE;
  border-color:#EEF0F4;
  box-shadow:0 1px 3px rgba(20,33,61,.035);
}
.flash-sale{box-shadow:0 1px 4px rgba(20,33,61,.04)}

/* 14. Flash sale variant icon slightly larger (it has no shadow, needs a touch more size) */
.flash-variant-icon{width:21px;height:21px;flex:0 0 21px;background:transparent}
.flash-variant-icon svg{width:16px;height:16px}

/* 15 & 17. Out-of-stock decorative treatment for flash sale dummy products */
.flash-card[data-out-of-stock] .flash-media img{filter:grayscale(.4) brightness(.94);opacity:.6}
.flash-card[data-out-of-stock] .discount-tag{opacity:.55;filter:grayscale(.3)}
.flash-card[data-out-of-stock] .flash-price{opacity:.65}
.stock-badge{
  position:absolute;
  z-index:4;
  left:6px;
  right:6px;
  bottom:7px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  background:rgba(20,33,61,.86);
  color:#fff;
  font-size:9.6px;
  font-weight:700;
  letter-spacing:.2px;
  padding:4px 5px;
  border-radius:8px;
}
.stock-badge svg{width:11px;height:11px}

/* 16. Interactive notice when the flash sale countdown reaches 00:00:00 */
.flash-ended-note{
  display:flex;
  align-items:center;
  gap:8px;
  margin:-2px 0 12px;
  padding:9px 11px;
  background:var(--orange-pale);
  color:#8A4B00;
  border-radius:11px;
  font-size:11.8px;
  font-weight:600;
  line-height:1.35;
}
.flash-ended-note svg{width:16px;height:16px;flex:none;color:var(--orange-deep)}
.flash-scroll.is-ended{opacity:.5;pointer-events:none}

/* Simple toast for interactive stock warnings */
.mina-toast{
  position:fixed;
  z-index:200;
  left:50%;
  bottom:26px;
  transform:translateX(-50%) translateY(12px);
  max-width:min(calc(100% - 32px),380px);
  background:var(--navy);
  color:#fff;
  font-size:12.5px;
  font-weight:600;
  line-height:1.4;
  padding:11px 15px;
  border-radius:12px;
  box-shadow:0 10px 28px rgba(20,33,61,.28);
  opacity:0;
  transition:opacity .18s ease,transform .18s ease;
  display:flex;
  align-items:center;
  gap:8px;
}
.mina-toast svg{width:16px;height:16px;flex:none;color:var(--gold)}
.mina-toast.is-visible{opacity:1;transform:translateX(-50%) translateY(0)}

/* 19. Soften the loud yellow borders (search bar focus + "Lihat semua" button) */
.search-bar:focus-within{border-color:rgba(245,166,35,.55);box-shadow:0 0 0 3px rgba(255,199,44,.1)}
.catalog-toggle{border-color:#E4E7EC;background:#FBFCFE}
.catalog-toggle-chevron{color:var(--gold-deep)}

@media(min-width:520px){
  .flash-card{width:130px}
  .flash-media{width:130px;height:130px}
}
@media(min-width:760px){
  .flash-card{width:138px}
  .flash-media{width:138px;height:138px}
}
@media(max-width:519px){
  .timer-box{min-width:auto;padding:2px 2px;font-size:13.5px}
  .flash-timer{font-size:12px;gap:5px}
  .product-price{padding:3px 7px;font-size:clamp(9.6px,2.6vw,10.4px)}
  .trust-item{font-size:10.8px;padding:10px 3px;gap:4px}
}
@media(max-width:370px){
  .timer-box{min-width:auto;padding:2px 1px}
  .flash-timer>span:first-child{font-size:10.5px}
  .product-card{grid-template-columns:64px minmax(0,1fr)}
  .product-media{width:64px;height:64px}
  .trust-item{font-size:9.8px;padding:9px 2px;gap:3px}
  .trust-item svg{width:15px;height:15px}
}
@media(prefers-reduced-motion:reduce){
  .mina-toast{transition:none}
}


/* ========================================================================== 
   UI-01 TEST CANDIDATE — OWNER-APPROVED TARGETED CORRECTIONS — 2026-07-29
   Scope is intentionally limited. Product Populer grid/system is unchanged.
   ========================================================================== */
:root{
  --mina-royal-gold:#E1AE1B;
  --mina-antique-gold:#C27B14;
  --mina-gold-deep:#98510E;
  --mina-champagne:#F8E3A0;
  --mina-champagne-soft:#FFF8E5;
  --mina-ivory:#FFFDF7;
  --mina-burgundy:#743447;
  --mina-warm-graphite:#625E57;
  --mina-support-surface:#FFF6DC;
  --mina-support-border:#D79A19;
  --mina-support-text:#594019;
  --mina-support-muted:#786842;
}

/* Header brand: restrained signature pulse, then a short gold accent sweep. */
.brand-mark{
  overflow:visible;
  transform-origin:50% 55%;
  animation:minaBrandSignature 9s cubic-bezier(.22,.8,.3,1) infinite;
  will-change:transform,filter;
}
.brand-mark>img{position:relative;z-index:1}
.brand-mark::after{
  content:'';
  position:absolute;
  z-index:0;
  inset:6px;
  border-radius:12px;
  background:rgba(225,174,27,.20);
  filter:blur(7px);
  opacity:0;
  animation:minaBrandHalo 9s ease-in-out infinite;
  pointer-events:none;
}
.brand-specular{
  z-index:2;
  background:linear-gradient(112deg,transparent 29%,rgba(255,249,226,.98) 47%,rgba(212,178,85,.78) 51%,transparent 69%);
  background-size:280% 100%;
  animation:minaLogoSweep 9s cubic-bezier(.22,.8,.3,1) infinite;
}
.brand-wordmark{
  color:var(--navy);
  letter-spacing:.32px;
}
@supports((-webkit-background-clip:text) or (background-clip:text)){
  .brand-wordmark{
    background:linear-gradient(100deg,var(--navy) 0%,var(--navy) 44%,#D0AF58 49%,var(--navy) 54%,var(--navy) 100%);
    background-size:330% 100%;
    background-position:145% 0;
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    animation:minaWordmarkAccent 9s cubic-bezier(.22,.8,.3,1) infinite;
  }
}
@keyframes minaBrandSignature{
  0%,66%,100%{transform:translateY(0) scale(1);filter:drop-shadow(0 0 0 rgba(225,174,27,0))}
  70%{transform:translateY(-1px) scale(1.032);filter:drop-shadow(0 3px 5px rgba(148,106,24,.18))}
  75%{transform:translateY(0) scale(1);filter:drop-shadow(0 0 0 rgba(225,174,27,0))}
}
@keyframes minaBrandHalo{
  0%,66%,76%,100%{opacity:0;transform:scale(.92)}
  70%{opacity:.68;transform:scale(1.04)}
}
@keyframes minaLogoSweep{
  0%,66%{background-position:170% 0;opacity:0}
  68%{opacity:.72}
  74%{background-position:-80% 0;opacity:0}
  100%{background-position:-80% 0;opacity:0}
}
@keyframes minaWordmarkAccent{
  0%,68%{background-position:145% 0}
  75%{background-position:-48% 0}
  100%{background-position:-48% 0}
}

/* Search is closed on first load. Search and close icons cross-fade without DOM replacement bugs. */
.search-trigger{position:relative;overflow:hidden;color:var(--mina-royal-gold);transition:border-color .2s ease,background-color .2s ease,box-shadow .2s ease}
.search-trigger .trigger-icon{grid-area:1/1;transition:opacity .18s ease,transform .22s cubic-bezier(.22,.8,.3,1),color .18s ease}
.search-trigger .trigger-icon-search{opacity:1;transform:rotate(0) scale(1);color:var(--mina-royal-gold)}
.search-trigger .trigger-icon-close{opacity:0;transform:rotate(-42deg) scale(.72);color:var(--mina-burgundy)}
.site-header.search-open .search-trigger{
  background:var(--mina-champagne-soft);
  border-color:rgba(225,174,27,.48);
  box-shadow:0 4px 12px rgba(152,81,14,.07);
}
.site-header.search-open .search-trigger .trigger-icon-search{opacity:0;transform:rotate(42deg) scale(.72)}
.site-header.search-open .search-trigger .trigger-icon-close{opacity:1;transform:rotate(0) scale(1)}
.search-icon{color:var(--mina-antique-gold)}
.search-clear{background:#F2EDF0;color:var(--mina-burgundy);transition:background-color .16s ease,color .16s ease}
.search-clear:active{background:#EBE1E6;color:#5E293A}
.search-bar{border-color:#DED9CD;transition:border-color .18s ease,box-shadow .2s ease,background-color .18s ease}
.search-bar:focus-within{
  border-color:var(--mina-royal-gold);
  background:#fff;
  box-shadow:0 0 0 3px rgba(225,174,27,.14),0 8px 18px rgba(152,81,14,.055);
}

/* Four concise trust labels remain unchanged; icon treatment is warm-gold, not orange. */
.trust-item svg{color:var(--mina-royal-gold)}

/* Flash Sale timer: gold digits, quiet label/separators, stronger numerical hierarchy. */
.flash-head{align-items:center;flex-wrap:nowrap}
.flash-title-cluster{flex:0 0 auto}
.flash-timer{
  margin-left:auto;
  justify-content:flex-end;
  gap:4px;
  color:var(--mina-warm-graphite);
  font-size:10.5px;
  font-weight:600;
  white-space:nowrap;
}
.flash-timer>span:first-child{font-size:10.5px;color:var(--mina-warm-graphite);font-weight:600;margin-right:2px}
.flash-timer>b{font-family:var(--font-display);font-size:11px;line-height:1;color:var(--mina-warm-graphite);font-weight:700}
.timer-box{
  min-width:27px;
  padding:3px 5px;
  border:1px solid rgba(225,174,27,.27);
  border-radius:7px;
  background:#F6D77D;
  color:var(--mina-gold-deep);
  font-family:var(--font-display);
  font-size:15px;
  line-height:1.15;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  text-align:center;
}

/* Flash Sale pricing: solid premium gold; crossed price is plain warm gray. */
.flash-price{
  color:var(--mina-antique-gold);
  background:none;
  -webkit-background-clip:border-box;
  background-clip:border-box;
  -webkit-text-fill-color:currentColor;
  font-size:14.5px;
}
.flash-price del{
  color:#918B80;
  -webkit-text-fill-color:#918B80;
  background:none;
  -webkit-mask-image:none;
  mask-image:none;
  opacity:.58;
}

/* Quick navigation: active state is ivory/gold, never full navy. */
.quick-chip.is-active{
  background:var(--mina-ivory);
  color:var(--mina-antique-gold);
  border-color:rgba(225,174,27,.58);
  box-shadow:0 5px 13px rgba(194,123,20,.10);
}
.quick-chip.is-active svg{color:var(--mina-royal-gold)}

/* Repeated price pill remains secondary and compact. */
.product-price{
  padding:2px 7px;
  border:1px solid rgba(225,174,27,.30);
  background:var(--mina-champagne-soft);
  color:#6A4817;
  font-size:9.8px;
  line-height:1.45;
  font-weight:800;
}

/* Drawer layout and bottom support card. No floating customer-service control is added. */
.side-drawer{
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
  padding-bottom:max(16px,env(safe-area-inset-bottom));
}
.drawer-nav{flex:0 0 auto}
.drawer-support-card{
  position:relative;
  margin-top:auto;
  display:grid;
  grid-template-columns:40px minmax(0,1fr) 18px;
  align-items:center;
  gap:10px;
  min-height:72px;
  padding:11px 12px;
  border:1px solid var(--mina-support-border);
  border-radius:14px;
  background:linear-gradient(135deg,var(--mina-support-surface) 0%,#FFFDF6 100%);
  color:var(--mina-support-text);
  box-shadow:0 7px 18px rgba(152,81,14,.10);
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.drawer-support-card::before{content:'';position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 4px 4px 0;background:var(--mina-royal-gold)}
.drawer-support-card:active{transform:translateY(-1px);border-color:var(--mina-gold-deep);box-shadow:0 9px 20px rgba(152,81,14,.14)}
.drawer-support-icon{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:#F6D77D;
  color:var(--mina-gold-deep);
}
.drawer-support-icon svg{width:21px;height:21px}
.drawer-support-copy{min-width:0;display:grid;gap:3px}
.drawer-support-copy strong{font-size:13px;line-height:1.25;font-weight:800;color:var(--mina-support-text)}
.drawer-support-copy small{font-size:10.6px;line-height:1.35;color:var(--mina-support-muted)}
.drawer-support-chevron{width:17px;height:17px;color:var(--mina-antique-gold)}

/* Legal links stay in the drawer; bottom footer is deliberately minimal. */
.footer-inner--minimal{
  min-height:48px;
  padding-block:13px;
  justify-content:center;
  gap:7px 12px;
  color:var(--muted);
  font-size:10.5px;
  text-align:center;
}
.footer-inner--minimal span+span::before{content:'•';margin-right:12px;color:#B2ADA3}

@media(max-width:390px){
  .flash-head{gap:5px}
  .flash-badge{padding-inline:8px;font-size:10.8px}
  .flash-timer{gap:3px}
  .flash-timer>span:first-child{font-size:9.8px;margin-right:1px}
  .timer-box{min-width:24px;padding:3px 3px;font-size:14px}
  .flash-timer>b{font-size:10px}
}
@media(max-width:350px){
  .flash-head{align-items:flex-start;flex-wrap:wrap}
  .flash-timer{width:100%;margin-top:3px}
  .footer-inner--minimal span{display:block;width:100%}
  .footer-inner--minimal span+span::before{content:none;margin:0}
}
@media(prefers-reduced-motion:reduce){
  .brand-mark,.brand-mark::after,.brand-specular,.brand-wordmark{animation:none!important}
  .search-trigger,.search-trigger .trigger-icon,.search-bar,.drawer-support-card{transition:none!important}
}


/* ========================================================================== 
   UI-01 TEST REV3 — OWNER COLOR REFINEMENT — 2026-07-29
   Only active category tabs, search neutral states, and Flash Sale price color
   are changed. No layout, Popular system, floating CS, or interaction changes.
   ========================================================================== */
:root{
  --mina-tab-yellow:#D8AA00;
  --mina-tab-yellow-border:#E5BD24;
  --mina-flash-price-yellow:#E0A800;
  --mina-neutral-focus:#AEB5BF;
  --mina-neutral-ring:rgba(20,33,61,.055);
}

/* Active catalog navigation: white surface; only text and border become yellow. */
.quick-chip.is-active{
  background:#fff;
  color:var(--mina-tab-yellow);
  border-color:var(--mina-tab-yellow-border);
  box-shadow:none;
  text-shadow:none;
}
.quick-chip.is-active svg{color:var(--navy)}

/* Search open/close control stays visually neutral; only the X glyph carries color. */
.site-header.search-open .search-trigger{
  background:#fff;
  border-color:var(--line);
  box-shadow:none;
}
.search-trigger .trigger-icon-close{color:var(--mina-burgundy)}

/* Search field focus uses neutral structure: no yellow/gold/brown border or halo. */
.search-bar:focus-within{
  border-color:var(--mina-neutral-focus);
  background:#fff;
  box-shadow:0 0 0 3px var(--mina-neutral-ring);
}

/* Clear-X circle is neutral; the glyph remains readable without a tinted ring. */
.search-clear,
.search-clear:active{
  background:#F1F3F5;
  color:var(--navy);
  box-shadow:none;
}

/* Flash Sale current price: brighter solid yellow, still without gradient. */
.flash-price{
  color:var(--mina-flash-price-yellow);
  -webkit-text-fill-color:currentColor;
}
.flash-price del{
  opacity:.58;
}

/* ==========================================================================
   UI-01 TEST REV4 — OWNER FOLLOW-UP FIXES — 2026-07-29
   1) Flash Sale crossed-out price: must show in full, no clipping/fade-out.
   2) Active catalog tab: solid color matching Flash Sale price (no gradient),
      icon takes the same color as the label.
   3) Bantuan & CS drawer card: neutral background, no left accent line.
   4) Trust strip (header pill) icons: slightly larger.
   ========================================================================== */

/* 1) Show the full strikethrough price — remove clipping/mask/truncation */
.flash-price del{
  max-width:none;
  overflow:visible;
  white-space:nowrap;
  -webkit-mask-image:none;
  mask-image:none;
}

/* 2) Active catalog tab: same solid color as Flash Sale price, icon matches */
.quick-chip.is-active{
  color:var(--mina-flash-price-yellow);
  border-color:var(--mina-flash-price-yellow);
}
.quick-chip.is-active svg{color:var(--mina-flash-price-yellow)}

/* 3) Bantuan & CS card: neutral background, no left accent bar */
.drawer-support-card{
  background:var(--neutral-control);
  border-color:var(--neutral-control-border);
  box-shadow:none;
}
.drawer-support-card:active{
  border-color:var(--neutral-control-border);
  box-shadow:none;
}
.drawer-support-card::before{content:none}

/* 4) Slightly larger icons in the trust strip (header pill) */
.trust-item svg{width:20px;height:20px}