/* GrabZone storefront polish + responsive system. Loaded after page CSS. */
:root{
  --gz-orange:#ff6b00;
  --gz-orange-dark:#e85f00;
  --gz-black:#111111;
  --gz-text:#1f1f1f;
  --gz-muted:#6b6b6b;
  --gz-bg:#f7f7f5;
  --gz-card:#ffffff;
  --gz-border:#e7e7e2;
  --gz-success:#16a34a;
  --gz-danger:#dc2626;
  --gz-radius-sm:12px;
  --gz-radius:16px;
  --gz-radius-lg:20px;
  --gz-shadow:0 8px 30px rgba(17,17,17,.06);
  --gz-shadow-hover:0 14px 40px rgba(17,17,17,.10);
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{max-width:100%;min-width:0;overflow-x:hidden;color:var(--gz-text)}
img,svg,video,canvas{max-width:100%;height:auto}
button,input,select,textarea{font:inherit;max-width:100%}
button,a{touch-action:manipulation}
button{cursor:pointer}
:where(.container,.wrap,.wrapper,.main-container,.page-container,.content-container){width:min(1180px,calc(100% - 32px));margin-inline:auto}

/* Consistent storefront primitives */
:where(.product-card,.payment-card,.track-card,.checkout-card,.grabpoints-box,.panel){min-width:0}
:where(.product-card,.payment-card,.track-card,.checkout-card){border-color:var(--gz-border)}
:where(.product-card,.payment-card,.track-card,.checkout-card):focus-within{border-color:#d8d8d2}
:where(.product-card,.payment-card){box-shadow:var(--gz-shadow)}
:where(.product-card,.payment-card):hover{box-shadow:var(--gz-shadow-hover)}
:where(.btn,.dark-btn,button[type=submit]){min-height:44px}

/* Product detail */
.gallery{min-width:0}
.gallery-main{border-radius:var(--gz-radius-lg)!important;background:#f4f4f1!important}
.gallery-thumb{border-radius:12px!important;overflow:hidden}

/* Checkout */
.checkout-header{min-height:64px}
.checkout-brand{min-width:0}
.checkout-shell{width:min(1120px,calc(100% - 32px));margin-inline:auto}
.delivery-eta{border-color:var(--gz-border)!important;background:#fafaf8!important}
.grabpoints-box{border-color:#e4e4df!important;border-radius:var(--gz-radius-lg)!important}
.grabpoints-icon{background:var(--gz-black)!important}

/* Payment */
.payment-page{width:min(1080px,calc(100% - 32px));margin-inline:auto}
.payment-card{border-radius:var(--gz-radius-lg)!important;background:var(--gz-card)!important}
.payment-icon-wrap{border-radius:14px!important}

/* Tracking */
.track-wrap{width:min(760px,calc(100% - 32px));margin-inline:auto}
.track-card{border-radius:var(--gz-radius-lg)!important;box-shadow:var(--gz-shadow)!important}
.track-form input:focus{border-color:var(--gz-orange)!important;box-shadow:0 0 0 3px rgba(255,107,0,.10)!important;outline:none}
.track-form button,.back-store,.tracking-link{background:var(--gz-black)!important}
.track-form button:hover,.back-store:hover,.tracking-link:hover{background:#2a2a2a!important}
.track-status-step.current{background:var(--gz-black)!important;border-color:var(--gz-black)!important}

/* Footer and links */
:where(.footer a,.site-footer a){overflow-wrap:anywhere}

@media(max-width:900px){
  :where(.container,.wrap,.wrapper,.main-container,.page-container,.content-container){width:calc(100% - 28px)}
  :where(.hero,.hero-section,.banner,.billboard){min-height:auto!important;padding-left:20px!important;padding-right:20px!important}
  :where(.hero h1,.hero-section h1){font-size:clamp(30px,7vw,48px)!important;line-height:1.02}
  :where(.hero p,.hero-section p){max-width:100%!important}
  :where(.products-grid,.product-grid,.category-grid,.cards-grid){grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}
  :where(.product-card){min-width:0;overflow:hidden}
  :where(.product-card img){width:100%;object-fit:contain}
  :where(.product-card h2,.product-card h3){overflow-wrap:anywhere}
  :where(.modal,.dialog,.drawer){max-width:calc(100vw - 24px)!important}
  .payment-top{flex-wrap:wrap}
}

@media(max-width:640px){
  body{font-size:14px}
  :where(.container,.wrap,.wrapper,.main-container,.page-container,.content-container){width:calc(100% - 24px)}
  :where(.products-grid,.product-grid,.category-grid,.cards-grid){grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  :where(.product-card){border-radius:14px!important}
  :where(.product-card){padding:12px!important}
  :where(.product-card .btn,.product-card button){width:100%;min-height:44px}
  :where(.section,.section-container){padding-top:42px!important;padding-bottom:42px!important}
  :where(.section-header,.section-head){display:flex!important;align-items:flex-start;gap:12px;flex-wrap:wrap}
  :where(.section-header h2,.section-head h2){font-size:28px!important;line-height:1.08}
  :where(.toolbar,.filter-bar,.sort-bar){display:grid!important;grid-template-columns:1fr!important;gap:9px!important}
  :where(.toolbar button,.toolbar select,.filter-bar button,.filter-bar select,.sort-bar button,.sort-bar select){width:100%;min-height:44px}
  :where(.search,.search-box){width:100%!important}
  :where(form){max-width:100%}
  :where(input,select,textarea){min-height:44px;font-size:16px!important}
  :where(.btn,button[type=submit],button[type=button]){min-height:44px}
  :where(.two-col,.two-column,.split,.checkout-layout,.product-layout){grid-template-columns:1fr!important;display:grid!important;gap:18px!important}
  :where(.three-col,.three-column){grid-template-columns:1fr!important;display:grid!important}
  :where(.product-detail,.product-info){width:100%!important;min-width:0}
  :where(.product-detail .gallery,.product-gallery){position:relative!important;top:auto!important;width:100%!important}
  :where(.product-detail .price,.product-price){font-size:25px!important}
  :where(.cart-item,.checkout-item,.order-item){display:grid!important;grid-template-columns:64px minmax(0,1fr)!important;gap:11px!important;align-items:start}
  :where(.cart-item img,.checkout-item img,.order-item img){width:64px!important;height:64px!important;object-fit:contain}
  :where(.cart-summary,.order-summary,.checkout-summary){position:static!important;width:100%!important}
  :where(table){display:block!important;width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch}
  :where(.footer,.site-footer){padding:36px 16px 24px!important}
  :where(.footer-grid,.footer-links){grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:22px!important}
  .checkout-header{padding:12px 16px!important;gap:12px;flex-wrap:wrap}
  .checkout-brand{font-size:14px}
  .back-link{font-size:12px}
  .checkout-shell{width:calc(100% - 24px)}
  .payment-page{width:calc(100% - 24px);padding-top:38px!important;padding-bottom:60px!important}
  .payment-top{margin-bottom:24px!important}
  .payment-hero h1{font-size:clamp(36px,11vw,54px)!important}
  .payment-hero p{font-size:14px!important}
  .payment-grid{grid-template-columns:1fr!important;gap:12px!important}
  .payment-card{padding:20px!important;border-radius:18px!important}
  .payment-card h2{font-size:21px!important}
  .track-wrap{width:calc(100% - 24px);margin-top:20px!important;margin-bottom:20px!important}
  .track-card{padding:18px!important;border-radius:18px!important}
  .track-card h1{font-size:28px!important;line-height:1.05}
  .track-form{flex-direction:column!important}
  .track-form input,.track-form button{width:100%;min-height:48px!important}
  .track-status-line{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
  .track-status-line::before{display:none!important}
  .track-status-step{min-height:105px!important}
  .help-grid{grid-template-columns:1fr!important}
}

@media(max-width:430px){
  :where(.header,.site-header){gap:6px!important}
  :where(.header .logo,.site-header .logo){min-width:0}
  :where(.header .logo img,.site-header .logo img){max-width:125px}
  :where(.products-grid,.product-grid,.category-grid,.cards-grid){gap:8px!important}
  :where(.product-card){padding:10px!important}
  :where(.product-card h3){font-size:13px!important}
  :where(.product-card p){font-size:11px!important}
  :where(.hero,.hero-section,.banner,.billboard){padding:28px 16px!important}
  :where(.hero h1,.hero-section h1){font-size:29px!important}
  :where(.modal,.dialog,.drawer){width:calc(100vw - 16px)!important;max-width:calc(100vw - 16px)!important;border-radius:18px!important}
  :where(.footer-grid,.footer-links){grid-template-columns:1fr!important}
  .payment-top{gap:14px!important}
  .payment-page{width:calc(100% - 20px)!important}
  .track-wrap{width:calc(100% - 20px)!important}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}