:root{--blue:#247cf0;--blue-strong:#1265d1;--ink:#263548;--muted:#708197;--line:#d7e7fa;--surface:#fff;--mist:#f5faff;--danger:#d84250;--radius:14px;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--mist)}
*{box-sizing:border-box}body{margin:0;min-width:300px;background:linear-gradient(115deg,#f9fcff 0%,#eef8ff 52%,#f7fbff 100%);min-height:100vh}button,input{font:inherit}button{cursor:pointer}.app-shell{min-height:100vh;background-image:linear-gradient(rgba(59,143,238,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(59,143,238,.055) 1px,transparent 1px);background-size:40px 40px}.topbar{height:82px;padding:0 clamp(18px,3vw,46px);display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.88);border-bottom:1px solid rgba(208,227,247,.9);backdrop-filter:blur(14px);position:sticky;top:0;z-index:10}.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink)}.brand img{width:43px;height:43px;object-fit:contain;filter:drop-shadow(0 7px 12px rgba(28,112,216,.18))}.brand strong{display:block;font-size:18px;letter-spacing:-.5px}.brand small{display:block;font-size:12px;color:var(--muted);margin-top:2px}.admin-link{font-size:13px;font-weight:700;text-decoration:none;color:var(--blue-strong);border:1px solid #cce4ff;border-radius:9px;padding:10px 14px;background:#fff;transition:.18s ease}.admin-link:hover{background:#edf7ff;transform:translateY(-1px)}.checkout-layout{max-width:1780px;margin:0 auto;padding:36px clamp(18px,3.2vw,56px) 56px;display:grid;grid-template-columns:minmax(0,1fr) minmax(330px,30%);gap:20px;align-items:start}.catalog-panel,.cart-panel{background:rgba(255,255,255,.86);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 12px 36px rgba(37,104,173,.06)}.catalog-panel{padding:22px}.catalog-heading{display:flex;justify-content:space-between;gap:24px;align-items:end}.eyebrow{font-size:11px;font-weight:800;letter-spacing:1.25px;color:var(--blue);margin:0 0 8px}.catalog-heading h1{font-size:clamp(25px,2.4vw,36px);letter-spacing:-1.2px;font-weight:700;margin:0;color:#2b384a}.muted{color:var(--muted);font-size:13px;margin:8px 0 0}.search{width:min(320px,45%);height:46px;display:flex;align-items:center;gap:9px;padding:0 13px;border:1px solid #cde4ff;border-radius:10px;background:#fff;color:#81a3c7}.search input{border:0;outline:0;width:100%;color:var(--ink);background:transparent;font-size:14px}.categories{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 18px}.category{border:1px solid #d8e7f7;border-radius:8px;padding:9px 15px;background:#fff;color:#46617d;font-size:12px;font-weight:700;transition:.18s}.category:hover{border-color:#96c9ff;color:var(--blue)}.category.active{color:#fff;background:linear-gradient(135deg,#3c9bff,#1673e7);border-color:#2787ef;box-shadow:0 8px 17px rgba(31,126,229,.18)}.notice{margin:0 0 16px;padding:12px 14px;border-radius:9px;font-size:13px}.notice.error{color:#9f2632;border:1px solid #ffd0d5;background:#fff4f5}.product-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;content-visibility:auto}.product-card{min-width:0;min-height:276px;display:flex;flex-direction:column;padding:10px;border:1px solid #d5e8fc;border-radius:12px;background:#fff;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;animation:card-enter .26s ease both}.product-card:not(.sold-out):hover{border-color:#8bc5ff;box-shadow:0 13px 27px rgba(20,113,209,.12);transform:translateY(-3px)}.product-card.sold-out{filter:grayscale(.78);opacity:.64;cursor:not-allowed}.product-image{height:156px;display:grid;place-items:center;overflow:hidden;border-radius:8px;background:linear-gradient(145deg,#f3f9ff,#fff)}.product-image img{width:100%;height:100%;object-fit:contain;padding:7px;mix-blend-mode:multiply}.product-name{font-size:13px;line-height:1.35;font-weight:650;color:#304055;margin:11px 2px 8px;min-height:35px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.product-bottom{display:flex;justify-content:space-between;align-items:end;gap:8px;margin-top:auto}.product-price{font-weight:750;color:#1b6acb;font-size:15px}.stock{font-size:10px;color:#728297;white-space:nowrap}.stock.low{color:#c67817}.stock.empty{color:#bd4650}.load-more{display:block;margin:20px auto 0;padding:10px 18px;border:1px solid #bedfff;border-radius:8px;background:#fff;color:var(--blue-strong);font-size:13px;font-weight:700}.side-rail{display:grid;gap:18px;position:sticky;top:101px}.camera-panel{padding:25px 20px 20px;border-radius:var(--radius);text-align:center;color:#fff;background:linear-gradient(143deg,#398def 0%,#5ac5e9 100%);box-shadow:0 15px 28px rgba(27,126,224,.2)}.ai-pill{display:inline-block;padding:5px 10px;border-radius:99px;background:rgba(255,255,255,.18);font-size:10px;font-weight:800}.camera-panel h2{margin:15px 0 7px;font-size:23px;letter-spacing:-.6px}.camera-panel p{font-size:13px;line-height:1.5;margin:0 auto 16px;max-width:340px;color:#f3fbff}.camera-zone{min-height:132px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:1px solid rgba(255,255,255,.38);border-radius:11px;background:rgba(255,255,255,.1);cursor:pointer;transition:.2s}.camera-zone:hover{background:rgba(255,255,255,.17);transform:translateY(-2px)}.camera-zone.scanning{pointer-events:none;opacity:.8}.camera-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:10px;color:var(--blue);background:#fff;font-size:23px}.camera-zone strong{font-size:14px}.camera-zone small{font-size:11px;color:#eaf8ff}.cart-panel{padding:19px;max-height:calc(100vh - 355px);min-height:270px;display:flex;flex-direction:column}.cart-title-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.cart-title-row h2{font-size:21px;letter-spacing:-.45px;font-weight:700;margin:0}.count-pill{padding:6px 9px;border-radius:999px;background:#eaf5ff;color:#2376d9;font-size:11px;font-weight:700}.cart-empty{text-align:center;margin:auto;padding:16px;color:var(--muted);font-size:13px}.cart-empty img{width:50px;height:50px;object-fit:contain;opacity:.74}.cart-items{display:grid;gap:9px;overflow:auto;overscroll-behavior:contain;margin:15px -2px 10px;padding:0 2px}.cart-item{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:9px;align-items:start;padding:8px;border:1px solid #daeafb;border-radius:9px;background:#fff}.cart-item img{width:48px;height:48px;object-fit:contain;border-radius:7px;background:#f4f9ff}.cart-item-name{font-size:12px;font-weight:700;line-height:1.3}.cart-item-meta{display:block;margin-top:3px;color:#6c7c90;font-size:11px}.cart-item-price{font-size:12px;font-weight:750;color:#1d6dcc;text-align:right}.quantity{grid-column:2 / 4;display:flex;align-items:center;justify-content:flex-end;gap:7px;margin-top:-3px}.quantity button{border:1px solid #cce4fd;border-radius:7px;width:27px;height:27px;background:#edf7ff;color:#1670d5;font-size:17px;line-height:1}.quantity span{min-width:15px;text-align:center;font-size:12px}.buyer-block{margin-top:auto;padding-top:11px;border-top:1px solid #e8f1fb}.buyer-block label{display:flex;justify-content:space-between;color:#5b6e84;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px}.buyer-block label span{padding:2px 5px;background:#e8f4ff;color:#2376d9;border-radius:4px;font-size:9px}.buyer-block input{margin-top:7px;width:100%;height:39px;border:1px solid #cee5fd;border-radius:8px;padding:0 11px;outline:0;color:var(--ink)}.buyer-block input:focus{border-color:#5baaf8;box-shadow:0 0 0 3px rgba(49,142,241,.1)}.cart-summary{display:flex;align-items:center;justify-content:space-between;margin-top:13px;font-size:13px;color:#687b91}.cart-summary strong{font-size:19px;color:#1b67c1}.cart-actions{display:grid;grid-template-columns:auto 1fr;gap:8px;margin-top:13px}.button{height:40px;border:0;border-radius:8px;padding:0 14px;font-size:12px;font-weight:750;transition:.18s}.button.primary{color:#fff;background:linear-gradient(135deg,#2989f4,#146ad2);box-shadow:0 8px 16px rgba(36,119,214,.18)}.button.primary:not(:disabled):hover{transform:translateY(-1px)}.button:disabled{cursor:not-allowed;opacity:.48}.button.ghost{color:#c3414a;border:1px solid #ffd7da;background:#fff7f7}.mobile-cart-bar,.sheet-backdrop{display:none}.toast{position:fixed;z-index:30;left:50%;bottom:22px;transform:translate(-50%,20px);max-width:calc(100vw - 32px);padding:11px 14px;border-radius:9px;color:#fff;background:#293a4c;font-size:13px;box-shadow:0 15px 25px rgba(22,44,70,.22);opacity:0;pointer-events:none;transition:.22s}.toast.show{opacity:1;transform:translate(-50%,0)}.toast.error{background:#b93643}@keyframes card-enter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(max-width:1320px){.product-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:1080px){.checkout-layout{grid-template-columns:minmax(0,1fr) 320px}.product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:760px){body{padding-bottom:78px}.topbar{height:68px;padding:0 16px}.brand img{width:37px;height:37px}.brand strong{font-size:16px}.admin-link{font-size:11px;padding:8px 10px}.checkout-layout{display:block;padding:14px 12px 22px}.catalog-panel{padding:15px;border-radius:11px}.catalog-heading{align-items:stretch;gap:13px;flex-direction:column}.catalog-heading h1{font-size:26px}.search{width:100%;height:43px}.categories{flex-wrap:nowrap;overflow:auto;margin:17px 0 14px;padding-bottom:3px}.category{white-space:nowrap;padding:8px 13px}.product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.product-card{min-height:218px;padding:7px;border-radius:10px}.product-image{height:112px}.product-name{font-size:12px;min-height:31px;margin:8px 1px 5px}.product-price{font-size:13px}.stock{font-size:9px}.side-rail{position:static;margin-top:14px}.camera-panel{padding:20px 14px;border-radius:11px}.camera-panel h2{font-size:21px}.cart-panel{position:fixed;z-index:22;left:8px;right:8px;bottom:8px;max-height:min(76dvh,680px);min-height:350px;border-radius:14px;transform:translateY(calc(100% + 18px));transition:transform .28s cubic-bezier(.2,.8,.2,1);box-shadow:0 -12px 38px rgba(32,80,128,.2)}.cart-panel.open{transform:translateY(0)}.sheet-backdrop{position:fixed;inset:0;z-index:21;background:rgba(16,42,69,.35);backdrop-filter:blur(2px)}.mobile-cart-bar{display:flex;z-index:20;position:fixed;left:12px;right:12px;bottom:max(10px,env(safe-area-inset-bottom));height:58px;align-items:center;gap:10px;padding:7px 12px;border:1px solid #cfe7ff;border-radius:12px;background:rgba(255,255,255,.96);box-shadow:0 11px 28px rgba(38,102,163,.22);text-align:left}.mobile-cart-bar img{width:38px;height:38px;object-fit:contain}.mobile-cart-bar span{display:grid;gap:1px}.mobile-cart-bar small{font-size:10px;color:#708197}.mobile-cart-bar strong{font-size:13px;color:#1d6bcc}.mobile-cart-bar b{margin-left:auto;display:grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:999px;background:#e7f4ff;color:#1d70d3;font-size:11px}.cart-items{max-height:260px}.cart-empty{min-height:85px}.load-more{width:100%}}@media(max-width:360px){.product-grid{gap:7px}.product-image{height:100px}.product-card{min-height:207px}.catalog-panel{padding:10px}}.product-card:not(.sold-out):focus-visible{border-color:#8bc5ff;box-shadow:0 13px 27px rgba(20,113,209,.12);transform:translateY(-3px);outline:0}
@media(max-width:1320px){.product-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:1080px){.checkout-layout{grid-template-columns:minmax(0,1fr) 320px}.product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:760px){body{padding-bottom:78px}.topbar{height:68px;padding:0 16px}.brand img{width:37px;height:37px}.brand strong{font-size:16px}.admin-link{font-size:11px;padding:8px 10px}.checkout-layout{display:block;padding:14px 12px 22px}.catalog-panel{padding:15px;border-radius:11px}.catalog-heading{align-items:stretch;gap:13px;flex-direction:column}.catalog-heading h1{font-size:26px}.search{width:100%;height:43px}.categories{flex-wrap:nowrap;overflow:auto;margin:17px 0 14px;padding-bottom:3px}.category{white-space:nowrap;padding:8px 13px}.product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.product-card{min-height:218px;padding:7px;border-radius:10px}.product-image{height:112px}.product-name{font-size:12px;min-height:31px;margin:8px 1px 5px}.product-price{font-size:13px}.stock{font-size:9px}.side-rail{position:static;margin-top:14px}.camera-panel{padding:20px 14px;border-radius:11px}.camera-panel h2{font-size:21px}.cart-panel{position:fixed;z-index:22;left:8px;right:8px;bottom:8px;max-height:min(76dvh,680px);min-height:350px;border-radius:14px;transform:translateY(calc(100% + 18px));transition:transform .28s cubic-bezier(.2,.8,.2,1);box-shadow:0 -12px 38px rgba(32,80,128,.2)}.cart-panel.open{transform:translateY(0)}.sheet-backdrop{position:fixed;inset:0;z-index:21;background:rgba(16,42,69,.35);backdrop-filter:blur(2px)}.mobile-cart-bar{display:flex;z-index:20;position:fixed;left:12px;right:12px;bottom:max(10px,env(safe-area-inset-bottom));height:58px;align-items:center;gap:10px;padding:7px 12px;border:1px solid #cfe7ff;border-radius:12px;background:rgba(255,255,255,.96);box-shadow:0 11px 28px rgba(38,102,163,.22);text-align:left}.mobile-cart-bar img{width:38px;height:38px;object-fit:contain}.mobile-cart-bar span{display:grid;gap:1px}.mobile-cart-bar small{font-size:10px;color:#708197}.mobile-cart-bar strong{font-size:13px;color:#1d6bcc}.mobile-cart-bar b{margin-left:auto;display:grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:999px;background:#e7f4ff;color:#1d70d3;font-size:11px}.cart-items{max-height:260px}.cart-empty{min-height:85px}.load-more{width:100%}}@media(max-width:360px){.product-grid{gap:7px}.product-image{height:100px}.product-card{min-height:207px}.catalog-panel{padding:10px}}.product-card:not(.sold-out):focus-visible{border-color:#8bc5ff;box-shadow:0 13px 27px rgba(20,113,209,.12);transform:translateY(-3px);outline:0}

/* Mobile cashier: fit three full cards across without clipping their contents. */
.cart-panel{background:#fff}
.cart-title-actions{display:flex;align-items:center;gap:8px}
.close-cart{display:none;width:30px;height:30px;border:1px solid #cfe5fb;border-radius:8px;background:#f6fbff;color:#276fae;font-size:21px;line-height:1}
@media(max-width:760px){.product-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.product-card{min-height:190px;padding:6px}.product-image{height:88px;border-radius:7px}.product-image img{padding:4px}.product-name{min-height:30px;margin:7px 0 5px;font-size:10.5px;line-height:1.4}.product-price{font-size:11.5px}.stock{font-size:8.5px;overflow:hidden;text-overflow:ellipsis}.cart-panel{background:#fff}.close-cart{display:inline-grid;place-items:center}.cart-items{max-height:min(42dvh,340px)}}
@media(max-width:360px){.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.product-card{min-height:204px}.product-image{height:102px}.product-name{font-size:11.5px}}

/* Compact desktop canvas and a restrained interactive product highlight. */
@media(min-width:761px){.checkout-layout{max-width:none;padding-left:20px;padding-right:20px}.catalog-panel{padding-left:18px;padding-right:18px}}
.product-card:not(.sold-out){cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23247cf0' d='M7 4h10l1 4h2v2h-1l-1 10H6L5 10H4V8h2zm1.6 6 .7 8h5.4l.7-8z'/%3E%3Cpath fill='white' d='M8 5h8l.5 2h-9z'/%3E%3C/svg%3E") 8 8,pointer}
.product-card:not(.sold-out):hover{animation:product-glow 1.8s ease-in-out infinite alternate}
@keyframes product-glow{from{box-shadow:0 8px 20px rgba(20,113,209,.10),0 0 0 rgba(62,166,255,0)}to{box-shadow:0 12px 27px rgba(20,113,209,.16),0 0 18px rgba(73,174,255,.28)}}
@media(max-width:760px){.product-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.product-card{min-height:184px;padding:5px}.product-image{height:84px}.product-name{font-size:10px;min-height:29px}.product-price{font-size:11px}.stock{font-size:8px}}

/* Keep checkout controls visible while the desktop cart list scrolls. */
@media(min-width:761px){.cart-panel{height:calc(100vh - 355px);max-height:calc(100vh - 355px);overflow:hidden}.cart-items{min-height:0;flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain}}

@media(min-width:761px){.side-rail{height:calc(100vh - 121px);display:flex;flex-direction:column}.camera-panel{flex:0 0 auto}.cart-panel{height:auto;max-height:none;min-height:0;flex:1 1 auto}}

@media(min-width:761px){.camera-panel{padding:15px 16px 13px}.camera-panel h2{font-size:19px;margin:10px 0 4px}.camera-panel p{font-size:11px;margin-bottom:10px}.camera-zone{min-height:92px;gap:5px}.camera-icon{width:35px;height:35px}.camera-icon img{width:22px;height:22px}.camera-zone strong{font-size:12px}.camera-zone small{font-size:10px}}

/* Empty cart occupies the available panel space and stays visually centered. */
#cart-empty{flex:1 1 auto;min-height:0;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
#cart-empty[hidden]{display:none}
@media(max-width:760px){#cart-empty{min-height:0;flex:1 1 auto;padding:10px}.cart-empty img{width:54px;height:54px}}

/* On phones the camera is an entry point, so keep it above the long catalog. */
@media(max-width:760px){.checkout-layout{display:flex;flex-direction:column}.side-rail{display:contents}.camera-panel{order:1;margin:0 0 14px}.catalog-panel{order:2}.cart-panel{order:3}}

@media(min-width:761px){.product-grid{justify-content:start}.product-card{max-width:260px}}
@media(max-width:760px){.product-card{max-width:none;width:100%}}

/* Prevent the page itself from gaining a horizontal scroll bar on phones. */
html,body{max-width:100%;overflow-x:hidden}.checkout-layout,.catalog-panel,.side-rail,.catalog-heading{min-width:0;max-width:100%}

@media(min-width:761px){.product-image{height:190px;overflow:visible}.product-image img{object-fit:contain;object-position:center;width:100%;height:100%;padding:5px}}

.cart-items{align-content:start}.cart-item{align-self:start;height:max-content}

.cart-item{grid-template-columns:48px minmax(0,1fr) auto auto}.cart-item-name{font-size:13px}.cart-item-meta{font-size:11.5px}.cart-item-price{font-size:13px}.cart-delete{display:grid;place-items:center;width:24px;height:24px;padding:0;border:1px solid #ffd4d8;border-radius:6px;background:#fff6f7;color:#c43f49;font-size:16px;line-height:1}.cart-delete:hover{background:#ffe9eb}.quantity{grid-column:2 / 5}

@media(hover:none){.product-card:not(.sold-out):hover{animation:none;transform:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

.camera-panel p{font-size:15px;line-height:1.55}.camera-panel h2{display:none}
@media(min-width:761px){.camera-panel p{font-size:14px;margin-bottom:12px}}
@media(max-width:760px){.camera-panel p{font-size:14px}}

@media(max-width:760px){.camera-panel{padding:12px 12px 10px;border-radius:10px}.ai-pill{padding:4px 8px;font-size:9px}.camera-panel p{font-size:12px;line-height:1.35;margin:7px auto 9px}.camera-zone{min-height:80px;gap:4px;border-radius:9px}.camera-icon{width:30px;height:30px}.camera-icon img{width:19px;height:19px}.camera-zone strong{font-size:11px}.camera-zone small{font-size:9px}}

.camera-zone{width:100%;font:inherit;color:#fff}.photo-choice{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:9px}.photo-choice button{height:34px;border:0;border-radius:7px;color:#176bc9;background:#fff;font-size:11px;font-weight:750}.photo-choice button:last-child{grid-column:1 / -1;color:#eaf6ff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.38)}.photo-choice[hidden]{display:none}

/* Product artwork should sit directly on the card, without a second framed tile. */
.product-image{background:transparent;border-radius:0}

/* Some supplier packshots contain a white canvas. Let that canvas blend with
   the card itself instead of presenting as a second white rectangle. */
.product-card .product-image{isolation:auto!important}
.product-card .product-image img{mix-blend-mode:multiply!important}

/* Three compact mobile cards need a shorter empty-stock label. */
@media(max-width:760px){.stock.empty{font-size:0;overflow:visible;text-overflow:clip}.stock.empty::after{content:"Habis";font-size:8px;white-space:nowrap}}