/* Customer-facing typography: keep information readable without zooming. */
:root{--muted:#5e705e}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-size:16px;line-height:1.55}
body .top{font-size:13px;line-height:1.5}
body header .search input,body .catalogSearch input{font-size:16px}
body .search button,body .primary{font-size:16px;min-height:48px;line-height:1.5}
body nav{font-size:15px;min-height:60px;height:auto;gap:20px;flex-wrap:wrap}
body nav>div{gap:22px;flex-wrap:wrap}
body nav button,body nav a{font-size:15px;min-height:44px}
body .hero small{font-size:12px;letter-spacing:1px}
body .hero p{font-size:17px;color:#52654d}
body .hero .ticks{font-size:14px;line-height:1.8}
body .benefits b{font-size:16px}
body .benefits small{font-size:14px;line-height:1.6;color:var(--muted)}
body .heading small,body .banner small{font-size:12px;letter-spacing:1.2px;color:#607458}
body .heading h2{font-size:28px;line-height:1.35}
body .heading>button{font-size:15px;min-height:44px}
body #categories{gap:14px}
body .category{padding:18px 8px;min-width:0}
body .category b{display:block;font-size:16px;line-height:1.45;font-weight:600;overflow-wrap:anywhere}
body .category small{font-size:14px;color:var(--muted)}
body .category i{width:58px;height:58px;font-size:32px}
body .pill{font-size:13px;color:var(--muted)}
body #chips button{font-size:15px;padding:10px 15px;min-height:46px}
body select{font-size:16px;color:var(--ink);min-height:48px}
body .priceMode{font-size:16px;padding:16px;line-height:1.6}
body .priceMode small{font-size:14px;color:var(--muted)}
body .priceMode>button{font-size:16px;min-height:48px}
body #products{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
body .info{padding:16px}
body .info small{font-size:14px;color:var(--muted)}
body .info h3{font-size:16px;line-height:1.55;min-height:50px;overflow-wrap:anywhere}
body .price{font-size:22px;line-height:1.4}
body .price small{font-size:14px}
body .tag{font-size:12px;line-height:1.4;color:#526a42;max-width:calc(100% - 20px);top:10px;left:10px}
body .productFoot{font-size:14px;color:var(--muted);gap:8px;align-items:center}
body .add{min-width:44px;width:44px;height:44px;font-size:27px;flex-shrink:0}
body #results{font-size:14px}
body .banner p{font-size:16px;color:var(--muted)}
body footer,body footer p{font-size:14px;color:var(--muted)}
body #modal{max-width:660px;line-height:1.6}
body #modal h2{font-size:25px;line-height:1.35;margin:12px 0;overflow-wrap:anywhere}
body #modal .heading>button{min-width:44px;min-height:44px;font-size:22px;flex-shrink:0}
body #modal .muted,body #modal small{font-size:14px;color:var(--muted)}
body #modal input:not([type=checkbox]):not([type=radio]),body #modal select,body #modal textarea{font-size:16px;min-height:48px;color:var(--ink);max-width:100%}
body #modal .option{font-size:16px;min-height:48px}
body #modal .cartRow{align-items:flex-start;flex-wrap:wrap;gap:14px}
body #modal .cartRow>div:first-child{flex:1;min-width:160px;overflow-wrap:anywhere}
body #modal .qty{flex-shrink:0}
body #modal .qty button{min-width:44px;min-height:44px;font-size:20px}
body #modal .checkoutSteps{font-size:14px;line-height:1.4;gap:12px}
body #checkoutForm legend{font-size:18px}
body #checkoutForm label:not(.checkLabel):not(.paymentOptions label){font-size:16px}
body #checkoutForm label>span,body #checkoutForm small{font-size:14px;color:var(--muted)}
body #modal .checkLabel,body #modal .paymentOptions b,body #modal .fulfillmentOptions label{font-size:16px}
body #modal input[type=radio],body #modal input[type=checkbox]{width:21px;height:21px;min-width:21px;accent-color:var(--g)}
body #modal .checkoutHelp,body #modal .checkoutPrivacy,body #modal .checkoutAmount small,body #modal .reviewItems small,body #modal .reviewPerson span{font-size:14px;color:var(--muted)}
body #modal .checkoutAmount>span,body #modal .reviewItems>div,body #modal .reviewPerson,body #modal .savedOrder{font-size:16px}
body #modal .checkoutAmount b{font-size:21px;overflow-wrap:anywhere}
body #modal .checkoutAmount>span{gap:16px;flex-wrap:wrap}
body #modal .checkoutError,body #modal .backCheckout,body #modal .copyOrder,body #modal .supportContact,body #modal .bankCs,body #modal .agentCs{font-size:16px}
body #modal .backCheckout,body #modal .copyOrder,body #modal .agentCs{min-height:48px}
body #modal .pickupStoreDetails,body #modal .pickupReviewStore,body #modal .pickupHelp,body #modal .agentSuccess{font-size:16px}
body #modal .messagePreview,body #modal .qrisActions,body #modal .bankCard>div span,body #modal .bankCard button{font-size:14px}
body #shop .suggestionHeading p,body #shop .productSuggestionForm small,body #shop .suggestionNote{font-size:14px;color:var(--muted)}
body #shop .productSuggestionForm label,body #shop .productSuggestionForm input,body #shop .productSuggestionForm select,body #shop .productSuggestionForm textarea,body #shop .suggestProductButton,body #shop .suggestionSuccess{font-size:16px}
body #shop .suggestProductButton{min-height:48px}
body #toast{font-size:16px}






@media(max-width:1000px){body #products{grid-template-columns:repeat(3,minmax(0,1fr))}body #categories{grid-template-columns:repeat(5,minmax(0,1fr))}body header{gap:18px}body .benefits{gap:16px}body .benefits>div{align-items:flex-start}}
@media(max-width:650px){
 body header,body nav,body main{margin-left:16px;margin-right:16px}
 body nav{flex-wrap:nowrap;overflow-x:auto;gap:24px}body nav>div{flex-wrap:nowrap;gap:22px}
 body header{gap:16px}body #cartBtn{font-size:16px;min-height:52px}
 body .hero{min-height:0}body .hero h1{font-size:34px}body .hero>div:first-child{padding:28px 22px}
 body .hero small{font-size:12px}body .hero .ticks{font-size:14px}
 body .benefits{grid-template-columns:1fr;gap:18px;padding:24px 0}
 body .benefits>div{justify-content:flex-start;border:0;gap:16px;font-size:27px}
 body .benefits b{font-size:16px}body .benefits small{font-size:14px}
 body .heading{align-items:flex-start;gap:12px;flex-wrap:wrap}body .heading h2{font-size:25px}
 body #categories{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
 body .category{padding:16px 6px}body .category i{height:50px;width:50px;font-size:29px}
 body .category b{font-size:16px}body .category small{font-size:14px}
 body #products{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 body .productImage{height:160px}body .info{padding:12px}
 body .info h3{font-size:16px;min-height:0;margin:8px 0 12px}
 body .price{font-size:20px}body .price small{font-size:14px}
 body .productFoot{flex-wrap:wrap}body .productFoot .add{margin-left:auto}
 body #chips{gap:8px}body #chips button{font-size:15px}
 body .filters select{max-width:100%}body .banner p{font-size:16px}
 body #modal{width:calc(100% - 20px);padding:20px 16px;max-height:90dvh}
 body #modal .paymentOptions,body #modal .fulfillmentOptions{grid-template-columns:1fr}
 body #modal .checkoutSteps{font-size:13px}




}

@media(max-width:350px){body #categories{grid-template-columns:repeat(2,minmax(0,1fr))}body .info{padding:10px}body .price{font-size:19px}}
@media(max-width:650px){body .heroImage{display:none}}

body header .logo{display:inline-flex;align-items:center;gap:8px;font-size:27px;letter-spacing:-.8px}body header .logo>b{margin-right:0}body header .logo>.storeBrandName{font-weight:700}@media(max-width:650px){body header .logo{font-size:24px;gap:6px}}