/* IPOO compact icon sizes — mobile-first override.
   Loaded last so these win over per-screen icon rules. */

/* App-wide SVG containment guard. Component rules below may make icons
   smaller, but no inline SVG may escape its containing element. */
#shell svg {
  max-width: 100% !important;
  max-height: 100% !important;
   border: 0 !important;
   outline: 0 !important;
}

html body #shell .screen#screen-products .prod-grid-m3,
html body #shell .screen#screen-top-sellers .prod-grid-m3,
html body #shell .screen#screen-popular .prod-grid-m3,
html body #shell .screen#sc-catpage .prod-grid-m3 {
   display: grid !important;
   grid-template-columns: 1fr 1fr !important;
}

html body #shell #screen-products .products-search-tools {
   display: none !important;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   margin: 12px 16px 18px !important;
   padding: 16px 18px !important;
   border: 1px solid rgba(232, 117, 34, 0.14) !important;
   border-radius: 18px !important;
   background: rgba(255, 250, 247, 0.92) !important;
   box-shadow: 0 10px 24px rgba(24, 13, 5, 0.06) !important;
}

html body #shell #screen-products .products-search-tools.is-visible {
   display: flex !important;
}

html body #shell #screen-products .products-search-caption {
   color: #5e4637;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 0.04em;
   text-transform: uppercase;
}

html body #shell #screen-products .products-sort-control {
   display: flex;
   align-items: center;
   min-width: 0;
}

html body #shell #screen-products #prod-sort-select {
   min-width: 150px;
   max-width: 190px;
   padding: 9px 30px 9px 12px !important;
   border: 1px solid rgba(232, 117, 34, 0.2) !important;
   border-radius: 12px !important;
   background: #fff !important;
   color: #3c281d !important;
   font-family: inherit;
   font-size: 13px;
   font-weight: 600;
}

@media (max-width: 430px) {
   html body #shell #screen-products .products-search-tools {
      align-items: flex-start;
      flex-direction: column;
   }

   html body #shell #screen-products .products-sort-control,
   html body #shell #screen-products #prod-sort-select {
      width: 100%;
      max-width: none;
   }
}

/* Keep the Home header as one stable row. The logo is centered separately;
    controls must remain in the header flow so they cannot be clipped. */
#screen-home > .topbar {
   display: flex !important;
   align-items: center !important;
   justify-content: flex-end !important;
   flex-shrink: 0 !important;
   min-height: 82px !important;
   height: 82px !important;
   flex: 0 0 82px !important;
   box-sizing: border-box !important;
   padding: 10px 14px !important;
   border-radius: 0 0 24px 24px !important;
   overflow: hidden !important;
}

html body #screen-home > .topbar {
   min-height: 82px !important;
   height: 82px !important;
   flex: 0 0 82px !important;
   padding: 10px 14px !important;
   border-radius: 0 0 24px 24px !important;
}

html body #screen-home > .topbar > .topbar-logo {
   position: absolute !important;
   top: 50% !important;
   left: 50% !important;
   right: auto !important;
   width: auto !important;
   margin: 0 !important;
   transform: translate(-50%, -50%) !important;
   z-index: 1 !important;
}

html body #screen-home > .topbar > .home-left-control {
   background: var(--md-primary) !important;
   color: #fff !important;
   border: 0 !important;
   box-shadow: 0 6px 14px rgba(255, 77, 0, 0.28) !important;
   z-index: 2 !important;
}

html body #shell #screen-home > .topbar > .home-left-control {
   background: var(--md-primary) !important;
   color: #fff !important;
   border: 0 !important;
}

html body #screen-home > .topbar > .home-left-control svg {
   color: #fff !important;
   stroke: #fff !important;
}

html body #screen-home > .topbar > .header-actions > .icon-btn {
   background: rgba(255, 255, 255, 0.08) !important;
   color: #fff !important;
   border: 1px solid rgba(255, 255, 255, 0.18) !important;
   box-shadow: none !important;
   z-index: 2 !important;
}

html body #screen-home > .topbar > .header-actions > .icon-btn svg {
   color: #fff !important;
   stroke: #fff !important;
}

#screen-home > .topbar > .home-left-control {
   margin-right: auto !important;
}

#screen-home > .topbar > .header-actions {
   display: flex !important;
   align-items: center !important;
   gap: 8px !important;
}

/* Bottom navigation icons */
.ni svg,
.nav .ni svg { width: 16px !important; height: 16px !important; }

/* Primary icon buttons / top bars / back buttons */
.icon-btn svg,
.search-bar .s-icon svg,
.search-bar-luxe .s-icon svg,
.search-full-bar .icon-btn svg,
.back-btn svg,
.cat-icon svg { width: 18px !important; height: 18px !important; }

/* Generic buttons */
button svg { width: 16px !important; height: 16px !important; }

/* Home category icons (were 54px inline) */
.home-cat-grid .icon-wrap svg { width: 34px !important; height: 34px !important; }

/* 22px icons -> 17px */
.prod-fab svg,
.prod-card .add-btn svg,
.ibtn svg,
#sc-help .crow-ico svg,
#sc-about .feat-ico svg,
.nicon svg,
.ncard-del svg,
#ord3-topbar .ord3-back svg,
.loyalty-card-icon svg,
.ni .ni-pill svg,
.copy-id-btn svg,
.wa-btn svg,
.btn-filled svg { width: 17px !important; height: 17px !important; }

/* 20px icons -> 16px */
.pay-method-ico svg,
.li-ico svg,
.crow-ico svg,
.feat-ico svg,
#sc-profile .pli-ico svg,
#sc-loyalty .pts-ico svg,
.rdm-arrow svg,
.ord3-top-btn svg,
.checkout-step .step-icon svg,
.menu-item .mi-icon svg,
.notif-item .ni-icon svg,
.ipoo-google-fallback svg { width: 16px !important; height: 16px !important; }

/* 24px icons -> 18px */
#sc-loyalty .rew-ico svg { width: 18px !important; height: 18px !important; }

/* Profile page: heading (top-bar back arrow) + menu-list leading icons */
#sc-profile .tbar .back-btn svg { width: 15px !important; height: 15px !important; }

/* Canonical profile icon size: keep the menu leading icon consistent with the
    profile list item layout and prevent the generic compact icon override from
    fighting the profile-screen CSS. */
#sc-profile .pli-ico {
   width: 44px !important;
   height: 44px !important;
   min-width: 44px !important;
   min-height: 44px !important;
   border-radius: 14px !important;
}

#sc-profile .pli-ico svg {
   width: 18px !important;
   height: 18px !important;
   min-width: 18px !important;
   min-height: 18px !important;
}

/* Bigger illustrations / empty states (kept proportional) */
.cart-empty svg { width: 56px !important; height: 56px !important; }
.empty-st svg { width: 52px !important; height: 52px !important; }
.nempty-ic svg { width: 32px !important; height: 32px !important; }
.splash-logo svg { width: 30px !important; height: 30px !important; }
.cart-empty-icon svg { width: 28px !important; height: 28px !important; }
.help-hero-ico svg { width: 28px !important; height: 28px !important; }
.ord3-empty-icon svg { width: 26px !important; height: 26px !important; }
.rdm-icon svg,
.empty-state-icon svg { width: 24px !important; height: 24px !important; }
.ord3-error-icon svg,
#sc-loyalty .pts-empty-ico svg { width: 22px !important; height: 22px !important; }

/* Match the home profile control on the orders page. */
html body #shell #sc-orders > #ord3-topbar > .ord3-profile-btn {
   width: 48px !important;
   height: 48px !important;
   min-width: 48px !important;
   min-height: 48px !important;
   flex: 0 0 48px !important;
   border-radius: 50% !important;
   background: rgba(255, 255, 255, 0.08) !important;
   border: 1px solid rgba(255, 255, 255, 0.18) !important;
   color: #fff !important;
   box-shadow: none !important;
}

html body #shell #sc-orders > #ord3-topbar > .ord3-profile-btn svg {
   width: 24px !important;
   height: 24px !important;
   fill: none !important;
   stroke: currentColor !important;
}

html body #shell #sc-orders > #ord3-topbar > .ord3-support-btn {
   width: 48px !important;
   height: 48px !important;
   min-width: 48px !important;
   min-height: 48px !important;
   flex: 0 0 48px !important;
   border-radius: 50% !important;
   background: rgba(255, 255, 255, 0.08) !important;
   border: 1px solid rgba(255, 255, 255, 0.18) !important;
   color: #168c4a !important;
   box-shadow: none !important;
}

html body #shell #sc-orders > #ord3-topbar > .ord3-support-btn svg {
   width: 24px !important;
   height: 24px !important;
   fill: currentColor !important;
   stroke: currentColor !important;
}