/* === STYLE: css/styles.css === */
@keyframes ticker{to{transform:translateX(-50%)}}@keyframes salesCountdown{0%{transform:scaleX(1)}to{transform:scaleX(0)}}:root{
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --radius-control: 12px;
  --radius-card: 18px;
  --radius-sheet: 24px;
  --control-height: 44px;
  --content-width: 1180px;
  --font-ui: Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --surface-solid: #ffffff;
  --surface-soft: #f6f3ff;
  --elevation-1: 0 4px 14px rgba(56,29,104,.075);
  --elevation-2: 0 12px 30px rgba(56,29,104,.11);
  --elevation-3: 0 22px 54px rgba(56,29,104,.16);
  --accent: #7c3aed;
  --istore-purple: #7c3aed;
  --accent-2: #a855f7;
  --surface: #ffffff;
  --ink: #171126;
  --muted: #706981;
  --success: #16a34a;
  --warning: #f59e0b;
  --danger: #ef4444;
  --radius: 22px;
  --logo-width: 190px;
  --page: 1180px;
  --gutter: clamp(12px, 2.4vw, 28px);
  --shadow: var(--elevation-2);
  --border: rgba(76,29,149,.12);
  --header-h: clamp(64px, 6vw, 78px);
  --premium-shadow: var(--elevation-1);
  --ui-scale: 1;
  --font-scale: 1;
  --category-flow-gap: clamp(8px,1.7vw,14px);
  --category-tight-gap: clamp(4px,.9vw,8px);
  --niche-accent: #52697d;
  --niche-accent-2: #82939e;
}::-webkit-scrollbar{display:none;width:0;height:0}body,html{overflow-x:hidden;touch-action:pan-x pan-y}html{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;scroll-behavior:auto;background:var(--surface-soft)}body{margin:0;color:var(--ink);background:var(--surface-soft);min-height:100vh}body.locked{overflow:hidden}button,input,select,textarea{font:inherit}a,button{-webkit-tap-highlight-color:transparent}a{text-decoration:none}a,button{color:inherit}.icon{width:1.45em;height:1.45em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:block}[hidden]{display:none}.announcement-line{display:grid;place-items:center;font-weight:800;color:#fff;background:#2b3f50;text-align:center}.market-header{position:sticky;top:0;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 max(var(--gutter),calc((100vw - var(--page))/2 + var(--gutter)));background:color-mix(in srgb,var(--surface) 93%,transparent);border-bottom:1px solid var(--border)}.market-header.is-static{position:relative}.brand-logo{display:flex;align-items:center;justify-content:center;min-width:0}.brand-logo img{display:block;width:min(var(--logo-width),32vw);object-fit:contain}.header-actions{justify-self:end;display:flex;gap:clamp(6px,1vw,12px)}.badge,.icon-button{display:grid;place-items:center}.icon-button{position:relative;border:0;background:0 0;cursor:pointer}.icon-button:hover{background:color-mix(in srgb,var(--accent) 8%,transparent)}.badge{position:absolute;right:2px;top:1px;min-width:20px;height:20px;padding:0 5px;border-radius:99px;background:var(--danger);color:#fff;font-size:11px;font-weight:900;border:2px solid var(--surface)}.address-row{width:min(calc(100% - var(--gutter)*2),var(--page));margin:clamp(12px,2vw,20px) auto 0;display:grid;grid-template-columns:auto 1fr auto;align-items:center;background:var(--surface);box-shadow:var(--elevation-1);border:1px solid var(--border)}.address-icon{display:grid;place-items:center}.chevron{color:var(--muted)}.main-content{width:min(100%,var(--page));margin:0 auto;padding:clamp(12px,2vw,24px) var(--gutter) clamp(130px,14vw,165px)}.section-block{margin:0 0 clamp(13px,2.2vw,24px)}.member-card{background:var(--accent);color:#fff;box-shadow:var(--shadow)}.wallet-grid{background:color-mix(in srgb,#fff 93%,transparent);color:var(--ink);display:grid;grid-template-columns:repeat(3,1fr);overflow:hidden}.wallet-item{min-width:0;display:grid;justify-items:center;position:relative}.wallet-item:not(:last-child)::after{content:"";position:absolute;right:0;top:18%;height:64%;width:1px;background:color-mix(in srgb,#111 10%,transparent)}.wallet-icon{border:0;background:transparent;color:var(--accent);display:grid;place-items:center;box-shadow:none}.wallet-item span:not(.wallet-icon){color:var(--muted);font-weight:700}.wallet-item strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.hero-carousel{position:relative;width:100%;height:auto;min-height:0;overflow:hidden;background:var(--surface-soft);box-shadow:var(--shadow)}.hero-track{display:flex;width:100%;height:auto;min-height:0;align-items:flex-start;transform:translate3d(0,0,0);transition:transform .48s cubic-bezier(.22,.61,.36,1);will-change:transform}.hero-slide{position:relative;flex:0 0 100%;width:100%;height:auto;min-height:0;display:block;overflow:visible;background:var(--surface-soft)}.hero-slide img{display:block;width:100%;height:auto;max-width:100%;max-height:none;object-fit:contain;object-position:center}.carousel-dots{position:absolute;z-index:2;bottom:12px;display:flex;gap:6px;background:rgba(0,0,0,.25);padding:6px 8px;border-radius:99px}.carousel-dot{width:8px;height:8px;border:0;border-radius:99px;background:rgba(255,255,255,.55);padding:0}.carousel-dot.active{width:22px;}.ticker{overflow:hidden;background:var(--surface);border:1px solid var(--border);box-shadow:0 8px 24px rgba(20,10,35,.05)}.ticker-track{display:flex;width:max-content;animation:ticker var(--ticker-speed) linear infinite}.ticker-track a{display:flex;align-items:center;white-space:nowrap;font-weight:800;color:var(--muted);}.ticker-track .icon{color:var(--accent);}.section-title{display:flex;align-items:center;justify-content:space-between;margin:0 0 clamp(9px,1.4vw,14px)}.section-title h2{margin:0;}.promo-grid{display:grid;gap:0;overflow:hidden;border-radius:clamp(12px,1.8vw,24px)}.promo-grid.layout-wide-square .promo-2{display:none}.promo-grid.layout-full{grid-template-columns:1fr}.promo-grid.layout-full .promo-0{aspect-ratio:16/5}.promo-grid.layout-full .promo-1,.promo-grid.layout-full .promo-2{display:none}.promo-item{min-width:0;overflow:hidden;border-radius:0;background:var(--surface);box-shadow:none}.menu-node.expanded>.menu-children,.promo-item img{display:block}.product-grid,.product-grid-current{display:grid;grid-auto-rows:auto;align-items:start}.product-card{min-width:0;}.promo-item img{width:100%;height:100%;object-fit:contain}.product-copy h3{line-height:1.35;}.product-copy strong{display:block;}.product-copy small{display:block;margin-top:5px;color:var(--muted);}.product-badge{font-weight:900;border-radius:8px;background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent)}.drawer-backdrop,.panel-backdrop{position:fixed;inset:0;background:rgba(8,8,15,.45);opacity:0;pointer-events:none;transition:.28s;z-index:80}.drawer-backdrop.open,.panel-backdrop.open{opacity:1;pointer-events:auto}.side-drawer{position:fixed;z-index:90;top:0;bottom:0;left:0;width:min(440px,90vw);background:var(--surface);color:var(--ink);transform:translateX(-103%);transition:transform .32s cubic-bezier(.2,.8,.2,1);display:grid;grid-template-rows:auto auto 1fr;box-shadow:16px 0 40px rgba(15,23,42,.14);border-radius:0 24px 24px 0;overflow:hidden}.side-drawer.open{transform:translateX(0)}.drawer-head,.drawer-user{border-bottom:1px solid var(--border);display:grid}.drawer-head{grid-template-columns:auto 1fr;align-items:center;gap:12px;}.drawer-head .icon-button{color:var(--ink)}.drawer-head img{width:min(210px,55vw);height:56px;object-fit:contain}.drawer-user{gap:2px}.drawer-user span{color:var(--muted);font-size:12px}.drawer-user a{color:var(--accent);font-weight:800}.drawer-content{overflow:auto;}.menu-level{list-style:none;margin:0;padding:0}.menu-row{width:100%;border:0;background:0 0;color:var(--ink);display:grid;align-items:center;text-align:left;font-weight:800;cursor:pointer}.menu-row>span:first-child{background:var(--surface-soft);color:var(--accent)}.menu-row:hover{background:color-mix(in srgb,var(--accent) 6%,transparent)}.menu-arrow{transition:.2s}.menu-node.expanded>.menu-row .menu-arrow{transform:rotate(180deg)}.menu-children{display:none;padding-left:28px}.level-2 .menu-row,.level-3 .menu-row{font-size:13px;padding-block:8px}.level-2 .menu-row>span:first-child,.level-3 .menu-row>span:first-child{width:34px;height:34px}.slide-panel{position:fixed;z-index:90;top:0;right:0;bottom:0;width:min(480px,94vw);background:var(--surface);color:var(--ink);transform:translateX(103%);transition:transform .32s cubic-bezier(.2,.8,.2,1);display:grid;grid-template-rows:auto auto 1fr;box-shadow:-16px 0 40px rgba(15,23,42,.14)}.slide-panel.open{transform:translateX(0)}.notification-tabs,.panel-head{border-bottom:1px solid var(--border)}.panel-head{height:78px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:12px 16px}.panel-head h2{margin:0;font-size:20px}.notification-tabs{display:flex;gap:6px;overflow-x:auto;padding:10px 14px}.notification-tabs button{border:0;border-radius:99px;padding:8px 12px;background:var(--surface-soft);white-space:nowrap;color:var(--muted);font-size:11px;font-weight:800}.notification-tabs button.active{background:var(--accent);color:#fff}.panel-body{overflow:auto;padding:14px 16px 110px}.notification-card{display:grid;grid-template-columns:auto 1fr;gap:10px;padding:14px 4px;border-bottom:1px solid var(--border)}.notification-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);margin-top:7px}.notification-card h3{font-size:14px;margin:0 0 4px}.notification-card p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}.notification-card time{font-size:10px;color:var(--muted)}.empty-state{padding:32px 16px;text-align:center;color:var(--muted);display:grid;gap:12px}.inline-cta{display:inline-flex;justify-self:center;padding:10px 16px;border-radius:12px;background:var(--accent);color:#fff;font-weight:800}#chatPanel{grid-template-rows:auto 1fr auto}.chat-list{display:grid;gap:10px}.chat-message{max-width:84%;padding:10px 12px;border-radius:16px 16px 16px 5px;background:var(--surface-soft);display:grid;gap:3px;font-size:12px}.chat-message.me{justify-self:end;background:color-mix(in srgb,var(--accent) 14%,var(--surface));border-radius:16px 16px 5px 16px}.chat-message.admin{border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}.chat-message strong{font-size:11px}.chat-message time{font-size:9px;color:var(--muted)}.chat-composer{display:grid;grid-template-columns:1fr auto;gap:8px;padding:12px 14px max(12px,env(safe-area-inset-bottom));border-top:1px solid var(--border);background:var(--surface)}.chat-composer input{min-width:0;border:1px solid var(--border);background:var(--surface-soft);border-radius:16px;padding:12px 14px;color:var(--ink);outline:0}.chat-composer button{width:46px;height:46px;border:0;border-radius:15px;background:linear-gradient(145deg,var(--accent),var(--accent-2));color:#fff;display:grid;place-items:center}.bottom-nav-shell{transform:translateX(-50%);border:1px solid var(--border);}.bottom-item{min-width:0;border:0;background:0 0;display:grid;justify-items:center;align-content:center;color:#555968;font-weight:900;position:relative}.bottom-item.active :is(.icon,.bottom-label){color:#fff;opacity:1}.bottom-item.active .icon{stroke:currentColor}.bottom-badge{position:absolute;padding:0 4px;border-radius:99px;background:var(--danger);color:#fff;display:grid;place-items:center}.floating-zone{position:fixed;z-index:65;display:grid;justify-items:end;}.floating-row{display:flex;gap:8px}.floating-button{border:0;background:var(--surface);color:var(--ink);box-shadow:0 4px 14px rgba(15,23,42,.08);display:grid;place-items:center;transition:.2s;}.floating-button.is-hidden{opacity:0;pointer-events:none;transform:translateY(10px)}.chat-float{background:var(--accent);color:#fff}.theme-button.is-light{color:#f59e0b}.theme-button.is-dark{color:#fff;background:#191a22}.theme-button .icon{width:26px;height:26px}.reviewer-profile-overlay{position:fixed;z-index:1000000;inset:0;display:grid;place-items:center;padding:clamp(12px,3vw,24px);background:rgba(15,10,35,.78);overscroll-behavior:contain}.reviewer-profile-sheet{width:min(540px,100%);max-height:min(760px,100%);overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr);border:1px solid color-mix(in srgb,var(--accent) 22%,var(--border));border-radius:24px;background:var(--surface-solid,#fff);color:var(--ink);box-shadow:0 28px 80px rgba(27,12,58,.34)}.reviewer-profile-sheet>header{min-height:56px;padding:10px 14px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 8%,var(--surface-solid,#fff)),var(--surface-solid,#fff))}.reviewer-profile-sheet>header button{width:38px;height:38px;border:0;border-radius:13px;background:color-mix(in srgb,var(--accent) 8%,var(--surface-solid,#fff));color:var(--ink);font-size:23px}.reviewer-profile-body{overflow:auto;overscroll-behavior:contain;padding:16px;display:grid;align-content:start;gap:12px}.reviewer-profile-identity{display:flex;align-items:center;gap:12px}.reviewer-profile-avatar{width:56px;height:56px;flex:0 0 56px;display:grid;place-items:center;overflow:hidden;border:2px solid color-mix(in srgb,var(--accent) 30%,var(--border));border-radius:50%;background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 14%,var(--surface-solid,#fff)),var(--surface-solid,#fff));color:var(--accent);font-size:19px;font-weight:900}.reviewer-profile-avatar img{width:100%;height:100%;object-fit:cover}.reviewer-profile-identity h2{margin:0;font-size:17px}.reviewer-profile-identity>div>span{display:block;margin-top:3px;color:var(--accent);font-size:9px;font-weight:850}.reviewer-profile-bio{margin:0;color:var(--muted);font-size:11px;line-height:1.6}.reviewer-profile-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.reviewer-profile-stats article{padding:12px;border:1px solid var(--border);border-radius:15px;background:var(--surface-soft)}.reviewer-profile-stats strong,.reviewer-profile-stats small{display:block}.reviewer-profile-stats strong{color:var(--accent);font-size:21px}.reviewer-profile-stats small{margin-top:3px;color:var(--muted);font-size:9px}.reviewer-profile-reviews{display:grid;gap:8px}.reviewer-profile-reviews article{padding:11px;border:1px solid var(--border);border-radius:15px;background:var(--surface-soft)}.reviewer-profile-reviews article header{display:flex;justify-content:space-between;gap:8px}.reviewer-profile-reviews article header strong{font-size:10px}.reviewer-profile-reviews article header span{color:#e9ad00}.reviewer-profile-reviews article p{margin:6px 0;color:var(--muted);font-size:10px;line-height:1.5}.reviewer-profile-reviews article small,.reviewer-profile-error{color:var(--muted);font-size:9px}body.reviewer-profile-open{overflow:hidden}
.toast{position:fixed;opacity:0}.sales-popup{z-index:64;display:grid;align-items:center;background:color-mix(in srgb,var(--surface) 94%,transparent);box-shadow:none;border:1px solid var(--border);transform:translateY(140%);transition:.35s;overflow:clip}.sales-popup.show{transform:translateY(0);opacity:1}.sales-popup img{aspect-ratio:1;object-fit:cover}.sales-popup div{min-width:0;display:grid;gap:2px}.sales-popup small,.sales-popup span,.sales-popup strong{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis}.sales-popup strong{white-space:normal;line-height:1.2}.sales-popup span,.sales-popup small{white-space:nowrap}.sales-popup span{color:var(--accent);font-weight:800}.sales-popup small{color:var(--muted)}.toast{z-index:120;left:50%;bottom:130px;transform:translate(-50%,20px);padding:11px 15px;border-radius:12px;background:#15131b;color:#fff;font-size:12px;pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}.fatal{min-height:70vh;display:grid;place-content:center;text-align:center;padding:30px}html[data-theme=dark] .wallet-item:not(:last-child)::after{background:rgba(255,255,255,.09);background:rgba(255,255,255,.08)}html[data-theme=dark] .side-drawer{background:linear-gradient(180deg,#070411,#0e0823)}@media (max-width:820px){:root{--gutter:clamp(10px, 3vw, 18px)}.market-header{padding-inline:var(--gutter)}.brand-logo img{width:min(var(--logo-width),38vw)}.address-row{width:calc(100% - var(--gutter)*2)}.main-content{padding-inline:var(--gutter)}.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.promo-grid.layout-trio{grid-template-columns:minmax(0,1fr) minmax(0,1.82fr) minmax(0,1fr);gap:clamp(5px,1.5vw,9px)}.promo-item{border-radius:clamp(9px,2.7vw,16px)}.member-card{padding:12px;border-radius:24px}.wallet-grid{border-radius:20px}.wallet-item{padding:11px 4px}.wallet-icon{width:40px;height:40px;border-radius:13px}.bottom-nav-shell{width:calc(100% - 18px);border-radius:28px}.bottom-nav{min-height:64px;border-radius:25px;padding:4px}.bottom-item{font-size:8.5px;border-radius:20px}.bottom-item .icon{width:23px;height:23px}.floating-zone{right:10px;bottom:86px}.floating-button{width:48px;height:48px;border-radius:16px}.sales-popup img{width:48px;height:48px;border-radius:13px}.sales-popup{left:10px;bottom:86px;width:min(360px,calc(100% - 126px));grid-template-columns:48px 1fr;padding:8px;border-radius:18px}}@media (max-width:420px){.announcement-line{font-size:10px}.market-header{height:68px}.icon-button{width:40px;height:40px;border-radius:14px}.brand-logo img{width:min(var(--logo-width),40vw);max-height:40px}.header-actions{gap:2px}.address-row{min-height:58px;padding:8px 12px;border-radius:20px}.address-icon{width:34px;height:34px}.main-content{padding-top:11px;padding-bottom:112px}.section-block{margin-bottom:12px}.wallet-item span:not(.wallet-icon){font-size:9.5px}.wallet-item strong{font-size:10.5px}.hero-carousel{border-radius:20px}.ticker-track a{padding:8px 14px}.section-title h2{font-size:19px}.promo-grid.layout-trio{grid-template-columns:minmax(0,1fr) minmax(0,1.72fr) minmax(0,1fr);gap:5px}.promo-grid.layout-wide-square{grid-template-columns:2fr 1fr;gap:5px}.promo-grid.layout-full .promo-0{aspect-ratio:3.1/1}.product-grid{gap:8px}.product-card{border-radius:15px}.product-copy{padding:9px}.product-copy h3,.sales-popup strong{font-size:11px}.bottom-nav-shell{bottom:7px;width:calc(100% - 14px)}.bottom-nav{min-height:60px}.bottom-item{font-size:7.6px}.bottom-item .icon{width:21px;height:21px}.floating-zone{bottom:78px;gap:6px}.floating-row{gap:6px}.floating-button{width:45px;height:45px}.sales-popup{bottom:78px;width:calc(100% - 114px);grid-template-columns:43px 1fr}.sales-popup img{width:43px;height:43px}.sales-popup span{font-size:9.5px}}@media (min-width:1200px){.promo-grid.layout-trio{grid-template-columns:1fr 1.9fr 1fr}.main-content{padding-inline:0}.address-row{width:min(var(--page),calc(100% - 40px))}}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.01ms;animation-iteration-count:1;scroll-behavior:auto;transition-duration:.01ms}}.header-theme-button{margin-right:1px}.header-theme-button.is-light{color:#f59e0b}.header-theme-button.is-dark{color:#fff;background:#171922}.header-theme-button.is-light{background:color-mix(in srgb,#f59e0b 9%,transparent)}html[data-theme=dark] .address-row,html[data-theme=dark] .chat-composer,html[data-theme=dark] .floating-button:not(.chat-float),html[data-theme=dark] .market-header,html[data-theme=dark] .product-card,html[data-theme=dark] .sales-popup,html[data-theme=dark] .slide-panel,html[data-theme=dark] .ticker{background:color-mix(in srgb,var(--surface) 94%,#000);border-color:var(--border);color:var(--ink)}html[data-theme=dark] .wallet-grid{color:var(--ink)}html[data-theme=dark] .wallet-icon{background:transparent;border:0;box-shadow:none}html[data-theme=dark] .bottom-item,html[data-theme=dark] .ticker-track a{color:#b3b1bc}html[data-theme=dark] .bottom-nav{background:rgba(21,22,29,.94)}html[data-theme=dark] .notification-tabs button{background:#22232c;color:#b8b5c0}html[data-theme=dark] .chat-message{background:#242630}html[data-theme=dark] .chat-message.me{background:color-mix(in srgb,var(--accent) 25%,#17181f)}html[data-theme=dark] .chat-composer input{background:#0f1118;color:#fff;border-color:rgba(255,255,255,.09)}html[data-theme=dark] .promo-item{background:#17181f}html[data-theme=dark] .drawer-backdrop,html[data-theme=dark] .panel-backdrop{background:rgba(0,0,0,.62)}html[data-theme=dark] .hero-carousel,html[data-theme=dark] .member-card{box-shadow:0 22px 60px rgba(0,0,0,.34)}@media (max-width:520px){.header-actions .icon-button,.header-theme-button{width:38px;height:38px}.market-header{gap:4px}.bottom-nav-shell{padding:3px}}.premium-icons .premium-icon{stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;shape-rendering:geometricPrecision}.premium-icons .bottom-item .premium-icon,.premium-icons .wallet-icon .premium-icon{stroke-width:1.7}.no-click-effects :is(a,button,[role=button]){-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:none}.no-click-effects :is(a,button,[role=button]):active{transform:none;filter:none;scale:1}.no-click-effects :is(a,button,[role=button]):hover{transform:none}.no-click-effects .icon-button:hover,.no-click-effects .menu-row:hover{background:0 0}.no-click-effects :focus:not(:focus-visible){outline:0}.announcement-line{min-height:calc(30px*var(--ui-scale));padding:calc(5px*var(--ui-scale)) var(--gutter);font-size:calc(12px*var(--font-scale))}.market-header{height:calc(70px*var(--ui-scale));gap:calc(10px*var(--ui-scale))}.brand-logo img{max-height:calc(46px*var(--ui-scale))}.icon-button{width:calc(43px*var(--ui-scale));height:calc(43px*var(--ui-scale));border-radius:calc(14px*var(--ui-scale))}.icon-button .icon{width:calc(23px*var(--ui-scale));height:calc(23px*var(--ui-scale))}.address-row{margin-top:calc(7px*var(--ui-scale));min-height:calc(42px*var(--ui-scale));gap:calc(6px*var(--ui-scale));padding:calc(4px*var(--ui-scale)) calc(10px*var(--ui-scale));border-radius:calc(16px*var(--ui-scale))}.address-icon{width:calc(26px*var(--ui-scale));height:calc(26px*var(--ui-scale))}.address-icon .icon{width:calc(19px*var(--ui-scale));height:calc(19px*var(--ui-scale))}.wallet-icon .icon{width:calc(22px*var(--ui-scale));height:calc(22px*var(--ui-scale))}.chevron{font-size:calc(24px*var(--font-scale))}.main-content{padding-top:calc(14px*var(--ui-scale));padding-bottom:calc(116px*var(--ui-scale))}.member-card{border-radius:calc(26px*var(--ui-scale));}.wallet-grid{border-radius:calc(20px*var(--ui-scale))}.wallet-item{gap:calc(3px*var(--ui-scale));}.wallet-icon{width:calc(40px*var(--ui-scale));height:calc(40px*var(--ui-scale));border-radius:calc(13px*var(--ui-scale))}.wallet-item span:not(.wallet-icon){font-size:calc(10.5px*var(--font-scale))}.wallet-item strong{text-align:center;font-size:calc(11.5px*var(--font-scale))}.hero-carousel{border-radius:calc(22px*var(--ui-scale))}.sales-popup img,.ticker{border-radius:calc(14px*var(--ui-scale))}.ticker-track a{font-size:clamp(13px,3.5vw,16px);gap:calc(7px*var(--ui-scale));padding:calc(8px*var(--ui-scale)) calc(14px*var(--ui-scale))}.ticker-track .icon{width:clamp(19px,4vw,22px);height:clamp(19px,4vw,22px)}.section-title{margin-bottom:calc(9px*var(--ui-scale))}.section-title h2{letter-spacing:-.025em;font-size:calc(21px*var(--font-scale))}.product-copy strong{font-size:calc(14px*var(--font-scale))}.product-copy small{font-size:calc(9.5px*var(--font-scale))}.product-badge{font-size:calc(8.5px*var(--font-scale));padding:calc(3px*var(--ui-scale)) calc(6px*var(--ui-scale))}.promo-section.is-connected .promo-grid{gap:0;border-radius:calc(15px*var(--ui-scale));overflow:hidden;background:0 0}.promo-section.is-connected .promo-item{border-radius:0;box-shadow:none;border:0}.promo-section.is-connected .promo-item img,.sales-progress i{display:block;width:100%;height:100%}.bottom-nav-shell{border-radius:calc(30px*var(--ui-scale))}.bottom-item{padding:calc(4px*var(--ui-scale));gap:0;border-radius:calc(20px*var(--ui-scale));font-size:calc(9px*var(--font-scale));cursor:pointer;}.bottom-item .icon{width:calc(28px*var(--ui-scale));height:calc(28px*var(--ui-scale))}.bottom-nav-shell.icons-only .bottom-item{display:grid;place-items:center;align-content:center}.bottom-nav-shell.icons-only .bottom-item .icon{width:calc(30px*var(--ui-scale));height:calc(30px*var(--ui-scale))}.bottom-label{line-height:1}.bottom-badge{top:calc(2px*var(--ui-scale));right:calc(50% - 23px);min-width:calc(17px*var(--ui-scale));height:calc(17px*var(--ui-scale));font-size:calc(8px*var(--font-scale))}.floating-zone{right:max(calc(10px*var(--ui-scale)),env(safe-area-inset-right));}.floating-button{cursor:pointer;width:calc(49px*var(--ui-scale));height:calc(49px*var(--ui-scale));border-radius:calc(16px*var(--ui-scale))}.floating-button .icon{width:calc(25px*var(--ui-scale));height:calc(25px*var(--ui-scale))}.sales-popup{width:min(410px,calc(100% - 122px));grid-template-columns:calc(50px*var(--ui-scale)) 1fr;gap:calc(9px*var(--ui-scale));padding:calc(9px*var(--ui-scale)) calc(9px*var(--ui-scale)) calc(12px*var(--ui-scale));border-radius:calc(18px*var(--ui-scale));}.sales-popup img{width:calc(50px*var(--ui-scale));height:calc(50px*var(--ui-scale))}.product-copy h3,.sales-popup strong{font-size:calc(12px*var(--font-scale))}.sales-popup span{font-size:calc(10.5px*var(--font-scale))}.sales-popup small{font-size:calc(9px*var(--font-scale))}.sales-progress i{background:var(--istore-purple,var(--accent));box-shadow:none;transform-origin:left center;animation-fill-mode:forwards}.sales-popup.show .sales-progress i{animation:salesCountdown var(--sales-visible, 6500ms) linear forwards}.compact-ui .address-row,.compact-ui .product-card,.compact-ui .ticker{box-shadow:0 7px 20px rgba(25,16,43,.055)}@media (max-width:520px){:root{--gutter:10px}.market-header{grid-template-columns:calc(39px*var(--ui-scale)) minmax(0,1fr) auto;padding-inline:10px}.brand-logo img{width:min(var(--logo-width),34vw)}.header-actions{gap:1px}.address-row{width:calc(100% - 20px)}.main-content{padding-inline:10px;padding-top:calc(10px*var(--ui-scale));padding-bottom:calc(104px*var(--ui-scale))}.promo-grid.layout-trio{grid-template-columns:minmax(0,1fr) minmax(0,1.72fr) minmax(0,1fr);gap:var(--promo-gap)}.promo-section.is-connected .promo-grid{gap:0}.promo-item{border-radius:calc(12px*var(--ui-scale))}.bottom-nav-shell{width:calc(100% - 12px)}.bottom-nav{min-height:calc(60px*var(--ui-scale))}.bottom-nav-shell.icons-only .bottom-item .icon{width:calc(29px*var(--ui-scale));height:calc(29px*var(--ui-scale))}.floating-button{width:calc(47px*var(--ui-scale));height:calc(47px*var(--ui-scale))}.sales-popup{width:calc(100% - 111px);}.sales-popup img{width:calc(45px*var(--ui-scale));height:calc(45px*var(--ui-scale))}}.sales-progress{position:absolute;background:color-mix(in srgb,var(--istore-purple,var(--accent)) 14%,transparent);overflow:hidden;height:max(3px,calc(4px*var(--ui-scale)));left:5px;right:5px;bottom:5px;border-radius:999px;z-index:5;}.floating-zone{bottom:calc((78px*var(--ui-scale)) + var(--floating-nav-gap, 14px) + env(safe-area-inset-bottom));gap:var(--floating-item-gap, 12px)}.sales-popup{bottom:calc((78px*var(--ui-scale)) + var(--sales-nav-gap, 16px) + env(safe-area-inset-bottom));}@media (max-width:520px){.floating-zone{bottom:calc((76px*var(--ui-scale)) + var(--floating-nav-gap, 14px) + env(safe-area-inset-bottom))}.sales-popup{bottom:calc((76px*var(--ui-scale)) + var(--sales-nav-gap, 16px) + env(safe-area-inset-bottom));grid-template-columns:calc(45px*var(--ui-scale)) 1fr;}}.category-dynamic[hidden]{display:none}.promo-grid.is-connected-grid{gap:0;border-radius:calc(15px*var(--ui-scale));overflow:hidden;background:0 0}.promo-grid.is-connected-grid .promo-item{border-radius:0;box-shadow:none;border:0}.showcase-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:calc(7px*var(--ui-scale));align-items:center;}.showcase-head-icon{width:calc(38px*var(--ui-scale));height:calc(38px*var(--ui-scale));border:0;border-radius:0;display:grid;place-items:center;background:transparent;box-shadow:none}.showcase-head-icon .icon{width:52%;height:52%}.showcase-head h2{margin:0;font-size:calc(19px*var(--font-scale));line-height:1.03}.showcase-head p{margin:2px 0 0;color:var(--muted);font-size:calc(10px*var(--font-scale));line-height:1.05}.showcase-head>a{font-size:calc(10.5px*var(--font-scale));font-weight:800;line-height:1;white-space:nowrap}@media (max-width:700px){.showcase-head{gap:6px}.showcase-head-icon{width:33px;height:33px}.showcase-head h2{font-size:16px}.showcase-head p,.showcase-head>a{font-size:9px}}html[data-theme=dark] .wallet-grid{background:linear-gradient(145deg,#222530,#15171f)}a.product-card{display:block;color:inherit;text-decoration:none}@media (max-width:700px){.member-card{border-radius:28px;padding:16px 16px 18px}.wallet-grid{border-radius:24px;padding:8px 6px;background:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 8px 18px rgba(18,24,40,.08);overflow:hidden}.wallet-item{gap:5px;padding:12px 6px 10px;align-content:start}.wallet-item:not(:last-child)::after{top:16%;height:68%;background:rgba(17,24,39,.12)}.wallet-icon{width:46px;height:46px;border-radius:0;background:transparent;color:var(--accent);border:0;box-shadow:none}.wallet-item .wallet-icon .icon{width:24px;height:24px}.wallet-item span:not(.wallet-icon){font-size:11.3px;line-height:1.15;color:#6b7280;font-weight:800;text-align:center}.wallet-item strong{font-size:15.8px;line-height:1.15;font-weight:900;color:#111827;white-space:normal;overflow:visible;text-overflow:clip;text-align:center;max-width:100%}}.promoduo-section{overflow:visible}.promoduo-ribbon{height:var(--duo-ribbon-height,38px);min-height:var(--duo-ribbon-height,38px);display:grid;grid-template-columns:minmax(0,1fr) minmax(86px,auto) minmax(0,1fr);align-items:center;gap:5px;padding:0 8px;background:linear-gradient(90deg,#6d28d9,#7c3aed 45%,#db2777);color:#fff;overflow:hidden}.duo-ribbon-side{min-width:0;display:flex;align-items:center;gap:5px;font-weight:950;font-size:var(--duo-ribbon-side-font,clamp(8px,1.05vw,12px));white-space:nowrap}.duo-ribbon-left{justify-content:flex-start}.duo-ribbon-right{justify-content:flex-end}.duo-ribbon-side>span{display:inline-block;transform:scale(var(--duo-ribbon-side-scale,1));transform-origin:center}.ribbon-beacon-image{display:inline-grid;place-items:center;flex:0 0 auto}.ribbon-beacon-image img{display:block;width:clamp(24px,2.8vw,38px);height:clamp(24px,2.8vw,38px);object-fit:contain}.promoduo-ribbon>strong{min-width:0;max-width:100%;display:grid;place-items:center;line-height:.94;text-align:center;padding:3px clamp(8px,1.4vw,14px);border:0;border-radius:10px;background:rgba(37,18,82,.46);box-shadow:0 4px 12px rgba(33,12,69,.18)}@keyframes promoDuoTitlePulse{0%,100%{scale:1;filter:brightness(1)}50%{scale:1.04;filter:brightness(1.12)}}@keyframes promoDuoEyebrowBlink{0%,100%{opacity:.78}50%{opacity:1}}@keyframes promoDuoLightning{0%,100%{transform:translateY(0) scale(.92);filter:drop-shadow(0 0 1px rgba(254,240,138,.45))}50%{transform:translateY(-1px) scale(1.12);filter:drop-shadow(0 0 8px rgba(254,240,138,.9))}}@keyframes promoDuoSirenPulse{0%,100%{transform:scale(.94);filter:saturate(.9) brightness(.94)}50%{transform:scale(1.08);filter:saturate(1.5) brightness(1.18) drop-shadow(0 0 6px rgba(254,202,87,.9))}}.promoduo-title-anim{display:inline-block;font-style:normal;font-size:var(--duo-ribbon-title-font,clamp(12px,1.7vw,20px));font-weight:1000;letter-spacing:.01em;transform:scale(var(--duo-ribbon-title-scale,1));transform-origin:center;animation:promoDuoTitlePulse 1.35s ease-in-out infinite;will-change:scale,opacity,filter}.promoduo-ribbon>strong small{display:block;font-size:var(--duo-ribbon-eyebrow-font,clamp(6px,.7vw,8px));font-weight:900;letter-spacing:.08em;transform:scale(var(--duo-ribbon-eyebrow-scale,1));transform-origin:center;animation:promoDuoEyebrowBlink 1.35s ease-in-out infinite}.duo-banner-right .promoduo-main{order:2}.duo-banner-right .promoduo-right{order:1}.promoduo-main{position:relative;min-width:0;min-height:0;overflow:hidden;background:var(--surface-soft)}.duo-main-track{display:flex;width:100%;height:100%;transform:translateX(0);transition:transform .42s ease}.duo-main-slide{flex:0 0 100%;width:100%;height:100%;display:block;overflow:hidden}.duo-main-slide img{display:block;width:100%;height:100%;object-fit:var(--duo-banner-fit,cover);object-position:center;background:var(--surface-soft)}.duo-placeholder{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 18%,var(--surface)),color-mix(in srgb,var(--accent-2) 15%,var(--surface)))}.duo-main-dots{position:absolute;left:50%;bottom:7px;z-index:3;display:flex;gap:5px;transform:translateX(-50%)}.duo-main-dot{width:7px;height:7px;padding:0;border:0;border-radius:999px;background:rgba(255,255,255,.55);box-shadow:0 1px 4px rgba(0,0,0,.18)}.duo-main-dot.active{width:18px;background:#fff}.promoduo-right{min-width:0;min-height:0;display:flex;flex-direction:column;gap:0;align-self:start;overflow:hidden;background:#fbf8ff}.duo-layout-section{min-width:0;flex:0 0 auto;margin:0}.duo-layout-head{height:var(--duo-section-size,22px);min-height:var(--duo-section-size,22px)}.promoduo-flash-head{width:100%;height:100%;display:flex;align-items:center;justify-content:space-between;gap:4px;margin:0;padding:0 3px;}.duo-flash-gif{height:100%;min-width:0;display:flex;align-items:center;overflow:hidden}.duo-flash-gif img{display:block;height:32px;min-height:32px;max-height:32px;max-width:82%;width:auto;flex:0 0 auto;object-fit:contain;object-position:left center;animation:none;transform:none;filter:none}.promoduo-timer{flex:0 0 auto;padding:3px 8px;border-radius:6px;background:#7c3aed;color:#fff;font-size:var(--duo-timer-font,clamp(8px,1vw,11px));font-weight:900;line-height:1}.duo-timer-text{display:inline-block;transform:scale(var(--duo-section-text-scale,1));transform-origin:center}.duo-layout-template{width:100%;min-height:0;overflow:hidden}.promoduo-flash-template-wrap,.duo-flash-template{width:100%;height:100%;min-height:0;margin:0}.duo-flash-template{transform:scale(var(--duo-template-scale,1));transform-origin:center}.duo-layout-voucher-title{height:var(--duo-section-size,18px);min-height:var(--duo-section-size,18px);margin:0}.promoduo-voucher-title{height:100%;min-height:0;margin:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(90deg,#7c3aed,#db2777);color:#fff;font-size:var(--duo-voucher-title-font,clamp(8px,1vw,11px));font-weight:950;letter-spacing:.02em;line-height:1}.promoduo-voucher-title>span{display:inline-block;white-space:nowrap;transform:scale(var(--duo-section-text-scale,1));transform-origin:center}.duo-layout-vouchers{height:var(--duo-section-size,48px);min-height:var(--duo-section-size,48px);overflow:hidden;margin:0}.promoduo-vouchers{--duo-voucher-gap:4px;width:100%;height:100%;display:flex;align-items:stretch;gap:var(--duo-voucher-gap);margin:0;padding:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-inline:contain}.duo-voucher-svg-card{position:relative;flex:0 0 calc((100% - var(--duo-voucher-gap))/2);height:100%;min-width:0;display:block;overflow:hidden;background:var(--surface,#fff);scroll-snap-align:start}.duo-voucher-svg-card svg{display:block;width:100%;height:100%;overflow:visible}.duo-voucher-bg{fill:var(--duo-voucher-fill,#fff);stroke:var(--duo-voucher-border-color,#111);stroke-width:var(--duo-voucher-border-width,4);vector-effect:non-scaling-stroke}.duo-voucher-scope-bg{fill:rgba(17,24,39,.66)}.duo-voucher-scope{fill:#fff;text-anchor:middle;font-weight:900}.duo-voucher-title,.duo-voucher-sub,.duo-voucher-min,.duo-voucher-timer,.duo-voucher-cta,.duo-voucher-scope{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:var(--duo-voucher-font-size)}.duo-voucher-title,
.duo-voucher-sub,
.duo-voucher-min{fill:var(--duo-voucher-text-color,currentColor);font-weight:var(--duo-voucher-font-weight,900)}.duo-voucher-timer{font-weight:var(--duo-voucher-font-weight,900);fill:var(--success,#16a34a);color:var(--success,#16a34a)}.duo-voucher-cta-bg{fill:#7c3aed}.duo-voucher-cta{fill:#fff;font-weight:950}.duo-layout-vouchers .duo-voucher-svg-card svg text{transform:scale(var(--duo-section-text-scale,1));transform-box:fill-box;transform-origin:center}nusa-voucher-terms-overlay{position:fixed;inset:0;z-index:10050;display:grid;place-items:center;padding:14px;background:rgba(17,15,24,.48)}.nusa-voucher-terms-dialog{width:min(520px,calc(100vw - 28px));max-height:calc(100dvh - 28px);overflow:auto;border-radius:28px;background:#fff;color:#374151;padding:26px clamp(22px,6vw,40px) 22px;box-shadow:0 24px 64px rgba(20,13,35,.24)}.nusa-voucher-terms-info{width:74px;height:74px;margin:0 auto 18px;border:5px solid #8edcf1;border-radius:50%;display:grid;color:#36bce8}.nusa-voucher-terms-info .icon{width:42px;height:42px;stroke-width:2.6}.nusa-voucher-terms-dialog h2{margin:0 0 22px;color:#111;font-size:clamp(25px,6vw,38px);line-height:1.05;text-align:center}.nusa-voucher-terms-dialog dl{margin:0;display:grid;gap:15px}.nusa-voucher-terms-dialog dl>div{display:grid;gap:4px}.nusa-voucher-terms-dialog dt{font-size:clamp(17px,4vw,22px);color:#374151}.nusa-voucher-terms-dialog dd{font-size:clamp(17px,4vw,21px);font-weight:850;line-height:1.28;color:#4b5563}.nusa-voucher-terms-extra dd{font-size:14px;font-weight:650;line-height:1.45}.nusa-voucher-terms-ok{display:block;min-width:180px;min-height:58px;margin:26px auto 0;border:4px solid #cbd5e1;border-radius:18px;background:#7c3aed;color:#fff;font-size:25px;font-weight:950;box-shadow:0 2px 0 #64748b;cursor:pointer}@media(max-width:700px){.promoduo-ribbon{padding-inline:6px;gap:3px}.duo-ribbon-side{gap:3px}.ribbon-beacon-image img{width:26px;height:26px}.promoduo-right{gap:0}.promoduo-timer{padding:2px 5px}.nusa-voucher-terms-dialog{border-radius:24px;padding:22px 22px 20px}.nusa-voucher-terms-info{width:62px;height:62px;margin-bottom:14px}.nusa-voucher-terms-info .icon{width:34px;height:34px}.nusa-voucher-terms-dialog h2{margin-bottom:18px}.nusa-voucher-terms-dialog dl{gap:12px}}html[data-theme="dark"] .duo-voucher-bg{fill:var(--duo-voucher-fill,#171922);stroke:var(--duo-voucher-border-color,#050505)}html[data-theme="dark"] .nusa-voucher-terms-dialog{background:#171922;color:#e5e7eb}html[data-theme="dark"] .nusa-voucher-terms-dialog h2{color:#fff}html[data-theme="dark"] .nusa-voucher-terms-dialog dt,html[data-theme="dark"] .nusa-voucher-terms-dialog dd{color:#e5e7eb}
.address-copy{min-width:0;display:grid;gap:0;align-content:center;line-height:1.02}.address-copy small{display:block;color:var(--muted);font-size:clamp(7.5px,1.9vw,9px);font-weight:750;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.address-copy strong{display:block;min-width:0;color:var(--ink);font-size:clamp(10px,2.55vw,12px);font-weight:900;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:820px){.address-copy{gap:0}.address-copy small{font-size:7.8px}.address-copy strong{font-size:clamp(9.5px,2.5vw,11.5px)}}

/* Voucher SVG terpadu: PromoDuo + picker lain memakai renderer yang sama. */
.nusa-voucher-ticket{position:relative;isolation:isolate;overflow:hidden}.nusa-voucher-ticket>svg{display:block;width:100%;height:100%;overflow:visible}.duo-voucher-terms-label{fill:var(--duo-voucher-terms-color,#111);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:var(--duo-terms-label-size,13px);font-weight:950}.nusa-voucher-terms-hit{z-index:4;}.nusa-voucher-action-hit{left:var(--hit-left);top:var(--hit-top);width:var(--hit-width);height:var(--hit-height);z-index:12;pointer-events:auto;outline:0;position:absolute;margin:0;padding:0;cursor:pointer;appearance:none;touch-action:manipulation;}.nusa-voucher-action-hit:focus-visible{box-shadow:0 0 0 3px rgba(124,58,237,.28);border-radius:999px}.nusa-voucher-terms-hit{left:var(--terms-left);top:var(--terms-top);width:var(--terms-width);height:var(--terms-height);position:absolute;margin:0;padding:0;cursor:pointer;appearance:none;touch-action:manipulation;}.nusa-voucher-action-hit:disabled{cursor:not-allowed}.nusa-voucher-ticket.is-disabled:not(.is-spent){opacity:.52}.nusa-voucher-terms-info{place-items:center;font-size:48px;font-weight:850;line-height:1}.nusa-voucher-terms-dialog dt{font-weight:950}.nusa-voucher-terms-dialog dd{margin:0}.promoduo-flash-head{background:#fbf8ff}.duo-layout-template{aspect-ratio:var(--duo-section-aspect,1.9)/1;background:#f7f2ff}.duo-layout-voucher-title{background:linear-gradient(90deg,#6d28d9,#7c3aed 45%,#db2777)}
@media(min-width:820px){.section-shell{width:min(calc(100% - 20px),var(--page));}.ribbon-beacon-image img{width:clamp(34px,3.2vw,48px);height:clamp(34px,3.2vw,48px)}}

.duo-voucher-daily-label,.duo-voucher-text-block text,.duo-voucher-cta,.duo-voucher-terms-label,.duo-voucher-scope{stroke:none;paint-order:normal}
.duo-voucher-state-badge{opacity:1;filter:none;pointer-events:none}.nusa-voucher-ticket.is-spent{opacity:1}.nusa-voucher-ticket.is-spent .duo-voucher-bg{fill:#e5e7eb;stroke:#737a86}.nusa-voucher-ticket.is-spent g[clip-path] image{filter:grayscale(1) saturate(.08);opacity:.54}.nusa-voucher-ticket.is-spent .duo-voucher-scope-bg{fill:#69707b}.nusa-voucher-ticket.is-spent .duo-voucher-daily-bg{fill:#1769e0;stroke:#74b7ff;stroke-width:1.2;filter:drop-shadow(0 3px 5px rgba(17,82,190,.28))}.nusa-voucher-ticket.is-spent .duo-voucher-daily-label{fill:#fff;font-weight:1000;letter-spacing:.15px;text-shadow:none}.nusa-voucher-ticket.is-spent .duo-voucher-title,.nusa-voucher-ticket.is-spent .duo-voucher-sub,.nusa-voucher-ticket.is-spent .duo-voucher-min,.nusa-voucher-ticket.is-spent .duo-voucher-timer{fill:#747b86}.nusa-voucher-ticket.is-spent .duo-voucher-state-badge{opacity:1;filter:none}
/* Uploaded storefront media always fills its allocated media box. */


/* Kategori Menu — premium horizontal rail below trust ticker. */
.category-menu-strip{position:relative;isolation:isolate;margin:0 0 clamp(18px,2.6vw,28px)}

.duo-voucher-recommend-art{filter:drop-shadow(0 2px 2px rgba(121,20,18,.22));pointer-events:none}.duo-voucher-daily-bg{fill:#1769e0;stroke:#74b7ff;stroke-width:1.2;filter:drop-shadow(0 3px 5px rgba(17,82,190,.28))}.duo-voucher-daily-label{fill:#fff;font-weight:1000;letter-spacing:.15px;text-shadow:none}

/* 2026-08 home speed + emoji */
.hero,.category-grid,.grid,.category-card{content-visibility:visible;contain-intrinsic-size:auto}


html[data-theme=dark] .product-grid .product-card{background:rgba(8,13,24,.72);border:1px solid rgba(148,163,184,.16);box-shadow:0 12px 32px rgba(0,0,0,.26)}
html[data-theme=dark] .product-grid .product-card .product-copy{background:transparent;color:#fff}
html[data-theme=dark] .product-grid .product-card :is(h3,strong,small){color:#fff}
html[data-theme=dark] .product-grid .product-image{background:#090f1b;border-bottom:0}
html[data-theme=dark] .duo-inline-template{background:#070c15;color:#fff;border:0;outline:0}
html[data-theme=dark] .duo-inline-left,html[data-theme=dark] .duo-inline-right{background:#080e19;color:#fff;border:0}
html[data-theme=dark] .duo-inline-media,html[data-theme=dark] .duo-inline-products>div{background:#0d1524;border:0}
html[data-theme=dark] .duo-inline-right>strong,html[data-theme=dark] .duo-inline-left>strong,html[data-theme=dark] .duo-inline-deal em{color:#7dd3fc}
html[data-theme=dark] .duo-inline-right>strong small,html[data-theme=dark] .duo-inline-left>small{color:#e2e8f0}
html[data-theme=dark] .promoduo-right,html[data-theme=dark] .promoduo-flash-head{background:#070c15;border:0;outline:0;box-shadow:none}


/* Campaign art remains untouched; system UI uses the Buy Now purple/pink accent. */
.carousel-dot.active{background:#fff}
.showcase-head-icon{color:#7c27f7}


.category-label{display:block;max-width:100%;color:inherit;font-size:clamp(10px,1.15vw,13px);font-weight:800;line-height:1.18;text-align:center;white-space:normal;overflow-wrap:anywhere}

/* Account/history links are text links, never filled buttons. */
.account-section .section-head>a,.account-panel .section-head>a,.section-head>a[href*="akun"],.section-head>a[href*="pesanan"]{background:transparent;border:0;box-shadow:none;padding:0;color:#7c27f7}
html[data-theme=dark] .account-section .section-head>a,html[data-theme=dark] .account-panel .section-head>a{color:#c084fc}

/* Blue UI copy is normalized to the Buy Now purple accent. */


/* Voucher SVG outline stays above image/content; hit areas stay visually transparent. */

.nusa-voucher-action-hit,.nusa-voucher-terms-hit{background:transparent;border:0;box-shadow:none;color:transparent}
.nusa-voucher-ticket.is-selected{--duo-voucher-fill:#fbf7ff;--duo-voucher-border-color:#7c27f7;--duo-voucher-terms-color:#7c27f7}
.nusa-voucher-ticket.is-selected .duo-voucher-cta-bg{fill:#7c27f7}

html[data-theme=dark] .duo-voucher-terms-label{fill:#fff}
html[data-theme=dark] .nusa-voucher-ticket.is-selected .duo-voucher-terms-label{fill:#c084fc}
html[data-theme=dark] .product-copy h3,html[data-theme=dark] .product-copy>strong{color:#f8fafc}html[data-theme=dark] .product-copy small{color:#cbd5e1}


html[data-theme=dark] :is(.promoduo-right,.promoduo-flash-head,.duo-layout-template,.promoduo-flash-template-wrap){border:0;outline:0;box-shadow:none}
html[data-theme=dark] .duo-voucher-min{fill:#ff3855;color:#ff3855;font-weight:1000}
html[data-theme=dark] .duo-voucher-timer{fill:#22e67a;color:#22e67a;font-weight:1000}


*{box-sizing:border-box;scrollbar-width:none;text-shadow:none;-webkit-text-stroke:0 transparent}


html[data-theme=dark] .member-stat-2 .member-stat-icon,html[data-theme=dark] .member-stat-2 strong,html[data-theme=dark] .member-stat-2 .member-stat-label{color:#ffd54a}

/* 2026-08 density + drawer cleanup */
.drawer-user{padding:12px 18px}.drawer-content{padding:8px 14px 16px}.menu-node{margin:2px 0}.menu-row{grid-template-columns:42px 1fr auto;gap:9px;padding:8px;border-radius:15px}.menu-row>span:first-child{display:grid;place-items:center;width:38px;height:38px;border-radius:12px}.member-card{padding:14px}.wallet-item{padding:10px 7px}.section-block{margin-bottom:14px}.showcase-head{margin-bottom:8px}

/* Compact navigation/actions; floating and bottom navigation keep touch-safe sizes. */
.side-drawer .menu-row{min-height:52px;padding-block:8px}.drawer-head{padding:16px}.panel-head{min-height:58px;padding-block:8px}

@media(min-width:1100px){.page-shell,.home-main,.site-main{max-width:1440px}}


/* Member wallet — compact, scalable and theme-aware. */
.member-card-current{position:relative;overflow:hidden;box-sizing:border-box;padding:0;border:1px solid color-mix(in srgb,#8b5cf6 22%,var(--border));border-radius:20px;background:var(--surface);color:var(--ink);box-shadow:0 10px 24px rgba(62,32,114,.12);}
.member-top{display:flex;align-items:center;justify-content:space-between;gap:7px;height:30px;min-height:30px;padding:3px 9px;background:linear-gradient(105deg,#8b5cf6 0%,#a855f7 50%,#d946ef 100%);color:#fff}.member-name{min-width:0;flex:1 1 auto;color:#fff;font-size:clamp(11px,1.8vw,15px);line-height:1;font-weight:680;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.member-tier{flex:0 0 auto;display:inline-flex;align-items:center;gap:3px;height:23px;min-height:23px;padding:1px 7px;border:1px solid rgba(255,255,255,.38);border-radius:999px;background:rgba(255,255,255,.14);color:#fff;font:inherit;font-weight:620;box-shadow:none}.member-tier>span{width:17px;height:17px;display:grid;place-items:center;color:#fff}.member-tier .icon{width:12px;height:12px;stroke-width:1.7}.member-tier b{font-size:clamp(7.8px,1.05vw,10px);font-weight:620}.member-tier i{font-style:normal;font-size:9px}
.member-inner{display:block;margin:0;padding:0;background:#fff;color:#10131a}.member-stats{width:100%;height:43px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;background:#fff}.member-stat{position:relative;min-width:0;height:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;padding:3px 6px;box-sizing:border-box;color:#111827;text-decoration:none;background:#fff}.member-stat:not(:last-child)::after{content:"";position:absolute;right:0;top:21%;height:58%;width:1px;background:#e5e7eb}.member-stat-top{width:100%;min-width:0;display:flex;align-items:center;gap:3px}.member-stat-icon{flex:0 0 15px;width:15px;height:15px;display:grid;place-items:center;color:#111827}.member-stat-icon .icon{width:14px;height:14px;stroke-width:1.7}.member-stat-top strong{min-width:0;color:#111827;font-size:clamp(8.7px,1.25vw,11px);line-height:1;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.member-stat-label{display:block;color:#4b5563;font-size:clamp(6.6px,.9vw,8px);line-height:1;font-weight:560;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.member-bottom{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px;height:31px;min-height:31px;padding:3px 7px;border-top:1px solid #edf0f4;background:#fff;color:#111827}.member-join{min-width:0;display:grid;gap:0}.member-join b{font-size:clamp(7.8px,1.05vw,9.4px);line-height:1.05;color:#111827;font-weight:620}.member-join small{font-size:clamp(6.2px,.84vw,7.5px);line-height:1.05;color:#6b7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.member-barcode{height:24px;min-height:24px;display:inline-flex;align-items:center;gap:4px;padding:0 7px;border:1px solid #c9d1dc;border-radius:999px;background:#fff;color:#111827;font:inherit;font-weight:620;white-space:nowrap;box-shadow:0 3px 9px rgba(15,23,42,.04)}.barcode-bars{width:14px;height:14px;display:grid;place-items:center}.barcode-bars .icon{width:14px;height:14px;stroke-width:1.75}.member-barcode b{font-size:clamp(6.9px,.95vw,8.4px);font-weight:620}
html[data-theme=dark] .member-card-current{background:#05070b;border-color:rgba(255,255,255,.14);box-shadow:0 12px 30px rgba(0,0,0,.28)}html[data-theme=dark] .member-inner,html[data-theme=dark] .member-stats,html[data-theme=dark] .member-stat,html[data-theme=dark] .member-bottom{background:#05070b;color:#fff}html[data-theme=dark] .member-stat:not(:last-child)::after{background:rgba(255,255,255,.16)}html[data-theme=dark] .member-stat-icon,html[data-theme=dark] .member-stat-top strong,html[data-theme=dark] .member-stat-label,html[data-theme=dark] .member-join b{color:#fff}html[data-theme=dark] .member-join small{color:#b9c0cc}html[data-theme=dark] .member-bottom{border-top-color:rgba(255,255,255,.13)}html[data-theme=dark] .member-barcode{background:#090d14;color:#fff;border-color:rgba(255,255,255,.24)}
.member-stat-2 .member-stat-icon,.member-stat-2 strong,.member-stat-2 .member-stat-label{color:#d99a00}
.member-barcode-overlay{position:fixed;z-index:170;inset:0;display:grid;place-items:end center;padding:18px;background:rgba(10,14,24,.62);backdrop-filter:blur(12px)}.member-barcode-sheet{width:min(560px,100%);overflow:hidden;border:1px solid color-mix(in srgb,var(--border) 80%,transparent);border-radius:28px;background:var(--surface);color:var(--ink);box-shadow:0 28px 80px rgba(8,12,24,.28)}.member-barcode-sheet header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 18px 11px;border-bottom:1px solid var(--border)}.member-barcode-sheet h2,.member-barcode-sheet p{margin:0}.member-barcode-sheet h2{font-size:22px;font-weight:720}.member-barcode-sheet header p{margin-top:2px;color:var(--muted);font-size:11px}.member-barcode-sheet header button{width:40px;height:40px;border:0;border-radius:14px;background:var(--surface-soft);color:var(--ink);font-size:25px}.member-barcode-plate{margin:16px;padding:16px;display:grid;gap:8px;justify-items:center;border:1px solid #dce2ea;border-radius:22px;background:#fff}.member-barcode-plate img{width:min(100%,480px);height:auto;min-height:92px;object-fit:contain}.member-barcode-plate small{color:#475569;font-size:10px;font-weight:520}.member-barcode-note{padding:0 18px 14px;color:var(--muted);font-size:11px;line-height:1.5;text-align:center}.member-barcode-sheet footer{padding:0 18px 18px}.member-barcode-sheet footer button{width:100%;min-height:46px;border:0;border-radius:16px;background:linear-gradient(135deg,#8b5cf6,#d946ef);color:#fff;font-weight:680}html[data-theme=dark] .member-barcode-sheet{background:#090d14;border-color:rgba(255,255,255,.14)}html[data-theme=dark] .member-barcode-sheet header button{background:#141a24;color:#fff}
@media(max-width:700px){.member-card-current{border-radius:18px;max-height:96px}.member-top{height:27px;min-height:27px;padding:2px 7px}.member-name{font-size:11.2px;max-width:62%}.member-tier{height:21px;min-height:21px;padding:1px 6px}.member-tier>span{width:15px;height:15px}.member-tier b{font-size:7.4px}.member-stats{height:40px}.member-stat{padding:2px 5px}.member-stat-icon{width:14px;height:14px;flex-basis:14px}.member-stat-icon .icon{width:13px;height:13px}.member-stat-top strong{font-size:8.6px}.member-stat-label{font-size:6.3px}.member-bottom{height:29px;min-height:29px;padding:2px 6px}.member-join b{font-size:7.4px}.member-join small{display:none}.member-barcode{height:23px;min-height:23px;padding-inline:6px}.member-barcode b{font-size:6.7px}.barcode-bars,.barcode-bars .icon{width:13px;height:13px}.member-barcode-overlay{padding:10px}.member-barcode-sheet{border-radius:24px}.member-barcode-plate{margin:12px;padding:12px}}
@media(min-width:1100px){.member-card-current{max-height:116px;border-radius:22px}.member-top{height:34px;min-height:34px;padding:4px 12px}.member-name{font-size:15.5px}.member-tier{height:26px;min-height:26px}.member-stats{height:47px}.member-stat{padding-inline:9px}.member-stat-top strong{font-size:11.5px}.member-stat-label{font-size:8px}.member-bottom{height:35px;min-height:35px;padding-inline:9px}.member-join b{font-size:9.5px}.member-join small{font-size:7.5px}.member-barcode{height:27px;min-height:27px}.member-barcode b{font-size:8.3px}}

/* Customer family — Figma premium scaling on wide screens without changing mobile behavior. */
@media(min-width:1024px){
  .home-main,.page-content,.site-main{width:min(var(--page,1180px),1024px,calc(100% - 48px));max-width:1024px;margin-inline:auto}
  
  
  .product-card{border-radius:22px}.product-copy{padding:15px}.product-copy h3{font-size:15px}.product-copy strong{font-size:17px}
  .hero-wrap,.promo-section,.promoduo-section,.brand-section,.products-section{border-radius:28px}
  .bottom-nav{width:min(900px,calc(100% - 48px));left:50%;right:auto;transform:translateX(-50%);border-radius:28px;bottom:18px}
}
@media(min-width:1440px){.member-card-current{max-width:none}.section-title h2{font-size:28px}}

/* PPOB dynamic home — native i-Store theme, isolated from generic category sections. */
.ppob-home{--ppob-layout-gap:clamp(18px,2.5vw,30px);display:grid;gap:var(--ppob-layout-gap);margin-top:clamp(12px,2vw,20px)}
.ppob-home :is(h2,p){margin:0}.ppob-flash,.ppob-popular,.ppob-catalog{min-width:0}
.ppob-flash{padding:clamp(12px,1.8vw,18px);border:1px solid var(--border);border-radius:clamp(20px,2.4vw,30px);background:var(--surface);box-shadow:0 7px 22px rgba(20,28,36,.055)}
.ppob-flash-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.ppob-flash-heading>img{display:block;width:auto;height:32px;min-height:32px;max-height:32px;max-width:min(54%,250px);object-fit:contain;object-position:left center}.ppob-flash-heading>strong{font-size:clamp(18px,2.4vw,28px);font-style:italic;font-weight:1000}
.ppob-countdown{display:flex;align-items:center;gap:5px;flex:0 0 auto}.ppob-countdown span{min-width:clamp(31px,3.6vw,39px);height:clamp(31px,3.6vw,39px);padding:0 7px;display:grid;place-items:center;border:1px solid rgba(15,23,42,.12);border-radius:9px;background:#111827;color:#fff;font-size:clamp(10px,1.3vw,14px);font-weight:900;font-variant-numeric:tabular-nums;line-height:1;box-shadow:0 6px 16px rgba(15,23,42,.12)}.ppob-countdown b{font-size:13px;color:#475569;font-weight:900}html[data-theme=dark] .ppob-countdown span{background:#1b2433;color:#f8fafc;border-color:rgba(255,255,255,.24);box-shadow:0 8px 22px rgba(0,0,0,.30)}html[data-theme=dark] .ppob-countdown b{color:#e2e8f0}
.ppob-flash-scroller{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(116px,18vw,210px);gap:10px;overflow-x:auto;}.ppob-flash-card{position:relative;aspect-ratio:.82/1;overflow:hidden;border-radius:clamp(15px,1.8vw,22px);background:var(--surface-soft);scroll-snap-align:start;isolation:isolate;box-shadow:0 10px 24px rgba(20,14,34,.14)}.ppob-flash-cover,.ppob-flash-cover img,.ppob-flash-shade{position:absolute;inset:0}.ppob-flash-cover{display:grid;place-items:center}.ppob-flash-cover img{width:100%;height:100%;object-fit:cover}.ppob-flash-cover .icon{width:38px;height:38px;color:var(--accent)}.ppob-flash-shade{z-index:1;background:linear-gradient(180deg,transparent 30%,rgba(4,5,12,.9) 100%)}.ppob-flash-copy{position:absolute;z-index:2;left:10px;right:10px;bottom:10px;display:grid;gap:2px;color:#fff}.ppob-flash-copy b{font-size:clamp(10px,1.2vw,13px);line-height:1.25}.ppob-flash-copy strong{width:max-content;max-width:100%;padding:4px 7px;border-radius:7px;background:linear-gradient(135deg,var(--accent),var(--accent-2));font-size:clamp(9px,1.1vw,12px)}.ppob-flash-copy del{font-size:9px;opacity:.7}
.ppob-title{display:flex;align-items:flex-start;gap:8px;margin-bottom:10px}.ppob-title-icon{display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;overflow:hidden;border-radius:12px;font-size:22px;line-height:1}.ppob-title-fire img{display:block;width:100%;height:100%;object-fit:contain}.ppob-title h2,.ppob-catalog-title h2{font-size:clamp(17px,2.2vw,25px);font-weight:950;letter-spacing:-.02em}.ppob-title p{margin-top:4px;color:var(--muted);font-size:clamp(9px,1.2vw,12px)}
.ppob-popular .ppob-title{align-items:center}
.ppob-popular .ppob-title-icon{flex-basis:clamp(34px,4.8vw,44px);width:clamp(34px,4.8vw,44px);height:clamp(34px,4.8vw,44px)}
.ppob-popular .ppob-title-copy{min-width:0;display:grid;gap:0}
.ppob-popular .ppob-title-copy h2,.ppob-popular .ppob-title-copy p{margin:0}
.ppob-popular .ppob-title-copy h2{display:flex;align-items:center;gap:clamp(4px,1vw,9px);min-width:0;line-height:1.12;white-space:nowrap}
.ppob-popular-heading-text{min-width:0;overflow:hidden;text-overflow:ellipsis}
.ppob-popular .ppob-title-copy p{line-height:1.15}
.ppob-popular-medals{display:inline-flex;flex:0 0 auto;align-items:center;font-size:clamp(13px,2.2vw,24px);line-height:1;white-space:nowrap}
.ppob-popular-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(7px,1.2vw,12px)}.ppob-popular-card.is-static{cursor:default}

.ppob-catalog-title{display:flex;align-items:center;gap:9px;margin:0 0 10px}.ppob-catalog-title i{width:22px;height:7px;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent-2))}.ppob-product-image .icon{width:34%;height:34%;color:var(--accent)}
.ppob-loading,.ppob-error{min-height:160px;display:grid;place-items:center;align-content:center;gap:8px;padding:24px;border:1px dashed color-mix(in srgb,var(--accent) 30%,var(--border));border-radius:24px;background:var(--surface);text-align:center;color:var(--muted)}.ppob-error strong{color:var(--ink)}.ppob-error button{min-height:38px;padding:0 16px;border:0;border-radius:12px;background:var(--accent);color:#fff;font-weight:900}.ppob-section-error{grid-column:1/-1;min-height:68px;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid rgba(60,78,94,.14);border-radius:14px;background:#fff;color:#5f6870;font-size:12px;line-height:1.4}.ppob-section-error button{flex:0 0 auto;min-height:36px;padding:0 13px;border:1px solid rgba(50,70,88,.18);border-radius:9px;background:#f5f6f5;color:#344b60;font-size:11px;font-weight:700;cursor:pointer}.ppob-section-error button:disabled{opacity:.6;cursor:wait}@media(max-width:520px){.ppob-section-error{align-items:flex-start;flex-direction:column}}.ppob-home .empty-state{grid-column:1/-1;padding:24px;border:1px dashed var(--border);border-radius:16px;background:var(--surface);color:var(--muted);text-align:center;font-size:11px}
.catalog-products-loading,.catalog-products-empty,.catalog-products-error{grid-column:1/-1}
.catalog-products-loading{min-height:112px;display:grid;place-items:center;padding:22px;border:1px solid color-mix(in srgb,var(--border) 82%,transparent);border-radius:18px;background:var(--surface);color:var(--muted);font-size:13px;letter-spacing:.01em}
.catalog-products-error{margin:0;border-radius:18px}
.catalog-products-empty{min-height:96px;display:grid;place-items:center;border-radius:18px}
html[data-theme=dark] .ppob-flash-card{box-shadow:0 10px 28px rgba(0,0,0,.25)}
@media(max-width:520px){.ppob-home{--ppob-layout-gap:17px;gap:var(--ppob-layout-gap)}.ppob-flash{padding:10px;border-radius:18px}.ppob-flash-heading{margin-bottom:8px}.ppob-flash-heading>img{height:32px;min-height:32px;max-height:32px;max-width:46%}.ppob-countdown{gap:2px}.ppob-countdown span{min-width:25px;height:25px;padding-inline:3px;font-size:9px;border-radius:6px}.ppob-countdown b{font-size:10px}.ppob-flash-scroller{grid-auto-columns:112px;gap:7px}.ppob-popular-grid{gap:6px}}
@media(min-width:900px){.ppob-popular-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.ppob-flash-scroller{grid-auto-columns:190px}}


/* PPOB premium upgrades */
.ppob-banner-zone{margin-bottom:clamp(2px,.6vw,8px)}
.ppob-banner-zone .hero-carousel{overflow:hidden;border-radius:clamp(20px,2vw,28px);box-shadow:0 18px 36px rgba(20,14,34,.12)}
.ppob-flash-scroller{overscroll-behavior-inline:contain;scroll-behavior:smooth;scroll-snap-type:x mandatory;padding-bottom:4px}

.ppob-popular-card{position:relative;min-width:0;min-height:clamp(68px,8vw,88px);display:grid;grid-template-columns:clamp(54px,6vw,72px) minmax(0,1fr);align-items:center;gap:10px;padding:8px 10px;border:1px solid rgba(29,34,38,.09);border-radius:16px;background:var(--surface);overflow:hidden;isolation:isolate;box-shadow:0 5px 16px rgba(20,28,36,.045)}
.ppob-popular-thumb,.ppob-popular-copy{position:relative;z-index:1}
.ppob-popular-thumb{width:100%;aspect-ratio:1;border-radius:14px;overflow:hidden;background:transparent;box-shadow:none}
.ppob-popular-thumb img,.ppob-popular-thumb>.icon{width:100%;height:100%;object-fit:cover;display:block}
.ppob-popular-thumb>.icon{padding:15px;color:var(--accent)}
.ppob-popular-copy{min-width:0;display:grid;gap:4px}
.ppob-popular-copy strong{font-size:clamp(10px,1.08vw,13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ppob-category-popular .ppob-popular-card{grid-template-columns:clamp(42px,7.5vw,68px) minmax(0,1fr);gap:clamp(4px,1vw,8px);min-height:clamp(68px,13vw,100px);padding:clamp(5px,1.2vw,10px)}
.ppob-category-popular .ppob-popular-copy{justify-items:center;gap:clamp(4px,.8vw,7px)}
.ppob-category-popular .ppob-popular-copy .ppob-popular-product-medals{display:inline-flex;align-items:center;justify-content:center;gap:clamp(1px,.45vw,4px);width:100%;overflow:hidden;font-size:clamp(9px,2vw,17px);line-height:1;white-space:nowrap}
.ppob-popular-copy small{max-width:100%;color:color-mix(in srgb,var(--ink) 58%,transparent);font-size:clamp(7px,1.7vw,10px);line-height:1.15;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-theme=dark] .ppob-banner-zone .hero-carousel{box-shadow:0 18px 38px rgba(0,0,0,.28)}
html[data-theme=dark] .ppob-popular-card{background:var(--surface);box-shadow:0 8px 22px rgba(0,0,0,.20)}
html[data-theme=dark] .ppob-popular-copy small{color:color-mix(in srgb,#fff 64%,transparent)}
@media(max-width:520px){.ppob-banner-zone .hero-carousel{border-radius:18px}.ppob-popular-card{grid-template-columns:48px minmax(0,1fr);gap:8px;padding:7px 8px;min-height:66px}.ppob-category-popular .ppob-popular-card{grid-template-columns:clamp(38px,12vw,48px) minmax(0,1fr);gap:clamp(4px,1.2vw,7px);min-height:clamp(66px,19vw,78px);padding:6px}.ppob-popular-thumb{border-radius:12px}.ppob-popular-copy strong{font-size:10px}.ppob-popular-copy small{font-size:clamp(7px,2vw,9px)}}

/* Text-paired media stays transparent. */
.wallet-item .wallet-icon,.member-tier>span{background:transparent;border:0;box-shadow:none}


html[data-theme=dark]{--voucher-ticket-fill:#171922;--voucher-ticket-border:#f8fafc;--voucher-ticket-selected-fill:#24172f;--voucher-ticket-selected-border:#c084fc;--voucher-ticket-text:#f8fafc;
  --surface:#111827;
  --surface-soft:#0b1220;
  --ink:#f8fafc;
  --muted:#a9b4c6;
  --border:rgba(226,232,240,.16);
  background:#070d18;
  color-scheme:dark;
}
html[data-theme=dark] body{
  background:radial-gradient(circle at 15% -10%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 32%),#070d18;
  color:var(--ink);
}
html[data-theme=dark] :is(.market-header,.address-row,.ticker,.product-card,.ppob-product-card,.ppob-flash,.ppob-popular-card,.bottom-nav,.mobile-dock){
  background:var(--surface);
  color:var(--ink);
  border-color:var(--border);
}
html[data-theme=dark] :is(.section-title h2,.product-copy h3,.product-copy strong,.ppob-product-caption strong,.ppob-catalog-title h2){color:var(--ink)}
html[data-theme=dark] :is(.product-copy small,.ppob-product-caption small,.section-title a){color:var(--muted)}

/* Product grids use one geometry per row at every breakpoint. */
.product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.product-card{display:flex;flex-direction:column;align-self:start;height:auto;min-height:0;border-radius:20px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--premium-shadow);overflow:hidden}
.product-image{width:100%;aspect-ratio:1/1;min-height:0;background:linear-gradient(145deg,color-mix(in srgb,#ffffff 86%,var(--accent) 14%),color-mix(in srgb,#eef4ff 84%,var(--accent-2) 16%));display:grid;place-items:center;overflow:hidden}
.product-image img{width:100%;height:100%;object-fit:contain;padding:5%;background:transparent}
.product-copy{display:flex;flex:0 0 auto;flex-direction:column;padding:12px;background:var(--surface)}
.product-copy h3{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-height:2.7em;margin:7px 0 9px}
.product-copy strong{margin-top:0}
html[data-theme=dark] .product-image{background:linear-gradient(145deg,color-mix(in srgb,#f8fafc 82%,var(--accent) 18%),#eef4ff)}
html[data-theme=dark] .product-image img{background:transparent}
@media(min-width:760px){.product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1100px){.product-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:1450px){.product-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* Featured Brands: square logo tiles with a transparent outer card. */


/* PPOB card/grid styles live in css/modules/catalog/ppob.css. */

/* Desktop uses available width instead of stretching narrow mobile proportions. */
@media(min-width:1024px){
  .main-content{width:min(100%,var(--page));padding-inline:clamp(24px,3vw,48px)}
  .market-header{padding-inline:max(28px,calc((100vw - var(--page))/2 + 34px))}
  .section-block{margin-bottom:28px}
}


.promo-grid.layout-trio{grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr);align-items:stretch}
.promo-grid.layout-trio .promo-0,.promo-grid.layout-trio .promo-2{aspect-ratio:1/1;align-self:stretch;width:100%;height:auto}.promo-grid.layout-trio .promo-1{aspect-ratio:2/1;align-self:stretch;width:100%;height:auto}
.promo-grid.layout-wide-square{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
.promo-grid.layout-wide-square .promo-0,.promo-grid.layout-wide-square .promo-1{grid-column:auto;aspect-ratio:1.45/1;align-self:stretch;width:100%;height:auto}
@media(max-width:640px){
  .promo-grid.layout-trio{grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr);gap:0}
  .promo-grid.layout-wide-square{grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
}


/* Category hierarchy uses the original i-Store system icons; legacy image assets remain available but are not preferred here. */


/* Travel products launcher — scoped, theme-aware, responsive, and config driven. */
.travel-products{display:grid;gap:clamp(12px,1.8vw,18px)}
.travel-primary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1.5vw,16px)}
.travel-product-card{position:relative;min-width:0;display:grid;justify-items:stretch;align-content:stretch;gap:0;color:var(--ink);text-align:center}
.travel-product-card--primary{min-height:0;aspect-ratio:1;padding:0;overflow:hidden;border:1px solid var(--border);border-radius:clamp(20px,2.4vw,30px);background:color-mix(in srgb,var(--surface) 96%,var(--accent) 4%);box-shadow:0 12px 30px color-mix(in srgb,var(--ink) 7%,transparent)}
.travel-product-card--primary:hover,.travel-product-card--primary:focus-visible{border-color:color-mix(in srgb,var(--accent) 34%,var(--border));box-shadow:0 16px 36px color-mix(in srgb,var(--accent) 12%,transparent);outline:none}

/* Category Menu: image container only; label is a sibling below the image. */


.travel-product-icon{position:relative;width:100%;height:100%;aspect-ratio:1;display:grid;place-items:center;border-radius:inherit;overflow:hidden;background:transparent;box-shadow:none}
.travel-product-icon>span{font-size:clamp(30px,4vw,52px);line-height:1;filter:drop-shadow(0 5px 8px color-mix(in srgb,var(--ink) 16%,transparent))}
.travel-product-icon>img{width:100%;height:100%;object-fit:cover;display:block}.travel-product-icon>.icon{width:52%;height:52%}
.travel-product-card strong{max-width:100%;font-size:clamp(12px,1.45vw,18px);line-height:1.22;font-weight:760;letter-spacing:-.018em;overflow-wrap:anywhere}
.travel-product-badge{position:absolute;top:-6px;right:-10px;z-index:2;min-width:clamp(38px,4.5vw,58px);padding:clamp(3px,.45vw,5px) clamp(7px,.8vw,10px);border-radius:999px;background:var(--danger);color:#fff;border:2px solid var(--surface);box-shadow:0 6px 14px color-mix(in srgb,var(--danger) 28%,transparent);font-size:clamp(9px,1vw,12px);line-height:1;font-style:normal;font-weight:850;white-space:nowrap}

/* FEATURE: category submenu keeps one proportional mobile-first composition across mobile and desktop. The shell is widened beyond the content gutter and given extra top room without changing card scale. */



























.travel-product-card--catalog .travel-product-icon{width:100%;background:transparent}
@media(max-width:620px){
  .travel-products{gap:12px}
  .travel-primary-grid{gap:7px}
  
  .travel-product-card--primary{min-height:0;aspect-ratio:1;padding:0;border-radius:20px}
  .travel-product-card--primary .travel-product-icon{width:100%}
  .travel-product-card strong{font-size:clamp(11px,3.45vw,14px)}
  .travel-product-badge{right:-7px;top:-5px}
  
  
  
  
  
  
  
}
@media(max-width:360px){.travel-product-card--primary{min-height:0}.travel-product-icon{width:100%}.travel-product-card strong{font-size:11px}}

/* Niche-aware visual additions. */
.category-emoji{font-size:clamp(28px,4vw,46px)}
.brand-partner-verified{display:inline-grid;place-items:center;width:clamp(18px,1.8vw,22px);height:clamp(18px,1.8vw,22px);margin-left:7px;vertical-align:-3px}.brand-partner-verified svg{width:100%;height:100%;fill:#1d9bf0;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.showcase-head h2{display:flex;align-items:center;}

/* FEATURE: Kuliner restaurant/menu are focused surfaces; marketplace home chrome remains homepage-only. */
body.food-focus-view .announcement-line,body.food-focus-view .market-header,body.food-focus-view .address-row,body.food-focus-view .member-card,body.food-focus-view #categoryBanner,body.food-focus-view #categoryTicker,body.food-focus-view .bottom-nav-shell,body.food-focus-view .floating-zone,body.food-focus-view .sales-popup{display:none}
body.food-focus-view .main-content{padding-top:0}
body.food-focus-view #verticalEmbedHost{margin-top:0}
body.food-focus-view .vertical-embed-section{margin-top:0;padding-top:0}
body.food-product-focus-view .main-content{padding-inline:0}


/* Niche-aware Travel search hub. Kept independent from the native vertical search UIs. */
.travel-context-search{display:grid;gap:14px}.travel-context-search-form{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:18px;background:var(--card);box-shadow:var(--shadow-soft)}.travel-context-search-form>span{display:grid;place-items:center;color:var(--muted)}.travel-context-search-form input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--text);font:inherit}.travel-context-search-form button{border:0;border-radius:12px;padding:9px 14px;background:var(--primary);color:#fff;font-weight:800}.travel-context-search .section-title{display:flex;align-items:end;justify-content:space-between;gap:12px}.travel-context-search .section-title small{color:var(--muted)}

/* active underline hugs the icon/label field bottom; progress belongs below it */




/* The PPOB Flash Sale header must never be frozen by CSS; uploaded GIF stays native. */


/* Product cards: title remains normal-flow content. Two lines expand downward and can never collide with price. */



/* Every card reserves the same two-line title block, therefore rating aligns naturally across 1/2-line titles. */


/* Related grid uses the exact same non-overlapping title/price/rating flow. */










/* Reset every historical category-selection light. The only active light after
   this point is the circular radial source below. */


/* Rebuilt reference-style point light: bright white core -> purple circular
   bloom -> fully transparent edge. It is behind the art, never a box/frame. */




/* Selection underline remains independent from the back-light. */


/* The menu progress row is real UI, with clear space before Promo Home. */










/* Product title rhythm: one-line titles sit vertically centered in the exact
   same two-line title box. Two-line titles use both lines; price starts only
   after this box, so it can never collide. */




/* Rating/sold baseline is identical on every card, independent of title length. */


/* PPOB flash header uses the exact PromoDuo Flash Sale media source in JS.
   Never synthesize/freeze it with CSS. */
.ppob-flash-heading .ppob-flash-header-media,.ppob-flash-header-media{display:block;width:auto;max-width:48%;height:32px;min-height:32px;max-height:32px;animation:none;transform:none;filter:none;object-fit:contain}




/* Desktop scale-up: one centered mobile-like canvas, not a dense dashboard. */
@media (min-width:900px){
  :root{
    --desktop-mobile-scale-page:1024px;
    --gutter:clamp(18px,2.25vw,30px);
  }

  .page-shell,
  .home-main,
  .site-main,
  .page-content,
  .main-content{
    width:min(var(--desktop-mobile-scale-page),calc(100% - 40px));
    max-width:var(--desktop-mobile-scale-page);
    margin-inline:auto;
  }

  
  /* Keep category/menu behaviour visually identical to mobile: four complete
     choices per viewport. The items simply become physically larger. */
  

  

  

  /* Mobile-shaped cards/sections, enlarged rather than flattened. */
  .hero-wrap,
  .promo-section,
  .promoduo-section,
  .brand-section,
  .products-section{
    border-radius:clamp(24px,2.4vw,34px);
  }

  .section-block{margin-bottom:clamp(16px,2vw,24px)}

  /* Dock follows the same centered canvas and keeps the mobile floating-pill
     proportions instead of stretching almost edge-to-edge on desktop. */
  .bottom-nav{
    border-radius:clamp(28px,3vw,40px);
  }
}

/* Very wide monitors keep the same 3-column composition. Do not increase
   density at 1440/1450px, even though legacy rules above used 5 columns. */






/* Media uploaded through admin must consume the frame it is assigned without
   introducing intrinsic-size gaps. Preserve artwork for logos/icons, crop only
   photographic/product cover frames where edge-to-edge presentation is wanted. */



/* The first category cell is the true x=0 origin. Never center a scrollable
   track: centering an overflowing flex row creates an unreachable negative
   start area, which was why “Semua” stopped half outside the viewport. */





/* Canonical Sub Menu geometry: every descendant derives from one container ratio. */







/* Canonical bottom dock geometry. */
.bottom-nav-shell{
  position:fixed;
  z-index:70;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:auto;
  padding:0;
  margin:0;
  pointer-events:none;
  background:transparent;
  overflow:visible;
  transform:none;
  translate:none;
}
.bottom-nav{
  pointer-events:auto;
  position:relative;
  inset:auto;
  transform:none;
  translate:none;
  width:min(94vw,920px);
  max-width:920px;
  min-height:clamp(68px,8vw,88px);
  margin:0 auto max(10px,env(safe-area-inset-bottom));
  padding:clamp(7px,1vw,11px);
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  align-items:stretch;
  gap:clamp(3px,.7vw,8px);
  border:1px solid var(--border);
  border-radius:clamp(25px,3vw,38px);
  background:color-mix(in srgb,var(--surface) 94%,transparent);
  box-shadow:none;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  overflow:visible;
}
html[data-theme=dark] .bottom-nav{
  border-color:rgba(148,163,184,.24);
  background:rgba(10,15,28,.96);
}
#notificationPanel{
  border:1px solid var(--border);
  background:var(--surface);
}
#notificationPanel .panel-head,#notificationPanel .notification-tabs{border-color:color-mix(in srgb,var(--accent) 18%,var(--border))}
#notificationPanel .notification-card{border-color:color-mix(in srgb,var(--accent) 14%,var(--border))}
#notificationPanel .notification-action{display:inline-flex;align-items:center;margin-top:5px;padding:6px 9px;border-radius:10px;background:var(--accent);color:#fff;font-size:10px;font-weight:900}
html[data-theme=dark] #notificationPanel .notification-action{color:#fff}
html[data-theme=dark] #notificationPanel .notification-tabs button.active{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff}
html[data-theme=dark] #notificationPanel .notification-card h3,html[data-theme=dark] #notificationPanel .panel-head h2{color:#f8fafc}
html[data-theme=dark] #notificationPanel .notification-card p{color:#cbd5e1}
html[data-theme=dark] #notificationPanel .notification-card time{color:#94a3b8}
.bottom-nav .bottom-item{
  position:relative;
  min-width:0;
  width:100%;
  height:100%;
  margin:0;
  padding:clamp(6px,.8vw,10px) 3px;
  border:0;
  border-radius:clamp(18px,2vw,28px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(2px,.35vw,5px);
  background:transparent;
  color:var(--muted);
  overflow:visible;
}
.bottom-nav .bottom-item.active{
  color:#fff;
  background:linear-gradient(145deg,var(--accent),color-mix(in srgb,var(--accent-2) 74%,var(--accent)));
}
.bottom-nav .bottom-item>.icon{
  width:clamp(23px,2.5vw,31px);
  height:clamp(23px,2.5vw,31px);
}
.bottom-nav .bottom-label{
  display:block;
  width:100%;
  font-size:clamp(9px,.9vw,12px);
  line-height:1;
  font-weight:850;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

@media (min-width:900px){
  /* Keep the general shell efficient, but the two requested merchandising
     sections intentionally consume 90% of the viewport. */
  

  /* Four complete category cells per viewport, same language as mobile. */
  

  /* PromoDuo becomes two equal responsive columns with a genuine 3.5% gap. */
  
  
  
  
  
  
  
  
  
  
  
  
  

  /* Latest requested catalog density: two equal columns. 3.5% gap leaves each
     card at ~48.25% of the container width. */
  
  

  /* 60/40 visual/information split, with all copy scaled from the card's own
     container width instead of retaining mobile-sized fixed text. */
  
  
  
  
  
  
  

  /* Partner and Store media scale with their responsive cells. */
  
  
  
  
  

  
}




@media (min-width:900px){
  /* PRODUCT CATALOG: desktop returns to three columns. Each title is always
     allowed exactly two lines, and all type scales from the card width. */
  .product-grid{
    
    column-gap:clamp(16px,2.2vw,30px);
    row-gap:clamp(18px,2.4vw,34px);
  }
  
  
  
  
  
  
  

  /* SUBMENU: exactly four full cells live inside the SVG's usable top bay.
     The rail snaps a complete 4-up page to the shell centre, while the progress
     bar stays above (and visually separate from) the See-all notch. */
  
  
  
  
  
  

  
  
  
  
  
  
  
  
  
  
  
  

  /* PRIMARY NAV: centre the actual nav itself in the viewport. Positioning the
     nav, not only its shell, prevents historical containing-block/overflow rules
     from clipping the right half in desktop-mode mobile browsers. */
  .bottom-nav-shell{
    position:static;
    width:0;
    height:0;
    padding:0;
    margin:0;
    overflow:visible;
    pointer-events:none;
  }
  .bottom-nav{
    position:fixed;
    z-index:90;
    left:50%;
    right:auto;
    top:auto;
    bottom:max(12px,env(safe-area-inset-bottom));
    transform:translateX(-50%);
    translate:none;
    width:min(90vw,920px);
    max-width:920px;
    min-width:0;
    margin:0;
    padding:clamp(8px,1vw,12px);
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:clamp(4px,.65vw,8px);
    overflow:visible;
    pointer-events:auto;
  }
  .bottom-nav .bottom-item{
    min-width:0;
    width:100%;
    max-width:none;
    margin:0;
    justify-self:stretch;
  }
}


/* Kategori Menu: live draggable progress above a dedicated divider before Promo Home. */


/* Submenu preview has no progress bar anymore. Keep four large cells in the SVG shell. */








/* "Lihat semua" submenu: large 4-column rectangular catalog, never tiny icon dots. */










/* Optional admin-controlled text under any "Semua" artwork. */


/* Product grid uses the single canonical geometry declared above. */


/* Bottom menu is portaled to <body>, so it cannot be clipped by #app/main containers. */
body > .bottom-nav-shell[data-bottom-nav-portal="1"]{
  position:fixed;
  z-index:190;
  left:50%;
  right:auto;
  bottom:max(10px,env(safe-area-inset-bottom));
  transform:translateX(-50%);
  width:min(94vw,920px);
  max-width:920px;
  height:auto;
  margin:0;
  padding:0;
  overflow:visible;
  pointer-events:auto;
}
body > .bottom-nav-shell[data-bottom-nav-portal="1"] .bottom-nav{
  position:relative;
  left:auto;
  right:auto;
  bottom:auto;
  transform:none;
  width:100%;
  max-width:none;
  margin:0;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(4px,.75vw,10px);
  padding:clamp(8px,1.1vw,13px);
  overflow:visible;
}
body > .bottom-nav-shell[data-bottom-nav-portal="1"] .bottom-item{
  width:100%;
  min-width:0;
  max-width:none;
  justify-self:stretch;
  overflow:visible;
}








/* One separator only: the explicit divider owns the separation before Promo Home. */


/* Avoid an extra CSS separator below the submenu shell; the supplied SVG owns its outline. */



/* Centre the active light exactly behind the icon/artwork, not above or below it. */


/* Submenu: lift artwork and its active underline into the optical centre of the SVG's upper bay. */






/* Product title rhythm: always reserve a two-line box. A title that collapses to
   one line on desktop sits in the vertical middle of the same box, exactly like
   the centre between line 1 and line 2 of a genuine two-line title. */




/* Preserve the requested desktop scale without changing mobile card geometry. */



/* Kategori Menu now uses the same working progress geometry as Kategori Utama. */


/* Stronger, centred light halo on main category + category menu only. */


/* Sub-menu preview: artwork sits close to its selected underline, inside the SVG bay. */





/* "Lihat semua": true 1:1 tiles, exactly four columns, centred with equal side space. */









/* Mobile keeps its native two-line title rhythm; desktop centres a one-line title
   inside the exact height occupied by a two-line title. */




/* Main/Menu active light: stronger, but clipped to its own category cell so
   the halo never bleeds into the neighbouring category. */


/* Kategori Menu progress behaves as a thumb, not a full decorative line. */


/* Product title alignment on desktop: short titles occupy the vertical centre
   of the exact two-line title box; long titles retain their two-line clamp. */



/* 1) Product title: every card reserves exactly a two-line slot, while the
   actual one- or two-line text is vertically centered inside that slot. */



/* 2) Main + Menu glow: true circular bloom that fills its own icon cell only.
   No blur/box-shadow is allowed to leak into neighbouring cells. */


/* 3) Category Menu rail: force a genuinely scrollable max-content track, then
   expose the same moving-thumb behaviour as the main category rail. */


/* 4) Mobile catalog: content height is natural. This prevents title/price/
   benefits from being crushed or piling up at the bottom of fixed-ratio cards. */



/* Category Menu should feel exactly like the main category rail: native horizontal
   pan, no forced snap-back, and the same icon scale. */




/* Soft circular bloom for Main Category + Category Menu.  The colour fades to
   transparent before the edge, so there is no visible ring or square boundary. */


/* Desktop title slot: when the browser actually renders a formerly two-line title
   as one line, center that one line in the exact two-line slot. */



/* Category Menu: exactly four visible items and a hard stop at each item slot.
   Native panning stays enabled; after release the rail settles to the nearest
   locked position, matching the Sub Menu feel. */


/* The desktop PromoDuo title should remain prominent, not dominate the ribbon.
   Keep it on one line and scale within the available centre column. */



/* Universal Category Menu: keep four locked cells, but let the browser own the
   finger gesture. JS only settles after the gesture ends; this removes the
   "heavy/stuck" feeling caused by smooth-scroll fighting pointer movement. */


/* Selection line is centered against the complete cell/icon axis, not against
   text width or incidental image bounds. */


/* PPOB Category Menu: four cells per mobile viewport, live scroll thumb and a
   much smaller visual gap before the selected menu heading/catalog. */







.ppob-catalog-title{margin-bottom:9px;
  margin-top:0;
}



/* Category Menu is controlled by one JS rail only.  Keep browser snap disabled so
   native snap and the JS settle/autoplay cannot fight each other. */




/* Make Main Category + Category Menu use the same soft bloom language as Sub Menu.
   No hard circle edge, no square tile and no large lateral spill. */


/* The ribbon title follows the selected category/menu/submenu but stays inside
   the centre lane at responsive sizes. */


/* Layanan Prioritas + kategori menu ringan: rail kategori menu sengaja memakai geometri Kategori Utama. */


.priority-home{display:grid;gap:18px;}
.priority-home-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;border-radius:24px;background:var(--surface);border:1px solid var(--border);box-shadow:0 10px 30px rgba(20,10,35,.06)}
.priority-home-head h2{margin:0 0 5px;font-size:clamp(22px,2.8vw,34px)}
.priority-home-head p{margin:0;color:var(--muted);font-weight:650;line-height:1.45}
.priority-home-head>span{font-size:clamp(34px,6vw,58px)}
.priority-menu-section{display:grid;gap:8px}
.priority-service-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.priority-service-card{border:1px solid var(--border);background:var(--surface);border-radius:20px;padding:0;overflow:hidden;display:grid;text-align:left;cursor:pointer;box-shadow:0 8px 24px rgba(20,10,35,.055)}
.priority-service-media{aspect-ratio:16/10;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 7%,var(--surface-soft));overflow:hidden}
.priority-service-media img{width:100%;height:100%;object-fit:cover;display:block}
.priority-service-media>span{width:54px;height:54px;display:grid;place-items:center;color:var(--accent)}
.priority-service-copy{display:grid;gap:4px;padding:12px 13px 14px}
.priority-service-copy strong{font-size:14px;line-height:1.25}
.priority-service-copy small{color:var(--muted);font-weight:700}
.priority-service-copy b{font-size:12px;color:var(--accent)}
.priority-request-overlay{position:fixed;inset:0;z-index:200;background:rgba(6,8,16,.64);display:grid;place-items:end center;padding:14px}
.priority-request-sheet{width:min(680px,100%);max-height:min(88vh,820px);overflow:auto;background:var(--surface);border-radius:26px;padding:18px;display:grid;gap:13px;box-shadow:0 24px 70px rgba(0,0,0,.28)}
.priority-request-sheet header{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.priority-request-sheet header h2{margin:0 0 4px}.priority-request-sheet header p{margin:0;color:var(--muted);line-height:1.4}
.priority-request-sheet header button{border:0;background:var(--surface-soft);width:38px;height:38px;border-radius:50%;font-size:24px;cursor:pointer}
.priority-request-sheet label{display:grid;gap:6px;font-weight:800;font-size:13px}
.priority-request-sheet input,.priority-request-sheet textarea{width:100%;border:1px solid var(--border);border-radius:14px;background:var(--surface-soft);color:var(--ink);padding:12px 13px;outline:none}
.priority-request-sheet textarea{resize:vertical}
.priority-request-sheet footer{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:4px}
.priority-request-sheet footer button{border:0;border-radius:14px;padding:12px 14px;font-weight:900;cursor:pointer;background:var(--surface-soft)}
.priority-request-sheet footer .primary{background:var(--accent);color:#fff}
@media(min-width:700px){.priority-service-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1050px){.priority-service-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Layanan Prioritas memakai geometri rail Kategori Utama + kartu promo PPOB tanpa membuat sistem layout paralel. */
.priority-menu-rail{
  width:100%;
  max-width:100%;
}
.priority-flash-title{display:flex;align-items:center;gap:8px;min-width:0}
.priority-flash-title h2{margin:0;font-size:clamp(17px,2.2vw,25px);font-weight:950;letter-spacing:-.02em}
.priority-flash-title p{margin:3px 0 0;color:var(--muted);font-size:clamp(9px,1.2vw,12px)}
.priority-flash-card,.priority-popular-card{font:inherit;color:inherit;text-align:left;cursor:pointer}
.priority-flash-card{border:0;padding:0}
.priority-popular-card{width:100%}


body.food-focus-view{
  overflow:hidden;
}
body.food-focus-view #verticalEmbedHost{
  position:fixed;
  inset:0;
  z-index:120;
  width:100vw;
  max-width:100vw;
  height:100dvh;
  min-height:100dvh;
  margin:0;
  padding:0;
  overflow:hidden;
  background:var(--surface);
  isolation:isolate;
}
body.food-focus-view #verticalEmbedHost>.iv-food-app,
body.food-focus-view #verticalEmbedHost>.iv-food-product-focus,
body.food-focus-view #verticalEmbedHost>.iv-food-collection-view,
body.food-focus-view #verticalEmbedHost>.iv-system-search{
  width:100%;
  max-width:100%;
}

/* Unified category rails: main category, category menu, PPOB and priority services share one geometry. */
.category-strip,
#categoryMenuStrip,
#ppobHome > .ppob-menu-section,
#categoryMenuStrip > .ppob-menu-section,#priorityHome > .ppob-menu-section,
.health-reference{
  --category-per-view:4;
  --category-scale:1;
  --category-cell-ratio:1.34;
  --category-visual-base:clamp(78px,22vw,116px);
  --category-visual-size:calc(var(--category-visual-base) * var(--category-scale));
  --category-progress-width:calc(clamp(116px,31vw,190px) * var(--category-scale));
  --category-progress-height:calc(8px * var(--category-scale));
  --category-cell-min-height:calc(var(--category-visual-size) * var(--category-cell-ratio));
}
.category-strip{min-width:0;overflow:visible}
.category-scroller,#ppobHome > .ppob-menu-section .ppob-menu-tabs,#categoryMenuStrip > .ppob-menu-section .ppob-menu-tabs,#priorityHome > .ppob-menu-section .ppob-menu-tabs{
  overflow-x:auto;
  overflow-y:visible;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-inline:contain;
  touch-action:pan-x pan-y;
  scroll-snap-type:x mandatory;
  scroll-behavior:auto;
  scrollbar-width:none;
}#categoryMenuStrip .universal-category-menu-viewport,.health-reference .health-ref-category-viewport{
  width:100%;
  min-width:0;
  overflow-x:auto;
  overflow-y:visible;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-inline:contain;
  touch-action:pan-x pan-y;
  scroll-snap-type:x mandatory;
  scroll-behavior:auto;
  scrollbar-width:none;
}
.category-scroller::-webkit-scrollbar,
#categoryMenuStrip .universal-category-menu-viewport::-webkit-scrollbar,
#ppobHome > .ppob-menu-section .ppob-menu-tabs::-webkit-scrollbar,
#categoryMenuStrip > .ppob-menu-section .ppob-menu-tabs::-webkit-scrollbar,#priorityHome > .ppob-menu-section .ppob-menu-tabs::-webkit-scrollbar,
.health-reference .health-ref-category-viewport::-webkit-scrollbar{display:none}
.category-scroller,
#categoryMenuStrip .universal-category-menu-track,
#ppobHome > .ppob-menu-section .ppob-menu-tabs,
#categoryMenuStrip > .ppob-menu-section .ppob-menu-tabs,#priorityHome > .ppob-menu-section .ppob-menu-tabs,
.health-reference .health-ref-category-track{
  display:flex;
  flex-wrap:nowrap;
  width:100%;
  min-width:100%;
  max-width:none;
  gap:0;
  margin:0;
  padding:0;
  align-items:start;
}
.category-scroller > .category-item,
#categoryMenuStrip .universal-category-menu-track > .universal-category-menu-item,
#ppobHome > .ppob-menu-section .ppob-menu-tabs > .ppob-menu-tab,
#categoryMenuStrip > .ppob-menu-section .ppob-menu-tabs > .ppob-menu-tab,#priorityHome > .ppob-menu-section .ppob-menu-tabs > .ppob-menu-tab,
.health-reference .health-ref-category-track > .health-ref-category{
  flex:0 0 calc(100% / var(--category-per-view));
  width:calc(100% / var(--category-per-view));
  min-width:calc(100% / var(--category-per-view));
  max-width:calc(100% / var(--category-per-view));
  scroll-snap-align:start;
  scroll-snap-stop:always;
  box-sizing:border-box;
}
.category-item,
#categoryMenuStrip .universal-category-menu-item,
#ppobHome > .ppob-menu-section .ppob-menu-tab,
#categoryMenuStrip > .ppob-menu-section .ppob-menu-tab,#priorityHome > .ppob-menu-section .ppob-menu-tab,
.health-reference .health-ref-category{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:6px;
  padding:2px 4px 10px;
  border:0;
  background:transparent;
  color:var(--ink);
  text-align:center;
  cursor:pointer;
}
.category-icon,
#categoryMenuStrip .universal-category-menu-visual,
#ppobHome > .ppob-menu-section .ppob-menu-icon-frame,
#categoryMenuStrip > .ppob-menu-section .ppob-menu-icon-frame,#priorityHome > .ppob-menu-section .ppob-menu-icon-frame,
.health-reference .health-ref-category > span{
  position:relative;
  display:grid;
  place-items:center;
  width:min(var(--category-visual-size),92%);
  height:auto;
  aspect-ratio:1;
  margin:0 auto;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  overflow:visible;
}
.category-icon img,
#categoryMenuStrip .universal-category-menu-visual img,
#ppobHome > .ppob-menu-section .ppob-menu-icon-frame img,
#categoryMenuStrip > .ppob-menu-section .ppob-menu-icon-frame img,#priorityHome > .ppob-menu-section .ppob-menu-icon-frame img,
.health-reference .health-ref-category > span img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  background:transparent;
}
.category-item strong,
#categoryMenuStrip .universal-category-menu-item strong,
.health-reference .health-ref-category strong{
  max-width:100%;
  margin:0;
  font-size:clamp(12px,2.8vw,17px);
  line-height:1.15;
  font-weight:750;
  text-align:center;
  overflow-wrap:anywhere;
}
#categoryMenuStrip > .ppob-menu-section .priority-menu-label{
  max-width:100%;
  margin:0;
  font-size:clamp(12px,2.8vw,17px);
  line-height:1.15;
  font-weight:750;
  text-align:center;
  overflow-wrap:anywhere;
}
.category-item.active,
#categoryMenuStrip .universal-category-menu-item.active,
#ppobHome > .ppob-menu-section .ppob-menu-tab.active,
#categoryMenuStrip > .ppob-menu-section .ppob-menu-tab.active,#priorityHome > .ppob-menu-section .ppob-menu-tab.active,
.health-reference .health-ref-category.active{color:var(--accent)}
.category-item.active .category-icon,
#categoryMenuStrip .universal-category-menu-item.active .universal-category-menu-visual{
  position:relative;
  isolation:isolate;
  overflow:visible;
}
.category-item.active .category-icon::after,
#categoryMenuStrip .universal-category-menu-item.active .universal-category-menu-visual::after{
  content:none;
  display:none;
}
.category-item.active .category-icon > *,
#categoryMenuStrip .universal-category-menu-item.active .universal-category-menu-visual > *{
  position:relative;
  z-index:2;
}
.category-item.active .category-icon img,
#categoryMenuStrip .universal-category-menu-item.active .universal-category-menu-visual img{
  filter:none;
}
.category-scroller,
#categoryMenuStrip .universal-category-menu-viewport{
  padding-top:clamp(8px,1.8vw,16px);
  margin-top:calc(clamp(8px,1.8vw,16px) * -1);
}
.category-item.active::after,
#categoryMenuStrip .universal-category-menu-item.active::after,
#ppobHome > .ppob-menu-section .ppob-menu-tab.active::after,
#categoryMenuStrip > .ppob-menu-section .ppob-menu-tab.active::after,#priorityHome > .ppob-menu-section .ppob-menu-tab.active::after,
.health-reference .health-ref-category.active::after{
  content:"";
  display:block;
  position:absolute;
  left:50%;
  bottom:1px;
  width:clamp(42px,9vw,68px);
  height:4px;
  border-radius:999px;
  transform:translateX(-50%);
  background:var(--accent);
}
.category-main-progress,
#categoryMenuStrip .universal-category-menu-progress,
#ppobHome > .ppob-menu-section .ppob-menu-progress,
#categoryMenuStrip > .ppob-menu-section .ppob-menu-progress,#priorityHome > .ppob-menu-section .ppob-menu-progress,
.health-reference .health-ref-category-progress{
  position:relative;
  display:block;
  width:var(--category-progress-width);
  height:var(--category-progress-height);
  margin:9px auto 13px;
  overflow:hidden;
  border-radius:999px;
  background:color-mix(in srgb,var(--muted) 24%,transparent);
  touch-action:pan-y;
}
.category-main-progress > span,
#categoryMenuStrip .universal-category-menu-progress > span,
#ppobHome > .ppob-menu-section .ppob-menu-progress > span,
#categoryMenuStrip > .ppob-menu-section .ppob-menu-progress > span,#priorityHome > .ppob-menu-section .ppob-menu-progress > span,
.health-reference .health-ref-category-progress > span{
  display:block;
  height:100%;
  min-width:18%;
  border-radius:inherit;
  background:linear-gradient(90deg,#2563eb,#8b5cf6);
  transform-origin:left center;
  transition:transform .06s linear,width .08s linear;
}
#ppobHome > .ppob-menu-section,
#categoryMenuStrip > .ppob-menu-section,#priorityHome > .ppob-menu-section{
  width:100%;
  min-width:0;
  margin:0;
  padding:0 0 4px;
  border:0;
  overflow:visible;
  position:relative;
  top:auto;
  z-index:auto;
  background:transparent;
}
#ppobHome > .ppob-menu-section + .ppob-catalog,
#categoryMenuStrip > .ppob-menu-section + .ppob-catalog,#priorityHome > .ppob-menu-section + .ppob-catalog{margin-top:0}
.category-menu-grid-layout{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(8px,2vw,14px);
}
.category-menu-grid-layout .universal-category-menu-item{
  width:100%;
  max-width:none;
  padding:8px 6px 10px;
  border:1px solid var(--border);
  border-radius:18px;
  background:var(--surface);
  box-shadow:0 4px 16px rgba(20,10,35,.045);
}
.category-menu-list-layout{display:grid;gap:8px}
.category-menu-list-item{
  display:grid;
  grid-template-columns:48px minmax(0,1fr) 20px;
  align-items:center;
  gap:12px;
  width:100%;
  min-height:64px;
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--surface);
  color:var(--ink);
  text-align:left;
  cursor:pointer;
}
.category-menu-list-item.active{border-color:color-mix(in srgb,var(--accent) 42%,var(--border));color:var(--accent)}
.category-menu-list-icon{display:grid;width:48px;height:48px;place-items:center}
.category-menu-list-icon img{width:100%;height:100%;object-fit:contain}
.category-menu-list-icon svg{width:28px;height:28px}
.category-menu-list-item strong{font-size:14px;line-height:1.25}
.category-menu-list-chevron{color:var(--muted);font-size:24px;text-align:right}
/* Category navigation: both main and Kategori Menu rails show four equally
   sized visual cells per view, including desktop-site mode on a phone.
   Preserve horizontal scrolling and Admin-driven item/order data. */
/* The storefront's main four-category rail has its own scalable icon rhythm.
   At 980px in a mobile browser's Desktop Site mode the page is visually
   downscaled, so the old 116/138px caps made main categories look tiny. Keep
   precisely four cells while increasing the artwork, not the entire UI. */
.category-strip{
  --category-per-view:4;
  --category-visual-size:calc(clamp(82px,16vw,168px) * var(--category-scale,1));
}
#categoryMenuStrip,
#ppobHome > .ppob-menu-section,
#categoryMenuStrip > .ppob-menu-section,
#priorityHome > .ppob-menu-section{
  --category-per-view:4;
  --category-visual-size:calc(clamp(82px,16vw,168px) * var(--category-scale,1));
}
.category-strip .category-scroller>.category-item{
  min-width:25%;
  min-height:0;
  gap:clamp(4px,.8vw,9px);
  padding-inline:clamp(2px,.4vw,7px);
  padding-bottom:clamp(11px,1.3vw,17px);
}
.category-strip .category-scroller>.category-item .category-icon{
  max-width:92%;
  flex:none;
}
.category-strip .category-scroller>.category-item .category-label{
  font-size:clamp(13px,calc(2vw * var(--font-scale,1)),22px);
  line-height:1.18;
  font-weight:850;
  max-width:100%;
  text-wrap:balance;
}
#categoryMenuStrip .universal-category-menu-track>.universal-category-menu-item{
  padding-inline:clamp(2px,.4vw,7px);
}
#categoryMenuStrip .universal-category-menu-track>.universal-category-menu-item strong{
  font-size:clamp(13px,calc(2vw * var(--font-scale,1)),22px);
  font-weight:850;
  line-height:1.18;
  text-wrap:balance;
}
@media(min-width:900px){
  .health-reference{--category-per-view:5;--category-visual-size:clamp(98px,9vw,138px)}
  .category-strip{--category-per-view:4;--category-visual-size:calc(clamp(114px,16vw,168px) * var(--category-scale,1))}
  #categoryMenuStrip,#ppobHome > .ppob-menu-section,#categoryMenuStrip > .ppob-menu-section,#priorityHome > .ppob-menu-section{
    --category-per-view:4;
    --category-visual-size:calc(clamp(114px,16vw,168px) * var(--category-scale,1));
  }
  .category-menu-grid-layout{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* Desktop-site on phones shrinks CSS pixels; explicit responsive heading sizes
   keep the Partner and product-selection sections readable without changing
   the Admin-controlled category, partner or product data. */
.brand-section .showcase-head h2,
.products-section > .section-title h2{
  font-size:clamp(25px,calc(3vw * var(--font-scale,1)),38px);
  line-height:1.16;
  font-weight:900;
  letter-spacing:-.035em;
  overflow:visible;
  text-overflow:clip;
  white-space:normal;
  text-wrap:balance;
}
.brand-section .showcase-head-icon{
  width:clamp(39px,4.2vw,52px);
  height:clamp(39px,4.2vw,52px);
}
.brand-section .showcase-head p{
  font-size:clamp(12px,calc(1.45vw * var(--font-scale,1)),17px);
  line-height:1.3;
}
.brand-section .showcase-head>a{
  font-size:clamp(11px,calc(1.22vw * var(--font-scale,1)),15px);
}
@media(max-width:420px){
  .brand-section .showcase-head h2,
  .products-section > .section-title h2{font-size:clamp(23px,6.6vw,28px)}
  .brand-section .showcase-head{grid-template-columns:auto minmax(0,1fr) auto;gap:6px}
}

/* Partner carousel: one horizontal row, three square cards visible, moving one card per step. */
.brand-section .brand-scroller{
  width:100%;
  min-width:0;
  display:flex;
  flex-wrap:nowrap;
  align-items:stretch;
  gap:12px;
  padding:0;
  margin:0;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  overscroll-behavior-inline:contain;
  touch-action:pan-x pan-y;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.brand-section .brand-scroller::-webkit-scrollbar{display:none}
.brand-section .brand-card{
  flex:0 0 calc((100% - 24px)/3);
  width:calc((100% - 24px)/3);
  min-width:calc((100% - 24px)/3);
  max-width:calc((100% - 24px)/3);
  aspect-ratio:1;
  margin:0;
  padding:0;
  border:1px solid color-mix(in srgb,var(--accent) 22%,var(--border));
  border-radius:clamp(16px,3vw,24px);
  background:var(--surface);
  box-shadow:var(--elevation-1);
  overflow:hidden;
  scroll-snap-align:start;
  scroll-snap-stop:always;
}



@media(max-width:820px){
  #ppobHome > .ppob-flash .ppob-flash-scroller,
  #priorityHome > .ppob-flash .ppob-flash-scroller{
    grid-auto-columns:calc((100% - 16px)/3);
    gap:8px;
    scroll-padding-inline:0;
  }
  #ppobHome > .ppob-flash .ppob-flash-card,
  #priorityHome > .ppob-flash .ppob-flash-card{
    width:100%;
    min-width:0;
    aspect-ratio:3/4;
  }
}

.member-reward-link{font-weight:800;text-decoration:underline;text-underline-offset:2px;color:inherit}

.carousel-dots{left:50%;right:auto;transform:translateX(-50%);justify-content:center}
.showcase-head h2{flex-wrap:nowrap;white-space:nowrap;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis}



.brand-section .brand-logo-box{display:grid;place-items:center;width:100%;height:100%;aspect-ratio:1;border:0;border-radius:inherit;overflow:hidden;padding:clamp(4px,.8vw,8px);
  background:transparent;
}
.brand-section .brand-logo-box img{
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  object-fit:contain;
  object-position:center;
  background:transparent;
  filter:drop-shadow(-1px 0 0 #fff) drop-shadow(1px 0 0 #fff) drop-shadow(0 -1px 0 #fff) drop-shadow(0 1px 0 #fff);
}
.brand-section .partner-logo-fallback{display:grid;place-items:center;width:100%;height:100%;border-radius:inherit;background:color-mix(in srgb,var(--accent) 9%,var(--surface));color:var(--accent);font-size:clamp(14px,5vw,25px);font-weight:900;letter-spacing:.04em}

/* Immediate first-paint shell while runtime data hydrates. */
.instant-boot-shell{min-height:100vh;padding:calc(16px + env(safe-area-inset-top)) 18px 110px;background:var(--surface-soft,#f6f6f8);display:grid;align-content:start;gap:16px;overflow:hidden}
.instant-boot-top{height:54px;display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:12px}.instant-boot-top b,.instant-boot-chips i,.instant-boot-card i{display:block;border-radius:16px;background:linear-gradient(100deg,rgba(148,163,184,.12) 20%,rgba(148,163,184,.25) 40%,rgba(148,163,184,.12) 60%);background-size:220% 100%;animation:instantBootShimmer 1.15s linear infinite}.instant-boot-banner,.instant-boot-grid i{display:block;background:linear-gradient(100deg,rgba(148,163,184,.12) 20%,rgba(148,163,184,.25) 40%,rgba(148,163,184,.12) 60%);background-size:220% 100%;animation:instantBootShimmer 1.15s linear infinite}.instant-boot-top span{display:block;background:linear-gradient(100deg,rgba(148,163,184,.12) 20%,rgba(148,163,184,.25) 40%,rgba(148,163,184,.12) 60%);background-size:220% 100%;animation:instantBootShimmer 1.15s linear infinite;height:36px;border-radius:50%}.instant-boot-top b{height:34px}.instant-boot-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.instant-boot-chips i{height:62px}.instant-boot-banner{height:clamp(150px,35vw,230px);border-radius:24px}.instant-boot-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.instant-boot-grid i{height:150px;border-radius:22px}@keyframes instantBootShimmer{to{background-position:-220% 0}}@media(prefers-reduced-motion:reduce){.instant-boot-shell *{animation:none}}

/* Explore grid: one canonical geometry. */



/* Explore card content scales from each grid cell instead of a fixed viewport size. */






/* Canonical PromoDuo + in-grid recommendation geometry. Keep dimensions here only. */
#categoryPromoDuo{--duo-red:#ff1744;--duo-purple:#7c3aed;--duo-yellow:#ffe11f;--duo-scale:1;overflow:visible}
#categoryPromoDuo .promoduo-shell{container-type:inline-size;width:100%;overflow:hidden;border:0;border-radius:22px 22px 0 0;background:transparent;box-shadow:none}
#categoryPromoDuo .promoduo-ribbon{height:7.9cqw;min-height:7.9cqw;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr) minmax(0,1fr);align-items:center;gap:.7cqw;padding:.48cqw 1.25cqw;overflow:hidden;background:linear-gradient(90deg,#6d28d9,#7c3aed 45%,#db2777);color:#fff}
#categoryPromoDuo .duo-ribbon-side{display:flex;align-items:center;gap:.38em;font-size:2.25cqw;line-height:1;font-weight:950;white-space:nowrap}
#categoryPromoDuo .duo-ribbon-left{justify-content:flex-start}#categoryPromoDuo .duo-ribbon-right{justify-content:flex-end}
#categoryPromoDuo .ribbon-beacon-image,#categoryPromoDuo .ribbon-beacon-image img{display:block;width:1.7em;height:1.7em;min-width:1.7em;min-height:1.7em;object-fit:contain}#categoryPromoDuo .ribbon-beacon-image--siren img{transform-origin:center;animation:promoDuoSirenPulse 1.1s ease-in-out infinite}
#categoryPromoDuo .promoduo-ribbon>strong{min-width:0;display:grid;place-items:center;align-content:center;padding:.42cqw 1.1cqw;overflow:visible;border:0;border-radius:1.3cqw;background:rgba(37,18,82,.46);text-align:center}
#categoryPromoDuo .promoduo-ribbon>strong small{font-size:1.28cqw;line-height:1;font-weight:900;white-space:nowrap}#categoryPromoDuo .promoduo-title-row{display:flex;align-items:center;justify-content:center;gap:.3em;min-width:0}#categoryPromoDuo .promoduo-title-lightning{flex:0 0 auto;color:#fde047;font-size:2.5cqw;line-height:1;text-shadow:0 0 8px rgba(254,240,138,.62);animation:promoDuoLightning 1s ease-in-out infinite}#categoryPromoDuo .promoduo-title-anim{display:inline-block;font-size:3.15cqw;line-height:1;font-style:normal;font-weight:1000;white-space:nowrap}
#categoryPromoDuo .promoduo-grid{display:grid;grid-template-columns:minmax(0,var(--duo-banner-fr,38fr)) minmax(0,var(--duo-right-fr,62fr));grid-template-rows:minmax(0,1fr);align-items:stretch;gap:0;padding:0;overflow:hidden;aspect-ratio:1.58/1;background:transparent}
#categoryPromoDuo .promoduo-main{position:relative;container-type:inline-size;width:100%;height:100%;min-height:0;align-self:stretch;overflow:hidden;background:var(--surface-soft)}
#categoryPromoDuo .duo-main-track{display:flex;width:100%;height:100%;transform:translateX(0);transition:transform .42s ease}#categoryPromoDuo .duo-main-slide{flex:0 0 100%;width:100%;height:100%;display:block;overflow:hidden}#categoryPromoDuo .duo-main-bg{display:block;width:100%;height:100%;object-fit:var(--duo-banner-fit,cover);object-position:center;background:var(--surface-soft)}
#categoryPromoDuo .duo-main-dots{position:absolute;left:50%;bottom:1.1cqw;z-index:3;display:flex;width:28%;height:.72cqw;min-height:4px;gap:0;overflow:hidden;transform:translateX(-50%);border-radius:999px;background:rgba(255,255,255,.42);box-shadow:0 1px 5px rgba(0,0,0,.16)}
#categoryPromoDuo .duo-main-dot{flex:1 1 0;width:auto;height:100%;padding:0;border:0;border-radius:999px;background:transparent;transition:background .28s ease,transform .28s ease}#categoryPromoDuo .duo-main-dot.active{width:auto;background:#7c3aed;transform:scaleX(1)}
#categoryPromoDuo .promoduo-right{container-type:inline-size;display:grid;grid-template-rows:10% 51% 7% 32%;align-self:stretch;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden;gap:0;background:#fbf8ff}
#categoryPromoDuo .duo-layout-section{min-width:0;min-height:0;width:100%;height:100%;overflow:hidden}#categoryPromoDuo .promoduo-flash-head{width:100%;height:100%;padding:.55cqw 1.05cqw;display:flex;align-items:center;gap:.8cqw}#categoryPromoDuo .duo-flash-gif{flex:1 1 auto;min-width:0;height:100%;display:flex;align-items:center;overflow:hidden}#categoryPromoDuo 
#categoryPromoDuo .promoduo-timer{flex:0 0 auto;padding:.46em .72em;border-radius:.55em;background:#7c3aed;color:#fff;font-size:2.8cqw;line-height:1;font-weight:1000}
#categoryPromoDuo .promoduo-flash-template-wrap,#categoryPromoDuo .duo-flash-template{width:100%;height:100%;min-width:0;min-height:0;transform:none}#categoryPromoDuo .duo-inline-template{display:grid;grid-template-columns:minmax(0,.98fr) minmax(0,1.64fr);align-items:stretch;gap:0;width:100%;height:100%;min-width:0;min-height:0;padding:0;overflow:hidden;font-size:2.45cqw}
#categoryPromoDuo .duo-inline-left,#categoryPromoDuo .duo-inline-right,#categoryPromoDuo .duo-inline-products,#categoryPromoDuo .duo-inline-product,#categoryPromoDuo .duo-inline-product-media{min-width:0;min-height:0}#categoryPromoDuo .duo-inline-left,#categoryPromoDuo .duo-inline-right{display:flex;height:100%;overflow:hidden}#categoryPromoDuo .duo-inline-right{align-items:stretch;background:#fff}
#categoryPromoDuo .duo-inline-product{container-type:inline-size;overflow:hidden;border-radius:1em;background:#fff;box-shadow:0 .08em .26em rgba(76,29,149,.14);text-decoration:none}#categoryPromoDuo .duo-inline-teaser{width:100%;height:100%;display:grid;grid-template-rows:6.54em minmax(0,1fr) 1.5em 1.55em;gap:.18em;padding:.32em .36em;align-items:stretch;background:var(--duo-purple)}
#categoryPromoDuo .duo-inline-teaser-copy{display:flex;align-items:center;justify-content:center;min-height:0;padding:0;background:transparent}#categoryPromoDuo .duo-inline-twin-date{display:block;width:auto;max-width:98%;height:6.54em;object-fit:contain;object-position:center}#categoryPromoDuo .duo-inline-product-media{position:relative;display:grid;place-items:center;width:100%;height:100%;overflow:hidden;border-radius:.86em}#categoryPromoDuo .duo-inline-teaser .duo-inline-product-media{width:64%;height:100%;margin:0 auto;padding:.12em;background:#f7f8fc;box-shadow:none}#categoryPromoDuo .duo-inline-product:not(.duo-inline-teaser) .duo-inline-product-media{padding:1.72em .3em .92em;background:#f3f5fb}#categoryPromoDuo .duo-product-img{display:block;width:100%;height:100%;margin:auto;object-fit:contain;object-position:center;background:transparent}
#categoryPromoDuo .duo-inline-media-badges{position:absolute;top:.3em;left:.3em;right:.3em;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:.16em;pointer-events:none}#categoryPromoDuo .duo-inline-mall-ori{display:block;width:auto;max-width:52%;height:1.86em;object-fit:contain;object-position:left center}#categoryPromoDuo .duo-inline-discount{display:inline-flex;align-items:center;justify-content:center;gap:.08em;width:max-content;padding:.18em .46em;border-radius:999px;background:var(--duo-discount-bg,#ffe11f);white-space:nowrap;flex:0 0 auto}#categoryPromoDuo .duo-inline-head-icon{display:inline-flex;align-items:center;justify-content:center;width:1.34em;height:1.34em;flex:0 0 1.34em}#categoryPromoDuo .duo-deal-alarm{display:block;width:100%;height:100%;object-fit:contain;filter:saturate(1.8) contrast(1.15) drop-shadow(-1px 0 #fff) drop-shadow(1px 0 #fff) drop-shadow(0 -1px #fff) drop-shadow(0 1px #fff)}#categoryPromoDuo .duo-inline-discount em{color:var(--duo-discount-text,#ff1744);font-size:1em;line-height:1;font-weight:1000;font-style:normal;text-shadow:-.055em 0 #fff,0 .055em #fff,.055em 0 #fff,0 -.055em #fff}
#categoryPromoDuo .duo-inline-media-cap{display:flex;align-items:center;justify-content:center;min-width:0;padding:.08em .2em;color:var(--duo-product-title,#7c3aed);font-size:.72em;line-height:1;font-weight:1000;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#categoryPromoDuo .duo-inline-products{--duo-product-count:2;width:100%;height:100%;display:grid;grid-template-columns:repeat(var(--duo-product-count),minmax(0,1fr));gap:.3em;align-items:stretch}#categoryPromoDuo .duo-inline-product:not(.duo-inline-teaser){height:100%;display:grid;grid-template-rows:minmax(0,1fr) 1.2em 1.5em 1.55em;gap:.2em;padding:.3em}#categoryPromoDuo .duo-inline-product-head,#categoryPromoDuo .duo-inline-slot-original,#categoryPromoDuo .duo-inline-slot-original-empty,#categoryPromoDuo .duo-inline-stock-label{display:none}
#categoryPromoDuo .duo-inline-slot-price,#categoryPromoDuo .duo-inline-teaser-stock,#categoryPromoDuo .duo-inline-stock-overlay{font-size:1.04em;line-height:1;font-weight:1000}#categoryPromoDuo .duo-inline-slot-price{display:flex;align-items:center;justify-content:center;padding:.08em .16em;overflow:hidden;color:var(--duo-product-price,#ff1744);text-align:center;white-space:nowrap;text-overflow:ellipsis}#categoryPromoDuo .duo-inline-teaser .duo-inline-slot-price{color:var(--duo-placeholder-price,#fff)}#categoryPromoDuo .duo-inline-teaser-stock{display:flex;align-items:center;justify-content:center;min-height:0;margin:0;padding:.18em .48em;border-radius:999px;background:#fff;color:var(--duo-red);white-space:nowrap}
#categoryPromoDuo .duo-inline-stock-progress{position:relative;display:block;width:100%;height:1.55em;min-height:0;overflow:hidden;border-radius:999px;background:var(--duo-stock-track,#eee8ff)}#categoryPromoDuo .duo-inline-stock-progress>i{display:block;width:100%;height:100%;overflow:hidden;border-radius:inherit;background:var(--duo-stock-track,#eee8ff)}#categoryPromoDuo .duo-inline-stock-progress>i>b{display:block;height:100%;max-width:100%;border-radius:inherit;background:var(--duo-stock-fill,#6d28d9)}#categoryPromoDuo .duo-inline-stock-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:.18em;padding:.18em .5em;overflow:hidden;color:var(--duo-stock-text,#ff1744);white-space:nowrap;text-overflow:clip;-webkit-text-stroke:.13em #fff;paint-order:stroke fill;text-shadow:-.09em 0 #fff,.09em 0 #fff,0 -.09em #fff,0 .09em #fff,-.065em -.065em #fff,.065em -.065em #fff,-.065em .065em #fff,.065em .065em #fff}#categoryPromoDuo .duo-stock-fire{display:block;width:.82em;height:.82em;flex:0 0 .82em;object-fit:contain;filter:drop-shadow(-1px 0 #fff) drop-shadow(1px 0 #fff) drop-shadow(0 -1px #fff) drop-shadow(0 1px #fff)}#categoryPromoDuo .duo-inline-products-empty{display:grid;place-items:center;padding:1em;border-radius:1em;background:#fff;color:#64748b;text-align:center}#categoryPromoDuo .duo-inline-template.hide-prices .duo-inline-slot-price,#categoryPromoDuo .duo-inline-template.hide-stock :is(.duo-inline-stock-progress,.duo-inline-teaser-stock){display:none}
#categoryPromoDuo .promoduo-voucher-title{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(90deg,#7c3aed,#db2777);color:#fff;font-size:3.05cqw;line-height:1;font-weight:1000;white-space:nowrap}#categoryPromoDuo .promoduo-vouchers{width:100%;height:100%;display:flex;gap:0;padding:0;align-items:stretch;overflow:hidden}#categoryPromoDuo .duo-voucher-svg-card{position:relative;display:block;flex:0 0 50%;width:50%;height:100%;min-width:0;overflow:hidden;background:var(--surface,#fff)}#categoryPromoDuo .duo-voucher-svg-card>svg,#categoryPromoDuo .nusa-voucher-ticket>svg{display:block;width:100%;height:100%;max-width:none;max-height:none}
html[data-theme=dark] #categoryPromoDuo .duo-inline-right,html[data-theme=dark] #categoryPromoDuo .duo-inline-products{background:#0b1220}html[data-theme=dark] #categoryPromoDuo .duo-voucher-svg-card:not(.is-spent){background:#0b1220;--voucher-ticket-fill:#0b1220;--voucher-ticket-border:#f8fafc;--voucher-ticket-selected-fill:#211338;--voucher-ticket-selected-border:#c084fc}html[data-theme=dark] #categoryPromoDuo .duo-voucher-svg-card .duo-voucher-bg{fill:var(--duo-voucher-fill,#0b1220);stroke:var(--duo-voucher-border-color,#f8fafc)}html[data-theme=dark] #categoryPromoDuo .duo-voucher-svg-card 





/* Fullscreen preview for the main category hero banner. */
body.hero-banner-preview-open{overflow:hidden;overscroll-behavior:none}
.hero-banner-preview{position:fixed;inset:0;z-index:20000;display:grid;place-items:center;width:100vw;height:100dvh;padding:max(18px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));background:rgba(5,7,12,.94);opacity:0;transition:opacity .18s ease;touch-action:manipulation}
.hero-banner-preview[hidden]{display:none}.hero-banner-preview.is-open{opacity:1}
.hero-banner-preview-stage{display:grid;place-items:center;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden;pointer-events:auto;touch-action:none;cursor:zoom-in}
.hero-banner-preview-image{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;object-position:center;pointer-events:auto;box-shadow:0 18px 60px rgba(0,0,0,.42);transform-origin:center center;will-change:transform;user-select:none;-webkit-user-drag:none}.hero-banner-preview-stage.is-zoomed{cursor:grab}.hero-banner-preview-stage.is-zoomed:active{cursor:grabbing}
.hero-banner-preview-close{position:absolute;z-index:2;top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));display:grid;place-items:center;width:46px;height:46px;padding:0;border:1px solid rgba(255,255,255,.34);border-radius:50%;background:rgba(15,18,27,.72);color:#fff;font-size:34px;font-weight:400;line-height:1;cursor:pointer;backdrop-filter:blur(8px)}
.hero-carousel .hero-slide{cursor:zoom-in}

.hero-banner-preview-zoom-controls{position:absolute;z-index:3;left:50%;bottom:max(18px,env(safe-area-inset-bottom));display:flex;align-items:center;gap:6px;transform:translateX(-50%);padding:6px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(15,18,27,.78);backdrop-filter:blur(8px)}
.hero-banner-preview-zoom-controls button{min-width:42px;height:40px;padding:0 10px;border:0;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;font:700 20px/1 system-ui,sans-serif;cursor:pointer}.hero-banner-preview-zoom-reset{min-width:64px;font-size:13px}


/* Kategori Sub Menu: one responsive rail, one scroll indicator and one all-items sheet. */
.category-submenus { margin: 0 0 clamp(16px, 2vw, 24px); }
#categorySubMenus.section-block { margin: 0 0 clamp(8px, 1.4vw, 14px); }
body:has(.health-reference) #categorySubMenus { margin-top: clamp(8px, 1.8vw, 14px); }
.category-submenu-plain {
  position: relative; display: grid; gap: 10px; width: 100%; min-width: 0;
  margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none;
}
.category-submenu-grid {
  position: relative; z-index: 1; display: flex; align-items: stretch; gap: 0;
  min-width: 0; margin: 0; padding: 0; overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-inline: contain; scroll-behavior: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch;
  background: transparent; border: 0; box-shadow: none;
}
.category-submenu-grid::-webkit-scrollbar { display: none; }
.category-submenu-grid > .universal-category-submenu-item {
  position: relative; isolation: isolate; box-sizing: border-box; flex: 0 0 25%; width: 25%; min-width: 25%; max-width: 25%;
  height: 100%; min-height: 0; margin: 0; padding: 1% 1.2% .4%; display: grid;
  grid-template-rows: minmax(0, 1fr) auto 3px; align-items: end; justify-items: center;
  gap: clamp(2px, .5cqw, 6px); overflow: hidden; border: 0; border-radius: 0;
  background: transparent; box-shadow: none; color: var(--ink); text-align: center; cursor: pointer;
  scroll-snap-align: start; scroll-snap-stop: always; transition: color .16s ease, transform .16s ease;
  -webkit-tap-highlight-color: transparent;
}
.universal-category-submenu-visual {
  position: relative; z-index: 1; display: grid; place-items: center; width: min(84%, 22cqw); max-width: 100%;
  height: auto; min-height: 0; aspect-ratio: 1; margin: 0 auto; align-self: center; justify-self: center;
  overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; filter: none;
}
.universal-category-submenu-visual > img {
  display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; background: transparent;
}
.category-submenu-grid .travel-product-icon > .icon { width: 48%; height: 48%; }
.category-submenu-label {
  display: grid; place-items: center; width: 100%; max-width: 100%; min-height: 2.05em; margin: 0; padding: 0 2px;
  color: inherit; font-size: clamp(9px, 1.35cqw, 15px); font-weight: 760; line-height: 1.05;
  text-align: center; overflow: hidden; overflow-wrap: anywhere;
}
.category-submenu-label > span { display: block; max-width: 100%; }
.category-submenu-order-error { display:block; margin-top:3px; color:#b42318; font-size:9px; font-weight:750; line-height:1.25; }
.category-submenu-item.is-unavailable { cursor:not-allowed; opacity:.72; }
.category-submenu-grid > .universal-category-submenu-item::after {
  content: ""; width: 32%; height: 2px; border-radius: 999px; background: transparent;
  transition: background-color .16s ease, width .16s ease;
}
.category-submenu-grid > .universal-category-submenu-item.active { color: var(--accent); }
.category-submenu-grid > .universal-category-submenu-item.active::after { width: 44%; background: var(--accent-2); }
.category-submenu-grid > .category-submenu-item--image-only .category-submenu-label:not(.category-all-label) { visibility: hidden; }
.category-all-art { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; background: transparent; }
.category-all-label { display: grid; place-items: center; width: 100%; margin: 0; color: inherit; font-size: clamp(9px, 1.35cqw, 15px); line-height: 1.05; text-align: center; }
.category-submenu-progress {
  position: relative; z-index: 2; width: min(30%, 150px); height: 4px;
  margin: -2px auto 0; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--muted) 22%, transparent);
  cursor: pointer;
}
.category-submenu-progress > span {
  display: block; width: 25%; height: 100%; min-width: 18%; max-width: 100%; border-radius: inherit;
  background: var(--accent-2); transform-origin: left center; transition: width .1s linear, transform .1s linear;
}
.category-submenu-see-all {
  position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: fit-content; min-width: 0; height: auto; margin: 0 auto; padding: 0;
  border: 0; border-radius: 0; background: transparent; color: var(--ink); cursor: pointer;
  -webkit-tap-highlight-color: transparent; text-align: center;
}
.category-submenu-see-all--plain > span {
  display: inline-flex; align-items: center; justify-content: center; min-height: 32px;
  padding: 0 4px; font-size: clamp(16px, 2vw, 19px); font-weight: 850; line-height: 1.1;
}
.category-submenu-see-all:focus-visible, .category-submenu-close:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }
.category-submenu-overlay {
  position: fixed; z-index: 1200; inset: 0; display: grid; align-items: end; justify-items: center;
  padding: max(12px, env(safe-area-inset-top)) 12px 0; background: rgba(15, 23, 42, .56);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.category-submenu-overlay[hidden] { display: none; }
.category-submenu-sheet {
  display: grid; grid-template-rows: auto minmax(0, 1fr); width: min(920px, 100%); max-width: 100%; max-height: min(90dvh, 900px);
  overflow: hidden; border: 1px solid var(--border); border-bottom: 0; border-radius: 28px 28px 0 0;
  background: var(--surface); color: var(--ink); box-shadow: 0 -18px 44px rgba(15, 23, 42, .16);
}
.category-submenu-sheet-head {
  display: grid; grid-template-columns: 42px minmax(0, 1fr) 42px; align-items: center; gap: 10px;
  min-height: 68px; padding: 8px 16px; border-bottom: 1px solid var(--border);
}
.category-submenu-sheet-head h2 { grid-column: 2; margin: 0; font-size: clamp(19px, 2.3vw, 25px); font-weight: 700; letter-spacing: -.02em; text-align: center; }
.category-submenu-close {
  grid-column: 3; grid-row: 1; justify-self: end; width: 40px; height: 40px; border: 1px solid var(--border);
  border-radius: 50%; background: var(--surface-soft); color: var(--ink); font-size: 24px; line-height: 1; cursor: pointer;
}
.category-submenu-close:hover { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.category-submenu-sheet-body {
  min-height: 0; overflow: auto; overscroll-behavior: contain;
  padding: clamp(16px, 2.2vw, 26px) clamp(14px, 2vw, 24px) max(20px, env(safe-area-inset-bottom));
}
.category-submenu-all-group { min-width: 0; }
.category-submenu-all-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(140px, 27vw), 1fr)); align-items: start;
  gap: clamp(10px, 1.6vw, 18px); width: 100%; margin: 0;
}
.category-submenu-all-grid > .universal-category-submenu-item {
  position: relative; box-sizing: border-box; display: grid; grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center; align-items: center; gap: 8px; width: 100%; min-width: 0; max-width: none; height: auto;
  min-height: 132px; aspect-ratio: 1 / 1.08; margin: 0; padding: clamp(8px, 1vw, 12px); overflow: hidden;
  border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: var(--elevation-1); color: var(--ink);
  text-align: center; scroll-snap-align: none;
}
.category-submenu-all-grid .universal-category-submenu-visual {
  width: 100%; max-width: 100%; height: 100%; aspect-ratio: auto; margin: 0; overflow: hidden;
}
.category-submenu-all-grid .universal-category-submenu-visual > img {
  width: 100%; height: 100%; object-fit: contain; object-position: center;
}
:is(.category-submenu-all-grid) .category-submenu-label {
  display: grid; place-items: center; min-height: 2.1em; max-height: 2.1em; margin: 0; overflow: hidden;
  font-size: clamp(11px, 1.4vw, 15px); line-height: 1.05; text-align: center;
}
:is(.category-submenu-all-grid) .category-submenu-item--image-only .category-submenu-label:not(.category-all-label) { display: none; }
.category-submenu-all-group h3 { margin: 0 0 12px; color: var(--ink); font-size: 15px; font-weight: 650; }
html[data-theme="dark"] .category-submenu-sheet { border-color: rgba(255,255,255,.12); background: #101722; color: #f8fafc; }
html[data-theme="dark"] .category-submenu-close { border-color: rgba(255,255,255,.14); background: #192231; color: #f8fafc; }
html[data-theme="dark"] .category-submenu-all-grid > .universal-category-submenu-item {
  border-color: rgba(255,255,255,.14); background: #151e2b; color: #f8fafc;
}
@media (hover: hover) and (pointer: fine) {
  .category-submenu-grid > .universal-category-submenu-item:hover { transform: perspective(900px) rotateX(1deg) translateY(-2px); }
  .category-submenu-all-grid > .universal-category-submenu-item:hover {
    transform: perspective(900px) rotateX(1deg) translateY(-2px); box-shadow: var(--elevation-2);
  }
}
@media (max-width: 560px) {
  .category-submenu-progress { width: min(30%, 112px); height: 3px; }
  .category-submenu-overlay { align-items: end; padding-inline: 0; }
  .category-submenu-sheet { width: 100%; max-height: 92dvh; border-radius: 24px 24px 0 0; }
  .category-submenu-sheet-head { min-height: 62px; padding-inline: 12px; }
  .category-submenu-all-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .category-submenu-all-grid > .universal-category-submenu-item {
    min-height: 104px; padding: 6px; border-radius: 14px;
  }
}
@media (max-width: 350px) {
  .category-submenu-all-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .category-submenu-overlay { align-items: center; padding: 24px; }
  .category-submenu-sheet { max-height: 88dvh; border-bottom: 1px solid var(--border); border-radius: 26px; }
  .category-submenu-all-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Submenu: 4 kolom pada ponsel, 5 pada desktop. */
.category-submenu-all-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 900px) {
  .category-submenu-all-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* 2026-10: full-width mobile header, with safe-area gutters and no clipped content. */
#app>.market-header{box-sizing:border-box;width:100%;max-width:100%;min-width:0;grid-template-columns:minmax(42px,1fr) minmax(0,auto) minmax(42px,1fr);min-height:var(--header-h);padding-inline:max(12px,env(safe-area-inset-left)) max(12px,env(safe-area-inset-right));overflow:visible}
#app>.market-header :is(.brand-logo,.header-actions){min-width:0}
#app>.market-header .brand-logo img{max-width:min(42vw,190px);max-height:calc(var(--header-h) - 10px);height:auto}
#app>.market-header .header-actions{display:flex;align-items:center;gap:clamp(1px,1.5vw,10px);white-space:nowrap}
#app>.market-header :is(.icon-button,.header-theme-button){min-height:40px;min-width:38px;flex-shrink:0}
@media(max-width:380px){#app>.market-header{grid-template-columns:40px minmax(0,1fr) auto;padding-inline:8px}#app>.market-header .brand-logo img{max-width:36vw}#app>.market-header :is(.icon-button,.header-theme-button){min-width:33px}}

/* One desktop canvas. This replaces the conflicting 1480px override that
   undid the mobile-like layout at wide viewports. Respect --page when the
   storefront layout configuration requests a narrower content width. */
/* Trust/assistance carousel — legible even when mobile browsers request a desktop site.
   All text, icons and destinations remain populated from the active category settings. */
#home > #categoryTicker {
  box-sizing:border-box;
  display:flex;
  align-items:center;
  height:clamp(46px,5.6vw,52px);
  min-width:0;
  overflow:hidden;
}
#categoryTicker .ticker-track {
  align-items:center;
  min-height:100%;
}
#categoryTicker .ticker-track a {
  display:inline-flex;
  align-items:center;
  gap:9px;
  flex:none;
  font-size:clamp(13px,3.5vw,16px);
  line-height:1.22;
  font-weight:800;
  padding:9px 14px;
}
#categoryTicker .ticker-track .icon {
  flex:none;
  width:clamp(19px,4vw,22px);
  height:clamp(19px,4vw,22px);
}

@media (min-width:900px){
  #app > .main-content,
  #app > .page-shell,
  #app > .home-main,
  #app > .site-main,
  #app > .page-content {
    box-sizing:border-box;
    width:min(var(--desktop-mobile-scale-page,1024px),var(--page,1180px),calc(100% - 40px));
    max-width:100%;
    min-width:0;
    margin-inline:auto;
    padding-inline:clamp(12px,1.7vw,22px);
  }

  /* Mobile composition: banner stays centered and does not become an
     oversized billboard when a desktop viewport is very wide. */
  #home > #categoryBanner,
  #home > .hero-wrap.category-dynamic {
    width:100%;
    max-width:960px;
    margin-inline:auto;
  }
  #home .hero-carousel,
  #home .hero-track,
  #home .hero-slide {max-width:100%;min-width:0;}
  #home .hero-slide img {max-width:100%;height:auto;object-fit:contain;}

  /* Desktop phone mode shrinks CSS pixels to device pixels: allow a readable
     19–22px label and a 24–28px icon instead of a tiny 11–13px label. */
  #home > #categoryTicker {
    height:clamp(60px,5.8vw,68px);
    margin-bottom:clamp(14px,1.8vw,20px);
    border-radius:999px;
  }
  #categoryTicker .ticker-track a {
    gap:clamp(12px,1.3vw,16px);
    padding:12px clamp(18px,2vw,26px);
    font-size:clamp(19px,2vw,22px);
    line-height:1.25;
  }
  #categoryTicker .ticker-track .icon {
    width:clamp(24px,2.5vw,28px);
    height:clamp(24px,2.5vw,28px);
  }

  /* The same PromoDuo sizing applies to every category context. Per-category
     banners/products are still rendered from admin-provided configuration. */
  #home :is(#categoryPromoDuo,.ppob-home,.priority-home) .duo3-shell,
  #home > #categoryPromoDuo .duo3-shell {width:100%;max-width:100%;min-width:0;}
}

/* Tablet keeps the same reading order with breathable spacing. */
@media (min-width:600px) and (max-width:899px){
  #app > .main-content {box-sizing:border-box;width:100%;max-width:800px;margin-inline:auto;padding-inline:clamp(14px,2.4vw,24px)}
  #home > #categoryTicker {height:clamp(52px,6vw,60px);}
  #categoryTicker .ticker-track a {font-size:clamp(17px,2.4vw,20px);gap:11px;padding:11px 18px;}
  #categoryTicker .ticker-track .icon {width:clamp(22px,2.9vw,25px);height:clamp(22px,2.9vw,25px);}
}


/* Product cards keep a compact, responsive copy column beneath their artwork. */
.market-reference-copy{min-width:0}

/* V12 scroll-safe: keep off-screen media and captions painted, no native snap
   fighting pointer-scrolling. Vertical document scrolling remains native. */
html,body{overflow-x:clip;overscroll-behavior-y:auto;scroll-behavior:auto}
.main-content,.section-block,.category-dynamic,.ppob-home,.priority-home,.is-editorial-banner{content-visibility:visible;contain-intrinsic-size:auto;min-width:0}
.main-content>*,.ppob-home>*,.priority-home>*{max-width:100%;min-width:0}
.ppob-menu-tabs,.category-scroller,#categoryMenuScroller{scroll-behavior:auto!important;scroll-snap-type:x mandatory!important;touch-action:pan-x pan-y}
/* Single-space rhythm between the six PPOB sections. */
.main-content:has(.ppob-category-feature-stack)> .section-block{margin-bottom:clamp(8px,1.7vw,14px)}
.ppob-category-feature-stack,.ppob-category-feature-stack .category-submenus{gap:clamp(8px,1.7vw,14px)}
#categoryMenuStrip .category-menu-main-progress.is-icon-only{margin-top:8px;margin-bottom:12px}
#categoryMenuStrip .universal-category-menu-viewport.is-icon-only .universal-category-menu-item{min-height:0}
#categoryMenuStrip .canonical-category-menu-rail>.ppob-menu-progress{margin-top:8px;margin-bottom:12px}
@media(prefers-reduced-motion:reduce){.ticker-track{animation:none}.is-artwork-inline-animation{animation:none}}
/* Compact rhythm: one visual line between neighboring PPOB components. */
.ppob-home,.priority-home,.ppob-category-feature-stack{gap:clamp(8px,1.7vw,14px)!important}
.priority-home>.ppob-popular,.priority-home>.priority-catalog,
.ppob-home>.ppob-popular,.ppob-home>.ppob-catalog,
.ppob-category-feature-stack .ppob-popular,
.ppob-category-feature-stack .ppob-catalog{margin-block-start:0!important;margin-top:0!important}

/* PPOB category rails snap horizontally but follow normal page scrolling. */
.ppob-menu-section{position:relative;top:auto;z-index:auto;background:transparent}
.ppob-menu-tabs,.category-scroller,#categoryMenuScroller{scroll-snap-type:x mandatory!important}
.ppob-menu-tabs>.ppob-menu-tab,.category-scroller>.category-item,#categoryMenuStrip .universal-category-menu-item{scroll-snap-align:start!important;scroll-snap-stop:always!important}
.sales-popup.no-image{grid-template-columns:minmax(0,1fr)}
img{-webkit-user-drag:none;user-select:none}
.asset-protection-alert{position:fixed;top:50%;left:50%;z-index:130;width:max-content;max-width:calc(100vw - 24px);padding:10px 15px;border:3px solid #f2b5b5;border-radius:999px;background:#fff8f7;color:#151522;text-align:center;white-space:nowrap;font-size:clamp(10px,3.6vw,18px);font-weight:900;line-height:1.1;box-shadow:0 15px 38px rgba(18,15,30,.14);opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.97);transition:opacity .18s ease,transform .18s ease}
.asset-protection-alert.visible{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* Theme-aware opaque header and compact progress placement for icon-only rails. */
#app>.market-header{
  background:var(--surface-soft,#f6f3ff)!important;
  background-color:var(--surface-soft,#f6f3ff)!important;
  background-image:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.ppob-menu-section.is-icon-only .ppob-menu-tab{
  padding-bottom:calc(2px * var(--ui-scale,1));
}
.ppob-menu-section.is-icon-only>.ppob-menu-progress{
  margin-top:calc(2px * var(--ui-scale,1));
  margin-bottom:calc(6px * var(--ui-scale,1));
}
#categoryMenuStrip .universal-category-menu-viewport.is-icon-only .universal-category-menu-item{
  padding-bottom:calc(2px * var(--ui-scale,1));
}




/* Recovery 2026-10-22: sales notice MUST NOT inherit reviewer full-screen overlay.
   Keep the interactive bottom dock usable at mobile widths and honor Admin scale
   within safe viewport limits. The separate profile overlay remains unchanged. */
.sales-popup{
  box-sizing:border-box;
  position:fixed;
  inset:auto;
  top:auto;
  right:auto;
  left:clamp(9px,2.5vw,16px);
  bottom:calc(clamp(112px,calc(120px * var(--ui-scale,1)),152px) + env(safe-area-inset-bottom));
  z-index:66;
  width:min(320px,calc(100vw - 100px));
  max-width:calc(100vw - 24px);
  min-width:0;
  height:auto;
  min-height:0;
  max-height:114px;
  padding:9px 28px 13px 9px;
  grid-template-columns:clamp(36px,11vw,46px) minmax(0,1fr);
  gap:8px;
  align-items:center;
  justify-items:stretch;
  place-items:unset;
  border:1px solid color-mix(in srgb,var(--accent) 35%,var(--border));
  border-radius:15px;
  background:var(--surface,#fff);
  color:var(--ink,#202033);
  box-shadow:0 7px 24px rgba(24,17,43,.16);
  overflow:hidden;
  opacity:0;
  pointer-events:none;
  transform:translateY(calc(100% + 32px));
  transition:transform .25s ease,opacity .25s ease;
}
.sales-popup.show{opacity:1;pointer-events:auto;transform:translateY(0)}
.sales-popup.no-image{grid-template-columns:minmax(0,1fr)}
.sales-popup .sales-copy{display:grid;min-width:0;gap:2px;align-content:center;max-width:100%;overflow:hidden}
.sales-popup .sales-copy strong{display:block;font-size:clamp(10px,calc(11px * var(--font-scale,1)),13px);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sales-popup .sales-copy span,.sales-popup .sales-copy>a{display:block;min-width:0;font-size:clamp(10px,calc(10px * var(--font-scale,1)),12px);line-height:1.3;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:700}
.sales-popup .sales-copy small{display:block;font-size:clamp(8px,calc(9px * var(--font-scale,1)),11px);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted,#667085)}
.sales-popup .sales-popup-image-link{width:100%;max-width:46px;min-width:0;max-height:46px;display:block;overflow:hidden;border-radius:10px}
.sales-popup .sales-popup-product-image{display:block;width:100%;height:auto;aspect-ratio:1;max-width:46px;max-height:46px;object-fit:cover;border-radius:10px}
.sales-popup .sales-popup-close{position:absolute;top:4px;right:5px;display:grid;place-items:center;width:23px;height:23px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted,#667085);font-size:17px;line-height:1;cursor:pointer}
.sales-popup .sales-popup-close:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.sales-popup .sales-progress{left:8px;right:8px;bottom:4px;height:3px}
@media(max-width:480px){
  .sales-popup{
    left:10px;right:auto;top:auto;
    width:min(286px,calc(100vw - 86px));
    padding:8px 24px 12px 8px;
    grid-template-columns:40px minmax(0,1fr);
    gap:7px;
    max-height:96px;
    border-radius:14px;
    bottom:calc(clamp(90px,calc(94px * var(--ui-scale,1)),116px) + env(safe-area-inset-bottom));
  }
  .sales-popup .sales-popup-product-image,.sales-popup .sales-popup-image-link{max-width:40px;max-height:40px}
}
@media(prefers-reduced-motion:reduce){.sales-popup{transition:none}}


/* Submenu preview is intentionally transparent: no shell, no card boxes, no selected container. */
.category-submenu-grid{gap:clamp(6px,.9cqw,12px);padding:0;box-sizing:border-box}
.category-submenu-grid>.universal-category-submenu-item{flex-basis:calc((100% - 3 * clamp(6px,.9cqw,12px))/4);width:calc((100% - 3 * clamp(6px,.9cqw,12px))/4);min-width:0;max-width:none;padding:0 0 .35rem;border:0;border-radius:0;background:transparent;box-shadow:none;grid-template-rows:minmax(0,1fr) auto 2px}
.category-submenu-grid .universal-category-submenu-visual{width:min(76%,20cqw);aspect-ratio:1;overflow:visible;background:transparent;border:0;border-radius:0;box-shadow:none}
.category-submenu-grid .universal-category-submenu-visual>img{object-fit:contain;max-height:100%;background:transparent}
.category-submenu-grid .category-submenu-label{font-size:clamp(10px,1.38cqw,16px);font-weight:800;line-height:1.2;min-height:2.4em}
.category-submenu-grid>.universal-category-submenu-item.active{border-color:transparent;box-shadow:none}
.category-submenu-grid>.universal-category-submenu-item:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:480px){.category-submenu-grid{gap:6px}.category-submenu-grid>.universal-category-submenu-item{flex-basis:calc((100% - 18px)/4);width:calc((100% - 18px)/4);padding:0 0 .3rem}.category-submenu-grid .category-submenu-label{font-size:clamp(9px,2.4vw,12px)}}
@media(prefers-reduced-motion:reduce){.category-submenu-grid>.universal-category-submenu-item{transition:none}}

.category-submenu-grid--plain > .universal-category-submenu-item::before{content:none!important}
.category-submenu-grid--plain + .category-submenu-progress + .category-submenu-see-all--plain{margin-top:2px}


/* 2026-10-24 final alignment: category menu + category submenu follow the
   main category icon rhythm. Text labels are hidden; the rails stay transparent.
   The submenu keeps its dedicated "Lihat semua" container. */
#categoryMenuStrip .category-menu-visual-only .universal-category-menu-item strong,
#categoryMenuStrip .category-menu-visual-only .category-menu-item strong,
#categoryMenuStrip .category-menu-visual-only .category-all-label{display:none!important}
#categoryMenuStrip .category-menu-visual-only .universal-category-menu-item{gap:0;padding:2px 4px 10px;min-height:0}
#categoryMenuStrip .category-menu-visual-only .universal-category-menu-visual{width:min(var(--category-visual-size),92%)}

.category-submenu-plain{position:relative;display:grid;gap:0;width:100%;min-width:0;padding-top:clamp(8px,1.8vw,16px);margin-top:calc(clamp(8px,1.8vw,16px) * -1);background:transparent;border:0;box-shadow:none}
.category-submenu-grid{--category-per-view:4;--category-visual-size:calc(clamp(82px,16vw,168px) * var(--category-scale,1));display:flex;flex-wrap:nowrap;width:100%;min-width:100%;max-width:none;gap:0;margin:0;padding:0;align-items:flex-start;scroll-snap-type:x mandatory!important;background:transparent;border:0;box-shadow:none}
.category-submenu-grid>.universal-category-submenu-item{position:relative;display:flex;flex:0 0 calc(100% / var(--category-per-view));width:calc(100% / var(--category-per-view));min-width:calc(100% / var(--category-per-view));max-width:calc(100% / var(--category-per-view));min-height:0;flex-direction:column;align-items:center;justify-content:flex-start;gap:0;padding:2px 4px 10px;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:var(--ink);text-align:center;cursor:pointer;scroll-snap-align:start;scroll-snap-stop:always;overflow:visible}
.category-submenu-grid .universal-category-submenu-visual{position:relative;display:grid;place-items:center;width:min(var(--category-visual-size),92%);height:auto;aspect-ratio:1;margin:0 auto;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
.category-submenu-grid .universal-category-submenu-visual>img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;background:transparent}
.category-submenu-grid .category-submenu-label,.category-submenu-grid .category-submenu-order-error{display:none!important}
.category-submenu-grid>.universal-category-submenu-item::after{content:"";display:block;position:absolute;left:50%;bottom:1px;width:clamp(42px,9vw,68px);height:4px;border-radius:999px;transform:translateX(-50%);background:transparent;transition:background-color .16s ease,width .16s ease}
.category-submenu-grid>.universal-category-submenu-item.active{color:var(--accent)}
.category-submenu-grid>.universal-category-submenu-item.active::after{background:var(--accent);width:clamp(42px,9vw,68px)}
.category-submenu-progress{position:relative;display:block;width:var(--category-progress-width);height:var(--category-progress-height);margin:9px auto 10px;overflow:hidden;border-radius:999px;background:color-mix(in srgb,var(--muted) 24%,transparent);touch-action:pan-y}
.category-submenu-progress>span{display:block;height:100%;min-width:18%;border-radius:inherit;background:linear-gradient(90deg,#2563eb,#8b5cf6);transform-origin:left center;transition:transform .06s linear,width .08s linear}
.category-submenu-see-all--plain{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:min(42%,220px);margin:0 auto;padding:11px 24px 13px;border:1px solid color-mix(in srgb,var(--accent) 14%,var(--border));border-radius:999px;background:var(--surface);color:var(--ink);box-shadow:0 6px 18px rgba(18,22,40,.05);text-align:center}
.category-submenu-see-all--plain>span{display:inline-flex;align-items:center;justify-content:center;min-height:0;padding:0;font-size:clamp(16px,2vw,19px);font-weight:850;line-height:1.1}
.category-submenu-see-all--plain::before{content:"⠿";display:inline-grid;place-items:center;margin-right:10px;color:var(--accent);font-size:clamp(16px,2.1vw,20px);font-weight:900}
@media(min-width:900px){.category-submenu-grid{--category-per-view:4;--category-visual-size:calc(clamp(114px,16vw,168px) * var(--category-scale,1));}}
@media(max-width:480px){.category-submenu-grid>.universal-category-submenu-item{padding:2px 3px 10px}.category-submenu-see-all--plain{min-width:min(58%,220px);padding:10px 20px 12px}}
html[data-theme="dark"] .category-submenu-see-all--plain{background:#141924;border-color:rgba(148,163,184,.22);box-shadow:none}


/* Submenu shell restored: keep the white, curved "Lihat semua" artwork.
   The white is ONE background behind a transparent four-icon rail; item cards
   and selection boxes are not reintroduced. */
#categorySubMenus .category-submenu-shell--icons-only{
  position:relative;isolation:isolate;display:block;width:100%;min-width:0;
  aspect-ratio:1536 / 576;container-type:inline-size;overflow:hidden;
  border:0;border-radius:0;background:transparent;box-shadow:none;
}
#categorySubMenus .category-submenu-shell--icons-only>.category-submenu-shell-art{
  position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;
  object-fit:fill;pointer-events:none;
}
#categorySubMenus .category-submenu-shell--icons-only>.category-submenu-grid{
  position:absolute;z-index:2;inset:12% 3% 34%;display:flex;flex-wrap:nowrap;
  width:auto;min-width:0;max-width:none;height:auto;gap:0;margin:0;padding:0;
  align-items:stretch;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  background:transparent;border:0;box-shadow:none;
}
#categorySubMenus .category-submenu-shell--icons-only>.category-submenu-grid>.universal-category-submenu-item{
  flex:0 0 25%;width:25%;min-width:25%;max-width:25%;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding:2% 2px clamp(8px,1.35cqw,16px);gap:0;
  border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;
}
#categorySubMenus .category-submenu-shell--icons-only .universal-category-submenu-visual{
  display:grid;place-items:center;width:min(72%,19cqw);max-width:100%;aspect-ratio:1;
  margin:0 auto;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible;
}
#categorySubMenus .category-submenu-shell--icons-only .category-submenu-label{display:none!important}
#categorySubMenus .category-submenu-shell--icons-only>.category-submenu-grid>.universal-category-submenu-item::after{
  bottom:2px;width:clamp(30px,8cqw,68px);height:3px;
}
#categorySubMenus .category-submenu-shell--icons-only>.category-submenu-progress{
  position:absolute;z-index:4;left:50%;bottom:26%;width:min(30%,150px);height:4px;
  margin:0;transform:translateX(-50%);cursor:pointer;
}
#categorySubMenus .category-submenu-shell--icons-only>.category-submenu-see-all{
  position:absolute;z-index:5;left:50%;bottom:0;width:48%;height:19%;
  margin:0;padding:0;translate:-50% 0;
  border:0;border-radius:999px;background:transparent;color:transparent;box-shadow:none;
  cursor:pointer;
}
#categorySubMenus .category-submenu-shell--icons-only>.category-submenu-see-all::before{content:none}
@media(max-width:560px){
  #categorySubMenus .category-submenu-shell--icons-only>.category-submenu-progress{height:3px;width:min(30%,112px)}
}

/* Equal icon-to-underline spacing for the Kategori Menu and Sub Menu rails.
   This targets both regular category menus and icon-only PPOB-style menus. */
#categoryMenuStrip .category-menu-visual-only .universal-category-menu-track>.universal-category-menu-item,
#categoryMenuStrip>.ppob-menu-section .ppob-menu-tabs>.ppob-menu-tab{
  padding-bottom:clamp(20px,3vw,28px)!important;
}
#categoryMenuStrip .category-menu-visual-only .universal-category-menu-item.active::after,
#categoryMenuStrip>.ppob-menu-section .ppob-menu-tab.active::after{bottom:2px}


/* Hotfix 2026-10-25: Kategori Menu must be visually transparent.
   Only the Sub Menu keeps the white container artwork. */
#categoryMenuStrip,
#categoryMenuStrip .category-menu-strip,
#categoryMenuStrip .universal-category-menu-viewport,
#categoryMenuStrip .universal-category-menu-track,
#categoryMenuStrip .universal-category-menu-item,
#categoryMenuStrip .universal-category-menu-visual,
#categoryMenuStrip .universal-category-menu-visual > img,
#categoryMenuStrip > .ppob-menu-section,
#categoryMenuStrip > .ppob-menu-section .ppob-menu-tabs,
#categoryMenuStrip > .ppob-menu-section .ppob-menu-tab,
#categoryMenuStrip > .ppob-menu-section .ppob-menu-icon-frame,
#categoryMenuStrip > .ppob-menu-section .ppob-menu-icon-frame > img{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  border-color:transparent!important;
}
#categoryMenuStrip .universal-category-menu-item,
#categoryMenuStrip > .ppob-menu-section .ppob-menu-tab{
  -webkit-appearance:none;
  appearance:none;
}
#categoryMenuStrip .universal-category-menu-item::before,
#categoryMenuStrip .universal-category-menu-visual::before,
#categoryMenuStrip > .ppob-menu-section .ppob-menu-tab::before,
#categoryMenuStrip > .ppob-menu-section .ppob-menu-icon-frame::before{
  content:none!important;
  display:none!important;
}


/* FINAL: transparent Kategori Menu rail, with a slightly wider ACTIVE icon glow.
   Intentionally NOT applied to #categorySubMenus: its white "Lihat semua"
   background artwork remains unchanged. */
#categoryMenuStrip,
#categoryMenuStrip > .ppob-menu-section,
#categoryMenuStrip .ppob-menu-tabs,
#categoryMenuStrip .ppob-menu-tab,
#categoryMenuStrip .ppob-menu-icon-frame,
#categoryMenuStrip .universal-category-menu-viewport,
#categoryMenuStrip .universal-category-menu-track,
#categoryMenuStrip .universal-category-menu-item,
#categoryMenuStrip .universal-category-menu-visual {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}
#categoryMenuStrip::before,
#categoryMenuStrip::after,
#categoryMenuStrip > .ppob-menu-section::before,
#categoryMenuStrip > .ppob-menu-section::after,
#categoryMenuStrip .ppob-menu-tabs::before,
#categoryMenuStrip .ppob-menu-tabs::after {
  content: none !important;
  display: none !important;
}
#categoryMenuStrip :is(.ppob-menu-icon-frame,.universal-category-menu-visual) {
  overflow: visible !important;
  isolation: isolate;
}
#categoryMenuStrip .ppob-menu-tab.active .ppob-menu-icon-frame::before,
#categoryMenuStrip .universal-category-menu-item.active .universal-category-menu-visual::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  z-index: 0;
  left: 50%; top: 50%;
  width: 154%; height: 154%;
  border: 0; border-radius: 50%;
  background: radial-gradient(circle,
    rgba(171,122,250,.38) 0%,
    rgba(134,79,239,.39) 26%,
    rgba(63,116,235,.23) 49%,
    rgba(109,70,224,.09) 65%,
    transparent 78%) !important;
  transform: translate(-50%,-50%);
  filter: blur(8px);
  opacity: 1;
  pointer-events: none;
  animation: none !important;
}
#categoryMenuStrip :is(.ppob-menu-tab.active,.universal-category-menu-item.active)
:is(.ppob-menu-icon-frame,.universal-category-menu-visual) > img {
  position: relative;
  z-index: 1;
}
html[data-theme="dark"] #categoryMenuStrip .ppob-menu-tab.active .ppob-menu-icon-frame::before,
html[data-theme="dark"] #categoryMenuStrip .universal-category-menu-item.active .universal-category-menu-visual::before {
  background: radial-gradient(circle,
    rgba(171,125,255,.38) 0%,
    rgba(125,68,244,.43) 27%,
    rgba(50,111,237,.26) 50%,
    transparent 78%) !important;
}

/* Backward-compatible Sub Menu shell recovery (2026-10-25).
   Some live pages still run a cached `category-submenu-plain` renderer. Give it
   the SAME original white curved artwork as `category-submenu-shell--icons-only`.
   Do not change the separate transparent #categoryMenuStrip. */
#categorySubMenus .category-submenu-plain {
  position:relative!important;
  isolation:isolate;
  display:block!important;
  width:100%;
  min-width:0;
  aspect-ratio:1536 / 576;
  container-type:inline-size;
  overflow:hidden;
  margin:0!important;
  padding:0!important;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
#categorySubMenus .category-submenu-plain::before {
  content:"";
  display:block;
  position:absolute;
  z-index:0;
  inset:0;
  pointer-events:none;
  background-image:url('../assets/ui/category-submenu-shell.webp');
  background-repeat:no-repeat;
  background-size:100% 100%;
  background-position:center;
}
#categorySubMenus .category-submenu-plain > .category-submenu-grid--plain {
  position:absolute;
  z-index:2;
  inset:12% 3% 34%;
  display:flex;
  flex-wrap:nowrap;
  width:auto;
  min-width:0;
  max-width:none;
  height:auto;
  gap:0;
  padding:0;
  margin:0;
  align-items:stretch;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  background:transparent;
  border:0;
  box-shadow:none;
}
#categorySubMenus .category-submenu-plain > .category-submenu-grid--plain > .universal-category-submenu-item {
  display:flex;
  flex:0 0 25%;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  width:25%;
  min-width:25%;
  max-width:25%;
  height:100%;
  padding:2% 2px clamp(8px,1.35cqw,16px);
  gap:0;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  scroll-snap-align:start;
}
#categorySubMenus .category-submenu-plain .universal-category-submenu-visual {
  display:grid;
  place-items:center;
  width:min(72%,19cqw);
  max-width:100%;
  margin:0 auto;
  aspect-ratio:1;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  overflow:visible;
}
#categorySubMenus .category-submenu-plain > .category-submenu-grid--plain > .universal-category-submenu-item::after {
  bottom:2px;
  width:clamp(30px,8cqw,68px);
  height:3px;
}
#categorySubMenus .category-submenu-plain > .category-submenu-progress {
  position:absolute;
  z-index:4;
  left:50%;
  bottom:26%;
  width:min(30%,150px);
  height:4px;
  margin:0;
  transform:translateX(-50%);
  cursor:pointer;
}
#categorySubMenus .category-submenu-plain > .category-submenu-see-all--plain {
  position:absolute;
  z-index:5;
  left:50%;
  bottom:0;
  width:48%;
  min-width:0;
  height:19%;
  margin:0;
  padding:0;
  translate:-50% 0;
  border:0;
  border-radius:999px;
  background:transparent;
  color:transparent;
  box-shadow:none;
  cursor:pointer;
}
#categorySubMenus .category-submenu-plain > .category-submenu-see-all--plain::before {
  content:none!important;
  display:none!important;
}
#categorySubMenus .category-submenu-plain > .category-submenu-see-all--plain > span {
  visibility:hidden;
}
@media(max-width:560px){
  #categorySubMenus .category-submenu-plain > .category-submenu-progress {
    height:3px;
    width:min(30%,112px);
  }
}

/* PageSpeed accessibility remediation, source of truth for customer bootstrap. */
#categoryTicker .ticker-track a,#categoryTicker .ticker-track span{color:#303453!important}
#categoryTicker .ticker-track .icon{color:#6330E8}
.carousel-dots{gap:5px;padding:3px 7px;border-radius:999px}
.carousel-dot{position:relative;width:7px!important;min-width:7px!important;height:7px!important;min-height:7px!important;padding:0!important;border:0;border-radius:999px;background:rgba(255,255,255,.65);display: inline-block}
.carousel-dot.active{width:18px!important;min-width:18px!important;height:7px!important;min-height:7px!important;background:#fff}
.carousel-dot::after,.carousel-dot.active::after{content:none!important;display:none!important}
.carousel-dot:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.sales-popup .sales-copy small{color:#4D5574;font-size:max(10px,calc(10px * var(--font-scale,1)))}
.sales-popup .sales-popup-close{width:28px;height:28px;top:2px;right:2px}
@media(prefers-reduced-motion:reduce){.carousel-dot::after{transition:none}}

/* Accessible, non-animated reading for dynamically counting prices. */
.price-effect-readable{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}

.product-card-discovery .discovery-main-media img[data-main-category-animation]{object-fit:contain!important;background:color-mix(in srgb,#f1ebff 45%,white)!important}

/* Canonical GIF-only category media: reserve geometry, but show no poster. */
.category-item .category-media-blank{display:block;width:100%;height:100%;min-height:1px;background:transparent!important;box-shadow:none!important;border:0!important}
.category-item .category-icon img.category-gif-pending,.product-card-discovery img.category-gif-pending{visibility:visible!important;opacity:1!important}


/* Premium campaign category title: limited to the new generated hero art. */
#categoryBanner .hero-slide{isolation:isolate}
#categoryBanner .premium-hero-title{position:absolute;z-index:1;inset-inline:5%;bottom:8%;display:block;width:max-content;max-width:90%;margin-inline:auto;overflow-wrap:anywhere;color:#fff2b7;font-size:clamp(18px,4.1vw,42px);font-weight:950;letter-spacing:-.025em;line-height:1.04;text-align:center;text-wrap:balance;-webkit-text-stroke:.35px rgba(39,13,75,.9);text-shadow:0 2px 3px #1b0d31,0 0 12px #ba54ff,0 0 26px rgba(255,73,218,.85);pointer-events:none}
@media(max-width:480px){#categoryBanner .premium-hero-title{bottom:7%;max-width:92%;font-size:clamp(16px,5.2vw,24px);line-height:1.06}}

/* Readable titles are HTML overlays so each campaign can follow the selected category. */
.promo-item--premium{position:relative;isolation:isolate}
.premium-promo-title,.premium-grid-title,.premium-duo-title{display:block;padding:.42em .72em;border:1px solid rgba(255,226,151,.9);border-radius:999px;background:linear-gradient(100deg,rgba(37,8,82,.94),rgba(93,29,164,.94),rgba(46,9,92,.94));box-shadow:0 0 12px rgba(197,101,255,.62),inset 0 1px 0 rgba(255,255,255,.3);color:#fff5cf;font-weight:950;letter-spacing:.015em;line-height:1.08;text-align:center;text-shadow:0 1px 3px #1d0b36;overflow-wrap:anywhere;pointer-events:none}
.premium-promo-title{position:absolute;z-index:4;right:4%;bottom:5%;left:4%;max-height:2.5em;overflow:hidden;font-size:clamp(8px,1.15vw,14px)}
.product-grid-current .catalog-grid-banner-slide{position:relative;isolation:isolate}
.premium-grid-title{position:absolute;z-index:2;right:5%;bottom:8%;left:5%;max-height:2.5em;overflow:hidden;font-size:clamp(9px,1.5vw,17px)}
.duo-main-slide{position:relative;isolation:isolate}
.premium-duo-title{position:absolute;z-index:4;right:7%;bottom:12%;left:7%;max-height:2.4em;overflow:hidden;font-size:clamp(11px,2.2vw,22px)}
@media(max-width:520px){.premium-promo-title{font-size:clamp(8px,2.2vw,11px);padding:.36em .5em}.premium-grid-title{font-size:clamp(9px,2.4vw,12px);padding:.38em .54em}.premium-duo-title{bottom:13%;font-size:clamp(11px,3vw,16px);padding:.4em .58em}}

/* Uncropped Banner & Fleet Place Cards Enhancements */
.hero-carousel {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 0;
  overflow: hidden;
  background: transparent;
  box-shadow: var(--shadow);
  border-radius: clamp(16px, 2vw, 24px);
}
.hero-track {
  display: flex;
  width: 100%;
  height: auto;
  min-height: 0;
  align-items: center;
  transform: translate3d(0,0,0);
  transition: transform .48s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.hero-slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: auto;
  min-height: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
  background: transparent;
}
.hero-slide img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: none;
  object-fit: contain;
  object-position: center;
}
.carousel-dots {
  position: absolute;
  z-index: 2;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(4px);
  padding: 4px 8px;
  border-radius: 99px;
}

/* Submenu Fleet Venue Grid */
.is-fleet-order {
  display: grid;
  gap: 16px;
  width: 100%;
}
.is-fleet-grid {
  display: grid;
  grid-template-columns: repeat(var(--fleet-mobile-cols, 2), minmax(0, 1fr));
  gap: var(--fleet-gap, 14px);
  width: 100%;
}
@media (min-width: 768px) {
  .is-fleet-grid {
    grid-template-columns: repeat(var(--fleet-desktop-cols, 3), minmax(0, 1fr));
  }
}
.is-fleet-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--elevation-1);
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.is-fleet-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--elevation-2);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}
.is-fleet-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--surface-soft);
  display: grid;
  place-items: center;
}
.is-fleet-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.is-fleet-card:hover .is-fleet-visual img {
  transform: scale(1.04);
}
.is-fleet-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}
.is-fleet-name {
  font-size: 14px;
  font-weight: 850;
  line-height: 1.25;
  color: var(--ink);
}
.is-fleet-price {
  font-size: 14px;
  font-weight: 900;
  color: var(--accent);
  margin-top: 4px;
}
.is-fleet-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
  padding: 9px 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2);
}
svg.is-3d-volumetric { fill: none !important; stroke: none !important; overflow: visible !important; filter: drop-shadow(0 2.5px 4px rgba(30,27,75,0.20)) !important; }


/* === 2026-10-31 FINAL POLISH: DARK MODE, WHITE ICON OUTLINE ON PURPLE, SALES POPUP (401228), I-STORE GUARD (401230) === */

/* 1. Full Customer Dark Mode ("Mode Malam") */
html[data-theme="dark"] {
  --surface-solid: #111827 !important;
  --surface-soft: #090d16 !important;
  --surface: #131c2e !important;
  --ink: #f8fafc !important;
  --muted: #94a3b8 !important;
  --border: rgba(148, 163, 184, 0.18) !important;
  --elevation-1: 0 4px 16px rgba(0, 0, 0, 0.45) !important;
  --elevation-2: 0 12px 32px rgba(0, 0, 0, 0.55) !important;
  --elevation-3: 0 22px 54px rgba(0, 0, 0, 0.65) !important;
  background: #090d16 !important;
  background-color: #090d16 !important;
  color: #f8fafc !important;
}
html[data-theme="dark"] body,
html[data-theme="dark"] #app,
html[data-theme="dark"] #app > .market-header,
html[data-theme="dark"] .market-header {
  background: #090d16 !important;
  background-color: #090d16 !important;
  color: #f8fafc !important;
  border-color: rgba(148, 163, 184, 0.16) !important;
}
html[data-theme="dark"] .search-bar,
html[data-theme="dark"] .search-box,
html[data-theme="dark"] .address-pill,
html[data-theme="dark"] .header-icon-btn,
html[data-theme="dark"] .product-card,
html[data-theme="dark"] .is-fleet-card,
html[data-theme="dark"] .ppob-card,
html[data-theme="dark"] .priority-card,
html[data-theme="dark"] .partner-card,
html[data-theme="dark"] .bottom-nav,
html[data-theme="dark"] .section-card {
  background: #131c2e !important;
  background-color: #131c2e !important;
  color: #f8fafc !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
}
html[data-theme="dark"] #categoryTicker,
html[data-theme="dark"] .ticker-bar {
  background: #131c2e !important;
  border-color: rgba(148, 163, 184, 0.2) !important;
}
html[data-theme="dark"] #categoryTicker .ticker-track a,
html[data-theme="dark"] #categoryTicker .ticker-track span {
  color: #e2e8f0 !important;
}
html[data-theme="dark"] .category-item strong,
html[data-theme="dark"] .product-card h3,
html[data-theme="dark"] .product-card .product-title,
html[data-theme="dark"] .section-head h2,
html[data-theme="dark"] .address-copy strong {
  color: #f8fafc !important;
}

/* 2. Crisp White Outline on Every Icon Sitting on a Purple Background (401221.jpg) */
.bottom-item.active .icon,
.bottom-item.active svg,
.bottom-item.active img,
.floating-button.chat-float .icon,
.floating-button.chat-float svg,
.floating-button.chat-float img,
.floating-button .icon,
.floating-button svg,
button.primary .icon,
button.primary svg,
.btn-primary .icon,
.btn-primary svg,
.is-fleet-button .icon,
.is-fleet-button svg {
  filter: drop-shadow(0 0 1.6px #ffffff) drop-shadow(0 0 1.6px #ffffff) drop-shadow(0 2px 5px rgba(15, 23, 42, 0.42)) !important;
}

/* 3. Remove Blurry Category Placeholder & Tighten Vertical Rhythm (401219.jpg) */
.category-gif-placeholder,
.category-media-blank {
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}
.category-item .category-icon img {
  visibility: visible !important;
  opacity: 1 !important;
  object-fit: contain !important;
}

/* 4. Sales Notification Popup Matching Reference 401228.jpg */
.sales-popup {
  position: fixed !important;
  left: clamp(10px, 2.4vw, 18px) !important;
  right: auto !important;
  top: auto !important;
  bottom: calc(86px + env(safe-area-inset-bottom)) !important;
  z-index: 88 !important;
  width: min(330px, calc(100vw - 88px)) !important;
  max-width: calc(100vw - 88px) !important;
  min-height: 70px !important;
  max-height: 92px !important;
  padding: 10px 28px 14px 12px !important;
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) !important;
  gap: 11px !important;
  align-items: center !important;
  border-radius: 22px !important;
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid rgba(124, 58, 237, 0.16) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16) !important;
}
html[data-theme="dark"] .sales-popup {
  background: #161f33 !important;
  color: #f8fafc !important;
  border-color: rgba(139, 92, 246, 0.32) !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55) !important;
}
.sales-popup .sales-popup-image-link,
.sales-popup .sales-popup-product-image {
  width: 52px !important;
  height: 52px !important;
  max-width: 52px !important;
  max-height: 52px !important;
  border-radius: 14px !important;
  object-fit: cover !important;
  background: #f8fafc;
}
.sales-popup .sales-copy {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}
.sales-popup .sales-buyer-name {
  font-size: 13.5px !important;
  font-weight: 850 !important;
  color: #0f172a !important;
  line-height: 1.2 !important;
}
html[data-theme="dark"] .sales-popup .sales-buyer-name {
  color: #f8fafc !important;
}
.sales-popup .sales-product-line {
  display: block !important;
  font-size: 12px !important;
  line-height: 1.28 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.sales-popup .sales-verb {
  color: #64748b !important;
  font-weight: 500 !important;
}
html[data-theme="dark"] .sales-popup .sales-verb {
  color: #94a3b8 !important;
}
.sales-popup .sales-popup-prod-name {
  display: inline !important;
  color: #6d28d9 !important;
  font-weight: 850 !important;
  text-decoration: none !important;
}
html[data-theme="dark"] .sales-popup .sales-popup-prod-name {
  color: #a78bfa !important;
}
.sales-popup .sales-time-label {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #7c3aed !important;
  line-height: 1.2 !important;
}
html[data-theme="dark"] .sales-popup .sales-time-label {
  color: #c084fc !important;
}
.sales-popup .sales-progress {
  position: absolute !important;
  left: 14px !important;
  right: 14px !important;
  bottom: 4px !important;
  height: 3.5px !important;
  border-radius: 999px !important;
  background: rgba(124, 58, 237, 0.14) !important;
  overflow: hidden !important;
}
.sales-popup .sales-progress > i {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, #6d28d9, #8b5cf6) !important;
  transform-origin: left center !important;
  animation: salesCountdown var(--sales-visible, 6500ms) linear forwards !important;
}

/* 5. ISTORECYBERSHIELD I-STORE GUARD Verification Screen (Ref 401230.jpg) */
.istore-cybershield-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483645;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: radial-gradient(circle at 50% 24%, rgba(30, 58, 138, 0.88) 0%, rgba(9, 13, 22, 0.98) 68%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 1;
  transition: opacity 0.25s ease;
}
.istore-cybershield-overlay.is-closing {
  opacity: 0;
  pointer-events: none;
}
.istore-cybershield-card {
  width: min(390px, 100%);
  padding: 30px 24px 24px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(22, 31, 53, 0.96) 0%, rgba(15, 22, 38, 0.98) 100%);
  border: 1px solid rgba(56, 189, 248, 0.22);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.65), 0 0 40px rgba(37, 99, 235, 0.18);
  text-align: center;
  color: #f8fafc;
}
.istore-cybershield-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(56, 189, 248, 0.28);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.06em;
  color: #38bdf8;
  margin-bottom: 22px;
}
.istore-cybershield-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 10px #10b981;
}
.istore-cybershield-icon-box {
  width: 84px;
  height: 84px;
  margin: 0 auto 20px;
  border-radius: 24px;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(16, 185, 129, 0.28);
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 24px rgba(16, 185, 129, 0.12);
}
.istore-cybershield-check-circle {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, #34d399, #10b981);
  display: grid;
  place-items: center;
  box-shadow: 0 0 22px rgba(16, 185, 129, 0.55);
}
.istore-cybershield-title {
  margin: 0 0 8px;
  font-size: 21px;
  font-weight: 850;
  color: #ffffff;
  letter-spacing: -0.02em;
}
.istore-cybershield-subtitle {
  margin: 0 0 22px;
  font-size: 13.5px;
  color: #94a3b8;
}
.istore-cybershield-progress-track {
  width: 100%;
  height: 7px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.9);
  overflow: hidden;
  margin-bottom: 22px;
}
@keyframes istoreShieldProgress {
  0% { width: 12%; }
  100% { width: 100%; }
}
.istore-cybershield-progress-bar {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #8b5cf6 0%, #ec4899 50%, #06b6d4 100%);
  animation: istoreShieldProgress 1.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.istore-cybershield-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.istore-cybershield-meta-box {
  padding: 11px 12px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.78);
  border: 1px solid rgba(148, 163, 184, 0.14);
  text-align: left;
  display: grid;
  gap: 3px;
}
.istore-cybershield-meta-box small {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #64748b;
}
.istore-cybershield-meta-box strong {
  font-size: 13px;
  font-weight: 850;
  color: #e2e8f0;
}

/* === STYLE: css/interaction-motion.css === */
/* i-Store canonical interaction layer — direct, interruptible, compositor-first. */
:root{
  --motion-press:110ms;
  --motion-move:400ms;
  --motion-sheet:300ms;
  --motion-ease-spring:cubic-bezier(.2,.82,.2,1);
  --motion-ease-exit:cubic-bezier(.4,0,.8,.2);
  --press-scale:.985;
  --focus-ring:0 0 0 4px color-mix(in srgb,var(--accent,#7c3aed) 18%,transparent);
  --material-blur:18px;
}
:where(button,a,[role="button"],input,select,textarea){-webkit-tap-highlight-color:transparent}
:where(button,a,[role="button"]){touch-action:manipulation;transform-origin:center;backface-visibility:hidden;will-change:transform}
:where(button,a,[role="button"]):focus-visible{outline:0;box-shadow:var(--focus-ring)}
:where(button,a,[role="button"]):active{transform:translate3d(0,1px,0) scale(var(--press-scale));transition:transform var(--motion-press) var(--motion-ease-spring)}
:where(.admin-top,.bottom-nav,.drawer-head,.sheet-head,.modal-head)[data-material="glass"]{backdrop-filter:saturate(1.25) blur(var(--material-blur));-webkit-backdrop-filter:saturate(1.25) blur(var(--material-blur))}
:where(.drawer,.sheet,.modal,.dialog,.login-card){transform:translate3d(0,0,0);backface-visibility:hidden}
@media (hover:hover) and (pointer:fine){:where(button,a,[role="button"]):not(:disabled):hover{filter:brightness(.985)}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none;transition:none;scroll-behavior:auto}
  :where(button,a,[role="button"]):active{transform:none}
}
.is-custom-icon{display:inline-block;object-fit:contain;vertical-align:middle;fill:none}

/* === STYLE: css/catalog-canonical.css === */
/* SOURCE: modules/catalog/ppob.css sha256:8ca488540e90eb19 */
 .ppob-home .ppob-product-grid, .ppob-category-submenu-section .ppob-product-grid, .ppob-category-products .ppob-product-grid, .ppob-product-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(8px,2vw,12px);align-items:stretch;min-width:0;}.ppob-product-card{display:flex;flex-direction:column;height:100%;min-width:0;padding:0;border:1px solid var(--border);border-radius:18px;background:var(--surface);color:var(--ink);box-shadow:var(--premium-shadow);overflow:hidden;text-align:center;cursor:pointer;font:inherit;text-decoration:none}.ppob-product-image{display:grid;place-items:center;width:100%;aspect-ratio:1/1;min-height:0;background:var(--surface-soft);overflow:hidden}.ppob-product-image img{display:block;width:100%;height:100%;object-fit:cover;padding:0;background:transparent}.ppob-product-image:has(>img[src*="/assets/ppob/"][src$=".webp"]){background:transparent!important}.ppob-product-image>img[src*="/assets/ppob/"][src$=".webp"]{object-fit:contain!important;object-position:center;padding:0!important;background:transparent!important}.ppob-product-caption{display:flex;flex:1 1 auto;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:7px;background:var(--surface);color:var(--ink);text-align:center}.ppob-product-caption strong{font-size:clamp(11px,1.45vw,14px);line-height:1.3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.ppob-product-caption small{font-size:10px;color:var(--muted)}.ppob-card-submenu .ppob-product-image img{object-fit:contain;padding:clamp(4px,1vw,12px)}.ppob-product-card.active{border-color:color-mix(in srgb,var(--accent) 55%,var(--border));box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 12%,transparent),var(--premium-shadow)}.ppob-product-card.is-unavailable{cursor:not-allowed;opacity:.72}.ppob-category-submenu-section{min-width:0;margin-top:clamp(18px,2.5vw,30px)}.ppob-category-submenu-heading,.ppob-category-products-heading{align-items:center;margin:0 0 clamp(14px,2vw,20px)}.ppob-category-submenu-heading h2{margin:0;font-size:clamp(16px,2vw,22px);font-weight:950;letter-spacing:-.02em;line-height:1.2}.ppob-category-products{min-width:0;margin-top:clamp(22px,3vw,36px)}.ppob-category-products-heading h3{margin:0;font-size:clamp(15px,1.8vw,20px);font-weight:900;letter-spacing:-.02em;line-height:1.2}#ppobCategoryFeatureStack{grid-template-columns:minmax(0,1fr);gap:clamp(20px,3vw,32px)}#ppobCategoryFeatureStack>.ppob-category-flash,#ppobCategoryFeatureStack>.ppob-category-popular,#ppobCategoryFeatureStack>#categorySubMenus.section-block,#ppobCategoryFeatureStack .ppob-category-submenu-section{margin:0}#priorityHome>.brand-section{margin:clamp(14px,2vw,22px) 0}.ppob-voucher-section{min-width:0;max-width:100%;overflow:hidden}.ppob-voucher-grid{--ppob-voucher-gap:10px;display:flex;align-items:stretch;gap:var(--ppob-voucher-gap);width:100%;padding:4px 2px 12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-inline:contain;scrollbar-width:thin;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y}.ppob-voucher-grid > .duo-voucher-svg-card,.ppob-voucher-grid > .nusa-voucher-ticket{box-sizing:border-box;flex:0 0 calc((100% - var(--ppob-voucher-gap))/2);min-width:0;max-width:calc((100% - var(--ppob-voucher-gap))/2);height:auto;min-height:110px;scroll-snap-align:start;border-radius:12px;overflow:hidden;background:transparent}.ppob-voucher-grid :is(svg,img){max-width:100%}.ppob-voucher-grid:focus-visible{outline:2px solid var(--accent);outline-offset:2px}html[data-theme=dark] .ppob-product-image{background:color-mix(in srgb,var(--surface) 88%,#fff 12%)}@media(min-width:720px){.ppob-product-grid,.ppob-home .ppob-product-grid,.ppob-category-submenu-section .ppob-product-grid,.ppob-category-products .ppob-product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(min-width:1120px){.ppob-product-grid,.ppob-home .ppob-product-grid,.ppob-category-submenu-section .ppob-product-grid,.ppob-category-products .ppob-product-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}@media(max-width:380px){.ppob-voucher-grid{--ppob-voucher-gap:6px}.ppob-voucher-grid>.duo-voucher-svg-card,.ppob-voucher-grid>.nusa-voucher-ticket{min-height:92px}}html[data-theme=dark] :is(.ppob-home,.ppob-category-flash,.priority-flash) .ppob-flash,
html[data-theme=dark] :is(.ppob-flash,.ppob-flash-scroller,.ppob-flash-card){background:var(--surface,#0b1220);color:var(--ink,#fff);border-color:var(--border,#334155);}#categoryPromoDuo :is(.promoduo-vouchers,.duo-layout-vouchers,.promoduo-right,.duo-layout-template,.duo-inline-template){border:0;outline:0;box-shadow:none;}#categoryPromoDuo :is(.duo-voucher-svg-card,.promoduo-vouchers){background:transparent;}#categoryPromoDuo .duo-voucher-svg-card{background:var(--surface,#fff)}#categoryPromoDuo .duo-inline-stock-overlay>span{paint-order:stroke fill;-webkit-text-stroke:1px #fff;text-shadow:-1px -1px #fff,1px -1px #fff,-1px 1px #fff,1px 1px #fff;}#categoryPromoDuo .duo-layout-voucher-title, #categoryPromoDuo .duo-layout-vouchers, #categoryPromoDuo .duo-voucher-svg-card{border:0!important;outline:0!important;box-shadow:none!important}#categoryPromoDuo .duo-voucher-bg{stroke:var(--duo-voucher-border-color,var(--voucher-ticket-border,#111827))!important;stroke-width:var(--duo-voucher-border-width,4)!important}.duo-voucher-perforation{fill:none;stroke:var(--voucher-ticket-perforation,rgba(17,24,39,.55));stroke-width:1.8;stroke-dasharray:4 4;stroke-linecap:round;vector-effect:non-scaling-stroke;pointer-events:none}html[data-theme=dark] .duo-voucher-perforation{stroke:var(--voucher-ticket-perforation,rgba(248,250,252,.78))}html[data-theme="dark"] #categoryPromoDuo .duo-voucher-svg-card{--voucher-ticket-border:#f8fafc;background:#0b1220}#categoryPromoDuo .duo-voucher-svg-card::after,
#categoryPromoDuo .duo-voucher-svg-card+.duo-voucher-svg-card::before{display:none!important;content:none!important}.ppob-flash-heading .ppob-flash-header-media, .ppob-flash-header-media{display:block;width:auto;height:32px;min-height:32px;max-height:32px;max-width:48%;object-fit:contain;animation:none;transform:none;filter:none}#categoryPromoDuo .duo-flash-gif img{display:block;width:auto;height:32px!important;min-height:32px;max-height:32px;max-width:82%;flex:0 0 auto;object-fit:contain;object-position:left center;animation:none;transform:none;filter:none}#categoryPromoDuo .promoduo-vouchers{justify-content:flex-start;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-inline:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}#categoryPromoDuo .duo-voucher-svg-card{box-sizing:border-box;flex:0 0 50%;width:50%;scroll-snap-align:start}.ppob-voucher-grid>.duo-voucher-svg-card,.ppob-voucher-grid>.nusa-voucher-ticket{flex-basis:calc((100% - var(--ppob-voucher-gap))/2);max-width:calc((100% - var(--ppob-voucher-gap))/2)}.ppob-popular-grid{align-items:start}.ppob-popular-grid .ppob-popular-card.ppob-popular-image-card{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;min-width:0;min-height:0;height:auto;padding:0;text-align:center}.ppob-popular-image-card .ppob-popular-thumb{display:grid;place-items:center;width:100%;height:auto;aspect-ratio:1;flex:0 0 auto;overflow:hidden;border-radius:14px 14px 0 0;background:var(--surface-soft);box-shadow:none}.ppob-popular-image-card .ppob-popular-thumb img,.ppob-popular-image-card .ppob-popular-thumb>.icon{display:block;width:100%;height:100%;object-fit:contain;object-position:center}.ppob-popular-image-card .ppob-popular-thumb>.icon{padding:12%}.ppob-popular-image-card .ppob-popular-copy,.ppob-category-popular .ppob-popular-image-card .ppob-popular-copy{display:flex;align-items:center;justify-content:center;gap:4px;width:100%;min-width:0;min-height:29px;padding:5px 4px;white-space:nowrap}.ppob-popular-image-card .ppob-popular-copy .ppob-popular-product-medals{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;width:auto;overflow:visible;font-size:11px!important;line-height:1}.ppob-popular-image-card .ppob-popular-copy small{max-width:calc(100% - 19px);font-size:clamp(9px,1vw,11px);line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media(max-width:520px){.ppob-popular-image-card .ppob-popular-thumb{border-radius:12px 12px 0 0}.ppob-popular-image-card .ppob-popular-copy{min-height:26px;padding:4px 3px}.ppob-popular-image-card .ppob-popular-copy .ppob-popular-product-medals{font-size:10px!important}.ppob-popular-image-card .ppob-popular-copy small{font-size:clamp(8px,2vw,10px)}}.ppob-catalog-heading{margin:0 0 11px;color:var(--ink);font-size:clamp(17px,2.2vw,25px);font-weight:950;letter-spacing:-.02em;line-height:1.2}.ppob-category-submenu-heading{margin:0 0 10px}:is(#ppobHome,#categoryMenuStrip,#priorityHome) .ppob-menu-tabs{overflow-x:auto;overflow-y:visible}:is(#ppobHome,#categoryMenuStrip,#priorityHome) .ppob-menu-tab{isolation:isolate}:is(#ppobHome,#categoryMenuStrip,#priorityHome) .ppob-menu-tab.active .ppob-menu-icon-frame{position:relative;isolation:isolate;z-index:1;filter:none!important;}:is(#ppobHome,#categoryMenuStrip,#priorityHome) .ppob-menu-tab.active .ppob-menu-icon-frame::after{content:none!important;display:none!important}:is(#categoryMenuStrip,#ppobHome,#priorityHome) > .ppob-menu-section,
#categoryMenuStrip:has(>.ppob-menu-section),
:is(#categoryMenuStrip,#ppobHome,#priorityHome) .ppob-menu-tabs {border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important;backdrop-filter:none!important;}:is(#categoryMenuStrip,#ppobHome,#priorityHome) .ppob-menu-tab,
:is(#categoryMenuStrip,#ppobHome,#priorityHome) .ppob-menu-icon-frame {background:transparent!important;border:0!important;box-shadow:none;}:is(#categoryMenuStrip,#ppobHome,#priorityHome) .ppob-menu-tabs{width:100%;min-width:0}#categoryMenuStrip, #categoryMenuStrip > .ppob-menu-section, #ppobHome > .ppob-menu-section, #priorityHome > .ppob-menu-section{background:transparent!important;background-color:transparent!important;background-image:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}:is(.ppob-home,.priority-home) .ppob-loading{min-height:clamp(100px,19vw,165px);padding:clamp(12px,3vw,24px);background:color-mix(in srgb,var(--surface) 68%,transparent);}@media(max-width:600px){:is(.ppob-home,.priority-home) .ppob-loading{min-height:108px;max-height:160px;font-size:clamp(12px,3.6vw,15px)}}@media(min-width:800px){.premium-reference-card .market-reference-media>.premium-discount{font-size:clamp(14px,1.5vw,24px)}}:is(.ppob-catalog-heading,.ppob-category-products-heading,.ppob-category-submenu-heading){display:flex;align-items:center;gap:clamp(8px,2.3vw,12px);min-width:0;}:is(.ppob-catalog-heading,.ppob-category-products-heading,.ppob-category-submenu-heading)::before{content:"";display:block;flex:0 0 clamp(20px,4vw,29px);width:clamp(20px,4vw,29px);height:clamp(5px,1vw,7px);border-radius:999px;background:linear-gradient(90deg,#772bed,#bd4af1);box-shadow:0 2px 10px rgba(124,58,237,.22);}:is(.ppob-home,.ppob-category-products,.ppob-category-submenu-section,.ppob-catalog){min-width:0;max-width:100%}.priority-home > .ppob-popular, .priority-home > .priority-catalog{margin-block-start:clamp(24px,3vw,38px);}.priority-home .ppob-popular .ppob-title-copy h2{font-size:clamp(24px,2.9vw,34px);line-height:1.19;white-space:normal;flex-wrap:wrap;row-gap:3px;overflow-wrap:anywhere;}.priority-home .ppob-popular .ppob-popular-heading-text{overflow:visible;text-overflow:clip;}.priority-home .ppob-popular .ppob-title-copy p{font-size:clamp(12px,1.55vw,17px);line-height:1.4;}.priority-home .ppob-catalog-title{gap:clamp(9px,1.3vw,15px);margin-bottom:clamp(12px,1.8vw,20px);min-width:0;}.priority-home .ppob-catalog-title h2{min-width:0;font-size:clamp(24px,3vw,35px);line-height:1.2;overflow-wrap:anywhere;}.priority-home .ppob-catalog-title i{flex:0 0 clamp(25px,3vw,35px);width:clamp(25px,3vw,35px);height:clamp(6px,.8vw,9px);}.priority-home .ppob-product-caption{gap:clamp(4px,.7vw,7px);min-width:0;padding:clamp(9px,1.45vw,15px) clamp(6px,1vw,12px);}.priority-home .ppob-product-caption strong{max-width:100%;font-size:clamp(17px,2.2vw,23px);font-weight:850;line-height:1.3;overflow-wrap:anywhere;}.priority-home .ppob-product-caption small{max-width:100%;font-size:clamp(12px,1.55vw,16px);line-height:1.35;overflow-wrap:anywhere;}.priority-home .ppob-popular-image-card .ppob-popular-copy{min-height:clamp(32px,4vw,48px);padding:clamp(5px,.8vw,9px) 4px;}.priority-home .ppob-popular-image-card .ppob-popular-copy small{font-size:clamp(11px,1.45vw,15px);line-height:1.2;}/* SOURCE: modules/catalog/market-cards.css sha256:f4d2917c6b719eec */
 .product-grid-current{grid-auto-rows:max-content;align-items:start}.product-grid-current>*{box-sizing:border-box;min-width:0;min-height:0;align-self:start}.catalog-discovery-grid{display:grid;grid-template-columns:repeat(var(--niche-grid-mobile,2),minmax(0,1fr));grid-auto-rows:max-content;align-items:start;gap:clamp(8px,var(--niche-grid-gap,3%),18px);margin:0 0 clamp(14px,2vw,22px)}@media(min-width:720px){.catalog-discovery-grid{grid-template-columns:repeat(var(--niche-grid-desktop,3),minmax(0,1fr))}}.product-grid-current .catalog-grid-banner-carousel{position:relative;display:block;width:100%;height:auto;aspect-ratio:.62;min-height:0;align-self:start;overflow:hidden}.product-grid-current .catalog-grid-banner-media{position:absolute;inset:0;display:block;width:100%;height:100%;min-height:0;aspect-ratio:auto;overflow:hidden}.product-grid-current .catalog-grid-banner-track{position:absolute;inset:0;display:flex;width:100%;height:100%;min-height:0;aspect-ratio:auto}.product-grid-current .catalog-grid-banner-slide{display:block;flex:0 0 100%;width:100%;height:100%;min-height:0;aspect-ratio:auto;overflow:hidden}.product-grid-current .catalog-grid-banner-slide img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;padding:0;background:transparent}.product-grid-current .catalog-grid-banner-dots{position:absolute;z-index:3;left:50%;bottom:clamp(8px,2vw,14px);display:flex;align-items:center;gap:5px;padding:4px 7px;border-radius:999px;background:rgba(15,18,27,.42);transform:translateX(-50%);pointer-events:none}.product-grid-current .catalog-grid-banner-dot{display:block;width:6px;height:6px;border-radius:999px;background:rgba(255,255,255,.58)}.product-grid-current .catalog-grid-banner-dot.active{width:18px;background:#fff}.product-grid-current>.product-card-discovery{container-type:inline-size;display:flex;flex-direction:column;justify-content:flex-start;width:100%;height:auto;aspect-ratio:.62;min-height:0;align-self:start;overflow:hidden}.product-grid-current[data-grid-variant="discovery"]>.product-card-discovery{border-color:color-mix(in srgb,var(--catalog-grid-accent) 34%,var(--border))}.product-grid-current[data-grid-variant="discovery"] .discovery-main-media{aspect-ratio:1;background:transparent}.product-grid-current>.product-card-discovery{position:relative;isolation:isolate;border:3px solid transparent;background:linear-gradient(transparent,transparent) padding-box,linear-gradient(120deg,#7c27f7,#ec3eaa,#29b6d1,#7c27f7) border-box;color:var(--ink,#101828);box-shadow:0 9px 24px rgba(24,16,40,.18)}.product-card-discovery>.discovery-copy{display:flex;flex:0 0 auto;flex-direction:column;align-items:center;justify-content:center;min-height:0;padding:clamp(9px,2.8cqw,13px) clamp(7px,2cqw,10px) clamp(7px,2.2cqw,10px);background:transparent}.product-card-discovery .discovery-badge{--istore-ring-width:2px;position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(3px,.8cqw,5px);width:calc(100% - clamp(8px,3cqw,18px));max-width:100%;min-height:0;min-width:0;padding:clamp(6px,1.8cqw,9px) clamp(8px,2.8cqw,14px);border:2px solid transparent;border-radius:16px;background:#fff;color:#6d28d9;box-shadow:0 5px 16px rgba(91,33,182,.16);font-size:clamp(9px,3.1cqw,14px);line-height:1;text-align:center}.product-card-discovery .discovery-recommend-label{display:block;color:#6d28d9;font-size:inherit;font-weight:950;line-height:1;white-space:nowrap}.product-card-discovery .discovery-badge>.discovery-category-label{display:block;width:100%;max-width:100%;margin:0;overflow:visible;color:#6d28d9;font-size:clamp(9px,5.4cqw,17px);font-weight:950;line-height:1.15;text-align:center;text-transform:uppercase;white-space:nowrap}.product-grid-current .product-card-discovery>.discovery-main-media{display:grid;flex:0 0 auto;min-height:0;width:100%;aspect-ratio:1;place-items:center;overflow:hidden;background:transparent}.product-grid-current .product-card-discovery>.discovery-main-media>img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;padding:0;background:transparent}.product-card-discovery>.discovery-cta{display:flex;flex:0 0 auto;width:calc(100% - clamp(14px,5cqw,24px));min-height:clamp(32px,12cqw,46px);margin:clamp(5px,2cqw,8px) auto;justify-content:center;align-items:center;align-self:center;border-radius:11px;background:var(--accent);color:#fff;font-weight:900;text-align:center;line-height:1.1}.product-grid-current>.catalog-grid-banner-carousel,.product-grid-current>.product-card-discovery{border-radius:clamp(16px,2.6vw,25px)}.product-card-discovery>.discovery-cta{font-size:clamp(11px,3.5cqw,16px);text-transform:uppercase}.discovery-home-heading h3{text-transform:uppercase;font-size:clamp(19px,4.8vw,30px);font-weight:950;letter-spacing:-.025em}.discovery-home-heading{display:grid;gap:5px;margin:clamp(14px,2vw,22px) 0 clamp(11px,1.6vw,16px)}.discovery-home-heading h3{margin:0}.discovery-home-heading>span{color:var(--muted);line-height:1.35}.products-section>.discovery-home-heading+.product-grid-current{margin-top:0}.product-grid-current .product-image:has(>img:is([src*="/assets/products-generated/"][src$=".webp"],[src*="/assets/vertical-generated/"][src$=".webp"],[src*="/assets/priority-generated/"][src$=".webp"])){background:transparent!important;border-color:transparent!important}.product-grid-current .product-image>img:is([src*="/assets/products-generated/"][src$=".webp"],[src*="/assets/vertical-generated/"][src$=".webp"],[src*="/assets/priority-generated/"][src$=".webp"]){object-fit:contain!important;object-position:center;padding:0!important;background:transparent!important}.product-grid-current>.premium-reference-card{box-sizing:border-box;display:flex;flex-direction:column;container-type:inline-size;width:100%;height:100%;min-width:0;align-self:stretch;overflow:hidden}.premium-reference-card .market-reference-media{position:relative;isolation:isolate;display:grid;flex:0 0 auto;place-items:center;width:100%;aspect-ratio:1;overflow:hidden;background:var(--surface-soft,#f5f7fb)}.premium-reference-card .market-reference-media>img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;padding:7%;background:transparent}.product-grid-current .premium-reference-card .market-reference-media>img:is([src*="/assets/products-generated/"][src$=".webp"],[src*="/assets/vertical-generated/"][src$=".webp"],[src*="/assets/priority-generated/"][src$=".webp"]){object-fit:contain!important;object-position:center!important;padding:0!important;background:transparent!important}.premium-reference-card .market-reference-media>.premium-mall{position:absolute;z-index:6;top:3%;left:3%;display:flex;align-items:center;justify-content:flex-start;width:34%;height:15%;max-width:112px;max-height:46px;overflow:hidden}.premium-reference-card .market-reference-media>.premium-mall .premium-mall-svg{display:block;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain;object-position:left center}.premium-reference-card .market-reference-media>.premium-mall>b{max-width:100%;overflow:hidden;color:var(--accent);font-size:clamp(8px,2cqw,12px);font-weight:950;text-overflow:ellipsis;white-space:nowrap}.premium-reference-card .market-reference-media>.premium-discount{position:absolute;z-index:6;top:3%;right:3%;max-width:34%;padding:clamp(3px,1cqw,5px) clamp(5px,1.6cqw,9px);border-radius:999px;background:#fff2ef;color:#a5342c;font-size:clamp(9px,2.2cqw,13px);font-weight:950;line-height:1;white-space:nowrap}.premium-reference-card>.market-reference-copy{display:flex;flex:1 1 auto;flex-direction:column;align-items:center;gap:clamp(5px,2.2cqw,9px);min-width:0;padding:clamp(9px,4cqw,16px);overflow:hidden;background:var(--surface,#fff);text-align:center}.product-canonical-label{position:absolute;z-index:9;top:8px;right:8px;display:grid;place-items:center;max-width:38%;min-height:20px;padding:3px 7px;border:1px solid color-mix(in srgb,var(--product-label-color,#ff66c4) 42%,white);border-radius:7px;background:color-mix(in srgb,var(--product-label-color,#ff66c4) 92%,white);box-shadow:0 2px 8px rgba(27,16,48,.24);color:#fff;font-size:clamp(8px,3.5cqw,12px);font-weight:850;line-height:1.1;text-align:center;overflow:hidden;transform-origin:top right;pointer-events:none}.product-canonical-label img{display:block;width:auto;height:auto;max-width:100%;max-height:34px;object-fit:contain}.product-canonical-label>span{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ppob-product-image{position:relative}.premium-reference-card .market-reference-copy h3{display:grid;place-items:center;width:100%;height:2.48em;min-height:2.48em;max-height:2.48em;margin:0;overflow:hidden;color:var(--ink,#101828);font-size:clamp(13px,6cqw,20px);font-weight:750;line-height:1.24;text-align:center;overflow-wrap:anywhere}.premium-reference-card .market-reference-copy .product-title-text{display:-webkit-box;max-width:100%;min-width:0;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2}.premium-reference-card .market-price-benefit{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(5px,2.2cqw,9px);width:100%;min-width:0;text-align:center}.premium-reference-card .market-price-block{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:100%;min-width:0}.premium-reference-card .premium-price{display:block;max-width:100%;margin:0;overflow:hidden;color:#c24132;font-size:clamp(15px,8cqw,25px);font-weight:850;line-height:1.12;text-align:center;text-overflow:ellipsis;white-space:nowrap}.premium-reference-card .market-campaign-strip{position:absolute;z-index:7;left:2%;right:2%;bottom:clamp(5px,2.5cqw,10px);width:96%;height:clamp(25px,18cqw,49px);margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;align-items:center;pointer-events:none;background:transparent}.premium-reference-card .market-campaign-chip{display:flex;align-items:center;justify-content:center;min-width:0;width:100%;height:100%;margin:0;padding:0;border:0;background:transparent;box-shadow:none;overflow:hidden}.premium-reference-card .market-campaign-chip img{display:block;width:100%;height:100%;min-width:0;margin:0;padding:0;object-fit:contain;object-position:center;background:transparent;border:0;box-shadow:none}.premium-reference-card .market-price-subrow{display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:3px clamp(3px,1.8cqw,7px);width:100%;min-width:0;overflow:hidden;color:var(--muted,#667085);font-size:clamp(8px,3.5cqw,12px);line-height:1.2;white-space:nowrap}.premium-reference-card .market-price-subrow del{flex:0 1 auto;min-width:0;color:var(--muted,#667085)}.premium-reference-card .market-inline-voucher{display:inline-grid;flex:0 0 1.45em;place-items:center;width:1.45em;height:1.45em;min-width:0;overflow:hidden;line-height:0}.premium-reference-card .market-inline-voucher .premium-voucher-icon{display:block;width:100%;height:100%;object-fit:contain}.premium-reference-card .market-total-saving{flex:0 1 auto;min-width:0;overflow:hidden;color:#d92d20;font-size:.96em;font-weight:850;text-overflow:ellipsis;white-space:nowrap}.premium-reference-card .market-benefit-list{display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:clamp(3px,1.4cqw,5px);width:100%;min-width:0;overflow:hidden}.premium-reference-card .market-benefit-row{box-sizing:border-box;display:inline-flex;flex:1 1 0;align-items:center;justify-content:center;gap:clamp(3px,1.3cqw,6px);max-width:50%;min-width:0;padding:5px clamp(4px,1.6cqw,7px);border:1px solid rgba(180,35,24,.16);border-radius:9px;background:#fff0ed;color:#b42318;text-align:center;white-space:nowrap;overflow:hidden}.premium-reference-card .market-benefit-row .market-benefit-icon{display:block;flex:0 0 clamp(14px,6cqw,19px);width:clamp(14px,6cqw,19px);height:clamp(14px,6cqw,19px);object-fit:contain}.premium-reference-card .market-benefit-row strong{min-width:0;margin:0;overflow:hidden;font-size:clamp(8px,3.4cqw,11px);font-weight:750;line-height:1.15;text-overflow:ellipsis;white-space:nowrap}.premium-reference-card .market-benefit-row.market-benefit-cashback{border-color:rgba(109,40,217,.16);background:#f1eaff;color:#6d28d9}html[data-theme=dark] .premium-reference-card .market-benefit-row.market-benefit-voucher{border-color:rgba(251,113,133,.38);background:#451a27;color:#ffe4e6}html[data-theme=dark] .premium-reference-card .market-benefit-row.market-benefit-cashback{border-color:rgba(192,132,252,.38);background:#321b4a;color:#f3e8ff}.premium-reference-card .market-benefit-row strong{color:inherit}.premium-reference-card .market-bottom-row{display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:clamp(3px,1.2cqw,7px);width:100%;min-width:0;padding-top:7px;border-top:1px solid var(--border,#e5e7eb);color:var(--muted,#667085);font-size:clamp(8px,3.5cqw,12px);line-height:1.25;text-align:center;white-space:nowrap;overflow:hidden}.premium-reference-card .market-bottom-row .market-rating{display:inline-flex;flex:0 1 auto;align-items:center;gap:2px;min-width:0;overflow:hidden;white-space:nowrap}.premium-reference-card .market-bottom-row .market-rating b{color:#9a6a06;font-size:inherit;font-weight:950}.premium-reference-card .market-bottom-row .market-rating-count,.premium-reference-card .market-bottom-row .market-rating-note{min-width:0;overflow:hidden;color:var(--muted,#667085);font-size:.88em;font-weight:750;text-overflow:ellipsis}.premium-reference-card .market-bottom-row em{min-width:0;overflow:hidden;color:var(--muted,#667085);font-style:normal;text-overflow:ellipsis}.premium-reference-card .market-bottom-row .market-bottom-sep{flex:0 0 auto;color:#c5c9d1;font-style:normal}.premium-reference-card .market-bottom-row .premium-fulfillment-svg{display:block;flex:0 0 clamp(14px,8cqw,20px);width:clamp(14px,8cqw,20px);height:clamp(12px,7cqw,18px);min-width:14px;max-width:20px;max-height:18px;object-fit:contain}.premium-reference-card .premium-mall,.premium-reference-card .premium-mall-svg{background:transparent;border:0;box-shadow:none}.brand-section .brand-logo-box{background:transparent!important}.brand-section .brand-logo-box img{width:auto;height:auto;max-width:min(82%,128px);max-height:72%;object-fit:contain;object-position:center;background:transparent;filter:none}.brand-section .partner-logo-fallback{background:transparent!important;color:var(--muted)}.brand-section .partner-logo-fallback svg{width:45%;height:45%;opacity:.55}.brand-section .brand-pinned-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:12px}.brand-section .brand-pinned-grid .brand-card{width:100%;min-width:0;max-width:none;aspect-ratio:1}.product-card-discovery .discovery-badge > .discovery-category-label, .product-card-discovery .discovery-recommend-label{color:#7c3aed!important;-webkit-text-fill-color:#7c3aed;opacity:1}html[data-theme="dark"] .product-card-discovery .discovery-badge > .discovery-category-label, html[data-theme="dark"] .product-card-discovery .discovery-recommend-label{color:#7c3aed!important;-webkit-text-fill-color:#7c3aed}.brand-section .partner-logo-fallback{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:8px;overflow:hidden;text-align:center}.brand-section .partner-logo-fallback svg{width:30%;height:30%;min-height:25px;opacity:.66;flex:0 0 auto}.brand-section .partner-logo-fallback::after{content:attr(data-name);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:clamp(9px,1.7vw,13px);line-height:1.12;letter-spacing:0;overflow-wrap:anywhere;color:var(--ink);font-weight:850}html[data-theme=dark] .brand-section .partner-logo-fallback::after{color:#f8fafc}.brand-section .partner-logo-wordmark{gap:8px;background:linear-gradient(135deg,rgba(124,58,237,.10),rgba(59,130,246,.08))!important;border:1px solid rgba(124,58,237,.14);border-radius:14px}.brand-section .partner-logo-wordmark::after{font-size:clamp(10px,3.4cqw,15px);font-weight:900;line-height:1.15}.product-grid-current .premium-reference-card .market-reference-media>.premium-discount, .premium-reference-card .market-reference-media>.premium-discount{top:clamp(5px,2cqw,11px);right:clamp(5px,2cqw,11px);min-width:clamp(46px,13cqw,76px);max-width:min(43%,120px);padding:clamp(5px,1.8cqw,10px) clamp(6px,2cqw,12px);border:2px solid #fff;border-radius:11px 16px 11px 16px;background:linear-gradient(135deg,#fa0b28 0%,#e0001b 58%,#a8000b 100%);color:#fff;font-weight:1000;font-size:clamp(12px,3.9cqw,23px);line-height:1;letter-spacing:-.045em;text-align:center;box-shadow:0 4px 0 rgba(103,1,20,.4),0 7px 18px rgba(239,10,41,.45);text-shadow:0 1px 2px rgba(80,0,0,.42);transform:none!important;rotate:0deg!important;white-space:nowrap;}@media(max-width:380px){.premium-reference-card .market-reference-media>.premium-discount{min-width:43px;font-size:clamp(11px,3.7cqw,16px);padding:5px 6px}}.product-card-discovery .discovery-badge{animation:none!important}
/* === STYLE: css/premium-storefront.css === */
/* Canonical 2026 storefront visual layer: editorial commerce.
   This file is consumed by index.php. Existing PromoHome geometry stays untouched. */
.is-premium-store{width:min(1180px,100%);margin:12px auto 36px;color:var(--ink,#172033);background:var(--surface,#fff);border:1px solid var(--border,#e5e7eb);border-radius:24px;overflow:hidden;box-shadow:0 12px 42px rgba(18,28,48,.09)}
.is-premium-store-cover{position:relative;height:clamp(154px,27vw,300px);background:linear-gradient(120deg,#1d2948,#6279aa 62%,#d7b1a3);overflow:hidden}
.is-premium-store-cover>img{width:100%;height:100%;object-fit:cover}.is-premium-store-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,12,30,.32),transparent)}
.is-premium-store-back{position:absolute;left:16px;top:16px;display:inline-flex;align-items:center;min-height:38px;padding:0 14px;background:rgba(12,17,32,.52);color:white;border:1px solid rgba(255,255,255,.35);border-radius:999px;text-decoration:none;backdrop-filter:blur(8px);font-size:13px;font-weight:700}
.is-premium-store-identity{position:relative;margin-top:-43px;padding:0 22px 18px;display:flex;align-items:end;gap:16px;z-index:1}.is-premium-store-logo{width:90px;height:90px;flex:0 0 90px;border:4px solid var(--surface,#fff);border-radius:21px;background:#fff;box-shadow:0 10px 24px rgba(14,20,34,.17);display:grid;place-items:center;overflow:hidden;color:#101828;font-size:30px;font-weight:900}.is-premium-store-logo img{width:100%;height:100%;object-fit:contain}
.is-premium-store-identity>div:last-child{min-width:0;padding-top:44px}.is-premium-store h1{font-weight:850;letter-spacing:-.035em;font-size:clamp(19px,3.4vw,29px);line-height:1.2;margin:0 0 5px}.is-premium-store h1 span{color:#087e72}.is-premium-store-identity p{margin:0 0 3px;font-size:12px;color:var(--muted,#657084)}.is-premium-store-identity small{font-size:11px;color:var(--muted,#657084)}
.is-premium-store-tabs{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--border,#e5e7eb);border-bottom:1px solid var(--border,#e5e7eb);background:var(--surface,#fff);position:sticky;top:0;z-index:5}
.is-premium-store-tabs a{text-decoration:none;display:grid;place-items:center;min-height:55px;color:var(--muted,#667085);font-weight:760;position:relative;font-size:14px}.is-premium-store-tabs a.is-active{color:var(--accent,#6c4deb)}.is-premium-store-tabs a.is-active::after{content:"";position:absolute;bottom:0;left:24%;right:24%;height:3px;background:currentColor;border-radius:4px}
.is-premium-store-content{padding:22px}.is-premium-store-content h2,.is-premium-section-head h2{margin:0;font-size:clamp(18px,2.6vw,23px);line-height:1.25;letter-spacing:-.025em}.is-premium-store-content h2 small{font-size:12px;color:var(--muted);font-weight:500}.is-premium-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 16px}.is-premium-section-head:not(:first-child){margin-top:24px}.is-premium-section-head>a{font-size:12px;color:var(--accent,#7056db);font-weight:750;text-decoration:none}
.is-premium-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:end;padding:13px;margin:14px 0;background:var(--surface-soft,#f5f7fb);border:1px solid var(--border,#e5e7eb);border-radius:16px}.is-premium-toolbar-copy{flex:1 1 215px;display:grid;gap:4px;min-width:0}.is-premium-toolbar-copy strong{font-size:13px}.is-premium-toolbar-copy small{color:var(--muted,#64748b);font-size:10px;line-height:1.4}.is-premium-toolbar label{display:grid;gap:5px;font-weight:700;font-size:10px;color:var(--muted,#64748b);flex:0 1 180px}.is-premium-toolbar select{width:100%;height:41px;min-width:135px;border:1px solid var(--border,#d7dce5);border-radius:12px;background:var(--surface,#fff);color:var(--ink,#172033);padding:0 10px;font-size:12px;font-weight:720;appearance:auto}
.is-premium-product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.is-premium-product{display:flex;flex-direction:column;min-width:0;background:var(--surface,#fff);color:var(--ink,#172033);border:1px solid var(--border,#e5e7eb);border-radius:18px;overflow:hidden;text-decoration:none;box-shadow:0 4px 13px rgba(19,28,48,.05);transition:transform .2s ease,box-shadow .2s ease}.is-premium-product:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(20,29,46,.13)}.is-premium-product:focus-visible{outline:3px solid var(--accent,#7c3aed);outline-offset:2px}
.is-premium-product-image{display:block;width:100%;aspect-ratio:1/1;background:var(--surface-soft,#f1f5f9);overflow:hidden}.is-premium-product-image img{display:block;width:100%;height:100%;object-fit:cover}.is-premium-product-placeholder{height:100%;display:grid;place-items:center;color:var(--muted)}.is-premium-product-body{display:flex;flex-direction:column;gap:6px;padding:12px;min-height:160px}.is-premium-product-body>strong{font-size:13px;line-height:1.36;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-height:2.72em}.is-premium-product-price{font-size:16px;color:var(--accent,#5b3fcc);font-weight:840}.is-premium-metrics{display:flex;flex-wrap:wrap;gap:4px 7px;align-items:center;color:var(--muted,#687284);font-size:10px}.is-premium-metrics>b{font-weight:770;color:#bd7423}.is-premium-metrics>small{font-size:10px}.is-premium-locality{font-size:10px;color:var(--muted,#687284);line-height:1.35}.is-premium-shop-cta{font-size:11px;font-weight:800;color:var(--accent,#7054d1);margin-top:auto;border-top:1px solid var(--border,#e5e7eb);padding-top:10px}.is-premium-unlinked{opacity:.8;cursor:default}.is-premium-unlinked:hover{transform:none;box-shadow:none}
.is-premium-category-grid{margin:12px 0 4px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.is-premium-category-grid a{border-radius:15px;background:var(--surface-soft,#f5f7fb);border:1px solid var(--border,#e5e7eb);padding:15px;display:flex;align-items:center;gap:12px;min-width:0;text-decoration:none;color:var(--ink)}.is-premium-category-grid a span{font-size:23px;color:var(--accent,#6d50d4)}.is-premium-category-grid a b{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;font-size:12px}.is-premium-category-grid a small{color:var(--muted);font-size:10px}.is-premium-empty{padding:30px 20px;border:1px dashed var(--border,#dce2ec);border-radius:16px;background:var(--surface-soft,#f8fafc);color:var(--muted,#64748b);line-height:1.5;font-size:13px}.is-premium-empty h1{color:var(--ink)}
.is-premium-submenu-market{margin:22px 0;padding:16px;background:var(--surface,#fff);border:1px solid var(--border,#e5e7eb);border-radius:19px;box-shadow:0 8px 28px rgba(18,27,52,.045)}.is-premium-submenu-market .is-premium-section-head{margin-bottom:8px}.is-premium-submenu-market .is-premium-section-head small{font-size:11px;color:var(--muted,#69788a)}
/* Keep cards free of decorative 3D effects. */
.is-premium-store *, .is-premium-submenu-market *{text-shadow:none;-webkit-text-stroke:0 transparent}
html[data-theme=dark] .is-premium-store,html[data-theme=dark] .is-premium-submenu-market{background:#101827;color:#f8fafc;border-color:#293549;box-shadow:0 16px 40px rgba(0,0,0,.22)}html[data-theme=dark] .is-premium-store-tabs{background:#101827;border-color:#293549}html[data-theme=dark] .is-premium-store-logo{border-color:#101827}html[data-theme=dark] .is-premium-product,html[data-theme=dark] .is-premium-toolbar select{background:#161f30;color:#f8fafc;border-color:#334155}html[data-theme=dark] .is-premium-category-grid a,html[data-theme=dark] .is-premium-toolbar,html[data-theme=dark] .is-premium-empty{background:#172236;color:#f8fafc;border-color:#334155}html[data-theme=dark] .is-premium-product-image{background:#223047}html[data-theme=dark] .is-premium-product-price{color:#c4b5fd}
@media(max-width:720px){.is-premium-store{margin:7px 0 20px;border-radius:17px}.is-premium-store-identity{padding:0 14px 14px;gap:9px}.is-premium-store-logo{width:68px;height:68px;flex-basis:68px;border-width:3px;border-radius:17px}.is-premium-store-identity>div:last-child{padding-top:44px}.is-premium-store h1{font-size:18px}.is-premium-store-content{padding:13px}.is-premium-product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.is-premium-product-body{padding:10px;gap:5px;min-height:143px}.is-premium-product-body>strong{font-size:12px}.is-premium-product-price{font-size:14px}.is-premium-category-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.is-premium-category-grid a{padding:10px;gap:6px}.is-premium-category-grid a small{display:none}.is-premium-toolbar{gap:7px}.is-premium-toolbar label{flex:1 1 132px}.is-premium-submenu-market{padding:10px;margin:14px 0;border-radius:15px}}
@media(prefers-reduced-motion:reduce){.is-premium-product{transition:none}.is-premium-product:hover{transform:none}}
.is-premium-product-categories{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 5px}.is-premium-product-categories a{padding:9px 12px;border:1px solid var(--border,#d7deea);border-radius:100px;background:var(--surface-soft,#f6f7fa);color:var(--ink,#182133);font-size:11px;font-weight:740;text-decoration:none}.is-premium-product-categories a.is-active{color:#fff;background:var(--accent,#664cde);border-color:transparent}html[data-theme=dark] .is-premium-product-categories a{background:#1d2c41;border-color:#34445b;color:#f8fafc}html[data-theme=dark] .is-premium-product-categories a.is-active{background:#795fe1;color:#fff}

/* Canonical grid, category effects and navigation surface styles. */
/* Prevent card overlap on dynamic grids. */
.ppob-flash-scroller,.ppob-voucher-grid,.brand-scroller,.auto-showcase-strip{align-items:stretch}
.product-copy,.market-reference-copy,.is-premium-product-body{overflow:hidden}

/* Restore dark-mode text visibility for category/menu/submenu labels. */
html[data-theme=dark] :is(.category-menu-label,.category-submenu-label,.ppob-catalog-card-copy strong,.ppob-catalog-card-copy small){color:#f8fafc!important;opacity:1}
html[data-theme=dark] :is(.category-menu-item,.category-submenu-item){color:#e5e7eb}
html[data-theme=dark] :is(.category-menu-item.active,.category-submenu-item.active){color:#fff}

/* One stationary container outline; only its gradient hue runs around the border.
   No rotating pseudo-element, diagonal corners, or mask-composite dependency. */
@property --istore-ring-angle{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes istoreBorderSweep{from{--istore-ring-angle:0deg}to{--istore-ring-angle:360deg}}
.product-card-discovery .discovery-badge{
  border:3.5px solid transparent;
  background:linear-gradient(#fff,#fff) padding-box,
    conic-gradient(from var(--istore-ring-angle),#7c3aed,#06b6d4,#e11d91,#7c3aed) border-box;
  box-shadow:0 4px 15px rgba(99,45,180,.26);
  animation:istoreBorderSweep 3.8s linear infinite;
}
.product-card-discovery .discovery-badge::before{content:none!important}
/* Shared bottom navigation ring is defined once in css/navigation-ring.css. */
/* Selected-only spotlight. Exactly one selector group covers every visual renderer. */
:is(.category-item .category-icon,
    .category-menu-item .universal-category-menu-visual,
    .category-menu-item .category-menu-list-icon,
    .category-menu-item .ppob-menu-icon-frame,
    .category-submenu-item .universal-category-submenu-visual,
    .ppob-card-submenu .ppob-product-image){position:relative;isolation:isolate;overflow:visible}
:is(.category-item.active .category-icon,
    .category-menu-item.active .universal-category-menu-visual,
    .category-menu-item.active .category-menu-list-icon,
    .category-menu-item.active .ppob-menu-icon-frame,
    .category-submenu-item.active .universal-category-submenu-visual,
    .ppob-card-submenu.active .ppob-product-image)::before{
  content:"";position:absolute;left:50%;top:50%;width:124%;height:124%;aspect-ratio:1;
  border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(255,255,255,.30) 0%,rgba(97,54,226,.61) 24%,rgba(0,168,239,.40) 46%,transparent 69%);
  filter:blur(clamp(3px,.8vw,7px));
  animation:istoreGlowPulse 2.6s ease-in-out infinite;
}
:is(.category-item.active .category-icon,
    .category-menu-item.active .universal-category-menu-visual,
    .category-menu-item.active .category-menu-list-icon,
    .category-menu-item.active .ppob-menu-icon-frame,
    .category-submenu-item.active .universal-category-submenu-visual,
    .ppob-card-submenu.active .ppob-product-image)>*{position:relative;z-index:1}
html[data-theme="dark"] :is(.category-item.active .category-icon,
    .category-menu-item.active .universal-category-menu-visual,
    .category-menu-item.active .category-menu-list-icon,
    .category-menu-item.active .ppob-menu-icon-frame,
    .category-submenu-item.active .universal-category-submenu-visual,
    .ppob-card-submenu.active .ppob-product-image)::before{
  background:radial-gradient(circle,rgba(255,255,255,.2) 0%,rgba(147,51,234,.53) 24%,rgba(34,211,238,.34) 46%,transparent 69%);
}
@media(prefers-reduced-motion:reduce){
  :is(.category-item.active .category-icon,.category-menu-item.active .universal-category-menu-visual,
      .category-menu-item.active .category-menu-list-icon,.category-menu-item.active .ppob-menu-icon-frame,
      .category-submenu-item.active .universal-category-submenu-visual,
      .ppob-card-submenu.active .ppob-product-image)::before{animation:none;transform:translate(-50%,-50%)}
}

/* Flash sale countdown enlarged and given a leading alarm icon. */
.ppob-countdown-wrap{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.ppob-countdown-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,#2a1146,#4c1d95 58%,#9333ea);box-shadow:0 10px 20px rgba(76,29,149,.28)}
.ppob-countdown-icon img{display:block;width:24px;height:24px;object-fit:contain}
.ppob-countdown{gap:6px}
.ppob-countdown span{min-width:clamp(36px,4vw,52px);height:clamp(36px,4vw,52px);border-radius:12px;font-size:clamp(12px,1.6vw,18px);box-shadow:0 10px 20px rgba(15,23,42,.16)}
.ppob-countdown b{font-size:clamp(13px,1.35vw,18px)}
@media(max-width:520px){.ppob-countdown-wrap{gap:6px}.ppob-countdown-icon{width:32px;height:32px;border-radius:10px}.ppob-countdown-icon img{width:18px;height:18px}.ppob-countdown{gap:3px}.ppob-countdown span{min-width:29px;height:29px;font-size:10px;border-radius:8px}.ppob-countdown b{font-size:11px}}

/* Promo ribbon uses animated siren SVG instead of static gif. */
.ribbon-beacon-image--siren .ribbon-beacon-svg{display:block;width:1.72em;height:1.72em;min-width:1.72em;min-height:1.72em;overflow:visible;filter:drop-shadow(0 0 10px rgba(168,85,247,.36));transform-origin:center;animation:promoDuoSirenPulse 1.1s ease-in-out infinite}

/* Section headings and wrappers for better structure. */
.ppob-voucher-section .ppob-catalog-title h2,.ppob-category-popular .showcase-head h2,.brand-section .showcase-head h2,.is-premium-submenu-market .is-premium-section-head h2{letter-spacing:-.02em}
.ppob-category-popular .section-title,.ppob-voucher-section .section-title{margin-bottom:10px}
.brand-section .showcase-head p{max-width:42rem}

/* Keep store/partner detail page visible and tappable. */
.is-premium-store{position:relative;z-index:1}
.brand-card{cursor:pointer}
.is-premium-store-back,.is-premium-store-tabs a,.is-premium-product,.is-premium-category-grid a{touch-action:manipulation}

@keyframes istoreGlowPulse{0%,100%{opacity:.62;transform:translate(-50%,-50%) scale(.96)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}}

/* PromoDuo: alarm belongs immediately before the countdown, not inside its updating text node. */
.promoduo-flash-head .duo-flash-countdown{display:inline-flex;align-items:center;justify-content:flex-end;gap:clamp(2px,.45cqw,6px);min-width:0;flex:0 0 auto}
.promoduo-flash-head .duo-flash-alarm{display:block;flex:0 0 auto;width:clamp(20px,3.25cqw,35px);height:clamp(20px,3.25cqw,35px);object-fit:contain;filter:drop-shadow(0 0 4px rgba(168,85,247,.4))}
.promoduo-flash-head .promoduo-timer{min-width:0}
@media(max-width:520px){.promoduo-flash-head .duo-flash-countdown{gap:2px}.promoduo-flash-head .duo-flash-alarm{width:clamp(18px,2.8cqw,23px);height:clamp(18px,2.8cqw,23px)}}
/* Existing premium merchandise card grid is the only order landing renderer. */
.is-premium-service-order .is-premium-order-back{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;border:1px solid var(--border);background:var(--surface-soft);color:var(--ink);font-size:12px;font-weight:750;text-decoration:none}
.is-premium-service-order h1{font-size:clamp(20px,4.5vw,30px);margin:12px 0 5px;color:var(--ink)}
.is-premium-service-order .is-premium-order-lead{color:var(--muted);font-size:12px;line-height:1.5;margin:0 0 16px}
.is-premium-service-order .is-premium-product-grid{margin-top:16px}

/* Category captions are DOM content, not dark/light pseudo-elements. */
.category-scroller .category-item{color:var(--ink,#101828)!important}
.category-scroller .category-label{display:block!important;position:relative;z-index:2;opacity:1!important;visibility:visible!important;-webkit-text-fill-color:currentColor!important;font-weight:850}
html[data-theme=dark] .category-scroller .category-item{color:#f2f4ff!important}
html[data-theme=dark] .category-scroller .category-item.active .category-label{color:#c9a8ff!important}
@media(prefers-reduced-motion:reduce){.product-card-discovery .discovery-badge{animation:none!important}}

/* One canonical PPOB stack. Every section owns its natural height. */
#ppobCategoryFeatureStack{display:block;min-width:0}
#ppobCategoryFeatureStack #categorySubMenus{display:flex;flex-direction:column;gap:clamp(22px,4vw,36px);min-width:0}
#ppobCategoryFeatureStack #categorySubMenus>section{flex:0 0 auto;width:100%;min-width:0;max-width:100%;margin:0!important;position:relative}
#ppobCategoryFeatureStack .ppob-product-grid,#ppobCategoryFeatureStack .is-premium-product-grid{align-items:start;grid-auto-rows:max-content}
#ppobCategoryFeatureStack .ppob-product-card,#ppobCategoryFeatureStack .is-premium-product{height:auto;align-self:start}
.catalog-discovery-grid,.ppob-recommendation-grid,.product-grid-current{grid-auto-rows:max-content;align-items:start;row-gap:clamp(12px,2.5vw,24px)}
.product-grid-current>.product-card-discovery,.catalog-discovery-grid>.product-card-discovery{height:auto;min-height:0;aspect-ratio:auto;align-self:start}
.product-grid-current>.premium-reference-card,.ppob-recommendation-grid>.premium-reference-card{height:auto;align-self:start}
.catalog-discovery-grid>*{height:auto;min-width:0}
/* Single purple accent, for every admin-defined PPOB-style submenu heading. */
.ppob-category-submenu-section>.ppob-category-submenu-heading{display:flex;align-items:center;gap:10px;margin-bottom:clamp(12px,2vw,18px);font-weight:950;line-height:1.2}
.ppob-category-submenu-section>.ppob-category-submenu-heading::before{content:"";display:block;flex:0 0 22px;width:22px;height:5px;border-radius:999px;background:#8b35e9}
/* Compact circular glow, including the PPOB submenu card's clipped image. */
.ppob-card-submenu.active .ppob-product-image{isolation:isolate;overflow:visible;border-radius:50%}
.ppob-card-submenu.active .ppob-product-image::before{width:108%;height:108%;filter:blur(7px);background:radial-gradient(circle,rgba(124,58,237,.44),rgba(14,165,233,.25) 47%,transparent 69%)}
.category-menu-item.active :is(.universal-category-menu-visual,.category-menu-list-icon)::before{width:104%;height:104%;filter:blur(4px)}
.category-item.active .category-icon img,.category-menu-item.active :is(.universal-category-menu-visual,.category-menu-list-icon,.ppob-menu-icon-frame) img,.ppob-card-submenu.active .ppob-product-image img{filter:drop-shadow(0 0 9px rgba(56,189,248,.58)) drop-shadow(0 0 14px rgba(147,51,234,.52))}
html[data-theme=dark] #ppobCategoryFeatureStack .ppob-product-card{border-color:rgba(148,163,184,.26)}

/* Service chooser: editorial storefront treatment, dark + light support. */
.is-premium-service-order{padding:0;overflow:hidden!important;box-shadow:0 16px 45px rgba(22,16,55,.12)}
.is-service-hero{padding:clamp(18px,4vw,38px);position:relative;overflow:hidden;isolation:isolate;
  background:radial-gradient(circle at 85% 8%,rgba(255,255,255,.88),transparent 38%),
    linear-gradient(115deg,#d4e9ff 0%,#efd7ff 48%,#fff0cb 100%);color:#19152b}
.is-service-hero::after{content:"";position:absolute;width:210px;height:210px;right:-80px;top:-95px;border-radius:50%;border:34px solid rgba(120,55,215,.1);pointer-events:none;z-index:-1}
.is-service-hero .is-premium-order-back{background:rgba(255,255,255,.75);border-color:rgba(105,74,175,.18);color:#332057}
.is-service-eyebrow{display:block;margin:22px 0 7px;color:#6726a9;font-size:11px;font-weight:900;letter-spacing:.12em}
.is-premium-service-order .is-service-hero h1{margin:0;color:#211a36;font-size:clamp(25px,5.8vw,42px);letter-spacing:-.035em;line-height:1.12}
.is-service-hero-subtitle{color:#524467;font-size:13px;font-weight:650;margin:11px 0 23px;line-height:1.5}
.is-service-hero-subtitle span{padding-inline:4px;color:#8b5cf6}
.is-service-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.is-service-steps span{display:grid;place-items:center;min-height:42px;min-width:0;padding:7px 4px;background:rgba(255,255,255,.53);border:1px solid rgba(130,100,200,.14);border-radius:11px;text-align:center;font-size:clamp(10px,2.4vw,12px);font-weight:790;color:#695c76}
.is-service-steps .is-current{color:#fff;border-color:transparent;background:linear-gradient(125deg,#7c3aed,#b92bd2);box-shadow:0 8px 18px rgba(110,42,190,.23)}
.is-service-catalog{padding:clamp(16px,3vw,30px)}
.is-service-count{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;padding:9px 13px;border-radius:11px;background:color-mix(in srgb,var(--accent) 7%,var(--surface));margin-bottom:13px}
.is-service-count strong{font-size:12px}.is-service-count span{font-size:11px;color:var(--muted)}
.is-service-empty{padding:clamp(32px,6vw,66px) 20px;text-align:center;border:1px dashed color-mix(in srgb,var(--accent) 28%,var(--border));border-radius:17px;background:var(--surface-soft);color:var(--ink)}
.is-service-empty-icon{display:grid;place-items:center;width:62px;height:62px;border-radius:18px;margin:0 auto 15px;background:color-mix(in srgb,var(--accent) 13%,var(--surface));color:var(--accent)}
.is-service-empty-icon svg{width:31px;height:31px}.is-service-empty h2{margin:0 0 9px}.is-service-empty p{font-size:13px;line-height:1.6;max-width:410px;margin:0 auto;color:var(--muted)}
html[data-theme=dark] .is-service-hero{background:radial-gradient(circle at 90% 0%,rgba(119,78,211,.37),transparent 38%),linear-gradient(120deg,#141d36,#2a174b 65%,#28213d);color:#fff}
html[data-theme=dark] .is-service-hero .is-premium-order-back{background:rgba(13,20,37,.58);color:#fff;border-color:rgba(255,255,255,.26)}
html[data-theme=dark] .is-service-eyebrow{color:#e0aaff}
html[data-theme=dark] .is-premium-service-order .is-service-hero h1{color:#fff}
html[data-theme=dark] .is-service-hero-subtitle{color:#d8cde6}
html[data-theme=dark] .is-service-steps span{background:rgba(255,255,255,.08);color:#ddd2ed;border-color:rgba(255,255,255,.12)}
html[data-theme=dark] .is-service-steps .is-current{color:#fff;background:linear-gradient(125deg,#6d28d9,#aa2ac0)}
.is-service-catalog .is-premium-product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,2vw,17px);align-items:stretch}
@media(min-width:790px){.is-service-catalog .is-premium-product-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* PPOB selection: one bright but soft main-category-sized purple spotlight.
   Vertical room in the rail keeps its edge away from the progress track. */
:is(#ppobHome,#priorityHome,#categoryMenuStrip) > .ppob-menu-section .ppob-menu-tabs{
  padding-top:clamp(14px,3vw,20px);
  padding-bottom:clamp(18px,3.5vw,26px);
}
:is(#ppobHome,#priorityHome,#categoryMenuStrip) .ppob-menu-tab.active .ppob-menu-icon-frame::before {
  content:"";position:absolute;left:50%;top:50%;width:132%;height:132%;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(215,186,255,.28) 0%,rgba(139,71,238,.56) 26%,rgba(73,82,230,.32) 49%,transparent 72%);
  filter:blur(6px);animation:none!important;
}
:is(#ppobHome,#priorityHome,#categoryMenuStrip) .ppob-menu-tab.active .ppob-menu-icon-frame img {
  filter:drop-shadow(0 0 4px rgba(124,58,237,.34));
}
:is(#ppobHome,#priorityHome,#categoryMenuStrip) .ppob-menu-tab.active .ppob-menu-icon-frame::after {
  content:none!important;display:none!important;
}
:is(#ppobHome,#priorityHome,#categoryMenuStrip) .ppob-menu-tab.active .ppob-menu-icon-frame {
  filter:none!important;
}
@media (prefers-reduced-motion:reduce){
  :is(#ppobHome,#priorityHome,#categoryMenuStrip) .ppob-menu-tab.active .ppob-menu-icon-frame::before{animation:none}
}

/* Consistent compact PPOB-style category rail (reference: Kategori Menu Barang).
   Apply to PPOB main, Layanan Prioritas, and category menus presented as PPOB.
   One horizontal icon row; underline belongs to its icon and the progress track
   follows closely.  Keep the transparent backdrop and existing active glow. */
:is(#ppobHome,#priorityHome,#categoryMenuStrip) > .ppob-menu-section .ppob-menu-tabs {
  padding-top:clamp(8px,1.8vw,16px) !important;
  padding-bottom:0 !important;
}
:is(#ppobHome,#priorityHome,#categoryMenuStrip) > .ppob-menu-section .ppob-menu-tabs > .ppob-menu-tab {
  min-height:0;
  padding-top:2px !important;
  padding-bottom:clamp(18px,2.4vw,24px) !important;
}
:is(#ppobHome,#priorityHome,#categoryMenuStrip) > .ppob-menu-section .ppob-menu-tab.active::after {
  bottom:2px;
}
#priorityHome > .priority-menu-section {
  gap:0;
}
:is(#ppobHome,#priorityHome,#categoryMenuStrip) > .ppob-menu-section > .ppob-menu-progress {
  margin-top:clamp(8px,1vw,10px) !important;
  margin-bottom:clamp(8px,1vw,12px) !important;
}

/* Product-only chooser: no search / sort / region toolbar above product list. */
.is-premium-service-order,.is-premium-service-order *{box-sizing:border-box}
.is-premium-service-order{width:100%;max-width:100%;min-width:0;margin-inline:auto}
.is-premium-service-order .is-service-catalog{min-width:0;overflow-wrap:anywhere}
.is-premium-service-order .is-premium-product-grid{width:100%;min-width:0;grid-template-columns:repeat(auto-fit,minmax(min(100%,185px),1fr))}
.is-premium-service-order .is-premium-product{min-width:0}
@media(max-width:530px){.is-premium-service-order .is-premium-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.is-premium-service-order .is-service-steps span{font-size:clamp(9px,2.7vw,12px)}}

/* October final: intrinsic service columns, no desktop min-width overflow. */
:is(.is-premium-service-order,.is-service-catalog,.is-service-hero){width:100%;min-width:0;max-width:100%;box-sizing:border-box}
.is-premium-service-order .is-premium-product-grid{min-width:0;max-width:100%;gap:clamp(8px,2.5vw,18px)}
.is-premium-service-order .is-premium-product{min-width:0;max-width:100%;overflow:hidden}
.is-premium-service-order .is-premium-product-image{max-width:100%;min-width:0}
.is-premium-service-order .is-premium-product-body{min-width:0;overflow-wrap:anywhere}
@media(max-width:600px){
  .is-premium-service-order{border-radius:clamp(12px,4vw,22px);margin-block:12px}
  .is-service-hero{padding:clamp(14px,4vw,22px)}
  .is-service-catalog{padding:clamp(10px,3.5vw,18px)}
  .is-premium-service-order .is-premium-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .is-premium-service-order .is-service-steps{gap:5px}
  .is-premium-service-order .is-service-steps span{min-height:40px;padding:5px 2px;overflow-wrap:anywhere}
}

/* Compact PPOB-style submenu choices stay light and touch-friendly. */
.ppob-category-submenu-rail{display:flex;align-items:flex-start;gap:clamp(10px,2.5vw,16px);width:100%;min-width:0;padding:3px 2px 8px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain;touch-action:pan-x pan-y;scroll-snap-type:x proximity;scrollbar-width:none}
.ppob-category-submenu-rail::-webkit-scrollbar{display:none}
.ppob-category-submenu-choice{box-sizing:border-box;display:flex;flex:0 0 clamp(68px,20vw,88px);min-width:0;min-height:100px;flex-direction:column;align-items:center;gap:6px;padding:0 2px 3px;border:0;border-radius:12px;background:transparent;color:var(--ink);text-align:center;text-decoration:none;scroll-snap-align:start;cursor:pointer}
.ppob-category-submenu-choice .ppob-menu-icon-frame{display:grid;place-items:center;width:clamp(52px,15vw,64px);aspect-ratio:1;overflow:hidden;border:1px solid color-mix(in srgb,var(--accent) 20%,var(--border));border-radius:16px;background:var(--surface);color:var(--accent)}
.ppob-category-submenu-choice .ppob-menu-icon-frame img{display:block;width:100%;height:100%;object-fit:cover}
.ppob-category-submenu-choice .ppob-menu-icon-frame>span,.ppob-category-submenu-choice .ppob-menu-icon-frame>.icon{display:grid;place-items:center;width:58%;height:58%;color:var(--accent)}
.ppob-category-submenu-choice .ppob-menu-icon-frame>.category-submenu-exact-icon,.ppob-category-submenu-choice .ppob-submenu-icon-fallback .category-submenu-exact-icon{width:100%;height:100%;padding:12%;object-fit:contain}
.ppob-category-submenu-choice .ppob-submenu-icon-fallback{display:grid;place-items:center;width:58%;height:58%;color:var(--accent)}
.ppob-submenu-choice-label{display:block;max-width:100%;min-height:2.4em;overflow-wrap:anywhere;color:inherit;font-size:clamp(10px,2.8vw,12px);font-weight:850;line-height:1.2}
.ppob-category-submenu-choice:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ppob-category-submenu-choice.active{color:var(--accent)}
.ppob-category-submenu-choice.is-unavailable{opacity:.62;cursor:default}
.ppob-submenu-choice-status{font-size:9px;line-height:1.1}

/* Match the recommendation banner to its product-card row and fill the cell. */
.product-grid-current.catalog-discovery-grid{grid-auto-rows:max-content;align-items:stretch}
.product-grid-current.catalog-discovery-grid>.product-card-discovery,.product-grid-current.catalog-discovery-grid>.catalog-grid-banner-carousel{align-self:stretch;aspect-ratio:auto;min-height:0}
.product-grid-current.catalog-discovery-grid>.catalog-grid-banner-carousel .catalog-grid-banner-slide img{object-fit:cover}


/* 2026-10-22: all PPOB-presentation submenus use the priority-service geometry.
   Columns are sourced from each group in the Admin panel; no fixed-pixel desktop override. */
.category-priority-unified .ppob-category-submenu-rail {
  display:grid; grid-template-columns:repeat(var(--unified-submenu-mobile,2),minmax(0,1fr));
  gap:clamp(8px,var(--unified-submenu-gap,12px),30px); overflow:visible; padding:4px 0 12px;
  align-items:stretch; min-width:0; scroll-snap-type:none;
}
.category-priority-unified .ppob-category-submenu-choice {
  min-width:0; width:100%; min-height:0; height:auto; padding:clamp(8px,2vw,14px);
  flex:none; display:flex; align-items:center; justify-content:flex-start; gap:8px;
  border:1px solid var(--border,#dfe3ee); border-radius:clamp(14px,2vw,19px);
  background:var(--surface,#fff); box-shadow:0 6px 17px rgba(20,18,43,.06);
  overflow:hidden; color:var(--ink,#171a2b); isolation:isolate;
}
.category-priority-unified .ppob-category-submenu-choice .ppob-menu-icon-frame {
  display:grid; place-items:center; flex:none; width:min(100%,112px); max-width:100%;
  aspect-ratio:1; height:auto; border:0; border-radius:clamp(12px,2vw,18px);
  background:var(--surface-soft,#f3f3fa); overflow:hidden;
}
.category-priority-unified .ppob-category-submenu-choice .ppob-menu-icon-frame>img,
.category-priority-unified .ppob-category-submenu-choice .ppob-submenu-icon-fallback img {
  display:block; width:100%; height:100%; max-width:100%; max-height:100%; object-fit:contain;
}
.category-priority-unified .ppob-category-submenu-choice .ppob-submenu-icon-fallback {
  display:grid; place-items:center; width:100%; height:100%; min-width:0; min-height:0;
}
.category-priority-unified .ppob-category-submenu-choice .ppob-menu-icon-frame :is(svg,.icon),
.category-priority-unified .ppob-category-submenu-choice .ppob-submenu-icon-fallback :is(svg,.icon) {
  display:block; width:clamp(25px,40%,52px); height:clamp(25px,40%,52px);
  max-width:100%; max-height:100%; flex:none;
}
.category-priority-unified .ppob-category-submenu-choice .ppob-submenu-choice-label {
  display:block; width:100%; min-height:2.3em; font-size:clamp(10px,1.7vw,13px);
  line-height:1.2; text-align:center; overflow-wrap:anywhere; font-weight:800;
}
.category-priority-unified .ppob-category-submenu-choice.is-unavailable{opacity:.65;box-shadow:none}
.category-priority-unified .ppob-category-submenu-choice:focus-visible{outline:3px solid var(--accent,#7c3aed);outline-offset:2px}
@media (min-width:680px) {
  .category-priority-unified .ppob-category-submenu-rail {grid-template-columns:repeat(var(--unified-submenu-desktop,5),minmax(0,1fr));}
}
@media (max-width:360px) {
  .category-priority-unified .ppob-category-submenu-choice{padding:6px;gap:5px;}
  .category-priority-unified .ppob-category-submenu-choice .ppob-submenu-choice-label{font-size:10px}
}
@media (prefers-reduced-motion:reduce){.category-priority-unified .ppob-category-submenu-choice{transition:none}}


/* 2026-10-25: priority category menus match the tighter Barang rail rhythm.
   Applies whether the same menu is mounted in priorityHome or categoryMenuStrip.
   Only the category menu rail is affected: submenu shell/white artwork untouched. */
:is(#priorityHome,#categoryMenuStrip) > .priority-menu-section {
  display:grid;
  gap:0 !important;
  background:transparent;
}
:is(#priorityHome,#categoryMenuStrip) > .priority-menu-section > .priority-menu-rail {
  padding-bottom:0 !important;
}
:is(#priorityHome,#categoryMenuStrip) > .priority-menu-section > .priority-menu-rail > .priority-menu-item {
  padding-bottom:clamp(20px,3vw,28px) !important;
  gap:0 !important;
}
:is(#priorityHome,#categoryMenuStrip) > .priority-menu-section > .priority-menu-rail > .priority-menu-item.active::after {
  bottom:2px;
}
:is(#priorityHome,#categoryMenuStrip) > .priority-menu-section > .ppob-menu-progress {
  margin-top:9px !important;
  margin-bottom:clamp(7px,1vw,10px) !important;
}

/* === STYLE: css/editorial-banners.css === */
/* One canonical illustrated editorial heading across the storefront. Its title,
   motto, picture and destination are always taken from live Admin configuration. */
.is-editorial-banner,.is-editorial-banner *,.is-fleet-order,.is-fleet-order *{box-sizing:border-box}
.is-editorial-banner{
 --ed-a:#281063;--ed-b:#783deb;--ed-c:#e2b3ff;--ed-ink:#fff;
 position:relative;isolation:isolate;display:flex;align-items:center;overflow:hidden;
 width:100%;min-width:0;min-height:clamp(148px,26vw,232px);
 margin:0 0 clamp(13px,2.5vw,23px);padding:clamp(16px,3vw,31px);
 color:var(--ed-ink);border-radius:clamp(18px,3vw,28px);
 border:1px solid rgba(255,255,255,.42);
 background:radial-gradient(circle at 81% 12%,rgba(255,255,255,.26),transparent 38%),
 linear-gradient(120deg,var(--ed-a),var(--ed-b) 65%,var(--ed-c));
 box-shadow:0 14px 28px rgba(41,19,93,.19),inset 0 1px rgba(255,255,255,.38);
 container-type:inline-size;
}
.is-editorial-banner:before{content:"";position:absolute;right:-8%;top:-65%;width:65%;height:150%;border:1px solid rgba(255,255,255,.2);border-radius:50%;transform:rotate(-14deg);z-index:-1}
.is-editorial-banner:after{content:"";position:absolute;left:22%;bottom:-48%;width:67%;height:70%;border:1px solid rgba(255,255,255,.2);border-radius:50%;transform:rotate(-12deg);z-index:-1}
.is-editorial-banner--partner{--ed-a:#18225e;--ed-b:#4c39cc;--ed-c:#9888f2}
.is-editorial-banner--popular{--ed-a:#8c102e;--ed-b:#cf2154;--ed-c:#ec657b}
.is-editorial-banner--submenu{--ed-a:#123b9f;--ed-b:#3659de;--ed-c:#7840d2}
.is-editorial-banner--catalog{--ed-a:#241057;--ed-b:#6535d1;--ed-c:#aa72f0}
.is-editorial-banner--discovery{--ed-a:#33205e;--ed-b:#6332b7;--ed-c:#b672d9}
.is-editorial-banner--ppobcatalog{--ed-a:#183875;--ed-b:#3b4ac8;--ed-c:#9576dd}
.is-editorial-banner--prioritycatalog{--ed-a:#123c4b;--ed-b:#276b8e;--ed-c:#568abf}
.is-editorial-banner--recent{--ed-a:#41306b;--ed-b:#6654ae;--ed-c:#bc87d8}
.is-editorial-banner--travelsearch{--ed-a:#144167;--ed-b:#3b63b7;--ed-c:#806ad7}
.is-editorial-heading-copy{position:relative;z-index:2;flex:1;max-width:76%;min-width:0;display:flex;align-items:flex-start;flex-direction:column;gap:clamp(6px,1.7cqw,12px)}
.is-editorial-eyebrow{display:inline-flex;align-items:center;max-width:100%;padding:5px 11px;border-radius:999px;background:rgba(255,235,165,.93);color:#3e185e;font-weight:900;font-size:clamp(9px,2.4cqw,13px);letter-spacing:.035em;line-height:1.25}
.is-editorial-heading-copy h2{margin:0!important;color:#fff!important;max-width:100%;font-family:'Bricolage Grotesque',Inter,system-ui,sans-serif!important;font-size:clamp(22px,5.5cqw,43px)!important;line-height:1.02!important;font-weight:850!important;letter-spacing:-.04em!important;overflow-wrap:anywhere;text-shadow:0 3px 0 rgba(22,10,69,.28)!important}
.is-editorial-bar{display:block;width:clamp(72px,17cqw,134px);height:5px;border-radius:99px;background:linear-gradient(90deg,#ffec99,#fa8cce)}
.is-editorial-heading-copy p{margin:0!important;max-width:39ch;font-size:clamp(10px,2.6cqw,15px)!important;line-height:1.4;color:rgba(255,255,255,.94)!important;font-weight:650;overflow-wrap:anywhere}
.is-editorial-picture{position:absolute;right:1%;top:5%;bottom:5%;width:37%;display:grid;place-items:center;pointer-events:none;z-index:1}
.is-editorial-picture:before{content:"";position:absolute;inset:14% 5%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.34),transparent 68%);filter:blur(3px)}
.is-editorial-image{position:relative;max-width:100%;width:90%;height:100%;max-height:200px;object-fit:contain;filter:drop-shadow(0 9px 10px rgba(20,8,66,.3));animation:isEditorialFloat 4s ease-in-out infinite}
.is-editorial-spark{position:absolute;top:12%;left:3%;color:#ffe89d;font-size:clamp(18px,5cqw,34px);animation:isEditorialTwinkle 2.7s ease-in-out infinite}
/* Keep a clear margin for the existing restaurant, partner and PPOB grids. */
:is(.brand-section,.products-section,.ppob-category-submenu-section,.ppob-popular,.ppob-catalog,.travel-context-search) > .is-editorial-banner{margin-bottom:clamp(12px,2vw,19px)}
.is-editorial-banner + .is-editorial-banner{margin-top:clamp(12px,2vw,20px)}
/* The rental HTML's three-stage chooser, generalized for EVERY non-PPOB,
   non-priority submenu and driven by live category/product settings. */
.is-fleet-order.is-premium-submenu-market{width:100%;max-width:100%;margin:0 auto 20px;border:0;box-shadow:none;padding:0;background:#f4f0fc;color:#18132e;border-radius:clamp(18px,3vw,27px);overflow:hidden!important;container-type:inline-size}
.is-fleet-hero{position:relative;overflow:hidden;isolation:isolate;padding:clamp(15px,3.3cqw,37px);color:#fff;background:radial-gradient(ellipse at 83% 10%,rgba(211,133,255,.4),transparent 34%),radial-gradient(ellipse at 12% 100%,rgba(50,116,255,.4),transparent 38%),linear-gradient(112deg,#123b9f,#235be0 36%,#4820a8 72%,#27105e);border:1px solid rgba(255,255,255,.5);border-radius:clamp(19px,3cqw,27px);box-shadow:inset 0 2px rgba(255,255,255,.24),0 12px 26px #20125a33}
.is-fleet-hero:before,.is-fleet-hero:after{content:"";position:absolute;z-index:-1;border:1px solid #ffffff45;border-radius:50%;pointer-events:none}
.is-fleet-hero:before{width:54%;height:76%;right:-5%;top:-39%;transform:rotate(-18deg)}
.is-fleet-hero:after{width:70%;height:44%;right:11%;bottom:-33%;transform:rotate(-11deg)}
.is-fleet-intro{min-width:0}
.is-fleet-title-row{display:grid;grid-template-columns:clamp(38px,10cqw,48px) minmax(0,1fr);align-items:center;gap:clamp(8px,2.5cqw,15px)}
.is-fleet-back{display:grid;place-items:center;width:clamp(38px,10cqw,48px);height:clamp(38px,10cqw,48px);border:1px solid #ffffff7a;border-radius:14px;background:#ffffff2a;color:#ffe99a!important;text-decoration:none;font-size:24px;font-weight:800}
.is-fleet-order.is-premium-service-order .is-fleet-title-row h1{margin:0!important;color:#fff!important;font-family:'Bricolage Grotesque',Inter,system-ui,sans-serif;font-size:clamp(29px,8cqw,74px);letter-spacing:-.045em;line-height:1.04;font-weight:850;text-shadow:0 4px 1px #16103c44!important;overflow-wrap:anywhere}
.is-fleet-crumb{margin:10px 0 0 clamp(46px,12.5cqw,64px);color:#f0e5ff;font-size:clamp(12px,2.8cqw,18px);font-weight:680}
.is-fleet-crumb b{color:#ffdc80;margin-inline:8px}
.is-fleet-motto{display:block;margin:7px 0 0 clamp(46px,12.5cqw,64px);color:#f7eaff;font-size:clamp(11px,2.5cqw,15px);font-weight:650}
.is-fleet-steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(6px,1.8cqw,15px);padding:0;margin:clamp(21px,4cqw,38px) 0 0}
.is-fleet-steps li{display:flex;align-items:center;gap:clamp(5px,1.4cqw,11px);min-width:0;min-height:clamp(53px,7cqw,72px);padding:9px clamp(6px,1.5cqw,16px);border-radius:clamp(12px,2cqw,17px);border:1px solid #ffffff78;background:linear-gradient(115deg,#ffffff26,#ffffff10);color:#f6ecff;font-size:clamp(9px,2.35cqw,15px);font-weight:800;line-height:1.15}
.is-fleet-steps li span{display:grid;place-items:center;flex:none;width:clamp(25px,4.5cqw,42px);height:clamp(25px,4.5cqw,42px);border-radius:50%;border:1px solid #ffffffbf;color:#fff;background:#481a9f;font-size:clamp(12px,2.5cqw,17px)}
.is-fleet-steps li.is-active{background:linear-gradient(115deg,#ffe99a,#ffbd48 72%,#ed952b);color:#48240b;border-color:#fff0a6;box-shadow:0 5px 0 #290b5b4f}
.is-fleet-catalog{padding:clamp(12px,3cqw,33px)}
.is-fleet-banner{display:flex;align-items:center;gap:clamp(10px,2.4cqw,19px);position:relative;overflow:hidden;min-height:105px;padding:clamp(12px,2.6cqw,22px);border-radius:clamp(17px,3cqw,26px);color:#fff;border:1px solid #ffffff82;background:linear-gradient(115deg,#123b9f,#235be0 39%,#4820a8 74%,#27105e);box-shadow:0 12px 25px #180c5c3a,inset 0 2px #ffffff55;margin-bottom:clamp(15px,2.4cqw,24px)}
.is-fleet-banner:after{content:"";position:absolute;right:-5%;top:-75%;width:45%;height:240%;border:1px solid #ffffff4a;border-radius:50%;transform:rotate(-22deg)}
.is-fleet-emblem{z-index:1;display:grid;place-items:center;flex:none;width:clamp(49px,13cqw,78px);aspect-ratio:1;border:3px solid #ffffffa1;border-radius:24%;background:linear-gradient(140deg,#ffd76b,#ef9b29);box-shadow:0 7px 0 #16135544,inset 0 2px #ffffff9a;transform:rotate(-4deg)}
.is-fleet-emblem img{width:83%;height:83%;object-fit:contain}
.is-fleet-banner-copy{position:relative;z-index:1;min-width:0}
.is-fleet-banner-copy small{display:block;color:#ffec9c;font-size:clamp(9px,2.1cqw,12px);font-weight:900;letter-spacing:.12em}
.is-fleet-banner-copy h2{margin:4px 0 7px;color:#fff;font-size:clamp(18px,4.4cqw,32px);line-height:1.1;font-family:'Bricolage Grotesque',Inter,system-ui,sans-serif;font-weight:850}
.is-fleet-banner-copy p{margin:0;color:#f6e9ff;font-weight:650;font-size:clamp(10px,2.2cqw,13px);overflow-wrap:anywhere}
.is-fleet-grid{display:grid;grid-template-columns:repeat(var(--fleet-mobile-cols,2),minmax(0,1fr));gap:var(--fleet-gap,14px);align-items:stretch}
.is-fleet-card{display:flex;flex-direction:column;min-width:0;overflow:hidden;background:linear-gradient(150deg,#fff,#fdfbff);border:1px solid #ad94d02b;border-radius:clamp(14px,2.5cqw,23px);box-shadow:0 15px 30px #29155a1a;text-decoration:none;color:#201834;transition:transform .2s ease,box-shadow .2s ease}
.is-fleet-card:hover{transform:translateY(-3px);box-shadow:0 23px 38px #29155a28}
.is-fleet-card:focus-visible{outline:3px solid #fbbf24;outline-offset:3px}
.is-fleet-visual{position:relative;display:grid;place-items:center;overflow:hidden;aspect-ratio:1.4;background:linear-gradient(140deg,#1c0b3e,#54209d 70%,#260954)}
.is-fleet-visual img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 9px 15px #10032655)}
.is-fleet-shine{position:absolute;left:-50%;top:-30%;height:160%;width:28%;transform:skewX(-19deg);background:linear-gradient(90deg,transparent,#ffffff30,transparent);animation:isFleetShine 7s ease-in-out infinite;pointer-events:none}
.is-fleet-body{display:flex;flex:1;flex-direction:column;gap:clamp(5px,1.2cqw,9px);padding:clamp(11px,2.2cqw,19px);min-width:0}
.is-fleet-name{font-family:'Bricolage Grotesque',Inter,system-ui,sans-serif;font-size:clamp(15px,3.5cqw,25px);font-weight:850;line-height:1.12;letter-spacing:-.03em;overflow-wrap:anywhere}
.is-fleet-body p{margin:0;font-size:clamp(10px,2.3cqw,13px);line-height:1.4;color:#6d6380;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.is-fleet-price{font-size:clamp(13px,3cqw,20px);font-weight:850;color:#6829c2;margin-top:auto}
.is-fleet-button{display:flex;align-items:center;justify-content:space-between;gap:7px;min-height:clamp(38px,7cqw,48px);margin-top:auto;padding:9px clamp(9px,2cqw,15px);border-radius:13px;background:linear-gradient(115deg,#4a10a8,#7924da 56%,#5b16be);color:#fff;font-size:clamp(11px,2.5cqw,15px);font-weight:850;box-shadow:inset 0 1px #ffffff55,0 7px 17px #5f26a42a}
.is-fleet-button span{font-size:18px}
.is-fleet-disabled .is-fleet-button{background:#cbc2da;color:#4d4061;box-shadow:none}
@container (min-width:820px){.is-fleet-grid{grid-template-columns:repeat(var(--fleet-desktop-cols,3),minmax(0,1fr))}}
@container (max-width:390px){.is-fleet-steps li{padding:7px 5px;gap:5px}.is-fleet-steps li span{width:24px;height:24px}.is-fleet-catalog{padding:10px}.is-fleet-body{padding:10px}.is-fleet-name{font-size:clamp(14px,4cqw,18px)}}
@container (max-width:430px){.is-editorial-banner{min-height:158px;padding:14px}.is-editorial-heading-copy{max-width:74%}.is-editorial-picture{width:38%;right:-1%}.is-editorial-heading-copy h2{font-size:clamp(21px,6cqw,28px)!important}.is-editorial-heading-copy p{font-size:clamp(10px,2.7cqw,12px)!important}}

@keyframes isEditorialFloat{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-5px) rotate(3deg)}}
@keyframes isEditorialTwinkle{0%,100%{opacity:.55;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}
@keyframes isFleetShine{0%,56%{left:-50%;opacity:0}68%{opacity:.75}86%,100%{left:130%;opacity:0}}

/* Final responsive override after the legacy component rules above. */
.is-editorial-banner--discovery{min-height:clamp(180px,22vw,252px);height:clamp(180px,22vw,252px);padding:clamp(14px,2vw,22px);gap:clamp(8px,1.5vw,16px)}
.is-editorial-banner--discovery .is-editorial-heading-copy{flex:0 1 52%;width:auto;max-width:52%;gap:clamp(4px,.8cqw,8px)}
.is-editorial-banner--discovery .is-editorial-picture{flex:1 1 0;width:auto;min-width:0;height:100%;max-height:100%;overflow:hidden}
.is-editorial-banner--discovery .is-editorial-image{width:100%;height:100%;max-height:100%;object-fit:contain;object-position:center}
@container (max-width:600px){.is-editorial-banner--discovery{min-height:clamp(180px,48cqw,230px);height:auto;max-height:260px;padding:12px;gap:6px}.is-editorial-banner--discovery .is-editorial-heading-copy{flex-basis:56%;max-width:56%}.is-editorial-banner--discovery .is-editorial-picture{min-width:0}.is-editorial-banner--discovery .is-editorial-image{max-height:clamp(145px,42cqw,220px)}}
@media(prefers-reduced-motion:reduce){.is-editorial-image,.is-editorial-spark,.is-fleet-shine{animation:none!important}.is-fleet-card{transition:none!important}}

.is-editorial-verified{display:inline-flex;align-items:center;border-radius:9px;padding:3px 8px;background:#f5ffc1;color:#402069;font-size:10px;font-weight:850}
.is-editorial-picture{background:linear-gradient(135deg,#f5f3ff,#ebe6fa 58%,#e6f8fc) center / cover no-repeat}
.is-editorial-banner--discovery{min-height:clamp(112px,16vw,164px);margin-bottom:clamp(9px,1.4vw,15px);padding:clamp(12px,2vw,20px)}
.is-editorial-banner--discovery .is-editorial-heading-copy{gap:clamp(4px,.9cqw,8px)}
.is-editorial-banner--discovery .is-editorial-picture{width:30%;top:8%;bottom:8%}

.is-editorial-banner--promohome{--ed-a:#8f1347;--ed-b:#bc317c;--ed-c:#ee8c9f}

/* Vehicle art is cropped from the supplied sewa-mobil-grid.html reference. */
.is-fleet-visual img[src*="/assets/ui/sewa-mobil-grid.webp"]{object-fit:cover;object-position:center center;width:100%;height:100%;filter:none}

/* V7 fluid editorial layout: content dictates width, art fills the remainder.
   Admin can use long titles and captions without JS compression or ellipsis. */
.is-editorial-banner{display:flex;align-items:stretch;gap:clamp(8px,2vw,20px)}
.is-editorial-heading-copy{flex:0 1 auto;width:max-content;min-width:0;max-width:74%;align-self:center;gap:clamp(5px,1.3cqw,11px)}
.is-editorial-picture{position:relative;inset:auto;right:auto;top:auto;bottom:auto;flex:1 1 0;width:auto;min-width:25%;height:auto;align-self:stretch;display:grid;place-items:center;background:none!important}
.is-editorial-image{display:block;width:100%;height:100%;max-width:100%;max-height:none;object-fit:contain;object-position:center;min-height:0}
.is-editorial-heading-copy h2{font-size:clamp(17px,4.5cqw,40px)!important;white-space:normal!important;overflow:visible!important;overflow-wrap:break-word;line-height:1.08!important}
.is-editorial-heading-copy p{font-size:clamp(10px,2.4cqw,15px)!important;white-space:normal!important;overflow:visible!important;overflow-wrap:break-word;max-width:100%;line-height:1.3!important}
.is-editorial-eyebrow{white-space:normal;max-width:100%;overflow-wrap:break-word}
.is-fleet-banner-copy{flex:1;min-width:0}
.is-fleet-banner-copy :is(h2,p,small),.is-fleet-name,.is-fleet-body p,.is-fleet-label,.is-fleet-motto,.is-fleet-crumb,.is-fleet-title-row h1,.is-fleet-steps strong{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:break-word!important;word-break:normal!important}
.is-fleet-steps strong{display:block;min-width:0;font-size:inherit;font-weight:inherit}
.is-fleet-banner-copy h2{font-size:clamp(16px,3.7cqw,31px)}
.is-fleet-banner-copy p{font-size:clamp(10px,2cqw,13px)}
.is-fleet-visual img.is-fleet-photo{width:100%;height:100%;object-fit:cover;filter:none}
.is-fleet-visual img.is-fleet-fallback{width:100%;height:100%;object-fit:contain}
.is-fleet-card{align-self:stretch}
.is-fleet-body{gap:clamp(6px,1.2cqw,10px)}
.is-fleet-name{font-size:clamp(13px,3.5cqw,26px)}
.is-fleet-body p{display:block;-webkit-line-clamp:unset;line-clamp:unset;font-size:clamp(10px,2cqw,14px);line-height:1.35}
.is-fleet-label{display:inline-flex;align-self:start;width:auto;max-width:100%;color:#62259f;background:#f5e7ff;border:1px solid #ddbcfa;border-radius:20px;padding:5px 9px;font-weight:850;font-size:clamp(9px,1.9cqw,12px)}
.is-fleet-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:2px;color:#6d6380;font-size:clamp(8px,1.9cqw,12px);font-weight:700}
.is-fleet-metrics span:first-child{border-right:1px solid #e0d3ea}
.is-fleet-rule{display:block;width:100%;height:1px;margin-top:auto;background:linear-gradient(90deg,#e1d5ef,#f1eaf8)}
.is-fleet-button{display:flex;justify-content:space-between;align-items:center;gap:6px;min-height:40px}
.is-fleet-button>span{flex:none}
.is-fleet-steps li{min-width:0}
.is-fleet-catalog .is-fleet-grid{gap:var(--fleet-gap,14px)}
@container (max-width:440px){
 .is-editorial-banner{min-height:155px;padding:clamp(12px,3cqw,16px);gap:7px}
 .is-editorial-heading-copy{max-width:72%;min-width:0}
 .is-editorial-picture{min-width:26%;width:auto;right:auto}
 .is-editorial-heading-copy h2{font-size:clamp(16px,5cqw,27px)!important}
 .is-editorial-heading-copy p{font-size:clamp(10px,2.4cqw,12px)!important}
 .is-fleet-banner{min-height:80px;padding:10px;gap:8px}
 .is-fleet-steps li{font-size:clamp(9px,2.3cqw,12px)}
 .is-fleet-body{padding:10px}
 .is-fleet-name{font-size:clamp(12px,3.4cqw,19px)}
 .is-fleet-button{font-size:clamp(10px,2.5cqw,13px)}
}


/* V8: reference artwork is the entire title, not a small decorative icon.
   The alpha image keeps its native ratio and occupies all available width. */
.is-editorial-banner.is-editorial-banner--artwork{
  display:flex;flex-direction:column;align-items:stretch;gap:0;
  min-height:0;height:auto;padding:0;max-width:100%;overflow:visible;
  border:0;border-radius:0;background:transparent;box-shadow:none;color:var(--ink);
  container-type:inline-size;
}
.is-editorial-banner--artwork:before,.is-editorial-banner--artwork:after{display:none!important}
.is-artwork-accessible{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.is-artwork-image-wrap{width:100%;min-width:0;display:block;overflow:visible;line-height:0}
.is-artwork-image{display:block;width:100%;max-width:100%;height:auto;object-fit:contain;object-position:center;filter:none;animation:none;border:0;border-radius:0}
.is-artwork-meta{display:grid;align-content:start;gap:clamp(3px,.8vw,7px);padding:clamp(2px,.8vw,8px) clamp(6px,1.5vw,15px) clamp(8px,1.8vw,16px);color:var(--ink);max-width:100%;min-width:0}
.is-artwork-menu-name{margin:0!important;font:850 clamp(15px,3.6vw,30px)/1.16 Inter,system-ui,sans-serif!important;letter-spacing:-.025em!important;color:var(--ink)!important;overflow-wrap:anywhere;max-width:100%}
.is-artwork-caption{margin:0!important;color:var(--muted)!important;font:650 clamp(11px,1.7vw,15px)/1.35 Inter,system-ui,sans-serif!important;overflow-wrap:anywhere;max-width:100%}
.is-artwork-error .is-artwork-accessible{position:static!important;clip:auto!important;display:block;width:auto!important;height:auto!important;margin:0!important;padding:12px!important;overflow:visible!important;white-space:normal!important;color:var(--ink)!important;font-size:clamp(17px,3vw,27px)!important}
@media(max-width:430px){
  .is-editorial-banner.is-editorial-banner--artwork{padding:0!important;min-height:0!important}
  .is-editorial-banner--artwork .is-artwork-image{height:auto!important}
}

/* Transparent GIF beside two editable lines; artwork remains full-width. */
.is-artwork-meta--animated{display:flex;align-items:center;gap:clamp(6px,1.8vw,12px);min-height:0}
.is-artwork-meta-lines{min-width:0;flex:1;display:grid;gap:clamp(2px,.6vw,6px)}
.is-artwork-inline-animation{display:block;flex:none;width:clamp(26px,var(--artwork-animation-size,42px),96px);height:clamp(26px,var(--artwork-animation-size,42px),96px);object-fit:contain;background-color:transparent!important;background-image:none!important;border:0;mix-blend-mode:normal;isolation:isolate}
.is-artwork-meta--animated:has(.is-artwork-inline-animation) .is-artwork-caption{margin:0}

/* ========================================================================
   RESPONSIVE MOBILE FIXES FOR SUBMENU ORDER PAGE & HERO CAROUSEL DOTS
   ======================================================================== */
.is-fleet-hero {
  padding: clamp(14px, 3vw, 28px) !important;
  border-radius: clamp(18px, 3vw, 26px) !important;
}
.is-fleet-title-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}
.is-fleet-order.is-premium-service-order .is-fleet-title-row h1 {
  font-size: clamp(20px, 6vw, 42px) !important;
  line-height: 1.15 !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  min-width: 0 !important;
}
.is-fleet-crumb {
  margin: 8px 0 0 0 !important;
  font-size: clamp(11px, 2.8vw, 15px) !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
}
.is-fleet-motto {
  margin: 5px 0 0 0 !important;
  font-size: clamp(11px, 2.6vw, 14px) !important;
  line-height: 1.4 !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
}
.is-fleet-steps {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
  margin-top: 14px !important;
  width: 100% !important;
}
.is-fleet-steps li {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 5px !important;
  min-height: 44px !important;
  padding: 6px 8px !important;
  border-radius: 12px !important;
  font-size: clamp(9.5px, 2.4vw, 13px) !important;
  line-height: 1.15 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.is-fleet-steps li span {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  font-size: 11px !important;
}
.is-fleet-steps li strong {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  line-height: 1.15 !important;
}
.is-fleet-banner {
  padding: clamp(12px, 2.5vw, 20px) !important;
  gap: 10px !important;
  align-items: flex-start !important;
}
.is-fleet-banner-copy h2 {
  font-size: clamp(15px, 4vw, 24px) !important;
  line-height: 1.2 !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
}
.is-fleet-banner-copy p {
  font-size: clamp(11px, 2.5vw, 13px) !important;
  line-height: 1.35 !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
}

/* Fix Hero Carousel Dots so they never look like a giant blurry pill on mobile */
.carousel-dots {
  position: absolute !important;
  z-index: 3 !important;
  bottom: 6px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  background: rgba(15, 23, 42, 0.35) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}
.carousel-dot,
.carousel-dot.active {
  width: 7px !important;
  min-width: 7px !important;
  height: 7px !important;
  min-height: 7px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.55) !important;
  transition: width 0.2s ease, background 0.2s ease !important;
}
.carousel-dot::after {
  display: none !important;
  content: none !important;
}
.carousel-dot.active {
  width: 18px !important;
  min-width: 18px !important;
  background: #ffffff !important;
}

/* === STRICT MOBILE VIEWPORT CONTAINMENT FOR SUBMENU ORDER PAGE (400347) === */
.is-fleet-order,
.is-fleet-order.is-premium-submenu-market {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

.is-fleet-hero,
.is-fleet-catalog,
.is-fleet-banner,
.submenu-order-banner-block,
.submenu-order-search-wrap,
.submenu-order-filter-bar,
.is-fleet-grid,
.is-fleet-card,
.is-fleet-body {
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.is-fleet-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

@media (min-width: 820px) {
  .is-fleet-grid {
    grid-template-columns: repeat(var(--fleet-desktop-cols, 3), minmax(0, 1fr)) !important;
    gap: var(--fleet-gap, 14px) !important;
  }
}

@media (max-width: 560px) {
  .is-fleet-catalog {
    padding: 10px !important;
  }
  .is-fleet-banner {
    padding: 12px !important;
    gap: 10px !important;
    border-radius: 18px !important;
  }
  .is-fleet-emblem {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
  }
  .is-fleet-banner-copy h2 {
    font-size: 16px !important;
    line-height: 1.2 !important;
  }
  .is-fleet-banner-copy p {
    font-size: 11.5px !important;
    line-height: 1.35 !important;
  }
  .is-fleet-card {
    border-radius: 16px !important;
  }
  .is-fleet-body {
    padding: 9px !important;
    gap: 4px !important;
  }
  .is-fleet-name {
    font-size: 13px !important;
    line-height: 1.2 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  .is-fleet-price {
    font-size: 13.5px !important;
  }
  .is-fleet-button {
    min-height: 34px !important;
    padding: 6px 9px !important;
    font-size: 10.5px !important;
    border-radius: 10px !important;
    white-space: nowrap !important;
  }
  .is-fleet-button span {
    font-size: 13px !important;
  }
}

/* === STYLE: css/navigation-ring.css === */
/* Shared bottom navigation ring across home, account, checkout and order pages. */
@property --istore-nav-ring-angle{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes istoreNavRingWalk{from{--istore-nav-ring-angle:0deg}to{--istore-nav-ring-angle:360deg}}
body .bottom-nav-shell{border:0!important;background:transparent!important;box-shadow:none!important;overflow:visible}
body .bottom-nav-shell .bottom-nav{
  border:3px solid transparent!important;
  border-radius:clamp(26px,3.5vw,40px);
  background:linear-gradient(var(--surface,#f8f7fc),var(--surface,#f8f7fc)) padding-box,
    conic-gradient(from var(--istore-nav-ring-angle),#7c3aed,#0ea5e9,#ec4899,#7c3aed) border-box!important;
  box-shadow:0 8px 25px rgba(85,48,150,.13),0 0 12px rgba(168,85,247,.15);
  animation:none; /* static purple rim avoids layout/main-thread custom-property animation */
}
html[data-theme="dark"] body .bottom-nav-shell .bottom-nav{
  background:linear-gradient(#0b1020,#0b1020) padding-box,
    conic-gradient(from var(--istore-nav-ring-angle),#bd86ff,#38bdf8,#f472b6,#bd86ff) border-box!important;
  box-shadow:0 10px 28px rgba(0,0,0,.30),0 0 12px rgba(168,85,247,.12);
}
@media(prefers-reduced-motion:reduce){body .bottom-nav-shell .bottom-nav{animation:none}}

/* === STYLE: css/customer-aurora.css === */
/* Customer Aurora polish — visual only. All existing storefront grids, ordering,
   transaction inputs, navigation, breakpoints and checkout flow stay unchanged. */
:root{
 --istore-aurora-purple:#6d28d9;
 --istore-aurora-violet:#8b5cf6;
 --istore-aurora-blue:#2563eb;
 --istore-aurora-cyan:#22d3ee;
 --istore-aurora-pink:#ec4899;
 --istore-aurora-ink:#11113b;
 --istore-aurora-shadow:0 12px 29px rgba(79,41,146,.095),0 3px 9px rgba(79,41,146,.035);
}
html:not([data-theme=dark]){
 --accent:#6d28d9;--accent-2:#8b5cf6;--premium-shadow:var(--istore-aurora-shadow);
 --surface-soft:#f5f3ff;--border:rgba(109,71,176,.12);
 --font-ui:"Plus Jakarta Sans",Inter,Manrope,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}
html:not([data-theme=dark]) body{
 background-image:radial-gradient(ellipse 45% 340px at 80% 0%,rgba(142,195,255,.16),transparent 90%),
                  radial-gradient(ellipse 45% 400px at 2% 48%,rgba(184,144,251,.10),transparent 90%),
                  linear-gradient(135deg,#f8f5ff,#f3f7ff 52%,#fff6fb);
 background-attachment:scroll;color:var(--ink,#191338)
}
/* Preserve geometry but replace old hard surface edges with refined materials. */
:where(.product-card,.product-result,.cart-card,.account-section,.account-hero,.checkout-card,.order-card-istorex,.is-premium-store,.is-premium-product,.category-menu-item,.category-submenu-item,.section-card,.product-detail-card,.address-account-card){
 border-color:rgba(128,104,179,.14);
 box-shadow:var(--istore-aurora-shadow)
}
:where(.product-card,.product-result,.cart-card,.account-section,.checkout-card,.is-premium-product){
 transition:box-shadow .22s ease,transform .22s ease,border-color .22s ease
}
@media(hover:hover){:where(.product-card,.is-premium-product,.product-result):hover{box-shadow:0 17px 34px rgba(93,51,166,.15);border-color:rgba(139,92,246,.28)}}
:where(.product-card,.cart-card,.account-section,.checkout-card,.address-account-card){border-radius:clamp(15px,2vw,24px)}
:where(.is-premium-store-cover,.account-hero,.orders-title-card){isolation:isolate}
:where(.is-premium-store-cover,.account-hero){position:relative;overflow:hidden}
:where(.is-premium-store-cover,.orders-title-card,.account-hero){background-image:linear-gradient(120deg,#581cbe,#9333ea 41%,#2563eb 79%,#06b6d4)}
:where(.is-premium-store-cover,.account-hero)::after{content:'';position:absolute;top:-78px;right:-82px;width:210px;height:210px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.21),transparent 70%);pointer-events:none}
:where(.is-premium-store,.is-premium-product){border-color:rgba(138,117,191,.14)}
:where(.is-premium-product,.product-card) img{object-fit:cover}
:where(.is-premium-store) h1,:where(.account-hero) h1{letter-spacing:-.045em}
:where(.is-premium-store-tabs a.is-active,.is-premium-section-head h2){color:var(--istore-aurora-purple)}
:where(.is-premium-store-tabs a.is-active)::after{background:linear-gradient(90deg,#8b5cf6,#22d3ee);border-radius:999px}
/* Colors and focus/interaction states only; no sizing or display overrides. */
:where(a,button,input,textarea,select,[role=button]):focus-visible{outline:3px solid #8b5cf6;outline-offset:3px}
:where(button,a,[role=button]){ -webkit-tap-highlight-color:transparent }
:where(.is-premium-toolbar,.cart-summary,.account-tools,.account-content,.order-list){color:inherit}
:where(.is-premium-product-body,.product-copy,.product-result){overflow-wrap:anywhere}
:where(.is-premium-product-placeholder,.product-image-placeholder){background:linear-gradient(130deg,#f2eaff,#e8f7ff)}
:where(.loading,.instant-boot-shell){color:#5e4b98}
html[data-theme=dark]{--istore-aurora-shadow:0 14px 32px rgba(0,0,0,.26)}
html[data-theme=dark] body{background-image:radial-gradient(circle at 70% 10%,rgba(78,52,138,.16),transparent 54%)}
html[data-theme=dark] :where(.product-card,.cart-card,.is-premium-product,.account-section){border-color:rgba(212,197,255,.15)}
@media(prefers-reduced-motion:reduce){:where(.product-card,.product-result,.cart-card,.account-section,.is-premium-product){transition:none!important;animation:none!important}}


/* Editorial grid headline system, applied to existing admin-managed headings. */
:where(.showcase-head,.ppob-popular .ppob-section-head,.priority-popular .ppob-section-head,.ppob-catalog-title,.ppob-catalog .ppob-catalog-heading,.section-title,.iv-section-head,.category-submenu-heading) h2,
:where(.showcase-head,.ppob-section-head,.iv-section-head) h2,
.section-title h2,.ppob-catalog-heading {
 font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:900;letter-spacing:-.045em;line-height:1.13;
 font-size:clamp(20px,3.4vw,32px);text-wrap:balance;
}
:where(.showcase-head,.ppob-section-head,.iv-section-head,.section-title) h2::after,
.ppob-catalog-heading::after {
 content:"";display:block;width:clamp(54px,10vw,110px);height:3px;border-radius:999px;margin-top:8px;
 background:linear-gradient(90deg,#7c3aed,#d875c8);
}
:where(.showcase-head,.ppob-section-head,.iv-section-head) p {font-size:clamp(11px,1.4vw,14px);line-height:1.5;color:var(--text-muted,#72688a)}

/* PPOB title + subtitle share the same editorial hierarchy as the new grid. */
.ppob-popular .ppob-title-copy h2,.priority-popular .ppob-title-copy h2 {font-family:'Bricolage Grotesque',system-ui,sans-serif!important;font-size:clamp(20px,3.4vw,31px)!important;font-weight:900!important;letter-spacing:-.045em!important;line-height:1.12!important;}
.ppob-popular .ppob-title-copy h2::after,.priority-popular .ppob-title-copy h2::after {content:'';display:block;height:3px;width:92px;margin:8px 0 0;background:linear-gradient(90deg,#773dee,#ec83c9);border-radius:8px}
.ppob-popular .ppob-title-copy p,.priority-popular .ppob-title-copy p {font-size:clamp(11px,1.4vw,14px);line-height:1.5}
.ppob-category-submenu-heading{font-family:'Bricolage Grotesque',system-ui,sans-serif!important;font-weight:900!important;letter-spacing:-.045em!important}
.price-effect{position:relative;display:inline-grid;grid-template-areas:"price";font-variant-numeric:tabular-nums;white-space:nowrap;vertical-align:baseline}
.price-effect-current,.price-effect-sizer{grid-area:price}
.price-effect-current{display:block;transform-origin:left center}
.price-effect-sizer{visibility:hidden;pointer-events:none}
.price-effect-pop .price-effect-current{animation:istore-price-pop .38s cubic-bezier(.2,.9,.2,1) both}
@keyframes istore-price-pop{0%{transform:translateY(0) scale(1)}45%{transform:translateY(-2px) scale(1.06)}100%{transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.price-effect-pop .price-effect-current{animation:none!important}}


/* === 2026-10-31 FINAL POLISH: DARK MODE, WHITE ICON OUTLINE ON PURPLE, SALES POPUP (401228), I-STORE GUARD (401230) === */

/* 1. Full Customer Dark Mode ("Mode Malam") */
html[data-theme="dark"] {
  --surface-solid: #111827 !important;
  --surface-soft: #090d16 !important;
  --surface: #131c2e !important;
  --ink: #f8fafc !important;
  --muted: #94a3b8 !important;
  --border: rgba(148, 163, 184, 0.18) !important;
  --elevation-1: 0 4px 16px rgba(0, 0, 0, 0.45) !important;
  --elevation-2: 0 12px 32px rgba(0, 0, 0, 0.55) !important;
  --elevation-3: 0 22px 54px rgba(0, 0, 0, 0.65) !important;
  background: #090d16 !important;
  background-color: #090d16 !important;
  color: #f8fafc !important;
}
html[data-theme="dark"] body,
html[data-theme="dark"] #app,
html[data-theme="dark"] #app > .market-header,
html[data-theme="dark"] .market-header {
  background: #090d16 !important;
  background-color: #090d16 !important;
  color: #f8fafc !important;
  border-color: rgba(148, 163, 184, 0.16) !important;
}
html[data-theme="dark"] .search-bar,
html[data-theme="dark"] .search-box,
html[data-theme="dark"] .address-pill,
html[data-theme="dark"] .header-icon-btn,
html[data-theme="dark"] .product-card,
html[data-theme="dark"] .is-fleet-card,
html[data-theme="dark"] .ppob-card,
html[data-theme="dark"] .priority-card,
html[data-theme="dark"] .partner-card,
html[data-theme="dark"] .bottom-nav,
html[data-theme="dark"] .section-card {
  background: #131c2e !important;
  background-color: #131c2e !important;
  color: #f8fafc !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
}
html[data-theme="dark"] #categoryTicker,
html[data-theme="dark"] .ticker-bar {
  background: #131c2e !important;
  border-color: rgba(148, 163, 184, 0.2) !important;
}
html[data-theme="dark"] #categoryTicker .ticker-track a,
html[data-theme="dark"] #categoryTicker .ticker-track span {
  color: #e2e8f0 !important;
}
html[data-theme="dark"] .category-item strong,
html[data-theme="dark"] .product-card h3,
html[data-theme="dark"] .product-card .product-title,
html[data-theme="dark"] .section-head h2,
html[data-theme="dark"] .address-copy strong {
  color: #f8fafc !important;
}

/* 2. Crisp White Outline on Every Icon Sitting on a Purple Background (401221.jpg) */
.bottom-item.active .icon,
.bottom-item.active svg,
.bottom-item.active img,
.floating-button.chat-float .icon,
.floating-button.chat-float svg,
.floating-button.chat-float img,
.floating-button .icon,
.floating-button svg,
button.primary .icon,
button.primary svg,
.btn-primary .icon,
.btn-primary svg,
.is-fleet-button .icon,
.is-fleet-button svg {
  filter: drop-shadow(0 0 1.6px #ffffff) drop-shadow(0 0 1.6px #ffffff) drop-shadow(0 2px 5px rgba(15, 23, 42, 0.42)) !important;
}

/* 3. Remove Blurry Category Placeholder & Tighten Vertical Rhythm (401219.jpg) */
.category-gif-placeholder,
.category-media-blank {
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}
.category-item .category-icon img {
  visibility: visible !important;
  opacity: 1 !important;
  object-fit: contain !important;
}

/* 4. Sales Notification Popup Matching Reference 401228.jpg */
.sales-popup {
  position: fixed !important;
  left: clamp(10px, 2.4vw, 18px) !important;
  right: auto !important;
  top: auto !important;
  bottom: calc(86px + env(safe-area-inset-bottom)) !important;
  z-index: 88 !important;
  width: min(330px, calc(100vw - 88px)) !important;
  max-width: calc(100vw - 88px) !important;
  min-height: 70px !important;
  max-height: 92px !important;
  padding: 10px 28px 14px 12px !important;
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) !important;
  gap: 11px !important;
  align-items: center !important;
  border-radius: 22px !important;
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid rgba(124, 58, 237, 0.16) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16) !important;
}
html[data-theme="dark"] .sales-popup {
  background: #161f33 !important;
  color: #f8fafc !important;
  border-color: rgba(139, 92, 246, 0.32) !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55) !important;
}
.sales-popup .sales-popup-image-link,
.sales-popup .sales-popup-product-image {
  width: 52px !important;
  height: 52px !important;
  max-width: 52px !important;
  max-height: 52px !important;
  border-radius: 14px !important;
  object-fit: cover !important;
  background: #f8fafc;
}
.sales-popup .sales-copy {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}
.sales-popup .sales-buyer-name {
  font-size: 13.5px !important;
  font-weight: 850 !important;
  color: #0f172a !important;
  line-height: 1.2 !important;
}
html[data-theme="dark"] .sales-popup .sales-buyer-name {
  color: #f8fafc !important;
}
.sales-popup .sales-product-line {
  display: block !important;
  font-size: 12px !important;
  line-height: 1.28 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.sales-popup .sales-verb {
  color: #64748b !important;
  font-weight: 500 !important;
}
html[data-theme="dark"] .sales-popup .sales-verb {
  color: #94a3b8 !important;
}
.sales-popup .sales-popup-prod-name {
  display: inline !important;
  color: #6d28d9 !important;
  font-weight: 850 !important;
  text-decoration: none !important;
}
html[data-theme="dark"] .sales-popup .sales-popup-prod-name {
  color: #a78bfa !important;
}
.sales-popup .sales-time-label {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #7c3aed !important;
  line-height: 1.2 !important;
}
html[data-theme="dark"] .sales-popup .sales-time-label {
  color: #c084fc !important;
}
.sales-popup .sales-progress {
  position: absolute !important;
  left: 14px !important;
  right: 14px !important;
  bottom: 4px !important;
  height: 3.5px !important;
  border-radius: 999px !important;
  background: rgba(124, 58, 237, 0.14) !important;
  overflow: hidden !important;
}
.sales-popup .sales-progress > i {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, #6d28d9, #8b5cf6) !important;
  transform-origin: left center !important;
  animation: salesCountdown var(--sales-visible, 6500ms) linear forwards !important;
}

/* 5. ISTORECYBERSHIELD I-STORE GUARD Verification Screen (Ref 401230.jpg) */
.istore-cybershield-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483645;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: radial-gradient(circle at 50% 24%, rgba(30, 58, 138, 0.88) 0%, rgba(9, 13, 22, 0.98) 68%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 1;
  transition: opacity 0.25s ease;
}
.istore-cybershield-overlay.is-closing {
  opacity: 0;
  pointer-events: none;
}
.istore-cybershield-card {
  width: min(390px, 100%);
  padding: 30px 24px 24px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(22, 31, 53, 0.96) 0%, rgba(15, 22, 38, 0.98) 100%);
  border: 1px solid rgba(56, 189, 248, 0.22);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.65), 0 0 40px rgba(37, 99, 235, 0.18);
  text-align: center;
  color: #f8fafc;
}
.istore-cybershield-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(56, 189, 248, 0.28);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.06em;
  color: #38bdf8;
  margin-bottom: 22px;
}
.istore-cybershield-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 10px #10b981;
}
.istore-cybershield-icon-box {
  width: 84px;
  height: 84px;
  margin: 0 auto 20px;
  border-radius: 24px;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(16, 185, 129, 0.28);
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 24px rgba(16, 185, 129, 0.12);
}
.istore-cybershield-check-circle {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, #34d399, #10b981);
  display: grid;
  place-items: center;
  box-shadow: 0 0 22px rgba(16, 185, 129, 0.55);
}
.istore-cybershield-title {
  margin: 0 0 8px;
  font-size: 21px;
  font-weight: 850;
  color: #ffffff;
  letter-spacing: -0.02em;
}
.istore-cybershield-subtitle {
  margin: 0 0 22px;
  font-size: 13.5px;
  color: #94a3b8;
}
.istore-cybershield-progress-track {
  width: 100%;
  height: 7px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.9);
  overflow: hidden;
  margin-bottom: 22px;
}
@keyframes istoreShieldProgress {
  0% { width: 12%; }
  100% { width: 100%; }
}
.istore-cybershield-progress-bar {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #8b5cf6 0%, #ec4899 50%, #06b6d4 100%);
  animation: istoreShieldProgress 1.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.istore-cybershield-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.istore-cybershield-meta-box {
  padding: 11px 12px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.78);
  border: 1px solid rgba(148, 163, 184, 0.14);
  text-align: left;
  display: grid;
  gap: 3px;
}
.istore-cybershield-meta-box small {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #64748b;
}
.istore-cybershield-meta-box strong {
  font-size: 13px;
  font-weight: 850;
  color: #e2e8f0;
}

/* === STYLE: css/promo-duo-unified.css === */
/* Unified PromoDuo; banner sourced from user-provided HTML; former ribbon rules removed. */
.duo3-shell{container-type:inline-size;isolation:isolate;position:relative;min-width:0;width:100%;overflow:hidden;background:#eceef7;color:#fff;border-radius:0 0 3.6cqw 3.6cqw;box-shadow:0 1.3cqw 3.5cqw #17102d2a}
.duo3-shell *{box-sizing:border-box}
.duo3-shell [hidden]{display:none!important}
.duo3-main{display:grid;grid-template-columns:minmax(0,var(--duo3-banner-width,39%)) minmax(0,1fr);aspect-ratio:1500/877;min-width:0;width:100%;overflow:hidden;background:#eceef7}
.duo3-shell.duo3-right-banner .duo3-banner{order:2}
.duo3-shell.duo3-right-banner .duo3-right{order:1}
.duo3-banner{min-width:0;min-height:0;position:relative;padding:0;overflow:hidden}
.duo3-banner .duo-main-carousel{width:100%;height:100%;position:relative;isolation:isolate;overflow:hidden;border-radius:2.2cqw;background:linear-gradient(#a6a8b0,#777986 30%,#292a39 65%,#1c1b27);box-shadow:0 1.4cqw 2.6cqw #2518364a}
.duo3-banner .duo-main-track{display:flex;height:100%;width:100%;transition:transform .42s ease}
.duo3-banner .duo-main-slide{position:relative;display:block;flex:0 0 100%;min-width:0;height:100%;overflow:hidden}
.duo3-banner .duo-main-slide>img{width:100%;height:100%;display:block;object-fit:var(--duo3-banner-fit,contain);object-position:center}
.duo3-slide-empty{background:radial-gradient(circle at 110% 4%,#bb73ab77 0 23%,transparent 23.5%),linear-gradient(#b4b2c2,#222235)}
.duo3-banner .duo-main-dots{position:absolute;z-index:5;bottom:1.4cqw;left:50%;display:flex;gap:0;transform:translateX(-50%);background:#fff;border-radius:99px}
.duo3-banner .duo-main-dot{width:2cqw;height:.8cqw;min-width:5px;min-height:3px;padding:0;border:0;border-radius:99px;background:#fff;cursor:pointer}
.duo3-banner .duo-main-dot.active{width:4.8cqw;background:#7546ed}
.duo3-banner-caption{position:absolute;inset:0;z-index:3;pointer-events:none;display:flex;align-items:start;justify-content:end;flex-direction:column;gap:.55cqw;padding:0 4.2cqw 7cqw 4.7cqw;color:#fff;text-shadow:0 .16cqw .5cqw #0e0b19}
.duo3-banner-caption>small{position:absolute;top:12.2cqw;left:4.7cqw;padding:.5cqw 1.3cqw;border-radius:99px;background:linear-gradient(90deg,#f44725,#ff6329);font-size:1.4cqw;font-weight:900}
.duo3-banner-caption h2{max-width:100%;margin:0;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:3cqw;line-height:1.07;font-weight:900}
.duo3-banner-caption p{margin:0;max-width:100%;font-size:1.3cqw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.duo3-banner-cta{pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;min-height:3.4cqw;padding:.4cqw 1.6cqw;border-radius:99px;color:#e45723!important;background:#fff;font-size:1.25cqw;font-weight:900;text-decoration:none}
.duo3-hero-decor{position:absolute;top:32%;left:12%;opacity:.25;font-size:4cqw;transform:rotate(-16deg)}
.duo3-right{display:grid;min-width:0;min-height:0;overflow:hidden;color:#1f1732;background:#fff;border-radius:4.2cqw 0 0 0}

.duo3-voucher-empty{display:grid;place-items:center;min-width:0;min-height:0;padding:.8cqw;font-size:clamp(7px,1.35cqw,15px);font-weight:750;text-align:center;color:#4e4367}
.duo3-voucher-title{grid-row:3;display:flex;align-items:center;justify-content:space-evenly;gap:.5cqw;min-width:0;min-height:0;overflow:hidden;white-space:nowrap;background:linear-gradient(90deg,#7130e6,#8c3cda,#dc398f);background-size:200% 100%;color:#fff;font-size:clamp(8px,2.22cqw,28px);font-weight:900;animation:duoFlow 6s linear infinite alternate}
.duo3-voucher-rail{grid-row:4;display:flex;min-width:0;min-height:0;height:100%;width:100%;padding:0!important;gap:0;align-items:stretch;overflow:auto hidden;scroll-snap-type:x mandatory;background:#fff}
.duo3-voucher-rail>.duo-voucher-svg-card{position:relative;flex:0 0 50%;width:50%;height:100%;min-width:0;max-width:none;overflow:hidden;scroll-snap-align:start;border-radius:0;background:#fff}
.duo3-voucher-rail>.duo-voucher-svg-card:only-child{flex-basis:100%;width:100%}
.duo3-voucher-rail>.duo-voucher-svg-card>svg{display:block;width:100%;height:100%;max-height:100%;overflow:visible}
.duo3-voucher-rail .nusa-voucher-action-hit,.duo3-voucher-rail .nusa-voucher-terms-hit{min-width:0;min-height:0}
.duo3-footer{position:relative;height:3.73cqw;min-height:0;border-radius:0 0 3.6cqw 3.6cqw;background:linear-gradient(100deg,#090d20,#17112d 30%,#211236 54%,#271430 76%,#0e1022);box-shadow:inset 0 .2cqw 0 #cf9dff77,inset 0 -.2cqw 0 #8358c5}
.duo3-footer::after{content:"";position:absolute;left:5%;right:5%;top:36%;height:1px;background:linear-gradient(90deg,transparent,#d5a0fa88,transparent)}

section#categoryPromoDuo:has(.duo3-shell){padding:0;border:0;background:transparent}
.ppob-home>.duo3-shell,.ppob-category-feature-stack .duo3-shell{width:100%;margin:0 0 16px}

@media (prefers-reduced-motion:reduce) {.duo3-shell *, .duo3-shell *::before,.duo3-shell *::after{animation:none!important;transition:none!important}}

.duo3-voucher-title{position:relative;display:flex;justify-content:center;align-items:center;gap:4%;overflow:hidden;min-width:0;min-height:0;white-space:nowrap;background:linear-gradient(90deg,#6a2cf5,#b72bd6 45%,#ff2f7a 100%);background-size:200% 100%;animation:duoVoucherFlow 6s linear infinite alternate;color:#fff;font-size:clamp(8px,2.22cqw,28px);font-weight:900}
.duo3-voucher-title::after{content:"";position:absolute;top:0;bottom:0;width:13.6%;left:-18%;background:linear-gradient(100deg,transparent,#ffffff80,transparent);transform:skewX(-20deg);animation:duoVoucherSweep 3.5s ease-in-out infinite;pointer-events:none}
.duo3-voucher-title>strong{position:relative;z-index:1;white-space:nowrap;text-shadow:0 .14cqw .35cqw #3c006d73;font-weight:900}
.duo3-voucher-conf{position:relative;z-index:1;display:inline-block;font-size:clamp(7px,1.87cqw,26px);line-height:1;animation:duoVoucherConf 3s ease-in-out infinite}
@keyframes duoVoucherFlow{to{background-position:100% 0}}
@keyframes duoVoucherSweep{0%{left:-18%}60%,100%{left:105%}}
@keyframes duoVoucherConf{0%,100%{transform:translateY(0) rotate(0) scale(1)}50%{transform:translateY(-.42cqw) rotate(25deg) scale(1.2)}}

@media (prefers-reduced-motion:reduce) {.duo3-shell *, .duo3-shell *::before,.duo3-shell *::after{animation:none!important;transition:none!important}}

.duo3-voucher-title{position:relative;display:flex;justify-content:center;align-items:center;gap:4%;overflow:hidden;min-width:0;min-height:0;padding:0 .55cqw;border-radius:.78cqw .78cqw .28cqw .28cqw;background:linear-gradient(90deg,#6a2cf5,#b72bd6 45%,#ff2f7a 100%);background-size:200% 100%;animation:duoVoucherFlow 6s linear infinite alternate;color:#fff;font-size:clamp(8px,2.18cqw,27px);font-weight:900;box-shadow:inset 0 .08cqw 0 rgba(255,255,255,.34)}
.duo3-voucher-title::before{content:"";position:absolute;inset:.1cqw .32cqw auto .32cqw;height:.24cqw;border-radius:99px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.58),transparent);pointer-events:none}
.duo3-voucher-title::after{content:"";position:absolute;top:0;bottom:0;width:13.6%;left:-18%;background:linear-gradient(100deg,transparent,#ffffff80,transparent);transform:skewX(-20deg);animation:duoVoucherSweep 3.5s ease-in-out infinite;pointer-events:none}

@media (max-width:520px) {.duo3-feature-top::before{width:78%}
.duo3-product{gap:.2cqw}
.duo3-small-products{gap:.72cqw}}

/* Animated GIF has a genuine transparent palette: no dark container behind it. */


.duo3-right {background:transparent;}
/* Source HTML 1500x190 is scaled with ResizeObserver, preserving every coordinate. */
.duo7-stage {--display: "Anton", Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; --body: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;position:relative;display:block;width:100%;aspect-ratio:1500 / 190;overflow:hidden;isolation:isolate;background:transparent;}
.duo7-canvas {position:absolute;left:0;top:0;width:1500px;height:190px;transform-origin:0 0;transform:scale(.26);overflow:hidden;border-radius:0 0 54px 54px;}
.duo7-stage *, .duo7-stage *::before,.duo7-stage *::after {box-sizing:border-box;}

.duo7-stage .banner { position: absolute; left: 0; top: 0; width: 1500px; height: 190px; overflow: hidden;
  background:
    radial-gradient(ellipse 300px 120px at 8% 36%, rgba(255,42,102,.14), transparent 78%),
    radial-gradient(ellipse 300px 120px at 92% 36%, rgba(255,62,120,.14), transparent 78%),
    radial-gradient(ellipse 420px 135px at 50% 48%, rgba(102,53,212,.22), transparent 76%),
    linear-gradient(100deg, #090d20 0%, #17112d 30%, #211236 54%, #271430 76%, #0e1022 100%);
  box-shadow: inset 0 -10px 24px rgba(104,36,190,.10); }
.duo7-stage .banner::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.035) 0%, transparent 50%, rgba(8,6,27,.26) 100%); }
.duo7-stage .banner .glow { position: absolute; inset: 0; background: radial-gradient(ellipse 340px 88px at 50% 52%, rgba(112,65,225,.18), transparent 80%); animation: duo7-breathe 4.6s ease-in-out infinite; pointer-events: none; }
.duo7-stage .banner .flash { position: absolute; inset: 0; background: #fff; opacity: 0; animation: duo7-screenflash 9s infinite; mix-blend-mode: screen; pointer-events: none; }
@keyframes duo7-breathe { 0%,100% { opacity: .35; } 50% { opacity: .9; } }
@keyframes duo7-screenflash { 0%,100% { opacity: 0; } 2% { opacity: .85; } 4% { opacity: 0; } 6% { opacity: .6; } 9% { opacity: 0; } 52% { opacity: 0; } 53% { opacity: .7; } 56% { opacity: 0; } }
.duo7-stage .bolts { position: absolute; inset: 0; width: 1500px; height: 190px; overflow: visible; }
.duo7-stage .bolts .b { opacity: 0; }
.duo7-stage .bolts .halo { stroke: #7449b5; stroke-width: 7; fill: none; filter: url(#blur); stroke-linejoin: round; }
.duo7-stage .bolts .core { stroke: #ddc8ff; stroke-width: 2.2; fill: none; stroke-linejoin: round; }
.duo7-stage .bolts .b1 { animation: duo7-flick 3.4s .1s infinite; }
.duo7-stage .bolts .b2 { animation: duo7-flick 4.1s 1.2s infinite; }
.duo7-stage .bolts .b3 { animation: duo7-flick 3.7s .6s infinite; }
.duo7-stage .bolts .b4 { animation: duo7-flick 4.6s 2.1s infinite; }
.duo7-stage .bolts .b5 { animation: duo7-flick 2.9s 1.7s infinite; }
.duo7-stage .bolts .b6 { animation: duo7-flick 3.3s .9s infinite; }
.duo7-stage .bolts .b7 { animation: duo7-flick 5.1s 2.6s infinite; }
@keyframes duo7-flick { 0%,100% { opacity: 0; } 3% { opacity: 1; } 5% { opacity: .15; } 7% { opacity: 1; } 11% { opacity: 0; } 60% { opacity: 0; } 62% { opacity: .9; } 64% { opacity: 0; } }
.duo7-stage .chev { position: absolute; top: 20px; width: 122px; height: 28px; filter: drop-shadow(0 0 7px rgba(186,132,255,.34)); }
.duo7-stage .chev.l { left: 292px; }
.duo7-stage .chev.r { left: 1086px; }
.duo7-stage .chev polyline { fill: none; stroke: #e2d2ff; stroke-width: 6; stroke-linecap: square; stroke-linejoin: miter; animation: duo7-chev 1.05s infinite; opacity: .22; }
.duo7-stage .chev polyline.back { stroke: #7f56cf; stroke-width: 11; opacity: .16; }
.duo7-stage .chev polyline:nth-child(3) { animation-delay: .12s; }
.duo7-stage .chev polyline:nth-child(4) { animation-delay: .24s; }
.duo7-stage .chev polyline:nth-child(7) { animation-delay: .36s; }
.duo7-stage .chev polyline:nth-child(8) { animation-delay: .48s; }
.duo7-stage .chev.r polyline:nth-child(1), .duo7-stage .chev.r polyline:nth-child(2) { animation-delay: .48s; }
.duo7-stage .chev.r polyline:nth-child(3), .duo7-stage .chev.r polyline:nth-child(4) { animation-delay: .36s; }
.duo7-stage .chev.r polyline:nth-child(5), .duo7-stage .chev.r polyline:nth-child(6) { animation-delay: .24s; }
.duo7-stage .chev.r polyline:nth-child(7), .duo7-stage .chev.r polyline:nth-child(8) { animation-delay: .12s; }
@keyframes duo7-chev { 0%,100% { opacity: .18; transform: translateX(0) scale(1); } 45% { opacity: 1; transform: translateX(1px) scale(1.08); } }
.duo7-stage .head-plate { position: absolute; top: 39px; height: 111px; border-radius: 26px; z-index: 0;
  background: linear-gradient(180deg, rgba(6,8,28,.42), rgba(8,8,30,.16));
  box-shadow: inset 0 1px 0 rgba(239,225,255,.06), 0 8px 22px rgba(0,0,0,.16); }
.duo7-stage .plate-v { left: 182px; width: 332px; }
.duo7-stage .plate-p { left: 993px; width: 329px; }
.duo7-stage .deal-shadow { position: absolute; left: 525px; top: 8px; width: 450px; height: 164px; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(40,17,90,.42), transparent 72%); }
.duo7-stage .word { position: absolute; display: block; overflow: visible; transform: skewX(-8deg); }
.duo7-stage .word text { font-family: var(--display); font-weight: 900; paint-order: stroke fill; stroke-linejoin: round; fill: #fff; stroke-width: 9; }
.duo7-stage .word.v { left: 188px; top: 52px; width: 322px; height: 98px; filter: drop-shadow(0 4px 0 #150826) drop-shadow(0 0 10px rgba(170,130,255,.72)); animation: duo7-wordpulse 2.4s ease-in-out infinite; }
.duo7-stage .word.v text { stroke: #2f1d95; fill: #ffffff; }
.duo7-stage .word.p { left: 998px; top: 52px; width: 322px; height: 98px; filter: drop-shadow(0 4px 0 #3f0829) drop-shadow(0 0 10px rgba(255,150,210,.72)); animation: duo7-wordpulse 2.4s .6s ease-in-out infinite; }
.duo7-stage .word.p text { stroke: #a8147a; fill: #fffafc; }
@keyframes duo7-wordpulse { 0%,100% { transform: skewX(-8deg) scale(1); } 50% { transform: skewX(-8deg) scale(1.03); } }
.duo7-stage .sek { position: absolute; left: 580px; top: 12px; width: 340px; height: 78px; overflow: visible; filter: drop-shadow(0 3px 0 #5b2105) drop-shadow(0 0 9px rgba(255,156,22,.46)); animation: duo7-sekbounce 1.8s ease-in-out infinite; }
.duo7-stage .sek text { font-family: var(--display); font-weight: 900; stroke: #5b2105; stroke-width: 4; paint-order: stroke fill; stroke-linejoin: round; }
.duo7-stage .sek .drip { fill: #ffa000; transform-box: fill-box; transform-origin: 50% 0; animation: duo7-drip 2.4s ease-in infinite; }
@keyframes duo7-sekbounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(2px); } }
@keyframes duo7-drip { 0% { transform: scaleY(.2); opacity: 1; } 70% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1.2); opacity: 0; } }
.duo7-stage .pill { position: absolute; left: 545px; top: 94px; width: 410px; height: 64px; border-radius: 26px; display: flex; align-items: center; justify-content: center; gap: 12px; overflow: hidden;
  background: linear-gradient(#301253, #110b25); border: 3px solid #d694ff; box-shadow: 0 0 0 3px #150826, 0 0 16px rgba(181,96,255,.64), inset 0 0 14px rgba(129,71,239,.34); animation: duo7-pillglow 2s ease-in-out infinite; }
.duo7-stage .pill::after { content: ""; position: absolute; top: 0; bottom: 0; width: 70px; left: -90px; background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); animation: duo7-sweep 3.2s ease-in-out infinite; }
@keyframes duo7-sweep { 0% { left: -90px; } 55%,100% { left: 480px; } }
@keyframes duo7-pillglow { 0%,100% { box-shadow: 0 0 0 3px #150826, 0 0 14px rgba(179,99,255,.48), inset 0 0 12px rgba(124,79,206,.25); } 50% { box-shadow: 0 0 0 3px #150826, 0 0 23px rgba(202,119,255,.80), inset 0 0 21px rgba(144,90,252,.40); } }
.duo7-stage .pill svg { width: 240px; height: 48px; position: relative; z-index: 1; overflow: visible; }
.duo7-stage .pill svg text { font-family: var(--body); font-weight: 900; font-style: italic; fill: #fff; stroke: #0e0430; stroke-width: 4; paint-order: stroke fill; stroke-linejoin: round; }
.duo7-stage .pill .zap { font-size: 38px; filter: drop-shadow(0 0 8px #ffd400); animation: duo7-zap .9s steps(2, jump-none) infinite; position: relative; z-index: 1; line-height: 1; }
.duo7-stage .pill .zap.b { animation-delay: .45s; }
@keyframes duo7-zap { 0% { transform: scale(1) rotate(-6deg); opacity: 1; } 50% { transform: scale(1.2) rotate(6deg); opacity: .6; } 100% { transform: scale(1) rotate(-6deg); opacity: 1; } }
.duo7-stage .spider { position: absolute; top: 0; width: 0; height: 0; transform-origin: 0 0; animation: duo7-swing 3.4s ease-in-out infinite alternate; }
.duo7-stage .spider::before { content: ""; position: absolute; left: -1px; top: 0; width: 2px; height: var(--len, 40px); background: rgba(255,255,255,.65); }
.duo7-stage .spider span { position: absolute; left: -12px; top: calc(var(--len, 40px) - 4px); font-size: 24px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
@keyframes duo7-swing { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
.duo7-stage .siren { position: absolute; top: 12px; width: 150px; height: 146px; }
.duo7-stage .siren.l { left: 18px; }
.duo7-stage .siren.r { right: 18px; transform: scaleX(-1); }
.duo7-stage .siren .lamp-glow { position: absolute; left: 50%; top: 47%; width: 190px; height: 190px; margin: -95px 0 0 -95px; border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255,255,255,.97) 0, rgba(255,84,84,.82) 13%, rgba(255,44,68,.28) 30%, transparent 56%);
  animation: duo7-lampglow 1s ease-in-out infinite; }
.duo7-stage .siren svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.duo7-stage .siren .rays { transform-origin: 90px 85px; animation: duo7-lamprays 1s ease-in-out infinite; }
.duo7-stage .siren .dome { animation: duo7-lampdome 1s ease-in-out infinite; }
.duo7-stage .siren .core { transform-origin: 90px 84px; animation: duo7-lampcore 1s ease-in-out infinite; }
.duo7-stage .siren.r .lamp-glow, .duo7-stage .siren.r .rays, .duo7-stage .siren.r .dome, .duo7-stage .siren.r .core { animation-delay: -.5s; }
@keyframes duo7-lampglow { 0%,100% { opacity: .96; transform: scale(.92); } 50% { opacity: .24; transform: scale(.72); } }
@keyframes duo7-lamprays { 0%,100% { opacity: .94; transform: scale(.98); } 50% { opacity: .10; transform: scale(.68); } }
@keyframes duo7-lampdome { 0%,100% { filter: brightness(1.45) drop-shadow(0 0 14px #ff4a4a); } 50% { filter: brightness(.8) drop-shadow(0 0 2px #ff2a2a); } }
@keyframes duo7-lampcore { 0%,100% { opacity: 1; transform: scale(1.2); } 50% { opacity: .25; transform: scale(.75); } }
@media (prefers-reduced-motion: reduce) {.duo7-stage .bolts .b { opacity: .85; }}

/* The Flash Sale GIF is transparent; the visible letters retain contrast without a background block. */


/* V7 Flash Sale geometry ported from user-uploaded 882x550 HTML. */
.duo8-stage {grid-row:1/span 2;position:relative;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden;background:transparent;isolation:isolate;}
.duo8-panel {position:absolute;left:0;top:0;width:882px;height:550px;transform-origin:top left;overflow:hidden;border-radius:18px;background:transparent;color:#1f1732;}
.duo8-panel *, .duo8-panel *::before, .duo8-panel *::after{box-sizing:border-box;}
.duo8-panel [hidden]{display:none!important;}

.duo8-fs-head { position: absolute; left: 0; top: 2px; width: 882px; height: 92px; display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 0 10px; }
.duo8-fs-title, .duo8-fs-bolt { display: none; }
.duo8-alarm { position: relative; left: auto; top: auto; width: 78px; height: 78px; flex: none; transform-origin: 50% 90%; animation: duo8-ring 2.6s ease-in-out infinite; filter: drop-shadow(0 4px 6px rgba(200,0,40,.35)); }
@keyframes duo8-ring { 0%,60%,100% { transform: rotate(0); } 64% { transform: rotate(-14deg); } 68% { transform: rotate(13deg); } 72% { transform: rotate(-11deg); } 76% { transform: rotate(10deg); } 80% { transform: rotate(-6deg); } 84% { transform: rotate(4deg); } }
.duo8-timer { position: relative; left: auto; top: auto; width: 142px; height: 58px; border-radius: 29px; background: linear-gradient(#7a3cff, #5a1fe0); color: #fff; font-weight: 900; font-size: 38px; display: flex; align-items: center; justify-content: center; letter-spacing: 1px; box-shadow: 0 6px 14px rgba(90,31,224,.4); animation: duo8-timerpulse 1s ease-in-out infinite; font-variant-numeric: tabular-nums; }
@keyframes duo8-timerpulse { 0%,100% { box-shadow: 0 6px 14px rgba(90,31,224,.4); } 50% { box-shadow: 0 6px 24px rgba(255,60,120,.7); } }

.duo8-fs-grid { position: absolute; left: 0; top: 96px; width: 882px; height: 445px; display: grid; grid-template-columns: 328px 262px 262px; gap: 12px; padding: 0 6px 0 0; background: #f4f4fb; }

.duo8-card { position: relative; border-radius: 22px; overflow: hidden; transition: transform .25s; }
.duo8-card:hover { transform: translateY(-6px); }
.duo8-fire { display: inline-block; font-size: 1.15em; transform-origin: 50% 100%; animation: duo8-fire .5s ease-in-out infinite alternate; }
@keyframes duo8-fire { from { transform: scale(.9) rotate(-8deg); } to { transform: scale(1.2) rotate(8deg); } }

/* ===== Kartu utama 10.10 (tanggal kembar) ===== */
.duo8-card.duo8-feat { background: linear-gradient(170deg, #8a45ff, #5a1fe8 62%, #3f10b8); animation: duo8-featglow 2.2s ease-in-out infinite; }
@keyframes duo8-featglow { 0%,100% { box-shadow: 0 0 0 0 rgba(122,60,255,.55); } 50% { box-shadow: 0 0 26px 6px rgba(255,80,170,.55); } }
.duo8-card.duo8-feat::before { content: ""; position: absolute; top: -20%; bottom: -20%; width: 60px; left: -100px; transform: rotate(18deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); animation: duo8-sweep3 3.6s ease-in-out infinite; z-index: 6; pointer-events: none; }
@keyframes duo8-sweep3 { 0% { left: -100px; } 55%,100% { left: 420px; } }

.duo8-feat .duo8-sunburst { position: absolute; left: 50%; top: 72px; width: 320px; height: 320px; margin: -160px 0 0 -160px; border-radius: 50%; z-index: 0;
  background: repeating-conic-gradient(from 0deg, rgba(255,226,110,.6) 0 7deg, transparent 7deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 0, transparent 60%); mask: radial-gradient(circle, #000 0, transparent 60%);
  animation: duo8-sunspin 30s linear infinite, duo8-sunpulse 2.2s ease-in-out infinite; }
@keyframes duo8-sunspin { to { transform: rotate(360deg); } }
@keyframes duo8-sunpulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

.duo8-feat .duo8-fw { position: absolute; width: 96px; height: 96px; border-radius: 50%; z-index: 1; opacity: 0;
  background: repeating-conic-gradient(from 0deg, var(--c) 0 5deg, transparent 5deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 0 26%, #000 30% 62%, transparent 66%); mask: radial-gradient(circle, transparent 0 26%, #000 30% 62%, transparent 66%);
  animation: duo8-fw 2.6s ease-out infinite; }
@keyframes duo8-fw { 0% { transform: scale(.15); opacity: 0; } 15% { opacity: 1; } 100% { transform: scale(1.15); opacity: 0; } }

.duo8-feat .duo8-confetti { position: absolute; left: 0; right: 0; top: 0; height: 150px; overflow: hidden; z-index: 1; pointer-events: none; }
.duo8-feat .duo8-confetti i { position: absolute; top: -16px; left: var(--x); width: 8px; height: 14px; border-radius: 2px; background: var(--c); opacity: 0; animation: duo8-fall var(--d) linear infinite; animation-delay: var(--dl); }
@keyframes duo8-fall { 0% { transform: translateY(0) rotate(0); opacity: 0; } 10% { opacity: 1; } 75% { opacity: 1; } 100% { transform: translateY(160px) rotate(540deg); opacity: 0; } }

.duo8-feat .duo8-cal { position: absolute; left: 0; top: 0; width: 328px; height: 144px; z-index: 3; }
.duo8-feat .duo8-cal svg { position: absolute; left: 14px; top: 4px; width: 300px; height: 136px; overflow: visible; animation: duo8-calbob 2.4s ease-in-out infinite;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.45)) drop-shadow(0 0 18px rgba(255,200,60,.85)); }
@keyframes duo8-calbob { 0%,100% { transform: translateY(0) rotate(-1.5deg) scale(1); } 50% { transform: translateY(-6px) rotate(1.5deg) scale(1.03); } }
.duo8-cal text { font-family: var(--display); font-weight: 900; paint-order: stroke fill; stroke-linejoin: round; }
.duo8-cal .duo8-num { fill: url(#numG); stroke: #7a2b00; stroke-width: 6; transform-box: fill-box; transform-origin: 50% 60%; animation: duo8-numpop 1.2s ease-in-out infinite; }
@keyframes duo8-numpop { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.duo8-cal .duo8-rim { fill: none; stroke: #ffd23f; stroke-width: 3; animation: duo8-rim 1s steps(2, jump-none) infinite; }
@keyframes duo8-rim { 0% { opacity: 1; } 50% { opacity: .25; } 100% { opacity: 1; } }
.duo8-cal .duo8-shine { animation: duo8-shinemove 2.6s ease-in-out infinite; transform: skewX(-20deg); }
@keyframes duo8-shinemove { 0% { transform: skewX(-20deg) translateX(0); } 60%,100% { transform: skewX(-20deg) translateX(400px); } }
.duo8-cal .duo8-sp { transform-box: fill-box; transform-origin: center; animation: duo8-spark 1.4s ease-in-out infinite; }
.duo8-cal .sp2 { animation-delay: .35s; } .duo8-cal .sp3 { animation-delay: .7s; } .duo8-cal .sp4 { animation-delay: 1.05s; } .duo8-cal .sp5 { animation-delay: .5s; }
@keyframes duo8-spark { 0%,100% { transform: scale(.3) rotate(0); opacity: .2; } 50% { transform: scale(1.3) rotate(45deg); opacity: 1; } }
.duo8-feat .duo8-party { position: absolute; z-index: 4; line-height: 1; filter: drop-shadow(0 4px 4px rgba(0,0,0,.35)); }
.duo8-feat .duo8-party.duo8-gift { left: 6px; top: 84px; font-size: 46px; transform-origin: 50% 100%; animation: duo8-gift 1.6s ease-in-out infinite; }
.duo8-feat .duo8-party.duo8-pop { right: 8px; top: 76px; font-size: 42px; transform-origin: 50% 100%; animation: duo8-gift 1.3s .3s ease-in-out infinite; }
.duo8-feat .duo8-party.duo8-coin { right: 20px; top: 8px; font-size: 30px; animation: duo8-coinfloat 2s ease-in-out infinite; }
.duo8-feat .duo8-party.duo8-coin2 { left: 18px; top: 10px; font-size: 28px; animation: duo8-coinfloat 2.3s .6s ease-in-out infinite; }
@keyframes duo8-gift { 0%,100% { transform: rotate(-9deg) scale(1); } 50% { transform: rotate(9deg) scale(1.15); } }
@keyframes duo8-coinfloat { 0%,100% { transform: translateY(0) rotate(-10deg); } 50% { transform: translateY(-9px) rotate(14deg); } }

.duo8-star { position: absolute; color: #ffd400; font-size: 24px; animation: duo8-twinkle 1.4s ease-in-out infinite; z-index: 3; filter: drop-shadow(0 0 5px #ffd400); }
@keyframes duo8-twinkle { 0%,100% { transform: scale(.4) rotate(0); opacity: .3; } 50% { transform: scale(1.2) rotate(45deg); opacity: 1; } }
.duo8-whitebox { position: absolute; left: 69px; top: 150px; width: 190px; height: 164px; border-radius: 22px; background: #fff; box-shadow: 0 10px 22px rgba(20,0,80,.35); display: grid; place-items: center; z-index: 2; }
.duo8-emoji { line-height: 1; animation: duo8-emojibob 3s ease-in-out infinite; filter: drop-shadow(0 8px 6px rgba(0,0,0,.12)); }
.duo8-whitebox .duo8-emoji { font-size: 86px; }
@keyframes duo8-emojibob { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-9px) rotate(4deg); } }
.duo8-feat .duo8-price { position: absolute; left: 0; right: 0; top: 324px; text-align: center; font-weight: 900; font-size: 40px; color: #fff; z-index: 2; animation: duo8-pricepop 1.6s ease-in-out infinite; }
.duo8-feat .duo8-price .duo8-q { display: inline-block; color: #ffe83a; text-shadow: 0 0 12px rgba(255,232,58,.95); animation: duo8-qpulse 1.2s ease-in-out infinite; }
@keyframes duo8-qpulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.35); } }
@keyframes duo8-pricepop { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.duo8-feat .duo8-only { position: absolute; left: 10px; right: 10px; bottom: 10px; height: 48px; border-radius: 24px; background: #fff; color: #ee1c3a; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 29px; letter-spacing: .3px; white-space: nowrap; z-index: 2; animation: duo8-onlyglow 1.4s ease-in-out infinite; }
@keyframes duo8-onlyglow { 0%,100% { box-shadow: 0 0 0 rgba(255,255,255,0); } 50% { box-shadow: 0 0 20px rgba(255,255,255,.95); } }

/* kartu produk */
.duo8-card.duo8-reg { background: #fff; box-shadow: 0 2px 8px rgba(70,40,160,.1); }
.duo8-card.duo8-reg .duo8-media { position: absolute; left: 8px; top: 6px; width: 246px; height: 256px; border-radius: 18px; background: linear-gradient(180deg, #f5f5fa, #eceef6); overflow: hidden; display: grid; place-items: center; }
.duo8-card.duo8-reg .duo8-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,.7) 50%, transparent 60%); background-size: 250% 100%; animation: duo8-shimmer 4s ease-in-out infinite; }
@keyframes duo8-shimmer { 0% { background-position: 130% 0; } 60%,100% { background-position: -80% 0; } }
.duo8-card.duo8-reg:nth-child(3) .duo8-media::after { animation-delay: .8s; }
.duo8-card.duo8-reg .duo8-emoji { font-size: 96px; position: relative; z-index: 1; margin-top: 16px; }
.duo8-card.duo8-reg:nth-child(3) .duo8-emoji { animation-delay: -1.2s; }
.duo8-disc { position: absolute; right: 8px; top: 8px; z-index: 2; width: 114px; height: 38px; border-radius: 19px; background: #ffe83a; display: flex; align-items: center; justify-content: center; gap: 3px; padding: 0 8px 0 6px; font-weight: 900; font-size: 24px; color: #ff1f1f; animation: duo8-discpop 1.4s ease-in-out infinite; white-space: nowrap; }
.duo8-disc .duo8-mini-alarm { width: 24px; height: 24px; flex: none; animation: duo8-discring 2s ease-in-out infinite; transform-origin: 50% 80%; }
@keyframes duo8-discpop { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes duo8-discring { 0%,70%,100% { transform: rotate(0); } 75% { transform: rotate(-16deg); } 82% { transform: rotate(14deg); } 90% { transform: rotate(-8deg); } }
.duo8-nm { position: absolute; left: 8px; right: 8px; top: 268px; height: 68px; display: flex; align-items: center; justify-content: center; text-align: center; font-weight: 800; font-size: 26px; line-height: 1.15; color: #5a1fe0; }
.duo8-card.duo8-reg .duo8-price { position: absolute; left: 0; right: 0; top: 338px; height: 46px; text-align: center; font-weight: 900; font-size: 38px; color: #f0142f; animation: duo8-pricepop 2.2s ease-in-out infinite; }
.duo8-limited { position: absolute; left: 8px; right: 8px; bottom: 9px; height: 44px; border-radius: 22px; background: linear-gradient(#7a3cff, #5a1fe0); border: 3px solid #fff; box-shadow: 0 0 0 2px #4b17b5; display: flex; align-items: center; justify-content: center; gap: 5px; color: #fff; font-weight: 900; font-size: 22px; letter-spacing: .2px; white-space: nowrap; text-shadow: 0 1px 3px rgba(20,0,80,.8); animation: duo8-limited 1.8s ease-in-out infinite; }
@keyframes duo8-limited { 0%,100% { box-shadow: 0 0 0 2px #4b17b5, 0 0 0 rgba(255,100,60,0); } 50% { box-shadow: 0 0 0 2px #4b17b5, 0 0 16px rgba(255,100,60,.9); } }

/* Admin-fed images, i-Store Mall ORI SVG, and cards in original HTML positions. */
.duo8-fs-head{justify-content:space-between;gap:12px;background:transparent;}
.duo8-flash-gif{width:340px;height:84px;object-fit:contain;object-position:left center;background:transparent;flex:0 0 340px;}
.duo8-clock-group{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-left:auto;flex:0 0 auto}
.duo8-clock-group .promoduo-timer{position:relative;left:auto;top:auto;width:142px;height:58px;border-radius:29px;background:linear-gradient(#7a3cff,#5a1fe0);color:#fff;display:grid;place-items:center;box-shadow:0 6px 14px #5a1fe066;animation:duo8-timerpulse 1s ease-in-out infinite}
.duo8-clock-group .duo-timer-text{font-size:38px;font-weight:900;letter-spacing:.5px;font-variant-numeric:tabular-nums}
.duo8-fs-grid{background:#f4f4fb}
.duo8-card{display:block;position:relative;width:100%;height:100%;text-decoration:none!important;}
.duo8-card.duo8-feat{height:445px;color:#fff!important}
.duo8-feat .duo8-cal{width:328px;height:144px}
.duo8-feat .duo8-cal-svg{width:300px;height:136px;position:absolute;left:14px;top:4px;filter:drop-shadow(0 8px 10px #0007) drop-shadow(0 0 18px #ffc83cd9);animation:duo8-calbob 2.4s ease-in-out infinite}
.duo8-num{font-family:Anton,Impact,sans-serif;font-weight:900;fill:url(#duo8NumG);stroke:#7a2b00;stroke-width:6;paint-order:stroke fill;stroke-linejoin:round;transform-box:fill-box;transform-origin:50% 60%;animation:duo8-numpop 1.2s ease-in-out infinite}
.duo8-rim{fill:none;stroke:#ffd23f;stroke-width:3;animation:duo8-rim 1s steps(2,jump-none) infinite}
.duo8-shine{animation:duo8-shinemove 2.6s ease-in-out infinite;transform:skewX(-20deg)}
.duo8-sp{transform-box:fill-box;transform-origin:center;animation:duo8-spark 1.4s ease-in-out infinite}
.duo8-fallback-top,.duo8-fallback-bottom{font-family:Anton,Impact,sans-serif;font-weight:900;fill:url(#duo8NumG);stroke:#7a2b00;stroke-width:4.5px;paint-order:stroke fill;stroke-linejoin:round}
.duo8-party.duo8-gift{left:6px;top:84px;font-size:46px;animation:duo8-gift 1.6s infinite}
.duo8-party.duo8-pop{right:8px;top:76px;font-size:42px;animation:duo8-gift 1.3s .3s infinite}
.duo8-whitebox img.duo8-photo{display:block;width:100%;height:100%;padding:7px;object-fit:contain;object-position:center;animation:duo8-emojibob 3s ease-in-out infinite}
.duo8-feature-price{position:absolute;top:324px;left:0;right:0;display:block;text-align:center;font-weight:900;font-size:40px;color:#fff;z-index:2;animation:duo8-pricepop 1.6s ease-in-out infinite}
.duo8-feature-price .duo8-q{display:inline-block;color:#ffe83a;text-shadow:0 0 12px #ffe83af2;animation:duo8-qpulse 1.2s infinite}
.duo8-only{font-size:28px;letter-spacing:.1px;color:#6d28d9}
.duo8-reg .duo8-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:16px;background:transparent;z-index:1}
.duo8-reg .duo8-mall{position:absolute;top:7px;left:7px;width:100px;max-height:38px;object-fit:contain;object-position:left top;z-index:3;filter:drop-shadow(0 1px 2px #17153f44)}
.duo8-reg .duo8-disc{display:flex;align-items:center;gap:4px}
.duo8-nm{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;max-width:100%;top:262px;height:60px;padding:0 6px;align-content:center}
.duo8-reg .duo8-price{top:319px;height:45px;line-height:43px}
.duo8-old-price{position:absolute;top:366px;left:0;right:0;text-align:center;color:#737f94;font:500 20px/24px system-ui,sans-serif}
.duo8-limited{bottom:8px;height:44px}
.duo8-blank{display:grid;place-items:center;width:100%;height:100%;padding:15px;text-align:center;background:#f5f4fa;border:2px dashed #d6cee9;border-radius:18px;color:#5b4c86;font:700 20px/1.3 system-ui,sans-serif}
.duo8-stage .duo8-card.is-sold-out .duo8-limited{background:#64748b;box-shadow:none}
@media(prefers-reduced-motion:reduce){.duo8-panel *, .duo8-panel *::before,.duo8-panel *::after{animation:none!important;transition:none!important}}

/* The admin's existing show/hide controls apply to the replacement grid as well. */
.duo3-hide-prices :is(.duo8-feature-price,.duo8-price,.duo8-old-price),
.duo3-hide-stock :is(.duo8-only,.duo8-limited),
.duo3-hide-deals :is(.duo8-mall,.duo8-disc){visibility:hidden!important}
.duo8-reg .duo8-media{height:246px}
.duo8-nm{top:262px;height:60px}
.duo8-reg .duo8-price{top:321px}
.duo8-reg .duo8-old-price{top:367px;font-size:19px}
@media(prefers-reduced-motion:reduce){.duo8-panel,.duo8-panel *{animation:none!important}}

/* Final price slots: no strike-through/text collision or obscured CTA. */
.duo8-reg .duo8-old-price{top:374px;line-height:18px;font-size:16px;height:18px}

/* Flash-sale product prices share the gap between the product name and CTA.
   The promo template's HANYA 3 STOK remains exclusive to .duo8-feat. */
.duo8-stage .duo8-card.duo8-reg .duo8-prices{
  position:absolute;top:323px;bottom:57px;left:5px;right:5px;z-index:4;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;min-width:0;min-height:0;overflow:hidden;text-align:center;
}
.duo8-stage .duo8-card.duo8-reg .duo8-prices .duo8-price{
  position:static!important;display:block;width:100%;height:auto!important;
  line-height:1.04!important;font-size:clamp(26px,2.5cqw,36px);
  margin:0;white-space:nowrap;
}
.duo8-stage .duo8-card.duo8-reg .duo8-prices .duo8-old-price{
  position:static!important;display:block;width:100%;height:auto!important;
  line-height:1.18!important;font-size:19px!important;
  margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:#8a92a5;text-decoration:line-through;
}
/* Keep the same price-slot rules for category-specific PromoDuo cards. */
.duo3-shell .duo8-card.duo8-reg .duo8-prices .duo8-price,
.duo3-shell .duo8-card.duo8-reg .duo8-prices .duo8-old-price{
  position:static!important;top:auto!important;height:auto!important;
}
/* V8 category transition fix: stages never display unscaled source-size canvases. */
.duo7-canvas {transform:scale(.22);will-change:transform;}
.duo8-panel {transform:scale(.22);will-change:transform;}
.duo7-stage,.duo8-stage {contain:layout paint;max-width:100%;}
/* Restore visible concentric sunburst during PPOB mode as well as general catalog. */
.duo8-feat .duo8-sunburst {
  z-index:1;opacity:.96;
  background:repeating-conic-gradient(from 0deg,rgba(255,225,100,.86) 0 8deg,transparent 8deg 21deg);
  -webkit-mask-image:radial-gradient(circle,#000 0,rgba(0,0,0,.85) 42%,transparent 72%);
  mask-image:radial-gradient(circle,#000 0,rgba(0,0,0,.85) 42%,transparent 72%);
  filter:drop-shadow(0 0 12px rgba(255,218,80,.56));
  animation:duo8-sunspin 23s linear infinite,duo8-sunpulse 2.2s ease-in-out infinite;
}

/* V8: PPOB Flash Sale sun rays must remain visible around calendar and photo. */
.duo8-feat .duo8-sunburst {
  top:155px; width:344px; height:344px; margin:-172px 0 0 -172px;
  opacity:1; z-index:1;
  background:repeating-conic-gradient(from 0deg,rgba(255,227,90,.88) 0 8deg,transparent 8deg 21deg);
  -webkit-mask-image:radial-gradient(circle,#000 0 28%,rgba(0,0,0,.92) 52%,transparent 74%);
  mask-image:radial-gradient(circle,#000 0 28%,rgba(0,0,0,.92) 52%,transparent 74%);
}

/* 2026-10: PromoDuo fills its allocated space and follows the customer theme. */
.duo3-shell{background:transparent;border:1px solid rgba(173,143,238,.52);box-shadow:0 9px 28px rgba(48,17,98,.12)}
.duo3-main{background:transparent}
.duo3-banner{padding:0;display:flex;align-items:stretch;min-width:0;min-height:0}
.duo3-banner .duo-main-carousel{height:100%;width:100%;flex:1 1 auto;border-radius:0;background:transparent;box-shadow:none}
.duo3-banner .duo-main-track,.duo3-banner .duo-main-slide{height:100%}
.duo3-banner .duo-main-slide>img{width:100%;height:100%;object-fit:cover;object-position:center}
.duo3-banner .duo-main-dots{background:rgba(255,255,255,.76);padding:2px 4px;bottom:1.4cqw;max-width:96%}
.duo3-right{background:transparent!important;min-width:0}
.duo8-stage,.duo8-panel,.duo8-fs-grid{background:transparent!important}
.duo8-fs-grid{align-items:stretch}
.duo8-fs-grid>div{min-width:0;min-height:0}
.duo3-voucher-rail,.duo3-voucher-rail>.duo-voucher-svg-card{background:transparent}
.duo8-blank{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:linear-gradient(150deg,#f4edff,#e1f3ff)!important;border:2px dashed rgba(123,65,220,.42);color:#5a30a6}
.duo8-blank>span{font-size:62px}.duo8-blank>strong{font-size:24px}.duo8-blank>small{font-size:15px;max-width:85%;font-weight:650}
html[data-theme="dark"] .duo3-shell{background:transparent;border:1.5px solid rgba(255,255,255,.89);box-shadow:0 0 0 1px rgba(255,255,255,.14),0 12px 32px rgba(0,0,0,.42)}
html[data-theme="dark"] :is(.duo3-main,.duo3-right,.duo3-banner,.duo3-voucher-rail,.duo3-voucher-rail>.duo-voucher-svg-card,.duo8-panel,.duo8-fs-grid){background:transparent!important}
html[data-theme="dark"] .duo8-card.duo8-reg{background:rgba(17,24,39,.96);border:1px solid rgba(255,255,255,.8);box-shadow:0 4px 16px rgba(0,0,0,.25)}
html[data-theme="dark"] .duo8-nm{color:#eadcff}
html[data-theme="dark"] .duo8-blank{color:#e5d7ff;background:linear-gradient(145deg,#18112d,#102137)!important;border-color:rgba(255,255,255,.7)}
html[data-theme="dark"] .duo3-voucher-empty{color:#e9e0ff}
/* Container geometry remains fluid from a narrow phone to full-width desktop. */
@media(max-width:540px){.duo3-shell{border-radius:0 0 15px 15px}.duo3-main{aspect-ratio:1500/877}.duo3-banner .duo-main-carousel{border-radius:0}}
@media(prefers-reduced-motion:reduce){.duo3-shell :is(.duo8-card,.duo8-only,.duo8-limited){animation:none!important}}

/* Product image tiles no longer bleach the night theme. */
html[data-theme="dark"] .duo8-whitebox{background:rgba(28,29,48,.84);box-shadow:0 7px 24px rgba(0,0,0,.38)}
html[data-theme="dark"] .duo8-card.duo8-reg .duo8-media{background:linear-gradient(130deg,#1f243b,#111a2c)}
html[data-theme="dark"] .duo8-card.duo8-reg .duo8-media::after{background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.1) 50%,transparent 60%);background-size:250% 100%}
html[data-theme="dark"] .duo3-shell{--duo-voucher-fill:rgba(12,20,35,.98);--duo-voucher-border-color:#ffffff}

/* 2026-10-18: transparent PromoDuo edge, vivid header confetti and uncrowded old price. */
#categoryPromoDuo, .duo3-shell {
  border:0!important;outline:0!important;box-shadow:none!important;
  background:transparent!important;
}
.duo3-shell .duo3-footer {box-shadow:none;background:transparent;}
.duo3-shell .duo3-footer::after {content:none;}
.duo3-shell .duo8-reg .duo8-price {top:314px;height:42px;line-height:42px;}
.duo3-shell .duo8-reg .duo8-old-price {
  top:355px;height:22px;line-height:22px;font-size:17px;
  color:#9ca3af;font-weight:750;text-decoration-thickness:1.5px;
}
.duo3-shell .duo8-reg .duo8-limited {bottom:6px;height:40px;}
.duo3-shell .duo8-feat .duo8-confetti {
  top:0;height:210px;z-index:4;mix-blend-mode:screen;
}
.duo3-shell .duo8-feat .duo8-confetti i {
  width:11px;height:19px;opacity:1;box-shadow:0 0 11px var(--c);
  animation-duration:calc(var(--d) * .72);
}
@keyframes duo8-fall {0%{transform:translateY(-22px) rotate(0);opacity:0}12%{opacity:1}74%{opacity:1}100%{transform:translateY(205px) rotate(600deg);opacity:0}}
@media (prefers-reduced-motion:reduce){.duo3-shell .duo8-feat .duo8-confetti i{animation:none;opacity:.55;transform:translateY(38px)}}

/* Sparkles belong to the banner header and do not intercept the voucher navigation. */
.duo7-head .duo7-header-confetti,.duo7-header-confetti{position:absolute;inset:0;z-index:3;overflow:hidden;pointer-events:none;}
.duo7-header-confetti i{position:absolute;top:-15%;left:calc(7% + (var(--k) * 7.5%));width:11px;height:20px;border-radius:3px;background:var(--c);filter:drop-shadow(0 0 8px var(--c));animation:istoreDuoHeaderParty calc(2s + var(--k) * .13s) linear infinite;animation-delay:calc(var(--k) * -.3s)}
.duo7-header-confetti i:nth-child(4n+1){--c:#ffe14d;transform:rotate(24deg)}
.duo7-header-confetti i:nth-child(4n+2){--c:#fb4cbe}
.duo7-header-confetti i:nth-child(4n+3){--c:#66e5ff}
.duo7-header-confetti i:nth-child(4n){--c:#fff}
.duo7-header-confetti i:nth-child(1){--k:0}.duo7-header-confetti i:nth-child(2){--k:1}.duo7-header-confetti i:nth-child(3){--k:2}.duo7-header-confetti i:nth-child(4){--k:3}.duo7-header-confetti i:nth-child(5){--k:4}.duo7-header-confetti i:nth-child(6){--k:5}.duo7-header-confetti i:nth-child(7){--k:6}.duo7-header-confetti i:nth-child(8){--k:7}.duo7-header-confetti i:nth-child(9){--k:8}.duo7-header-confetti i:nth-child(10){--k:9}.duo7-header-confetti i:nth-child(11){--k:10}.duo7-header-confetti i:nth-child(12){--k:11}
@keyframes istoreDuoHeaderParty{0%{translate:0 -40px;rotate:-30deg;opacity:0}12%{opacity:1}75%{opacity:1}100%{translate:20px 230px;rotate:420deg;opacity:0}}
@media(prefers-reduced-motion:reduce){.duo7-header-confetti i{animation:none;opacity:.55;translate:0 35px}}

/* Preserve the left-aligned headline when the admin banner is cropped inside the narrow PromoDuo panel. */
.duo3-shell .duo-main-bg{object-position:left center}

/* October responsive pass: reclaim blank left-banner canvas. */
.duo3-shell{max-width:100%;min-width:0}
.duo3-main{min-width:0;grid-template-columns:minmax(0,var(--duo3-banner-width,39%)) minmax(0,1fr)}
.duo3-banner{padding:0;min-width:0}
.duo3-banner .duo-main-carousel{height:100%;width:100%;border-radius:0;box-shadow:none}
.duo3-banner .duo-main-slide>img{object-fit:cover;object-position:center}
.duo3-banner:has(.duo3-slide-empty){background:linear-gradient(155deg,#352054 0%,#151126 56%,#09142b 100%)}
.duo3-banner .duo3-banner-caption{max-width:100%;overflow-wrap:anywhere}


.duo3-slide-empty{position:relative;background:radial-gradient(ellipse at 45% 28%,rgba(122,56,220,.56),transparent 65%),linear-gradient(158deg,#372166,#111025 80%)}
.duo3-slide-empty>img{object-fit:contain!important;max-width:100%;max-height:100%;padding:clamp(16px,3.8cqw,55px);opacity:.48;filter:drop-shadow(0 8px 25px #b06aff80)}
.duo3-banner-caption{background:linear-gradient(0deg,rgba(8,8,29,.85),transparent 63%);padding-bottom:clamp(10px,4cqw,42px)}

/* Full-canvas PPOB PromoDuo. All columns occupy the available shell; never
   reintroduce legacy banner padding through the mobile media queries. */
.duo3-shell .duo3-main{display:grid;width:100%;max-width:100%;min-width:0;
  grid-template-columns:minmax(0,var(--duo3-banner-width,39%)) minmax(0,1fr);overflow:hidden}
.duo3-shell .duo3-banner{display:flex;min-width:0;min-height:0;
  padding:0!important;margin:0;align-items:stretch;overflow:hidden}
.duo3-shell .duo3-banner .duo-main-carousel,
.duo3-shell .duo3-banner .duo-main-track,
.duo3-shell .duo3-banner .duo-main-slide{height:100%;min-height:0;min-width:0}
.duo3-shell .duo3-banner .duo-main-carousel{width:100%;flex:1 1 100%;margin:0;border-radius:0}
.duo3-shell .duo3-banner .duo-main-slide>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.duo3-shell .duo3-right{width:100%;min-width:0;min-height:0;overflow:hidden}
.duo3-shell .duo3-banner-caption{z-index:4;padding:clamp(10px,2cqw,28px);padding-bottom:clamp(15px,5.5cqw,75px);text-wrap:balance}
@media(max-width:640px){.duo3-shell .duo3-main{grid-template-columns:minmax(0,var(--duo3-banner-width,39%)) minmax(0,1fr)}}

/* V9: no blank stripe at the left of PromoDuo; preserve complete supplied banner artwork. */
.duo3-shell .duo3-banner{padding:0!important;display:flex;align-items:stretch;background:linear-gradient(145deg,#302249,#151527)!important;}
.duo3-shell .duo3-banner .duo-main-carousel,.duo3-shell .duo3-banner .duo-main-track,.duo3-shell .duo3-banner .duo-main-slide{height:100%;width:100%;min-height:100%;}
.duo3-shell .duo3-banner .duo-main-slide>img{height:100%;width:100%;object-fit:cover;object-position:50% 50%;}
.duo3-shell .duo3-banner-caption{inset:0;max-width:100%;overflow:hidden;}
@media(max-width:640px){.duo3-shell .duo3-banner .duo-main-slide>img{object-position:50% 50%;}}

/* V9 no configured banner: deliberately designed hero, not a cropped blank rectangle. */
.duo3-shell .duo3-banner:has(.duo3-slide-empty){background:radial-gradient(circle at 38% 22%,rgba(168,102,255,.65),transparent 42%),linear-gradient(150deg,#493177,#21143c 55%,#111228)!important}
.duo3-shell .duo3-slide-empty{height:100%;background:transparent}
.duo3-shell .duo3-slide-empty>img{width:72%;height:50%;position:absolute;top:6%;left:14%;max-width:none;max-height:none;object-fit:contain!important;padding:0;opacity:.80;filter:drop-shadow(0 8px 18px rgba(153,67,255,.48))}
.duo3-shell .duo3-banner:has(.duo3-slide-empty) .duo3-banner-caption{justify-content:flex-end;align-items:flex-start;gap:clamp(2px,.55cqw,9px);padding:clamp(7px,1.8cqw,22px)!important;padding-bottom:clamp(17px,3.7cqw,48px)!important;background:linear-gradient(to top,rgba(17,7,40,.95),transparent 75%);text-align:left}
.duo3-shell .duo3-banner:has(.duo3-slide-empty) .duo3-banner-caption>small{position:static;display:block;width:max-content;max-width:100%;font-size:clamp(7px,1.12cqw,14px);white-space:normal}
.duo3-shell .duo3-banner:has(.duo3-slide-empty) .duo3-banner-caption h2{font-size:clamp(11px,2.4cqw,31px);line-height:1.15;overflow-wrap:anywhere;-webkit-line-clamp:3}
.duo3-shell .duo3-banner:has(.duo3-slide-empty) .duo3-banner-caption p{max-width:100%;white-space:normal;font-size:clamp(8px,1.08cqw,14px);line-height:1.2}
.duo3-shell .duo3-banner:has(.duo3-slide-empty) .duo3-hero-decor{display:none}
.duo3-shell .duo3-banner:has(.duo3-slide-empty) .duo3-banner-cta{font-size:clamp(8px,.98cqw,13px);padding:7px 9px;min-height:24px}

/* The original banner composition is always fully readable; a blurred copy fills the rest. */
.duo3-shell .duo3-banner .duo-main-slide:not(.duo3-slide-empty)>img.duo-main-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(12px) brightness(.65);transform:scale(1.07);z-index:0}
.duo3-shell .duo3-banner .duo-main-slide:not(.duo3-slide-empty)>img.duo-main-art{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;object-position:center}

/* 2026-10-19 — ONE PromoDuo geometry for Semua, PPOB, priority and all niches.
   Both reference artworks are fixed-size HTML compositions. Native container
   size division is a reliable first-paint fallback if the JS ResizeObserver
   has not initialized yet (e.g. category route updated from cached HTML).
   Keep the JS fit() for older browsers without CSS Values division. */
@supports (transform: scale(calc(100cqw / 1500px))) {
  .duo7-stage {container-type:inline-size}
  .duo7-stage .duo7-canvas {
    transform:scale(calc(100cqw / 1500px));
    transform-origin:top left;
  }
  .duo8-stage {container-type:size}
  .duo8-stage .duo8-panel {
    transform:scale(calc(100cqw / 882px), calc(100cqh / 550px));
    transform-origin:top left;
  }
}
/* A template panel must not reintroduce shrink-to-content geometry. */
.duo3-shell .duo3-main,.duo3-shell .duo3-right,
.duo3-shell .duo8-stage,.duo3-shell .duo7-stage {min-width:0;max-width:100%;}
.duo3-shell .duo8-stage {width:100%;height:100%;}

/* Keep progress pips visually discreet while making each hit target accessible. */
.duo3-banner .duo-main-dots,
#categoryPromoDuo .duo-main-dots {
  display:flex;align-items:center;justify-content:center;
  width:auto;max-width:100%;height:44px;min-height:44px;
  padding:0 3px;gap:0;bottom:0;overflow:visible;
  border:0;background:transparent;box-shadow:none;
}
.duo3-banner .duo-main-dot,
#categoryPromoDuo .duo-main-dot,
.duo3-banner .duo-main-dot.active,
#categoryPromoDuo .duo-main-dot.active {
  position:relative;display:grid;place-items:center;
  flex:0 0 44px;width:44px;height:44px;min-width:44px;min-height:44px;
  padding:0;background:transparent;border:0;border-radius:12px;
  transform:none;box-shadow:none;cursor:pointer;
}
.duo3-banner .duo-main-dot::after,
#categoryPromoDuo .duo-main-dot::after {
  content:"";width:10px;height:5px;background:rgba(255,255,255,.85);
  border-radius:99px;box-shadow:0 1px 3px rgba(21,25,67,.24);
  transition:width .2s ease,background .2s ease;
}
.duo3-banner .duo-main-dot.active::after,
#categoryPromoDuo .duo-main-dot.active::after {width:24px;background:#7726F5}
.duo3-banner .duo-main-dot:focus-visible,
#categoryPromoDuo .duo-main-dot:focus-visible {outline:2px solid #fff;outline-offset:-2px}
@media(prefers-reduced-motion:reduce){
  .duo3-banner .duo-main-dot::after,#categoryPromoDuo .duo-main-dot::after{transition:none}
}


/* === 2026-10-31 FINAL POLISH: DARK MODE, WHITE ICON OUTLINE ON PURPLE, SALES POPUP (401228), I-STORE GUARD (401230) === */

/* 1. Full Customer Dark Mode ("Mode Malam") */
html[data-theme="dark"] {
  --surface-solid: #111827 !important;
  --surface-soft: #090d16 !important;
  --surface: #131c2e !important;
  --ink: #f8fafc !important;
  --muted: #94a3b8 !important;
  --border: rgba(148, 163, 184, 0.18) !important;
  --elevation-1: 0 4px 16px rgba(0, 0, 0, 0.45) !important;
  --elevation-2: 0 12px 32px rgba(0, 0, 0, 0.55) !important;
  --elevation-3: 0 22px 54px rgba(0, 0, 0, 0.65) !important;
  background: #090d16 !important;
  background-color: #090d16 !important;
  color: #f8fafc !important;
}
html[data-theme="dark"] body,
html[data-theme="dark"] #app,
html[data-theme="dark"] #app > .market-header,
html[data-theme="dark"] .market-header {
  background: #090d16 !important;
  background-color: #090d16 !important;
  color: #f8fafc !important;
  border-color: rgba(148, 163, 184, 0.16) !important;
}
html[data-theme="dark"] .search-bar,
html[data-theme="dark"] .search-box,
html[data-theme="dark"] .address-pill,
html[data-theme="dark"] .header-icon-btn,
html[data-theme="dark"] .product-card,
html[data-theme="dark"] .is-fleet-card,
html[data-theme="dark"] .ppob-card,
html[data-theme="dark"] .priority-card,
html[data-theme="dark"] .partner-card,
html[data-theme="dark"] .bottom-nav,
html[data-theme="dark"] .section-card {
  background: #131c2e !important;
  background-color: #131c2e !important;
  color: #f8fafc !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
}
html[data-theme="dark"] #categoryTicker,
html[data-theme="dark"] .ticker-bar {
  background: #131c2e !important;
  border-color: rgba(148, 163, 184, 0.2) !important;
}
html[data-theme="dark"] #categoryTicker .ticker-track a,
html[data-theme="dark"] #categoryTicker .ticker-track span {
  color: #e2e8f0 !important;
}
html[data-theme="dark"] .category-item strong,
html[data-theme="dark"] .product-card h3,
html[data-theme="dark"] .product-card .product-title,
html[data-theme="dark"] .section-head h2,
html[data-theme="dark"] .address-copy strong {
  color: #f8fafc !important;
}

/* 2. Crisp White Outline on Every Icon Sitting on a Purple Background (401221.jpg) */
.bottom-item.active .icon,
.bottom-item.active svg,
.bottom-item.active img,
.floating-button.chat-float .icon,
.floating-button.chat-float svg,
.floating-button.chat-float img,
.floating-button .icon,
.floating-button svg,
button.primary .icon,
button.primary svg,
.btn-primary .icon,
.btn-primary svg,
.is-fleet-button .icon,
.is-fleet-button svg {
  filter: drop-shadow(0 0 1.6px #ffffff) drop-shadow(0 0 1.6px #ffffff) drop-shadow(0 2px 5px rgba(15, 23, 42, 0.42)) !important;
}

/* 3. Remove Blurry Category Placeholder & Tighten Vertical Rhythm (401219.jpg) */
.category-gif-placeholder,
.category-media-blank {
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}
.category-item .category-icon img {
  visibility: visible !important;
  opacity: 1 !important;
  object-fit: contain !important;
}

/* 4. Sales Notification Popup Matching Reference 401228.jpg */
.sales-popup {
  position: fixed !important;
  left: clamp(10px, 2.4vw, 18px) !important;
  right: auto !important;
  top: auto !important;
  bottom: calc(86px + env(safe-area-inset-bottom)) !important;
  z-index: 88 !important;
  width: min(330px, calc(100vw - 88px)) !important;
  max-width: calc(100vw - 88px) !important;
  min-height: 70px !important;
  max-height: 92px !important;
  padding: 10px 28px 14px 12px !important;
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) !important;
  gap: 11px !important;
  align-items: center !important;
  border-radius: 22px !important;
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid rgba(124, 58, 237, 0.16) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16) !important;
}
html[data-theme="dark"] .sales-popup {
  background: #161f33 !important;
  color: #f8fafc !important;
  border-color: rgba(139, 92, 246, 0.32) !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55) !important;
}
.sales-popup .sales-popup-image-link,
.sales-popup .sales-popup-product-image {
  width: 52px !important;
  height: 52px !important;
  max-width: 52px !important;
  max-height: 52px !important;
  border-radius: 14px !important;
  object-fit: cover !important;
  background: #f8fafc;
}
.sales-popup .sales-copy {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}
.sales-popup .sales-buyer-name {
  font-size: 13.5px !important;
  font-weight: 850 !important;
  color: #0f172a !important;
  line-height: 1.2 !important;
}
html[data-theme="dark"] .sales-popup .sales-buyer-name {
  color: #f8fafc !important;
}
.sales-popup .sales-product-line {
  display: block !important;
  font-size: 12px !important;
  line-height: 1.28 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.sales-popup .sales-verb {
  color: #64748b !important;
  font-weight: 500 !important;
}
html[data-theme="dark"] .sales-popup .sales-verb {
  color: #94a3b8 !important;
}
.sales-popup .sales-popup-prod-name {
  display: inline !important;
  color: #6d28d9 !important;
  font-weight: 850 !important;
  text-decoration: none !important;
}
html[data-theme="dark"] .sales-popup .sales-popup-prod-name {
  color: #a78bfa !important;
}
.sales-popup .sales-time-label {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #7c3aed !important;
  line-height: 1.2 !important;
}
html[data-theme="dark"] .sales-popup .sales-time-label {
  color: #c084fc !important;
}
.sales-popup .sales-progress {
  position: absolute !important;
  left: 14px !important;
  right: 14px !important;
  bottom: 4px !important;
  height: 3.5px !important;
  border-radius: 999px !important;
  background: rgba(124, 58, 237, 0.14) !important;
  overflow: hidden !important;
}
.sales-popup .sales-progress > i {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, #6d28d9, #8b5cf6) !important;
  transform-origin: left center !important;
  animation: salesCountdown var(--sales-visible, 6500ms) linear forwards !important;
}

/* 5. ISTORECYBERSHIELD I-STORE GUARD Verification Screen (Ref 401230.jpg) */
.istore-cybershield-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483645;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: radial-gradient(circle at 50% 24%, rgba(30, 58, 138, 0.88) 0%, rgba(9, 13, 22, 0.98) 68%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 1;
  transition: opacity 0.25s ease;
}
.istore-cybershield-overlay.is-closing {
  opacity: 0;
  pointer-events: none;
}
.istore-cybershield-card {
  width: min(390px, 100%);
  padding: 30px 24px 24px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(22, 31, 53, 0.96) 0%, rgba(15, 22, 38, 0.98) 100%);
  border: 1px solid rgba(56, 189, 248, 0.22);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.65), 0 0 40px rgba(37, 99, 235, 0.18);
  text-align: center;
  color: #f8fafc;
}
.istore-cybershield-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(56, 189, 248, 0.28);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.06em;
  color: #38bdf8;
  margin-bottom: 22px;
}
.istore-cybershield-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 10px #10b981;
}
.istore-cybershield-icon-box {
  width: 84px;
  height: 84px;
  margin: 0 auto 20px;
  border-radius: 24px;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(16, 185, 129, 0.28);
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 24px rgba(16, 185, 129, 0.12);
}
.istore-cybershield-check-circle {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, #34d399, #10b981);
  display: grid;
  place-items: center;
  box-shadow: 0 0 22px rgba(16, 185, 129, 0.55);
}
.istore-cybershield-title {
  margin: 0 0 8px;
  font-size: 21px;
  font-weight: 850;
  color: #ffffff;
  letter-spacing: -0.02em;
}
.istore-cybershield-subtitle {
  margin: 0 0 22px;
  font-size: 13.5px;
  color: #94a3b8;
}
.istore-cybershield-progress-track {
  width: 100%;
  height: 7px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.9);
  overflow: hidden;
  margin-bottom: 22px;
}
@keyframes istoreShieldProgress {
  0% { width: 12%; }
  100% { width: 100%; }
}
.istore-cybershield-progress-bar {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #8b5cf6 0%, #ec4899 50%, #06b6d4 100%);
  animation: istoreShieldProgress 1.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.istore-cybershield-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.istore-cybershield-meta-box {
  padding: 11px 12px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.78);
  border: 1px solid rgba(148, 163, 184, 0.14);
  text-align: left;
  display: grid;
  gap: 3px;
}
.istore-cybershield-meta-box small {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #64748b;
}
.istore-cybershield-meta-box strong {
  font-size: 13px;
  font-weight: 850;
  color: #e2e8f0;
}