/* Responsif mobile-first: 4 kolom desktop, 3 tablet, 2 HP. Tanpa horizontal overflow. */
@media(max-width:900px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){
  body.public{padding-bottom:100px}
  .topnav{display:none}
  .bnav{display:grid;grid-template-columns:1fr 1fr 74px 1fr 1fr;align-items:center;position:fixed;left:10px;right:10px;bottom:calc(8px + env(safe-area-inset-bottom,0px));z-index:50;background:#fff;border-radius:26px;padding:7px 4px;box-shadow:0 10px 30px rgba(138,90,0,.35),0 0 0 1px var(--line)}
  .bnav button,.bnav a{background:none;text-decoration:none;color:#9a8a60;font-size:10.5px;font-weight:700;display:flex;flex-direction:column;align-items:center;gap:2px;padding:5px 0;border-radius:16px;position:relative;min-width:0}
  .bnav .ic{font-size:20px;line-height:1;position:relative}
  .bnav button.on{background:var(--ysoft);color:var(--ink)}
  .bnav .mid{padding:0;background:none!important}
  .bnav .mid .ic{width:56px;height:56px;margin-top:-34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#FF5A4F,var(--red));border:5px solid var(--bg);box-shadow:0 8px 18px rgba(214,40,40,.45);font-size:24px}
  .bnav .badge{top:-2px;right:-2px;border:2px solid #fff}
}
@media(max-width:620px){
  body{font-size:14px}
  .wrap{padding:12px}
  .top{padding:10px 0;border-bottom-width:4px}
  .topin{padding:0 12px}
  .shoplogo{height:42px;width:42px}
  .brand{font-size:16px}.sub{font-size:10.5px}
  .hero h1{font-size:20px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .catsec{padding:10px 8px;border-radius:16px}
  .cathead h2{font-size:18px}.cathead h2::before{height:20px;width:6px}
  .photo{height:105px;margin:6px 6px 0}
  .cardbody{padding:8px 6px 10px}.cardbody h3{font-size:13.5px}
  .pricepill{font-size:13px;padding:5px 12px}
  .tabs{flex-wrap:nowrap;overflow-x:auto;margin:0 -12px;padding:10px 12px;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab{padding:7px 13px;font-size:13px}
  .panel{padding:13px;margin:12px 0}
  .formgrid{grid-template-columns:minmax(0,1fr)}
  input.field,select.field,textarea.field{font-size:16px}
  .cartline{grid-template-columns:minmax(0,1fr) auto}
  .cartline .lineprice{grid-column:1/-1;text-align:right}
  .actions .btn{flex:1 1 calc(50% - 8px)}
  .modal{padding:14px}
}
@media(max-width:360px){.brand{font-size:14px}.grid{gap:8px}}