/* Zaadkom Core Soft Icon System — v12.47.14
   Semi-flat / soft-depth navigation icons. Mobile clarity and recognition come before decoration. */
body.zaadkom-soft-icons-v124713{
  --za-icon-ink:#68756e;
  --za-icon-active:#0b7040;
  --za-icon-mint:#edf8f2;
  --za-icon-pearl:#fbfcfb;
  --za-icon-line:rgba(121,143,131,.22);
  --za-icon-shadow:0 2px 5px rgba(31,64,47,.07),inset 0 1px 0 rgba(255,255,255,.92);
  --za-icon-active-shadow:0 2px 6px rgba(24,92,56,.09),inset 0 1px 0 rgba(255,255,255,.95);
}

/* Shared top-bar utility controls. */
body.zaadkom-soft-icons-v124713 .icon-button{
  border:1px solid var(--za-icon-line);
  background:linear-gradient(145deg,#fff 0%,#f3f7f5 100%);
  color:var(--za-icon-ink);
  box-shadow:var(--za-icon-shadow);
}
body.zaadkom-soft-icons-v124713 .icon-button:active{
  background:#edf5f0;
  color:var(--za-icon-active);
}

/* Store: bottom navigation, search, drawer and back-to-top.
   Cart visuals intentionally keep the classic pre-v12.47.13 treatment. */
body.store-ui.zaadkom-soft-icons-v124713 .bottom .nav-item>.icon{
  width:30px;
  height:30px;
  box-sizing:border-box;
  padding:5px;
  border:1px solid var(--za-icon-line);
  border-radius:10px;
  background:linear-gradient(145deg,#fff 0%,#f4f7f5 100%);
  color:var(--za-icon-ink);
  box-shadow:var(--za-icon-shadow);
  stroke-width:1.7;
}
body.store-ui.zaadkom-soft-icons-v124713 .bottom .nav-item.active>.icon{
  border-color:rgba(73,145,105,.27);
  background:linear-gradient(145deg,#fbfffd 0%,#e8f6ee 100%);
  color:var(--za-icon-active);
  box-shadow:var(--za-icon-active-shadow);
}
body.store-ui.zaadkom-soft-icons-v124713 .drawer-link-icon{
  border:1px solid var(--za-icon-line);
  background:linear-gradient(145deg,#fff 0%,#edf7f1 100%);
  color:var(--za-icon-active);
  box-shadow:var(--za-icon-shadow);
}
body.store-ui.zaadkom-soft-icons-v124713 .drawer-link-icon svg{stroke-width:1.65}
body.store-ui.zaadkom-soft-icons-v124713 .store-bottom-search-icon{
  border:1px solid var(--za-icon-line);
  border-radius:11px;
  background:linear-gradient(145deg,#fff 0%,#edf7f1 100%);
  color:var(--za-icon-active);
  box-shadow:var(--za-icon-shadow);
}
body.store-ui.zaadkom-soft-icons-v124713 .to-top{
  border-color:var(--za-icon-line);
  background:linear-gradient(145deg,#fff 0%,#f2f7f4 100%);
  color:var(--za-icon-active);
  box-shadow:0 5px 14px rgba(31,64,47,.11),inset 0 1px 0 rgba(255,255,255,.95);
}
body.store-ui.zaadkom-soft-icons-v124713 .to-top .icon{
  width:20px;
  height:20px;
  stroke-width:1.8;
}

/* Agent: drawer, primary bottom navigation, order stages and refresh. */
body.agent-ui.zaadkom-soft-icons-v124713:not(.driver-ui) .drawer-link>.ui-icon{
  width:30px;
  height:30px;
  box-sizing:border-box;
  padding:5px;
  border:1px solid var(--za-icon-line);
  border-radius:10px;
  background:linear-gradient(145deg,#fff 0%,#edf7f1 100%);
  color:var(--za-icon-active);
  box-shadow:var(--za-icon-shadow);
  fill:none;
  stroke:currentColor;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
}
body.agent-ui.zaadkom-soft-icons-v124713:not(.driver-ui) .agent-bottom-nav:not(.driver-bottom-nav) .agent-bottom-icon{
  width:30px;
  height:30px;
  box-sizing:border-box;
  padding:5px;
  border:1px solid var(--za-icon-line);
  border-radius:10px;
  background:linear-gradient(145deg,#fff 0%,#f4f7f5 100%);
  color:var(--za-icon-ink);
  box-shadow:var(--za-icon-shadow);
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
body.agent-ui.zaadkom-soft-icons-v124713:not(.driver-ui) .agent-bottom-nav:not(.driver-bottom-nav) .agent-bottom-item.active .agent-bottom-icon{
  border-color:rgba(73,145,105,.27);
  background:linear-gradient(145deg,#fbfffd 0%,#e8f6ee 100%);
  color:var(--za-icon-active);
  box-shadow:var(--za-icon-active-shadow);
}
body.agent-ui.zaadkom-soft-icons-v124713:not(.driver-ui) .agent-stage-tabs button>.ui-icon{
  width:28px;
  height:28px;
  box-sizing:border-box;
  padding:5px;
  border:1px solid rgba(121,143,131,.20);
  border-radius:9px;
  background:linear-gradient(145deg,#fff 0%,#f2f5f3 100%);
  color:#748078;
  box-shadow:0 2px 4px rgba(31,64,47,.055),inset 0 1px 0 rgba(255,255,255,.90);
  stroke-width:1.65;
}
body.agent-ui.zaadkom-soft-icons-v124713:not(.driver-ui) .agent-stage-tabs button.active>.ui-icon{
  border-color:rgba(73,145,105,.27);
  background:linear-gradient(145deg,#fbfffd 0%,#e7f6ed 100%);
  color:var(--za-icon-active);
}
body.agent-ui.zaadkom-soft-icons-v124713:not(.driver-ui) .agent-refresh-icon{
  border:1px solid rgba(121,143,131,.18);
  background:linear-gradient(145deg,#fff 0%,#eaf6ef 100%);
  color:var(--za-icon-active);
  box-shadow:0 2px 4px rgba(31,64,47,.06),inset 0 1px 0 rgba(255,255,255,.95);
}
@media (max-width:349px){
  body.agent-ui.zaadkom-soft-icons-v124713:not(.driver-ui) .agent-stage-tabs button>.ui-icon{
    width:25px;
    height:25px;
    padding:4.5px;
    border-radius:8px;
  }
}
@media (max-width:639px){
  body.agent-ui.zaadkom-soft-icons-v124713:not(.driver-ui) .agent-work-overview.is-compact-sticky .agent-stage-tabs button>.ui-icon{
    width:23px;
    height:23px;
    padding:4px;
    border-radius:8px;
  }
}

/* Driver: header shortcuts, bottom navigation and account utility icons. */
body.driver-ui.zaadkom-soft-icons-v124713 .driver-header-icon{
  border-color:var(--za-icon-line);
  background:linear-gradient(145deg,#fff 0%,#f3f7f5 100%);
  color:var(--za-icon-active);
  box-shadow:var(--za-icon-shadow);
}
body.driver-ui.zaadkom-soft-icons-v124713 .driver-header-icon:active{
  background:#eaf5ef;
  border-color:rgba(73,145,105,.28);
}
body.driver-ui.zaadkom-soft-icons-v124713 .driver-header-icon svg{stroke-width:1.7}
body.driver-ui.zaadkom-soft-icons-v124713 .driver-bottom-nav .agent-bottom-icon{
  width:30px;
  height:30px;
  box-sizing:border-box;
  padding:5px;
  border:1px solid var(--za-icon-line);
  border-radius:10px;
  background:linear-gradient(145deg,#fff 0%,#f4f7f5 100%);
  color:var(--za-icon-ink);
  box-shadow:var(--za-icon-shadow);
}
body.driver-ui.zaadkom-soft-icons-v124713 .driver-bottom-nav .agent-bottom-item.active .agent-bottom-icon{
  border-color:rgba(73,145,105,.27);
  background:linear-gradient(145deg,#fbfffd 0%,#e8f6ee 100%);
  color:var(--za-icon-active);
  box-shadow:var(--za-icon-active-shadow);
}
body.driver-ui.zaadkom-soft-icons-v124713 .driver-bottom-nav .agent-bottom-icon svg{
  width:19px;
  height:19px;
  stroke-width:1.7;
}
body.driver-ui.zaadkom-soft-icons-v124713 .driver-account-row-icon,
body.driver-ui.zaadkom-soft-icons-v124713 .driver-account-summary-icon{
  border:1px solid rgba(121,143,131,.20);
  background:linear-gradient(145deg,#fff 0%,#edf7f1 100%);
  color:var(--za-icon-active);
  box-shadow:var(--za-icon-shadow);
}
body.driver-ui.zaadkom-soft-icons-v124713 .driver-account-row-icon svg,
body.driver-ui.zaadkom-soft-icons-v124713 .driver-account-summary-icon svg{stroke-width:1.65}

/* Tiny tactile response only; no hover dependence and no movement under reduced-motion preference. */
@media (prefers-reduced-motion:no-preference){
  body.store-ui.zaadkom-soft-icons-v124713 .bottom .nav-item>.icon,
  body.agent-ui.zaadkom-soft-icons-v124713 .agent-bottom-icon,
  body.store-ui.zaadkom-soft-icons-v124713 .to-top{
    transition:transform .14s ease,background .14s ease,color .14s ease;
  }
  body.store-ui.zaadkom-soft-icons-v124713 .bottom .nav-item:active>.icon,
  body.agent-ui.zaadkom-soft-icons-v124713 .agent-bottom-item:active .agent-bottom-icon{
    transform:translateY(1px);
  }
}


/* Zaadkom Designer Icon Unification — v12.48.2
   Visual-only unification. Existing navigation containers remain responsible for hit-area,
   active state, focus behavior and layout. Designer SVG artwork is local and self-hosted.
   v12.48.2 continues to remove the decorative card behind designer artwork while keeping
   the original clickable/tappable area unchanged. */
.za-designer-icon,
.za-designer-frame>img,
.za-designer-stage>img,
.driver-designer-action-icon>img{
  display:block;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
}

/* Store bottom destinations: preserve the existing 30px tactile frame while giving the
   supplied 512px artwork enough room to remain legible. */
body.store-ui.zaadkom-soft-icons-v124713 .bottom .nav-item>img.icon.za-designer-icon{
  padding:1px;
  object-fit:contain;
  stroke:none;
}
body.store-ui.zaadkom-soft-icons-v124713 .bottom .nav-item:not(.active)>img.za-designer-icon{
  filter:grayscale(.88) saturate(.35);
  opacity:.72;
}
body.store-ui.zaadkom-soft-icons-v124713 .bottom .nav-item.active>img.za-designer-icon{
  filter:none;
  opacity:1;
}

/* Agent + Driver bottom navigation. The frame keeps the existing 30px visual box. */
body.agent-ui.zaadkom-soft-icons-v124713 .agent-bottom-icon.za-designer-frame{
  padding:0;
  overflow:hidden;
  display:grid;
  place-items:center;
}
body.agent-ui.zaadkom-soft-icons-v124713 .agent-bottom-icon.za-designer-frame>img{
  width:100%;
  height:100%;
  padding:1px;
}
body.agent-ui.zaadkom-soft-icons-v124713 .agent-bottom-item:not(.active) .za-designer-frame>img{
  filter:grayscale(.88) saturate(.35);
  opacity:.72;
}
body.agent-ui.zaadkom-soft-icons-v124713 .agent-bottom-item.active .za-designer-frame>img{
  filter:none;
  opacity:1;
}

/* Agent order-stage artwork. Preparing intentionally retains the existing clock icon. */
body.agent-ui.zaadkom-soft-icons-v124713:not(.driver-ui) .agent-stage-tabs button>.ui-icon.za-designer-stage{
  padding:0;
  overflow:hidden;
  display:grid;
  place-items:center;
}
body.agent-ui.zaadkom-soft-icons-v124713:not(.driver-ui) .agent-stage-tabs button>.ui-icon.za-designer-stage>img{
  width:100%;
  height:100%;
  padding:1px;
}
body.agent-ui.zaadkom-soft-icons-v124713:not(.driver-ui) .agent-stage-tabs button:not(.active)>.za-designer-stage>img{
  filter:grayscale(.88) saturate(.35);
  opacity:.72;
}
body.agent-ui.zaadkom-soft-icons-v124713:not(.driver-ui) .agent-stage-tabs button.active>.za-designer-stage>img{
  filter:none;
  opacity:1;
}

/* Driver order utility actions selected from the visually audited designer pack. */
body.driver-ui.zaadkom-soft-icons-v124713 .driver-contact-actions .driver-designer-action-icon{
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  line-height:1;
}
body.driver-ui.zaadkom-soft-icons-v124713 .driver-contact-actions .driver-designer-action-icon>img{
  width:24px;
  height:24px;
}
body.driver-ui.zaadkom-soft-icons-v124713 .agent-main-action[data-designer-retry="1"]{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
body.driver-ui.zaadkom-soft-icons-v124713 .agent-main-action[data-designer-retry="1"]::before{
  content:"";
  width:28px;
  height:28px;
  flex:0 0 28px;
  border-radius:9px;
  background-color:rgba(255,255,255,.96);
  background-image:url('/assets/icons/zaadkom/driver/retry.svg?v=12.48.8');
  background-repeat:no-repeat;
  background-position:center;
  background-size:24px 24px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.75);
}
body.driver-ui.zaadkom-soft-icons-v124713 .agent-main-action[data-designer-retry="1"]:disabled::before{
  opacity:.62;
}

/* =========================================================
   Zaadkom Designer Icon Unification — v12.48.2
   Frameless artwork: remove the extra visual card only from designer-backed icons.
   Parent links/buttons keep their original hit-area and interaction behavior.
   ========================================================= */

/* Store bottom navigation: 30px artwork, no nested card. */
body.store-ui.zaadkom-soft-icons-v124713 .bottom .nav-item>img.icon.za-designer-icon,
body.store-ui.zaadkom-soft-icons-v124713 .bottom .nav-item.active>img.icon.za-designer-icon{
  width:30px;
  height:30px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

/* Store drawer: keep the row/touch layout, show the 512-viewBox SVG directly. */
body.store-ui.zaadkom-soft-icons-v124713 .drawer-link-icon.za-designer-frame{
  width:30px;
  height:30px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  overflow:visible;
  display:grid;
  place-items:center;
}
body.store-ui.zaadkom-soft-icons-v124713 .drawer-link-icon.za-designer-frame>img{
  width:30px;
  height:30px;
}

/* Agent drawer designer destinations: frameless; standard fallback line icons are untouched. */
body.agent-ui.zaadkom-soft-icons-v124713:not(.driver-ui) .drawer-link>.ui-icon.za-designer-frame{
  width:30px;
  height:30px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  overflow:visible;
  display:grid;
  place-items:center;
}
body.agent-ui.zaadkom-soft-icons-v124713:not(.driver-ui) .drawer-link>.ui-icon.za-designer-frame>img{
  width:30px;
  height:30px;
}

/* Agent + Driver bottom navigation: preserve 30px visual size, remove nested card. */
body.agent-ui.zaadkom-soft-icons-v124713 .agent-bottom-icon.za-designer-frame,
body.agent-ui.zaadkom-soft-icons-v124713 .agent-bottom-item.active .agent-bottom-icon.za-designer-frame{
  width:30px;
  height:30px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  overflow:visible;
}

/* Agent stages: designer art is frameless; the retained clock also loses only the card shell. */
body.agent-ui.zaadkom-soft-icons-v124713:not(.driver-ui) .agent-stage-tabs button>.ui-icon,
body.agent-ui.zaadkom-soft-icons-v124713:not(.driver-ui) .agent-stage-tabs button.active>.ui-icon{
  padding:1px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
body.agent-ui.zaadkom-soft-icons-v124713:not(.driver-ui) .agent-stage-tabs button>.ui-icon.za-designer-stage{
  padding:0;
}

/* Driver header: same 40px tap target, 32px designer artwork, no visible card. */
body.driver-ui.zaadkom-soft-icons-v124713 .driver-header-icon.has-designer-icon,
body.driver-ui.zaadkom-soft-icons-v124713 .driver-header-icon.has-designer-icon:active{
  border-color:transparent;
  background:transparent;
  box-shadow:none;
}
body.driver-ui.zaadkom-soft-icons-v124713 .driver-header-icon.has-designer-icon .za-designer-header-icon{
  width:32px;
  height:32px;
  display:block;
  object-fit:contain;
}

/* Driver information row when a designer asset exists; other utility rows remain unchanged. */
body.driver-ui.zaadkom-soft-icons-v124713 .driver-account-row-icon.za-designer-frame{
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  overflow:visible;
}
body.driver-ui.zaadkom-soft-icons-v124713 .driver-account-row-icon.za-designer-frame>img{
  width:30px;
  height:30px;
  display:block;
  object-fit:contain;
}

/* Cart semantics: normal cart for cart destinations, cart+ only for add-to-cart controls. */
body.store-ui .za-designer-cart-icon{
  width:31px;
  height:31px;
  display:block;
  object-fit:contain;
}
body.store-ui .add-control .za-designer-cart-add{
  width:32px;
  height:32px;
  display:block;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
}
body.store-ui .empty-icon.za-designer-empty-cart{
  width:72px;
  height:72px;
  background:transparent;
  border-radius:0;
}
body.store-ui .empty-icon.za-designer-empty-cart>img{
  width:60px;
  height:60px;
  display:block;
  object-fit:contain;
}

/* Retry icon: keep button hit-area, remove the extra white icon tile. */
body.driver-ui.zaadkom-soft-icons-v124713 .agent-main-action[data-designer-retry="1"]::before{
  border-radius:0;
  background-color:transparent;
  box-shadow:none;
}



/* =========================================================
   Zaadkom Designer Raster Refresh — v12.48.2
   User-approved 3D artwork. 128px PNG deployment assets are rendered at 24–34px,
   giving >4x source density for the normal UI size while avoiding 512px mobile downloads.
   ========================================================= */
body.zaadkom-soft-icons-v124713 img[src*="/assets/icons/zaadkom/"]{
  image-rendering:auto;
}
/* Narrow account/driver artwork gets a small optical enlargement while the hit area stays unchanged. */
body.store-ui.zaadkom-soft-icons-v124713 img[src*="/navigation/account.svg"],
body.agent-ui.zaadkom-soft-icons-v124713 img[src*="/navigation/account.svg"],
body.agent-ui.zaadkom-soft-icons-v124713 img[src*="/agent/drivers.svg"]{
  width:34px!important;
  height:34px!important;
  max-width:none!important;
  max-height:none!important;
}
/* Active account/work destinations keep full designer green; inactive destinations are deliberately muted. */
body.store-ui.zaadkom-soft-icons-v124713 .bottom .nav-item:not(.active)>img[src*="/navigation/account.svg"],
body.agent-ui.zaadkom-soft-icons-v124713 .agent-bottom-item:not(.active) img[src*="/navigation/account.svg"],
body.agent-ui.zaadkom-soft-icons-v124713 .agent-bottom-item:not(.active) img[src*="/agent/drivers.svg"],
body.agent-ui.zaadkom-soft-icons-v124713 .agent-bottom-item:not(.active) img[src*="/agent/performance.svg"]{
  filter:grayscale(.92) saturate(.28);
  opacity:.67;
}
body.store-ui.zaadkom-soft-icons-v124713 .bottom .nav-item.active>img[src*="/navigation/account.svg"],
body.agent-ui.zaadkom-soft-icons-v124713 .agent-bottom-item.active img[src*="/navigation/account.svg"],
body.agent-ui.zaadkom-soft-icons-v124713 .agent-bottom-item.active img[src*="/agent/drivers.svg"],
body.agent-ui.zaadkom-soft-icons-v124713 .agent-bottom-item.active img[src*="/agent/performance.svg"]{
  filter:none;
  opacity:1;
}
/* New 3D preparing artwork follows the existing responsive stage dimensions. */
body.agent-ui.zaadkom-soft-icons-v124713:not(.driver-ui) .agent-stage-tabs button>.ui-icon.za-designer-stage>img[src*="/agent/stage-preparing.svg"]{
  width:100%;
  height:100%;
  object-fit:contain;
}
/* Driver contact actions: slightly larger detailed artwork, same button/tap target. */
body.driver-ui.zaadkom-soft-icons-v124713 .driver-contact-actions .driver-designer-action-icon,
body.driver-ui.zaadkom-soft-icons-v124713 .driver-contact-actions .driver-designer-action-icon>img{
  width:28px;
  height:28px;
}
body.driver-ui.zaadkom-soft-icons-v124713 .driver-cash-heading h2{
  display:flex;
  align-items:center;
  gap:8px;
}
body.driver-ui.zaadkom-soft-icons-v124713 .driver-cash-heading-icon{
  width:34px;
  height:34px;
  object-fit:contain;
  flex:0 0 34px;
}


/* =========================================================
   Zaadkom Designer Icon Frameless Policy — v12.48.3
   Final cascade guard for every recently introduced designer-backed icon.
   IMPORTANT: page-specific Agent/Driver styles load after this stylesheet,
   therefore !important is deliberately limited to decorative icon shells only.
   Real buttons/links/cards keep their own hit areas, borders and backgrounds.
   ========================================================= */

/* Generic designer shells: never draw a second card behind the artwork. */
body.zaadkom-soft-icons-v124713 .za-designer-frame,
body.zaadkom-soft-icons-v124713 .za-designer-stage{
  padding:0!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  filter:none;
}
body.zaadkom-soft-icons-v124713 .za-designer-frame::before,
body.zaadkom-soft-icons-v124713 .za-designer-frame::after,
body.zaadkom-soft-icons-v124713 .za-designer-stage::before,
body.zaadkom-soft-icons-v124713 .za-designer-stage::after{
  box-shadow:none!important;
  background:transparent!important;
}

/* Customer/store bottom navigation artwork. The anchor remains the tap target. */
body.store-ui.zaadkom-soft-icons-v124713 .bottom .nav-item>img.icon.za-designer-icon,
body.store-ui.zaadkom-soft-icons-v124713 .bottom .nav-item.active>img.icon.za-designer-icon{
  width:30px!important;
  height:30px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  outline:0!important;
}

/* Customer/store drawer artwork. The drawer row remains untouched. */
body.store-ui.zaadkom-soft-icons-v124713 .drawer-link-icon.za-designer-frame,
body.store-ui.zaadkom-soft-icons-v124713 .drawer-link-icon.za-designer-frame>img{
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
body.store-ui.zaadkom-soft-icons-v124713 .drawer-link-icon.za-designer-frame{
  width:32px!important;
  height:32px!important;
  overflow:visible!important;
}
body.store-ui.zaadkom-soft-icons-v124713 .drawer-link-icon.za-designer-frame>img{
  width:32px!important;
  height:32px!important;
  padding:0!important;
  object-fit:contain!important;
}

/* Agent drawer artwork. Later Agent CSS may resize .ui-icon; this wins only for designer shells. */
body.agent-ui.zaadkom-soft-icons-v124713:not(.driver-ui) .drawer-link>.ui-icon.za-designer-frame,
body.agent-ui.zaadkom-soft-icons-v124713:not(.driver-ui) .drawer-link>.ui-icon.za-designer-frame>img{
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
body.agent-ui.zaadkom-soft-icons-v124713:not(.driver-ui) .drawer-link>.ui-icon.za-designer-frame{
  width:32px!important;
  height:32px!important;
  overflow:visible!important;
}
body.agent-ui.zaadkom-soft-icons-v124713:not(.driver-ui) .drawer-link>.ui-icon.za-designer-frame>img{
  width:32px!important;
  height:32px!important;
  padding:0!important;
  object-fit:contain!important;
}

/* Agent + Driver bottom navigation. Keep anchor hit-area and active top marker; remove only nested tile. */
body.agent-ui.zaadkom-soft-icons-v124713 .agent-bottom-nav .agent-bottom-icon.za-designer-frame,
body.agent-ui.zaadkom-soft-icons-v124713 .agent-bottom-nav .agent-bottom-item.active .agent-bottom-icon.za-designer-frame{
  width:32px!important;
  height:32px!important;
  min-width:32px!important;
  min-height:32px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  outline:0!important;
  overflow:visible!important;
}
body.agent-ui.zaadkom-soft-icons-v124713 .agent-bottom-nav .agent-bottom-icon.za-designer-frame>img{
  width:32px!important;
  height:32px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  object-fit:contain!important;
}
/* Detailed account/driver art may optically use 34px without creating a frame. */
body.agent-ui.zaadkom-soft-icons-v124713 .agent-bottom-nav img[src*="/navigation/account.svg"],
body.agent-ui.zaadkom-soft-icons-v124713 .agent-bottom-nav img[src*="/agent/drivers.svg"]{
  width:34px!important;
  height:34px!important;
  max-width:none!important;
  max-height:none!important;
}

/* Agent order stages. The stage button itself can stay active/white; the icon gets no nested tile. */
body.agent-ui.zaadkom-soft-icons-v124713:not(.driver-ui) .agent-stage-tabs button>.ui-icon.za-designer-stage,
body.agent-ui.zaadkom-soft-icons-v124713:not(.driver-ui) .agent-stage-tabs button.active>.ui-icon.za-designer-stage{
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  outline:0!important;
  overflow:visible!important;
}
body.agent-ui.zaadkom-soft-icons-v124713:not(.driver-ui) .agent-stage-tabs button>.ui-icon.za-designer-stage>img{
  width:100%!important;
  height:100%!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  object-fit:contain!important;
}

/* Driver header designer artwork: keep the 40px clickable shortcut, but no nested icon card. */
body.driver-ui.zaadkom-soft-icons-v124713 .driver-header-icon.has-designer-icon,
body.driver-ui.zaadkom-soft-icons-v124713 .driver-header-icon.has-designer-icon:active{
  background:transparent!important;
  background-image:none!important;
  border-color:transparent!important;
  box-shadow:none!important;
}
body.driver-ui.zaadkom-soft-icons-v124713 .driver-header-icon.has-designer-icon .za-designer-header-icon{
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

/* Driver account/help rows: row remains clickable; only the icon's secondary tile disappears. */
body.driver-ui.zaadkom-soft-icons-v124713 .driver-account-row-icon.za-designer-frame,
body.driver-ui.zaadkom-soft-icons-v124713 .driver-account-summary-icon.za-designer-frame{
  width:32px!important;
  height:32px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}
body.driver-ui.zaadkom-soft-icons-v124713 .driver-account-row-icon.za-designer-frame>img,
body.driver-ui.zaadkom-soft-icons-v124713 .driver-account-summary-icon.za-designer-frame>img{
  width:32px!important;
  height:32px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  object-fit:contain!important;
}

/* Driver order utility art already lives inside real action buttons. Never add an inner tile. */
body.driver-ui.zaadkom-soft-icons-v124713 .driver-designer-action-icon,
body.driver-ui.zaadkom-soft-icons-v124713 .driver-designer-action-icon>img,
body.driver-ui.zaadkom-soft-icons-v124713 .driver-cash-heading-icon{
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  outline:0!important;
}

/* Cart artwork: preserve actual cart/add buttons, remove only decorative icon shell in empty state. */
body.store-ui.zaadkom-soft-icons-v124713 .empty-icon.za-designer-empty-cart{
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
body.store-ui.zaadkom-soft-icons-v124713 .za-designer-cart-icon,
body.store-ui.zaadkom-soft-icons-v124713 .za-designer-cart-add,
body.store-ui.zaadkom-soft-icons-v124713 .empty-icon.za-designer-empty-cart>img{
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

/* Retry artwork: the green action button remains a real button; no white mini-card before its label. */
body.driver-ui.zaadkom-soft-icons-v124713 .agent-main-action[data-designer-retry="1"]::before{
  border:0!important;
  border-radius:0!important;
  background-color:transparent!important;
  box-shadow:none!important;
}


/* Zaadkom Icon Library Consolidation — v12.48.5
   Stable semantic paths under /assets/icons/zaadkom/.
   Visual artwork and hit-area behavior are unchanged. */


/* =========================================================
   Zaadkom True SVG + Optical Sizing Pass — v12.48.8
   27 active icons are true vector SVG artwork. Artwork sizes are context-aware;
   existing links/buttons remain responsible for their touch targets and layout.
   ========================================================= */
body.store-ui.zaadkom-soft-icons-v124713 .bottom .nav-item>img.icon.za-designer-icon,
body.store-ui.zaadkom-soft-icons-v124713 .bottom .nav-item.active>img.icon.za-designer-icon{
  width:32px!important;height:32px!important;max-width:none!important;max-height:none!important;
}
body.store-ui.zaadkom-soft-icons-v124713 .bottom .nav-item>img[src*="/navigation/account.svg"]{width:34px!important;height:34px!important}
body.store-ui.zaadkom-soft-icons-v124713 .store-bottom-search-icon>img.za-designer-icon{
  width:26px!important;height:26px!important;max-width:26px!important;max-height:26px!important;padding:0!important;
}
body.store-ui.zaadkom-soft-icons-v124713 .drawer-link-icon.za-designer-frame,
body.store-ui.zaadkom-soft-icons-v124713 .drawer-link-icon.za-designer-frame>img,
body.agent-ui.zaadkom-soft-icons-v124713:not(.driver-ui) .drawer-link>.ui-icon.za-designer-frame,
body.agent-ui.zaadkom-soft-icons-v124713:not(.driver-ui) .drawer-link>.ui-icon.za-designer-frame>img,
body.driver-ui.zaadkom-soft-icons-v124713 .driver-account-row-icon.za-designer-frame,
body.driver-ui.zaadkom-soft-icons-v124713 .driver-account-row-icon.za-designer-frame>img,
body.driver-ui.zaadkom-soft-icons-v124713 .driver-account-summary-icon.za-designer-frame,
body.driver-ui.zaadkom-soft-icons-v124713 .driver-account-summary-icon.za-designer-frame>img{
  width:32px!important;height:32px!important;max-width:none!important;max-height:none!important;
}
body.agent-ui.zaadkom-soft-icons-v124713 .agent-bottom-nav .agent-bottom-icon.za-designer-frame,
body.agent-ui.zaadkom-soft-icons-v124713 .agent-bottom-nav .agent-bottom-icon.za-designer-frame>img{
  width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;max-width:none!important;max-height:none!important;
}
body.agent-ui.zaadkom-soft-icons-v124713 .agent-bottom-nav img[src*="/navigation/account.svg"]{width:34px!important;height:34px!important}
body.agent-ui.zaadkom-soft-icons-v124713:not(.driver-ui) .agent-stage-tabs button>.ui-icon.za-designer-stage{
  width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important;
}
@media (max-width:349px){body.agent-ui.zaadkom-soft-icons-v124713:not(.driver-ui) .agent-stage-tabs button>.ui-icon.za-designer-stage{width:26px!important;height:26px!important;min-width:26px!important;min-height:26px!important}}
@media (max-width:639px){body.agent-ui.zaadkom-soft-icons-v124713:not(.driver-ui) .agent-work-overview.is-compact-sticky .agent-stage-tabs button>.ui-icon.za-designer-stage{width:26px!important;height:26px!important;min-width:26px!important;min-height:26px!important}}
body.store-ui.zaadkom-soft-icons-v124713 .header-cart-icon .za-designer-cart-icon{width:34px!important;height:34px!important;max-width:34px!important;max-height:34px!important}
body.store-ui.zaadkom-soft-icons-v124713 .add-control .za-designer-cart-add{width:32px!important;height:32px!important;max-width:32px!important;max-height:32px!important}
body.store-ui.zaadkom-soft-icons-v124713 .empty-icon.za-designer-empty-cart>img{width:60px!important;height:60px!important}
body.driver-ui.zaadkom-soft-icons-v124713 .driver-contact-actions .driver-designer-action-icon,
body.driver-ui.zaadkom-soft-icons-v124713 .driver-contact-actions .driver-designer-action-icon>img{width:30px!important;height:30px!important;max-width:30px!important;max-height:30px!important}
body.driver-ui.zaadkom-soft-icons-v124713 .driver-cash-heading-icon{width:34px!important;height:34px!important;flex:0 0 34px!important}
body.driver-ui.zaadkom-soft-icons-v124713 .agent-main-action[data-designer-retry="1"]::before{width:28px!important;height:28px!important;flex-basis:28px!important;background-size:26px 26px!important}
body.store-ui.zaadkom-soft-icons-v124713 .bottom .nav-item:not(.active)>img.za-designer-icon,
body.agent-ui.zaadkom-soft-icons-v124713 .agent-bottom-item:not(.active) .za-designer-frame>img{filter:grayscale(.88) saturate(.35);opacity:.72}
body.store-ui.zaadkom-soft-icons-v124713 .bottom .nav-item.active>img.za-designer-icon,
body.agent-ui.zaadkom-soft-icons-v124713 .agent-bottom-item.active .za-designer-frame>img{filter:none;opacity:1}


/* =========================================================
   Zaadkom Icon Consistency + Legacy Cleanup — v12.48.10
   - Cart+ optical artwork: 34px (touch target/layout unchanged)
   - Agent delivery contact actions reuse Driver true-SVG artwork: 30px
   ========================================================= */
body.store-ui.zaadkom-soft-icons-v124713 .add-control .za-designer-cart-add{
  width:34px!important;height:34px!important;max-width:34px!important;max-height:34px!important;
}
body.agent-ui.zaadkom-soft-icons-v124713:not(.driver-ui) .agent-contact-action>.za-agent-contact-icon{
  width:30px!important;height:30px!important;max-width:30px!important;max-height:30px!important;
  display:block!important;object-fit:contain!important;flex:0 0 30px!important;
  padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;
}