/* Mobile layout: wrap content instead of horizontal scrolling. */
@media(max-width:759px){
 html,body{width:100%;max-width:100%;margin:0}
 main{width:100%;max-width:100%;margin:18px auto;padding:0 12px 32px}
 main *,dialog *{box-sizing:border-box}
 main>*,.panel>*,.detail>*,.two-columns>*,.checkout-grid>*,.address-grid>*,.grow{min-width:0}
 .wrap{max-width:100%;width:calc(100% - 24px)}
 .top .top-inner{flex-wrap:wrap;gap:8px;min-height:64px;padding:10px 0}
 .top .brand{min-width:0;flex:1;font-size:18px}
 .top .live{display:none}
 .top .button{white-space:normal;font-size:12px;padding:10px;min-height:42px}
 .top .desktop-links{display:none!important}
 .account-menu{width:calc(100% - 24px);max-width:100%;white-space:normal}
 .detail,.two-columns,.checkout-grid,.address-grid{grid-template-columns:minmax(0,1fr)!important;gap:16px}
 .panel{max-width:100%;padding:17px;margin:16px 0}
 .panel form{max-width:100%;min-width:0}
 h1,h2,h3,p,small,strong,a,label,dt,dd{overflow-wrap:anywhere}
 h1{font-size:24px}h2{font-size:20px}
 img,video,iframe,canvas,svg{max-width:100%}
 .detail-image{height:260px;max-width:100%}
 .thumbnails{flex-wrap:wrap;gap:8px}
 .thumbnails button{margin:0}
 input:not([type=checkbox]):not([type=radio]),select,textarea{min-width:0;max-width:100%;font-size:16px}
 .actions,.sticky-actions{flex-wrap:wrap;gap:10px}
 .sticky-actions{bottom:0;max-width:100%;padding:12px}
 .sticky-actions>button,.sticky-actions>.button{flex:1 1 130px;min-height:46px;white-space:normal;margin:0}
 .section-head,.order-link,.order-line,.bill-total,.bill-units{flex-wrap:wrap;gap:10px}
 .section-head h1{margin:0}
 .cart-row{display:grid;grid-template-columns:22px 60px minmax(0,1fr);gap:12px;align-items:start}
 .cart-row>.grow{grid-column:3;min-width:0}
 .cart-row>img{width:60px;height:74px}
 .cart-row>.qty{grid-column:2/-1;margin:0;width:155px}
 .cart-row>.text-button{grid-column:2/-1;justify-self:start;margin:0;padding:8px 0}
 .totals{grid-template-columns:minmax(0,1fr) auto;gap:12px 8px}
 .totals dd{max-width:100%;font-variant-numeric:tabular-nums}
 .totals .total{font-size:17px}
 .summary{position:static;max-width:100%}
 table{width:100%!important;max-width:100%;table-layout:fixed}
 th,td{overflow-wrap:anywhere;white-space:normal}
 #product-information .sbp-nutrition{overflow:visible}
 #product-information .sbp-nutrition table{font-size:12px}
 #product-information .sbp-nutrition th,#product-information .sbp-nutrition td{padding:10px 6px;white-space:normal!important}
 #product-information .sbp-nutrition th:first-child{width:40%}
 #mrk-right-column,#mrk-sales-chat{width:100%!important;max-width:100%;min-width:0!important;grid-column:1/-1!important}
 #mrk-chat-messages{min-width:0;max-width:100%;overflow-x:hidden}
 .mrk-message,.mrk-message-body,.mrk-b2b-order,.mrk-buyer-actions{max-width:100%;min-width:0}
 .mrk-b2b-heading{flex-wrap:wrap}
 .mrk-b2b-heading>div,.mrk-b2b-line>div,.mrk-package>span{min-width:0}
 .mrk-b2b-heading h2{font-size:22px}
 #mrk-chat-form{display:flex;align-items:flex-end;min-width:0;gap:6px}
 #mrk-chat-input{flex:1;min-width:0;width:0!important;max-width:100%}
 #mrk-chat-send{flex:0 0 auto;min-width:64px;padding:12px 10px}
 .mrk-counter-grid{grid-template-columns:minmax(0,1fr)!important}
 .mrk-buyer-buttons{gap:6px}
 .mrk-buyer-buttons button{font-size:13px;padding:10px 5px;min-width:0}
 dialog{width:calc(100% - 24px)!important;max-width:calc(100% - 24px)!important;padding:18px;max-height:88dvh;overflow-y:auto}
 .mrk-edit-fields{grid-template-columns:minmax(0,1fr) 82px!important}
 .mrk-foc-row{grid-template-columns:minmax(0,1fr) 88px}
 .mrk-deal-line{flex-wrap:wrap;gap:6px}
 .mrk-package{gap:9px;padding:12px}
 .mrk-package small{overflow-wrap:anywhere}
 .pagination{margin:20px 0;gap:12px;flex-wrap:wrap}
 footer{padding:20px 12px;overflow-wrap:anywhere}
}
@media(max-width:359px){
 .top .brand{flex-basis:100%}
 .product-purchase .actions{grid-template-columns:minmax(0,1fr)}
 #HYBRIX_SBP_ACTIONS_V2{grid-template-columns:minmax(0,1fr)!important}
 .totals{font-size:13px}.totals .total{font-size:16px}
}

.supermart-return-links{display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:18px 0;overflow:visible;white-space:normal}
.supermart-return-links a{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:11px 16px;border:1px solid #d5e1f3;border-radius:12px;background:#fff;color:#173f82;font-size:14px;font-weight:700;line-height:1.4;text-decoration:none}
.supermart-return-links .return-rn{background:#edf4ff;border-color:#bed5fb;color:#1457ba}
.supermart-return-links a:focus-visible{outline:3px solid #84b3ff;outline-offset:3px}
@media(max-width:759px){
 .supermart-return-links a{flex:1 1 140px;font-size:13px}
 .hero-inner{min-width:0;max-width:100%}
 .hero-inner>*,.metric>*,.hybrix-benefit>*{min-width:0}
 .hero-actions{flex-wrap:wrap}
 .hero-actions .button{white-space:normal}
 .categories{overflow:visible;white-space:normal;padding:0;max-width:100%}
 .metric{min-width:0;gap:8px}
 .metric strong{font-size:18px;overflow-wrap:anywhere}
 .metric .symbol{flex:0 0 32px;width:32px;height:32px;font-size:20px}
 .hybrix-benefit{min-width:0;flex-direction:column}
 .hybrix-benefit small,.hybrix-benefit b{overflow-wrap:anywhere}
 .bottom-nav{max-width:100%}
 .bottom-nav a,.bottom-nav button{min-width:0;flex:1;padding:3px}
 .hero .profit b{font-size:clamp(40px,14vw,62px)}
}

/* On phones, shopping conversation precedes product reference material. */
@media(max-width:759px){
 main:has(>#product-information),main:has(>.detail){display:flex;flex-direction:column}
 main>.crumb{order:0}
 main>.detail{order:1}
 main>.two-columns{order:2;grid-template-columns:minmax(0,1fr)!important}
 main>.product-video{order:3}
 main>#review-pembeli{order:4}
 .two-columns>#mrk-sales-chat,.two-columns>#mrk-right-column{grid-row:1!important;grid-column:1/-1!important}
 .two-columns>#product-information{grid-row:2!important;grid-column:1/-1!important}
}

.mobile-purchase-bar{display:none}
@media(max-width:759px){
 body:has(.mobile-purchase-bar){padding-bottom:calc(86px + env(safe-area-inset-bottom))}
 .mobile-purchase-bar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:10px;position:fixed;left:0;right:0;bottom:0;width:100%;z-index:80;padding:12px 14px calc(12px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid #dce5f2;box-shadow:0 -5px 22px #102b5914}
 .mobile-purchase-bar button{min-width:0;min-height:48px;margin:0;border-radius:12px;font-size:15px;font-weight:800;padding:10px}
 .mobile-purchase-bar .mobile-chat-shortcut{background:#f3edff;color:#6233a8;border:1px solid #dfd0f4}
 #mobile-buy-now{background:#075df3;color:white}
}