/* ZamaniAuto storefront UX hardening, 2026-10. */
:root{--za-ink:oklch(24% .035 245);--za-muted:oklch(48% .028 245);--za-line:oklch(86% .025 245);--za-surface:oklch(99% .008 245);--za-focus:oklch(70% .16 235)}
html{scroll-behavior:smooth}body.shop-body{min-width:320px;overflow-x:clip;color:var(--za-ink);background:var(--za-surface)}
/* One owner for store-header positioning: clear the fixed 64px global navbar
   on initial paint and remain docked immediately below it while scrolling. */
.shopbar{position:sticky;top:64px;z-index:500;margin-top:64px}
body.shop-body :where(button,input,select,textarea){font:inherit}body.shop-body :where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:3px solid var(--za-focus);outline-offset:3px}
body.shop-body :where(button,.btn,.btn-checkout,.btn-apply-filters,.btn-clear-filters){min-height:44px}
.shop-container{width:min(100% - 32px,1440px);margin-inline:auto}.shop-page-wrap{padding-block:clamp(20px,3vw,48px)}
.shop-layout{display:grid;grid-template-columns:minmax(240px,280px) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start}.shop-content{min-width:0}
.shop-listing-title{margin:0 0 18px;color:var(--za-ink);font-size:clamp(1.35rem,2.2vw,2rem);line-height:1.35;text-wrap:balance}
.products-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,24px);align-items:stretch}.product-card{min-width:0;height:100%;overflow:clip}
.product-card :where(h2,h3,.product-card-title){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;text-wrap:pretty}.product-card img{max-width:100%;height:auto}
.shop-filters{position:sticky;top:96px;max-height:calc(100dvh - 112px);overflow:auto;scrollbar-gutter:stable}.shop-filters-overlay{z-index:90}.shop-toolbar{gap:12px;min-height:56px}
.shop-toolbar select,.shop-filters input,.shop-filters select,.shop-filters button{min-height:44px}.active-filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-block:12px 16px}.filter-chip{max-width:100%}.filter-chip a{min-width:32px;min-height:32px;display:inline-grid;place-items:center}
.shop-pagination{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-block:28px}.shop-pagination :where(a,span){min-width:44px;min-height:44px;display:inline-grid;place-items:center}.shopbar-main,.shopbar-search{min-width:0}.shopbar-search input{min-height:44px}
@media(max-width:1100px){.products-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.shop-layout{grid-template-columns:minmax(220px,250px) minmax(0,1fr)}}
@media(max-width:1024px){.shop-container{width:min(100% - 24px,900px)}.shop-layout{display:block}.shop-filters{position:fixed;inset-block:0;inset-inline-end:0;width:min(88vw,360px);max-height:none;z-index:100;transform:translateX(110%);transition:transform 220ms cubic-bezier(.16,1,.3,1);box-shadow:-12px 0 32px oklch(15% .03 245 / .18)}[dir=ltr] .shop-filters{transform:translateX(-110%);inset-inline-start:0;inset-inline-end:auto;box-shadow:12px 0 32px oklch(15% .03 245 / .18)}.shop-filters.open{transform:translateX(0)}.products-grid{grid-template-columns:repeat(3,minmax(0,1fr))}body.shop-body:has(.shop-filters.open){overflow:hidden}}
@media(max-width:680px){.shop-container{width:min(100% - 20px,560px)}.shop-page-wrap{padding-block:16px 96px}.products-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.shop-listing-title{font-size:1.3rem;margin-bottom:12px}.shop-pagination{margin-bottom:92px}}
@media(max-width:390px){.shop-container{width:min(100% - 16px,360px)}.products-grid{gap:8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
.za-account-page-heading{margin:20px 0 18px}.za-account-page-heading h1{font-size:clamp(1.35rem,2.2vw,2rem);line-height:1.35;font-weight:900;text-wrap:balance}
@media(max-width:680px){.za-account-page-heading{margin-block:14px}.za-account-page-heading h1{font-size:1.3rem}}

/* Desktop-only procurement composition requested by the storefront review.
   Mobile/tablet keep the existing compact flow unchanged. */
@media (min-width:1025px) {
  .shop-page-wrap.shop-home-view .za-procurement-compact {
    grid-template-rows:auto auto !important;
    column-gap:24px !important;
    row-gap:14px !important;
    align-items:start !important;
  }
  /* Column one: one shared framed module containing search + catalog action. */
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-copy {
    display:grid !important;
    grid-template-rows:132px auto !important;
    gap:12px !important;
    align-content:start !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-copy .za-proc-search-form {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:8px !important;
    width:100% !important;
    height:132px !important;
    min-height:132px !important;
    padding:18px !important;
    box-sizing:border-box !important;
    border:1px solid #d9e3ea !important;
    border-radius:16px !important;
    background:#f8fbfd !important;
    box-shadow:0 10px 24px rgba(25,65,90,.08) !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact .za-proc-search-form .za-proc-input-wrap {
    min-width:0 !important;
    height:56px !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact .za-proc-search-form input {
    width:100% !important;
    height:56px !important;
    min-height:56px !important;
    border:1px solid #9fb3c6 !important;
    border-radius:10px !important;
    background:#fff !important;
    text-align:center !important;
    box-sizing:border-box !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact .za-proc-search-form #zaProcSubmitBtn {
    width:150px !important;
    height:56px !important;
    min-height:56px !important;
    margin:0 !important;
    border-radius:10px !important;
    justify-content:center !important;
    white-space:nowrap !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-copy .za-proc-head-inline {
    grid-row:2 !important;
    margin:0 !important;
    text-align:center !important;
  }
  /* Column two: the engineering CTA is the same top-module height. */
  .shop-page-wrap.shop-home-view .za-procurement-compact > .procurement-project-cta {
    display:grid !important;
    grid-template-rows:132px auto auto !important;
    gap:12px !important;
    align-content:start !important;
    min-width:0 !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact .procurement-project-link {
    grid-row:1 !important;
    width:100% !important;
    height:132px !important;
    min-height:132px !important;
    margin:0 !important;
    box-sizing:border-box !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact .procurement-project-cta h3 {
    grid-row:2 !important;
    margin:0 !important;
    text-align:center !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact .procurement-project-cta p {
    grid-row:3 !important;
    margin:0 !important;
    text-align:center !important;
  }
  /* Column three: the buying-list copy lives inside the top box, not below it. */
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-paths {
    display:grid !important;
    grid-template-rows:132px auto !important;
    gap:12px !important;
    align-content:start !important;
    min-width:0 !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact .procurement-primary {
    grid-row:1 !important;
    display:grid !important;
    grid-template-columns:44px minmax(0,1fr) 44px !important;
    align-items:center !important;
    width:100% !important;
    height:132px !important;
    min-height:132px !important;
    margin:0 !important;
    padding:16px 18px !important;
    box-sizing:border-box !important;
    text-align:center !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact .procurement-primary .procurement-text {
    display:grid !important;
    justify-items:center !important;
    gap:4px !important;
    min-width:0 !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact .procurement-primary .procurement-text b,
  .shop-page-wrap.shop-home-view .za-procurement-compact .procurement-primary .procurement-text small {
    display:block !important;
    max-width:100% !important;
    text-align:center !important;
    white-space:normal !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact .procurement-primary .procurement-text b {
    font-size:.94rem !important;
    line-height:1.5 !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact .procurement-primary .procurement-text small {
    font-size:.74rem !important;
    line-height:1.55 !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact .procurement-primary-desktop-caption {
    display:none !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact .procurement-facts {
    grid-row:2 !important;
    margin:0 !important;
  }
  /* Keep the three top modules exactly equal in width and height. */
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-copy,
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-paths,
  .shop-page-wrap.shop-home-view .za-procurement-compact > .procurement-project-cta {
    min-width:0 !important;
  }
}

/* Desktop refinement: compact the complete three-column procurement panel.
   The gold halo is intentionally limited to the search/catalog module. */
@media (min-width:1025px) {
  .shop-page-wrap.shop-home-view .za-procurement-compact {
    padding:14px !important;
    column-gap:12px !important;
    row-gap:10px !important;
    border-radius:14px !important;
    box-shadow:0 4px 16px rgba(20,50,70,.07) !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-copy,
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-paths,
  .shop-page-wrap.shop-home-view .za-procurement-compact > .procurement-project-cta {
    grid-template-rows:112px auto !important;
    gap:8px !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-copy {
    padding:10px !important;
    border:1px solid rgba(214,171,48,.38) !important;
    border-radius:14px !important;
    background:radial-gradient(circle at 50% 42%, rgba(255,244,190,.74) 0%, rgba(255,249,224,.48) 42%, rgba(255,255,255,.96) 82%) !important;
    box-shadow:0 0 0 1px rgba(214,171,48,.12), 0 8px 18px rgba(182,139,20,.12) !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-copy .za-proc-search-form,
  .shop-page-wrap.shop-home-view .za-procurement-compact .procurement-primary,
  .shop-page-wrap.shop-home-view .za-procurement-compact .procurement-project-link {
    height:112px !important;
    min-height:112px !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-copy .za-proc-search-form {
    grid-template-columns:minmax(0,1fr) auto !important;
    gap:6px !important;
    padding:10px !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact .za-proc-search-form .za-proc-input-wrap,
  .shop-page-wrap.shop-home-view .za-procurement-compact .za-proc-search-form input,
  .shop-page-wrap.shop-home-view .za-procurement-compact .za-proc-search-form #zaProcSubmitBtn {
    height:46px !important;
    min-height:46px !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact .za-proc-search-form #zaProcSubmitBtn {
    width:126px !important;
    padding-inline:10px !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact .procurement-primary {
    padding:10px 12px !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact .procurement-primary .procurement-text b {
    font-size:.86rem !important;
    line-height:1.42 !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact .procurement-primary .procurement-text small {
    font-size:.69rem !important;
    line-height:1.42 !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact .procurement-project-link {
    padding:10px 14px !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact .procurement-project-cta h3 {
    font-size:1.08rem !important;
    line-height:1.35 !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact .procurement-project-cta p {
    font-size:.86rem !important;
    line-height:1.65 !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact .procurement-facts {
    gap:6px !important;
    padding:4px 0 0 !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact .procurement-facts > span {
    padding:6px 3px !important;
    border-radius:8px !important;
  }
}

/* Final desktop interpretation: the catalog action and technical search are
   two inner controls inside one pale-yellow module, equal to the two peer modules. */
@media (min-width:1025px) {
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-copy {
    grid-template-rows:132px auto !important;
    gap:10px !important;
    padding:10px !important;
    min-height:0 !important;
    box-sizing:border-box !important;
    border:1px solid #eadb9a !important;
    border-radius:14px !important;
    background:#fff8d9 !important;
    box-shadow:0 5px 16px rgba(181,145,29,.12) !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-copy .za-proc-search-form {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(120px, .72fr) !important;
    align-items:center !important;
    gap:8px !important;
    height:132px !important;
    min-height:132px !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact .za-proc-search-form .za-proc-input-wrap {
    height:58px !important;
    min-height:58px !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact .za-proc-search-form input {
    height:58px !important;
    min-height:58px !important;
    padding:0 12px !important;
    border:1px solid #9caec2 !important;
    border-radius:10px !important;
    background:#fffdf3 !important;
    color:#21384b !important;
    font-size:.8rem !important;
    text-align:center !important;
    box-sizing:border-box !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact .za-proc-search-form #zaProcSubmitBtn {
    width:100% !important;
    height:58px !important;
    min-height:58px !important;
    margin:0 !important;
    padding:0 10px !important;
    border-radius:10px !important;
    background:#0d7377 !important;
    color:#fff !important;
    justify-content:center !important;
    white-space:nowrap !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-copy .za-proc-head-inline {
    grid-row:2 !important;
    margin:0 !important;
    text-align:center !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-copy #procurementTitle {
    font-size:1.1rem !important;
    line-height:1.4 !important;
    color:#152b3c !important;
  }
}

/* Exact desktop geometry: all three top cards share one fixed footprint.
   The search heading is deliberately positioned below the yellow card. */
@media (min-width:1025px) {
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-copy {
    position:relative !important;
    display:block !important;
    height:132px !important;
    min-height:132px !important;
    padding:0 !important;
    box-sizing:border-box !important;
    overflow:visible !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-copy .za-proc-search-form {
    position:absolute !important;
    inset:0 !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(120px,.72fr) !important;
    align-items:center !important;
    gap:8px !important;
    width:100% !important;
    height:132px !important;
    min-height:132px !important;
    padding:14px !important;
    box-sizing:border-box !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-copy .za-proc-head-inline {
    position:absolute !important;
    inset-inline:0 !important;
    top:calc(100% + 10px) !important;
    z-index:2 !important;
    display:block !important;
    margin:0 !important;
    padding:0 !important;
    text-align:center !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-copy #procurementTitle {
    margin:0 !important;
    font-size:1.1rem !important;
    line-height:1.4 !important;
    color:#152b3c !important;
    white-space:nowrap !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-paths,
  .shop-page-wrap.shop-home-view .za-procurement-compact > .procurement-project-cta {
    height:132px !important;
    min-height:132px !important;
    box-sizing:border-box !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-paths {
    grid-template-rows:132px auto !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact > .procurement-project-cta {
    grid-template-rows:132px auto auto !important;
  }
}

/* Desktop correction: clean three-column flow, no absolute positioning.
   Each column owns its card and its caption/facts, so nothing can overlap. */
@media (min-width:1025px) {
  .shop-page-wrap.shop-home-view .za-procurement-compact {
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    grid-template-rows:auto !important;
    align-items:start !important;
    column-gap:16px !important;
    row-gap:12px !important;
    padding:14px !important;
    overflow:visible !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-copy,
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-paths,
  .shop-page-wrap.shop-home-view .za-procurement-compact > .procurement-project-cta {
    position:static !important;
    display:grid !important;
    min-width:0 !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    align-self:start !important;
    overflow:visible !important;
    box-sizing:border-box !important;
  }
  /* Column 1: pale-yellow card, then title below it. */
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-copy {
    grid-template-rows:132px auto !important;
    gap:10px !important;
    padding:10px !important;
    border:1px solid #eadb9a !important;
    border-radius:14px !important;
    background:#fff8d9 !important;
    box-shadow:0 5px 16px rgba(181,145,29,.12) !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-copy .za-proc-search-form {
    position:static !important;
    grid-row:1 !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(120px,.72fr) !important;
    gap:8px !important;
    width:100% !important;
    height:132px !important;
    min-height:132px !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    box-sizing:border-box !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-copy .za-proc-head-inline {
    position:static !important;
    grid-row:2 !important;
    inset:auto !important;
    display:block !important;
    margin:0 !important;
    padding:0 !important;
    text-align:center !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-copy #procurementTitle {
    margin:0 !important;
    color:#152b3c !important;
    font-size:1.1rem !important;
    line-height:1.4 !important;
    white-space:nowrap !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact .za-proc-search-form .za-proc-input-wrap,
  .shop-page-wrap.shop-home-view .za-procurement-compact .za-proc-search-form input,
  .shop-page-wrap.shop-home-view .za-procurement-compact .za-proc-search-form #zaProcSubmitBtn {
    height:58px !important;
    min-height:58px !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact .za-proc-search-form #zaProcSubmitBtn {
    width:100% !important;
    margin:0 !important;
  }
  /* Column 2: project card, then its title and supporting copy. */
  .shop-page-wrap.shop-home-view .za-procurement-compact > .procurement-project-cta {
    grid-template-rows:132px auto auto !important;
    gap:10px !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact .procurement-project-link {
    position:static !important;
    grid-row:1 !important;
    width:100% !important;
    height:132px !important;
    min-height:132px !important;
    margin:0 !important;
    box-sizing:border-box !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact .procurement-project-cta h3 {
    grid-row:2 !important;
    margin:0 !important;
    font-size:1.08rem !important;
    line-height:1.4 !important;
    text-align:center !important;
    white-space:normal !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact .procurement-project-cta p {
    grid-row:3 !important;
    margin:0 !important;
    font-size:.86rem !important;
    line-height:1.7 !important;
    text-align:center !important;
  }
  /* Column 3: blue request card, then facts below it. */
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-paths {
    grid-template-rows:132px auto !important;
    gap:10px !important;
    padding:0 !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact .procurement-primary {
    position:static !important;
    grid-row:1 !important;
    display:grid !important;
    grid-template-columns:36px minmax(0,1fr) 36px !important;
    align-items:center !important;
    width:100% !important;
    height:132px !important;
    min-height:132px !important;
    margin:0 !important;
    padding:10px 12px !important;
    box-sizing:border-box !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact .procurement-primary .procurement-text {
    display:grid !important;
    justify-items:center !important;
    gap:4px !important;
    min-width:0 !important;
    text-align:center !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact .procurement-primary .procurement-text b,
  .shop-page-wrap.shop-home-view .za-procurement-compact .procurement-primary .procurement-text small {
    display:block !important;
    max-width:100% !important;
    text-align:center !important;
    white-space:normal !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact .procurement-primary .procurement-text b { font-size:.86rem !important; line-height:1.45 !important; }
  .shop-page-wrap.shop-home-view .za-procurement-compact .procurement-primary .procurement-text small { font-size:.69rem !important; line-height:1.45 !important; }
  .shop-page-wrap.shop-home-view .za-procurement-compact .procurement-primary-desktop-caption { display:none !important; }
  .shop-page-wrap.shop-home-view .za-procurement-compact .procurement-facts {
    grid-row:2 !important;
    margin:0 !important;
    padding:0 !important;
  }
}

/* Final desktop correction: only the search controls are yellow.
   The heading is outside the yellow card, below it, while the card itself
   keeps the same footprint as the project and purchase cards. */
@media (min-width:1025px) {
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-copy {
    display:grid !important;
    grid-template-rows:132px auto !important;
    gap:10px !important;
    height:auto !important;
    min-height:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    overflow:visible !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-copy .za-proc-search-form {
    position:static !important;
    grid-row:1 !important;
    width:100% !important;
    height:132px !important;
    min-height:132px !important;
    padding:14px !important;
    box-sizing:border-box !important;
    border:1px solid #eadb9a !important;
    border-radius:14px !important;
    background:#fff8d9 !important;
    box-shadow:0 5px 16px rgba(181,145,29,.12) !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-copy .za-proc-head-inline {
    position:static !important;
    grid-row:2 !important;
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    text-align:center !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-copy #procurementTitle {
    margin:0 !important;
    color:#152b3c !important;
    font-size:1.1rem !important;
    line-height:1.4 !important;
    white-space:nowrap !important;
  }
}

/* Desktop typography alignment: the two column headings share one h2-scale
   baseline; the project description stays in the next row under its heading. */
@media (min-width:1025px) {
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-copy .za-proc-head-inline,
  .shop-page-wrap.shop-home-view .za-procurement-compact > .procurement-project-cta h3 {
    min-height:34px !important;
    display:flex !important;
    align-items:flex-start !important;
    justify-content:center !important;
    margin:0 !important;
    text-align:center !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-copy #procurementTitle,
  .shop-page-wrap.shop-home-view .za-procurement-compact > .procurement-project-cta h3 {
    font-size:1.25rem !important;
    font-weight:900 !important;
    line-height:1.45 !important;
    letter-spacing:-.01em !important;
    color:#152b3c !important;
    white-space:normal !important;
    text-wrap:balance !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact > .procurement-project-cta p {
    grid-row:3 !important;
    display:block !important;
    margin:0 !important;
    text-align:center !important;
    font-size:.92rem !important;
    line-height:1.75 !important;
    color:#365866 !important;
  }
}

/* Description lives inside the link markup on desktop, never as an overlay. */
.za-project-description-desktop { display:none; }
@media (min-width:1025px) {
  .shop-page-wrap.shop-home-view .za-procurement-compact > .procurement-project-cta {
    position:static !important;
    display:grid !important;
    grid-template-rows:132px auto !important;
    gap:18px !important;
    height:auto !important;
    min-height:0 !important;
    padding:0 !important;
    overflow:visible !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact .procurement-project-link {
    position:static !important;
    display:grid !important;
    grid-template-columns:32px minmax(0,1fr) 32px !important;
    align-items:center !important;
    gap:8px !important;
    grid-row:1 !important;
    width:100% !important;
    height:132px !important;
    min-height:132px !important;
    margin:0 !important;
    padding:12px !important;
    box-sizing:border-box !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact .procurement-project-link-copy {
    display:grid !important;
    gap:8px !important;
    min-width:0 !important;
    width:100% !important;
    justify-items:center !important;
    text-align:center !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact .procurement-project-link-copy strong {
    font-size:1rem !important;
    line-height:1.4 !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact .za-project-description-desktop {
    display:block !important;
    color:oklch(97% .01 181) !important;
    font-size:.82rem !important;
    line-height:1.65 !important;
    font-weight:500 !important;
    white-space:normal !important;
    text-align:center !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact .procurement-project-cta p {
    display:none !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact .procurement-project-cta h3 {
    position:static !important;
    inset:auto !important;
    transform:none !important;
    grid-row:2 !important;
    display:block !important;
    width:100% !important;
    margin:0 !important;
    font-size:1.25rem !important;
    line-height:1.45 !important;
    font-weight:900 !important;
    color:#152b3c !important;
    text-align:center !important;
    white-space:normal !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-copy .za-proc-head-inline,
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-copy #procurementTitle {
    position:static !important;
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    text-align:center !important;
    transform:none !important;
    margin-top:8px !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-copy #procurementTitle {
    font-size:1.25rem !important;
    line-height:1.45 !important;
    font-weight:900 !important;
  }
}

/* Desktop final heading alignment: equal breathing room and one shared baseline. */
@media (min-width:1025px) {
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-copy,
  .shop-page-wrap.shop-home-view .za-procurement-compact > .procurement-project-cta {
    row-gap:26px !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-copy .za-proc-head-inline,
  .shop-page-wrap.shop-home-view .za-procurement-compact > .procurement-project-cta h3 {
    margin-top:0 !important;
    min-height:36px !important;
    align-self:start !important;
    display:flex !important;
    align-items:flex-start !important;
    justify-content:center !important;
    text-align:center !important;
  }
}

/* Desktop: exact shared heading line for the left and middle columns. */
@media (min-width:1025px) {
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-copy .za-proc-head-inline,
  .shop-page-wrap.shop-home-view .za-procurement-compact > .procurement-project-cta h3 {
    grid-row:2 !important;
    position:static !important;
    inset:auto !important;
    transform:none !important;
    width:100% !important;
    height:44px !important;
    min-height:44px !important;
    margin:26px 0 0 !important;
    padding:0 !important;
    display:flex !important;
    align-items:flex-start !important;
    justify-content:center !important;
    box-sizing:border-box !important;
    text-align:center !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-copy #procurementTitle,
  .shop-page-wrap.shop-home-view .za-procurement-compact > .procurement-project-cta h3 {
    display:block !important;
    width:100% !important;
    height:44px !important;
    margin:0 !important;
    padding:0 !important;
    font-size:1.25rem !important;
    line-height:1.45 !important;
    font-weight:900 !important;
    text-align:center !important;
    white-space:normal !important;
    text-wrap:balance !important;
  }
}

/* Desktop optical correction from the supplied screenshot: lower the middle
   heading to the exact visual row of the left technical-search heading. */
@media (min-width:1025px) {
  .shop-page-wrap.shop-home-view .za-procurement-compact > .procurement-project-cta h3 {
    transform:translateY(40px) !important;
  }
}

@media (min-width:1025px) {
  .shop-page-wrap.shop-home-view .za-procurement-compact > .procurement-project-cta h3 {
    transform:translateY(26px) !important;
  }
}

@media (min-width:1025px) {
  .shop-page-wrap.shop-home-view .za-procurement-compact > .procurement-project-cta h3,
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-copy #procurementTitle {
    transform:translateY(-8px) !important;
  }
}

@media (min-width:1025px) {
  .shop-page-wrap.shop-home-view .za-procurement-compact > .procurement-project-cta h3 {
    transform:translateY(4px) !important;
  }
}

@media (min-width:1025px) {
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-copy #procurementTitle {
    transform:translateY(-4px) !important;
  }
}

@media (min-width:1025px) {
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-copy #procurementTitle {
    transform:translateY(-8px) !important;
  }
}

@media (min-width:1025px) {
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-copy #procurementTitle {
    transform:translateY(-12px) !important;
  }
}

@media (min-width:1025px) {
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-copy #procurementTitle {
    transform:translateY(-16px) !important;
  }
}

@media (min-width:1025px) {
  .shop-page-wrap.shop-home-view .za-procurement-compact > .procurement-project-cta h3 {
    transform:translateY(8px) !important;
  }
}

@media (min-width:1025px) {
  .shop-page-wrap.shop-home-view .za-procurement-compact > .procurement-project-cta h3 {
    transform:translateY(12px) !important;
  }
}

/* Desktop spacing normalization: one compact 4/8/12/16 rhythm across the panel. */
@media (min-width:1025px) {
  .shop-page-wrap.shop-home-view .za-procurement-compact {
    padding:12px !important;
    column-gap:12px !important;
    row-gap:12px !important;
    border-radius:14px !important;
    box-sizing:border-box !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-copy,
  .shop-page-wrap.shop-home-view .za-procurement-compact > .procurement-project-cta,
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-paths {
    margin:0 !important;
    padding:0 !important;
    box-sizing:border-box !important;
    min-width:0 !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-copy .za-proc-search-form {
    padding:12px !important;
    gap:8px !important;
    box-sizing:border-box !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact .procurement-primary,
  .shop-page-wrap.shop-home-view .za-procurement-compact .procurement-project-link {
    padding:12px !important;
    box-sizing:border-box !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact .procurement-project-link-copy {
    gap:6px !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact .procurement-facts {
    gap:8px !important;
    padding:0 !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact .procurement-facts > span {
    padding:8px !important;
    box-sizing:border-box !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-copy .za-proc-head-inline,
  .shop-page-wrap.shop-home-view .za-procurement-compact > .procurement-project-cta h3 {
    margin-top:20px !important;
  }
}

@media (min-width:1025px) {
  .shop-page-wrap.shop-home-view .za-procurement-compact > .procurement-project-cta h3 {
    transform:translateY(-4px) !important;
  }
}

@media (min-width:1025px) {
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-copy #procurementTitle {
    transform:translateY(4px) !important;
  }
}

/* Root alignment fix: both headings use the same desktop grid row, box model,
   line box and baseline. No per-heading transforms remain in the final rule. */
@media (min-width:1025px) {
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-copy,
  .shop-page-wrap.shop-home-view .za-procurement-compact > .procurement-project-cta {
    position:relative !important;
    display:grid !important;
    grid-template-rows:132px 48px !important;
    row-gap:0 !important;
    align-content:start !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-copy .za-proc-head-inline,
  .shop-page-wrap.shop-home-view .za-procurement-compact > .procurement-project-cta h3 {
    position:static !important;
    grid-row:2 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    height:48px !important;
    min-height:48px !important;
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
    box-sizing:border-box !important;
    text-align:center !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-copy #procurementTitle,
  .shop-page-wrap.shop-home-view .za-procurement-compact > .procurement-project-cta h3 {
    display:block !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
    font-size:1.25rem !important;
    line-height:1.45 !important;
    font-weight:900 !important;
    text-align:center !important;
    white-space:nowrap !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact > .procurement-project-cta {
    grid-template-rows:132px 48px !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact > .procurement-project-cta .procurement-project-link {
    grid-row:1 !important;
    position:static !important;
    transform:none !important;
  }
}

/* Definitive desktop layout: one shared two-row grid for all three columns.
   Row 1 is the cards, row 2 is the headings. Equal track sizes create equal
   card-to-heading distance without transforms or absolute positioning. */
@media (min-width:1025px) {
  .shop-page-wrap.shop-home-view .za-procurement-compact {
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    grid-template-rows:132px 48px auto !important;
    column-gap:16px !important;
    row-gap:16px !important;
    align-items:start !important;
    padding:12px !important;
    box-sizing:border-box !important;
    overflow:visible !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-copy,
  .shop-page-wrap.shop-home-view .za-procurement-compact > .procurement-project-cta,
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-paths {
    display:contents !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-copy .za-proc-search-form {
    grid-column:1 !important;
    grid-row:1 !important;
    width:100% !important;
    height:132px !important;
    min-height:132px !important;
    margin:0 !important;
    padding:12px !important;
    box-sizing:border-box !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-copy .za-proc-head-inline {
    grid-column:1 !important;
    grid-row:2 !important;
    width:100% !important;
    height:48px !important;
    min-height:48px !important;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-copy #procurementTitle {
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
    font-size:1.25rem !important;
    line-height:1.45 !important;
    font-weight:900 !important;
    text-align:center !important;
    white-space:nowrap !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact > .procurement-project-cta .procurement-project-link {
    grid-column:2 !important;
    grid-row:1 !important;
    width:100% !important;
    height:132px !important;
    min-height:132px !important;
    margin:0 !important;
    padding:12px !important;
    box-sizing:border-box !important;
    position:static !important;
    transform:none !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact > .procurement-project-cta h3 {
    grid-column:2 !important;
    grid-row:2 !important;
    width:100% !important;
    height:48px !important;
    min-height:48px !important;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    transform:none !important;
    font-size:1.25rem !important;
    line-height:1.45 !important;
    font-weight:900 !important;
    color:#152b3c !important;
    text-align:center !important;
    white-space:nowrap !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact > .procurement-project-cta > p {
    display:none !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-paths .procurement-primary {
    grid-column:3 !important;
    grid-row:1 !important;
    width:100% !important;
    height:132px !important;
    min-height:132px !important;
    margin:0 !important;
    box-sizing:border-box !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-paths .procurement-facts {
    grid-column:3 !important;
    grid-row:3 !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
  }
}

/* Definitive desktop composition, rebuilt from the requested visual hierarchy.
   DOM order stays semantic; visual order is explicitly LTR so the storefront
   reads: yellow search, teal project, blue purchase. */
@media (min-width:1025px) {
  .shop-page-wrap.shop-home-view .za-procurement-compact {
    direction:ltr !important;
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    grid-template-rows:132px auto !important;
    column-gap:16px !important;
    row-gap:14px !important;
    align-items:start !important;
    padding:12px !important;
    box-sizing:border-box !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-copy,
  .shop-page-wrap.shop-home-view .za-procurement-compact > .procurement-project-cta,
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-paths {
    direction:rtl !important;
    display:grid !important;
    position:static !important;
    width:100% !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    align-self:start !important;
    box-sizing:border-box !important;
    overflow:visible !important;
  }
  /* Yellow search module, column 1. */
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-copy {
    grid-column:1 !important;
    grid-row:1 / span 2 !important;
    grid-template-rows:132px auto !important;
    row-gap:14px !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-copy .za-proc-search-form {
    grid-row:1 !important;
    width:100% !important;
    height:132px !important;
    min-height:132px !important;
    margin:0 !important;
    padding:12px !important;
    box-sizing:border-box !important;
    border:1px solid #eadb9a !important;
    border-radius:14px !important;
    background:#fff8d9 !important;
    box-shadow:0 5px 16px rgba(181,145,29,.12) !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-copy .za-proc-head-inline {
    grid-row:2 !important;
    position:static !important;
    display:flex !important;
    align-items:flex-start !important;
    justify-content:center !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
    text-align:center !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-copy #procurementTitle {
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
    font-size:1.25rem !important;
    line-height:1.45 !important;
    font-weight:900 !important;
    text-align:center !important;
    white-space:nowrap !important;
  }
  /* Teal project module, column 2. */
  .shop-page-wrap.shop-home-view .za-procurement-compact > .procurement-project-cta {
    grid-column:2 !important;
    grid-row:1 / span 2 !important;
    grid-template-rows:132px auto !important;
    row-gap:14px !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact .procurement-project-link {
    grid-row:1 !important;
    position:static !important;
    display:grid !important;
    grid-template-columns:32px minmax(0,1fr) 32px !important;
    align-items:center !important;
    width:100% !important;
    height:132px !important;
    min-height:132px !important;
    margin:0 !important;
    padding:12px !important;
    box-sizing:border-box !important;
    transform:none !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact .procurement-project-link-copy {
    display:grid !important;
    gap:6px !important;
    min-width:0 !important;
    justify-items:center !important;
    text-align:center !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact .za-project-description-desktop {
    display:block !important;
    color:#f4fffd !important;
    font-size:.82rem !important;
    line-height:1.55 !important;
    text-align:center !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact .procurement-project-cta h3 {
    grid-row:2 !important;
    position:static !important;
    display:flex !important;
    align-items:flex-start !important;
    justify-content:center !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
    color:#152b3c !important;
    font-size:1.25rem !important;
    line-height:1.45 !important;
    font-weight:900 !important;
    text-align:center !important;
    white-space:nowrap !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact .procurement-project-cta > p {
    display:none !important;
  }
  /* Blue purchase module, column 3. */
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-paths {
    grid-column:3 !important;
    grid-row:1 / span 2 !important;
    grid-template-rows:132px auto !important;
    row-gap:14px !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact .procurement-primary {
    grid-row:1 !important;
    display:grid !important;
    width:100% !important;
    height:132px !important;
    min-height:132px !important;
    margin:0 !important;
    padding:12px !important;
    box-sizing:border-box !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact .procurement-facts {
    grid-row:2 !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
  }
}

@media (min-width:1025px) {
  .shop-page-wrap.shop-home-view .za-procurement-compact > .shop-procurement-copy .za-proc-head-inline,
  .shop-page-wrap.shop-home-view .za-procurement-compact > .procurement-project-cta h3 {
    transform:translateY(10px) !important;
  }
}

@media (min-width:1025px) {
  .shop-page-wrap.shop-home-view .za-procurement-compact .procurement-facts {
    transform:translateY(-8px) !important;
  }
}

@media (min-width:1025px) {
  .shop-page-wrap.shop-home-view .za-procurement-compact .procurement-facts {
    transform:translateY(-18px) !important;
  }
}

@media (min-width:1025px) {
  .shop-page-wrap.shop-home-view .za-procurement-compact {
    padding-bottom:4px !important;
    row-gap:4px !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact .procurement-facts {
    margin-bottom:0 !important;
    padding-bottom:0 !important;
    transform:translateY(-26px) !important;
  }
}

/* Desktop: close the currency notice to the procurement panel. The previous
   large gap came from the notice's own 28px top margin plus section spacing. */
@media (min-width:1025px) {
  .shop-page-wrap.shop-home-view .za-procurement-compact {
    margin-bottom:0 !important;
  }
  .shop-page-wrap.shop-home-view .za-currency-notice {
    margin-top:8px !important;
    margin-bottom:12px !important;
  }
}

/* Mobile/tablet-only cleanup requested for the procurement panel. */
@media (max-width:1024px) {
  .shop-page-wrap.shop-home-view .za-procurement-compact .procurement-primary-desktop-caption {
    display:none !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact .procurement-primary {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact .procurement-primary .procurement-text {
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    width:100% !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact .procurement-primary .procurement-text b,
  .shop-page-wrap.shop-home-view .za-procurement-compact .procurement-primary .procurement-text small {
    display:block !important;
    width:100% !important;
    text-align:center !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact .procurement-primary .proc-desc-desktop {
    display:none !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact .proc-desc-mobile {
    display:inline !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact .procurement-project-link-copy,
  .shop-page-wrap.shop-home-view .za-procurement-compact .za-project-description-desktop,
  .shop-page-wrap.shop-home-view .za-procurement-compact .procurement-project-cta h3,
  .shop-page-wrap.shop-home-view .za-procurement-compact .procurement-project-cta p {
    text-align:center !important;
  }
}

/* Mobile/tablet: reclaim horizontal viewport space without touching desktop. */
@media (max-width:1024px) {
  .shop-page-wrap.shop-home-view .shop-container,
  .shop-page-wrap.shop-home-view .shop-procurement,
  .shop-page-wrap.shop-home-view .shop-hero,
  .shop-page-wrap.shop-home-view .shop-catgrid-wrap,
  .shop-page-wrap.shop-home-view .shop-procurement-tiles,
  .shop-page-wrap.shop-home-view .za-currency-notice {
    width:calc(100% - 12px) !important;
    max-width:none !important;
    margin-inline:auto !important;
  }
  .shop-page-wrap.shop-home-view {
    padding-inline:0 !important;
  }
}
@media (max-width:640px) {
  .shop-page-wrap.shop-home-view .shop-container,
  .shop-page-wrap.shop-home-view .shop-procurement,
  .shop-page-wrap.shop-home-view .shop-hero,
  .shop-page-wrap.shop-home-view .shop-catgrid-wrap,
  .shop-page-wrap.shop-home-view .shop-procurement-tiles,
  .shop-page-wrap.shop-home-view .za-currency-notice {
    width:calc(100% - 8px) !important;
  }
}

/* Mobile/tablet maximum-width pass: leave only a 2px total safety gutter. */
@media (max-width:1024px) {
  .shop-page-wrap.shop-home-view .shop-container,
  .shop-page-wrap.shop-home-view .shop-procurement,
  .shop-page-wrap.shop-home-view .shop-hero,
  .shop-page-wrap.shop-home-view .shop-catgrid-wrap,
  .shop-page-wrap.shop-home-view .shop-procurement-tiles,
  .shop-page-wrap.shop-home-view .za-currency-notice {
    width:calc(100% - 2px) !important;
  }
}

/* Mobile/tablet procurement copy: remove the secondary line and fit the main
   CTA label inside the button at every supported narrow width. */
@media (max-width:1024px) {
  .shop-page-wrap.shop-home-view .za-procurement-compact .procurement-primary .proc-desc-mobile,
  .shop-page-wrap.shop-home-view .za-procurement-compact .procurement-primary .proc-desc-desktop,
  .shop-page-wrap.shop-home-view .za-procurement-compact .procurement-primary small {
    display:none !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact .procurement-primary .procurement-text {
    flex:1 1 auto !important;
    min-width:0 !important;
    width:auto !important;
    max-width:100% !important;
    overflow:hidden !important;
  }
  .shop-page-wrap.shop-home-view .za-procurement-compact .procurement-primary .procurement-text b {
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    text-align:center !important;
    font-size:clamp(.72rem,2.45vw,.92rem) !important;
    line-height:1.45 !important;
    letter-spacing:-.02em !important;
  }
}

/* Mobile/tablet: compact the three top shop actions without changing desktop. */
@media (max-width:1024px) {
  .shopbar-actions {
    gap:2px !important;
    flex:0 0 auto !important;
  }
  .shopbar-actions .shopbar-action {
    width:40px !important;
    min-width:40px !important;
    min-height:40px !important;
    height:40px !important;
    padding:4px !important;
    gap:0 !important;
    border-radius:8px !important;
    justify-content:center !important;
  }
  .shopbar-actions .shopbar-action-icon {
    display:grid !important;
    place-items:center !important;
    width:20px !important;
    height:20px !important;
    font-size:1rem !important;
    line-height:1 !important;
  }
  .shopbar-actions .shopbar-action-icon .za-icon,
  .shopbar-actions .shopbar-action-icon svg {
    width:18px !important;
    height:18px !important;
  }
  .shopbar-actions .shopbar-action-label {
    display:none !important;
  }
  .shopbar-actions .cart-count-badge {
    min-width:14px !important;
    height:14px !important;
    padding:0 3px !important;
    font-size:.58rem !important;
    line-height:14px !important;
    top:1px !important;
    inset-inline-end:1px !important;
  }
}
@media (max-width:480px) {
  .shopbar-actions { gap:1px !important; }
  .shopbar-actions .shopbar-action {
    width:36px !important;
    min-width:36px !important;
    height:36px !important;
    min-height:36px !important;
    padding:3px !important;
    border-radius:7px !important;
  }
  .shopbar-actions .shopbar-action-icon,
  .shopbar-actions .shopbar-action-icon .za-icon,
  .shopbar-actions .shopbar-action-icon svg {
    width:17px !important;
    height:17px !important;
  }
}

/* Rebuilt mobile/tablet shop actions: compact icon tiles, badge contained. */
@media (max-width:1024px) {
  .shopbar .shopbar-actions {
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:4px !important;
  }
  .shopbar .shopbar-action,
  .shopbar .shopbar-actions .shopbar-action {
    position:relative !important;
    display:grid !important;
    place-items:center !important;
    flex:0 0 42px !important;
    width:42px !important;
    min-width:42px !important;
    height:42px !important;
    min-height:42px !important;
    padding:0 !important;
    margin:0 !important;
    border:1px solid rgba(13,115,119,.16) !important;
    border-radius:10px !important;
    background:rgba(255,255,255,.82) !important;
    box-sizing:border-box !important;
  }
  .shopbar .shopbar-action-icon,
  .shopbar .shopbar-actions .shopbar-action-icon {
    display:grid !important;
    place-items:center !important;
    width:22px !important;
    height:22px !important;
    margin:0 !important;
    line-height:1 !important;
  }
  .shopbar .shopbar-action-icon .za-icon,
  .shopbar .shopbar-action-icon svg {
    display:block !important;
    width:20px !important;
    height:20px !important;
    margin:0 !important;
  }
  .shopbar .shopbar-action-label,
  .shopbar .shopbar-actions .shopbar-action-label {
    display:none !important;
  }
  .shopbar .shopbar-cart .cart-count-badge,
  .shopbar .shopbar-actions .cart-count-badge {
    position:absolute !important;
    top:3px !important;
    inset-inline-end:3px !important;
    display:grid !important;
    place-items:center !important;
    min-width:16px !important;
    width:auto !important;
    height:16px !important;
    padding:0 4px !important;
    border:2px solid #fff !important;
    border-radius:999px !important;
    font-size:.58rem !important;
    font-weight:900 !important;
    line-height:12px !important;
    box-sizing:border-box !important;
  }
}
@media (max-width:480px) {
  .shopbar .shopbar-actions { gap:3px !important; }
  .shopbar .shopbar-action,
  .shopbar .shopbar-actions .shopbar-action {
    flex-basis:38px !important;
    width:38px !important;
    min-width:38px !important;
    height:38px !important;
    min-height:38px !important;
    border-radius:9px !important;
  }
  .shopbar .shopbar-action-icon,
  .shopbar .shopbar-action-icon .za-icon,
  .shopbar .shopbar-action-icon svg {
    width:18px !important;
    height:18px !important;
  }
}

/* Mobile/tablet: labeled action tiles, fully contained with no overlap. */
@media (max-width:1024px) {
  .shopbar .shopbar-actions .shopbar-action,
  .shopbar .shopbar-actions .shopbar-action {
    display:grid !important;
    grid-template-rows:22px 14px !important;
    align-content:center !important;
    justify-items:center !important;
    gap:2px !important;
    flex:0 0 58px !important;
    width:58px !important;
    min-width:58px !important;
    height:52px !important;
    min-height:52px !important;
    padding:5px 3px !important;
    overflow:visible !important;
  }
  .shopbar .shopbar-actions .shopbar-action-icon,
  .shopbar .shopbar-actions .shopbar-action-icon .za-icon,
  .shopbar .shopbar-actions .shopbar-action-icon svg {
    width:20px !important;
    height:20px !important;
  }
  .shopbar .shopbar-actions .shopbar-action-label {
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    text-align:center !important;
    font-size:.62rem !important;
    line-height:14px !important;
    font-weight:800 !important;
  }
  .shopbar .shopbar-actions .cart-count-badge {
    top:2px !important;
    inset-inline-end:2px !important;
  }
}
@media (max-width:480px) {
  .shopbar .shopbar-actions .shopbar-action {
    flex-basis:52px !important;
    width:52px !important;
    min-width:52px !important;
    height:50px !important;
    min-height:50px !important;
    grid-template-rows:20px 13px !important;
    padding:4px 2px !important;
  }
  .shopbar .shopbar-actions .shopbar-action-label {
    font-size:.58rem !important;
    line-height:13px !important;
  }
  .shopbar .shopbar-actions .shopbar-action-icon,
  .shopbar .shopbar-actions .shopbar-action-icon .za-icon,
  .shopbar .shopbar-actions .shopbar-action-icon svg {
    width:18px !important;
    height:18px !important;
  }
}

/* Mobile/tablet: slightly tighter labeled action tiles, still overlap-safe. */
@media (max-width:1024px) {
  .shopbar .shopbar-actions .shopbar-action {
    flex-basis:50px !important;
    width:50px !important;
    min-width:50px !important;
    height:46px !important;
    min-height:46px !important;
    grid-template-rows:19px 12px !important;
    gap:1px !important;
    padding:3px 2px !important;
    border-radius:8px !important;
  }
  .shopbar .shopbar-actions .shopbar-action-icon,
  .shopbar .shopbar-actions .shopbar-action-icon .za-icon,
  .shopbar .shopbar-actions .shopbar-action-icon svg {
    width:17px !important;
    height:17px !important;
  }
  .shopbar .shopbar-actions .shopbar-action-label {
    font-size:.55rem !important;
    line-height:12px !important;
  }
  .shopbar .shopbar-actions .cart-count-badge {
    top:1px !important;
    inset-inline-end:1px !important;
    min-width:14px !important;
    height:14px !important;
    padding:0 3px !important;
    font-size:.52rem !important;
    line-height:10px !important;
  }
}
@media (max-width:480px) {
  .shopbar .shopbar-actions .shopbar-action {
    flex-basis:46px !important;
    width:46px !important;
    min-width:46px !important;
    height:43px !important;
    min-height:43px !important;
    grid-template-rows:18px 11px !important;
  }
  .shopbar .shopbar-actions .shopbar-action-icon,
  .shopbar .shopbar-actions .shopbar-action-icon .za-icon,
  .shopbar .shopbar-actions .shopbar-action-icon svg {
    width:16px !important;
    height:16px !important;
  }
  .shopbar .shopbar-actions .shopbar-action-label {
    font-size:.52rem !important;
    line-height:11px !important;
  }
}

/* Mobile/tablet: compact the hero eyebrow without touching desktop. */
@media (max-width:1024px) {
  .shop-page-wrap.shop-home-view .shop-hero-modern.shop-hero-modern-logo .shop-hero-badge {
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:auto !important;
    max-width:calc(100% - 24px) !important;
    min-height:30px !important;
    margin:0 auto 8px !important;
    padding:5px 10px !important;
    border-radius:999px !important;
    font-size:clamp(.62rem,2.2vw,.76rem) !important;
    line-height:1.3 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    box-sizing:border-box !important;
  }
  .shop-page-wrap.shop-home-view .shop-hero-modern.shop-hero-modern-logo .shop-hero-copy {
    padding-inline:8px !important;
  }
}
@media (max-width:480px) {
  .shop-page-wrap.shop-home-view .shop-hero-modern.shop-hero-modern-logo .shop-hero-badge {
    max-width:calc(100% - 16px) !important;
    min-height:27px !important;
    margin-bottom:6px !important;
    padding:4px 8px !important;
    font-size:.6rem !important;
  }
}

/* Hero eyebrow second pass: tighter mobile/tablet footprint, desktop untouched. */
@media (max-width:1024px) {
  .shop-page-wrap.shop-home-view .shop-hero-modern.shop-hero-modern-logo .shop-hero-badge {
    max-width:fit-content !important;
    width:fit-content !important;
    min-height:24px !important;
    height:24px !important;
    margin:0 auto 5px !important;
    padding:3px 8px !important;
    font-size:.58rem !important;
    line-height:18px !important;
    letter-spacing:-.01em !important;
  }
}
@media (max-width:480px) {
  .shop-page-wrap.shop-home-view .shop-hero-modern.shop-hero-modern-logo .shop-hero-badge {
    min-height:22px !important;
    height:22px !important;
    padding:2px 7px !important;
    font-size:.54rem !important;
    line-height:18px !important;
  }
}

/* Final mobile/tablet hero compression: override the later <=900px hero rules
   with an explicit compact block. Desktop is intentionally untouched. */
@media (max-width:1024px) {
  .shop-page-wrap.shop-home-view .shop-hero-modern.shop-hero-modern-logo {
    min-height:0 !important;
    padding:12px 10px !important;
    gap:0 !important;
    border-radius:14px !important;
  }
  .shop-page-wrap.shop-home-view .shop-hero-modern.shop-hero-modern-logo > .shop-hero-copy {
    max-width:100% !important;
    width:100% !important;
    padding:0 !important;
    margin:0 auto !important;
  }
  .shop-page-wrap.shop-home-view .shop-hero-modern.shop-hero-modern-logo .shop-hero-badge {
    display:inline-flex !important;
    width:auto !important;
    max-width:100% !important;
    height:22px !important;
    min-height:22px !important;
    margin:0 auto 4px !important;
    padding:2px 7px !important;
    font-size:.55rem !important;
    line-height:18px !important;
    border-radius:999px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  .shop-page-wrap.shop-home-view .shop-hero-modern.shop-hero-modern-logo .hero-main-title {
    margin:2px auto 5px !important;
    font-size:clamp(1.15rem,5.4vw,1.55rem) !important;
    line-height:1.2 !important;
  }
  .shop-page-wrap.shop-home-view .shop-hero-modern.shop-hero-modern-logo .hero-subtext {
    margin:0 auto 8px !important;
    font-size:clamp(.68rem,2.5vw,.82rem) !important;
    line-height:1.45 !important;
  }
  .shop-page-wrap.shop-home-view .shop-hero-modern.shop-hero-modern-logo .shop-hero-actions {
    gap:6px !important;
  }
  .shop-page-wrap.shop-home-view .shop-hero-modern.shop-hero-modern-logo .hero-proof {
    gap:5px !important;
    margin-top:8px !important;
  }
}
@media (max-width:480px) {
  .shop-page-wrap.shop-home-view .shop-hero-modern.shop-hero-modern-logo {
    padding:9px 7px !important;
    border-radius:12px !important;
  }
  .shop-page-wrap.shop-home-view .shop-hero-modern.shop-hero-modern-logo .shop-hero-badge {
    height:20px !important;
    min-height:20px !important;
    font-size:.5rem !important;
    line-height:16px !important;
    margin-bottom:3px !important;
  }
  .shop-page-wrap.shop-home-view .shop-hero-modern.shop-hero-modern-logo .hero-main-title {
    font-size:1.08rem !important;
    margin-block:1px 3px !important;
  }
  .shop-page-wrap.shop-home-view .shop-hero-modern.shop-hero-modern-logo .hero-subtext {
    margin-bottom:6px !important;
    font-size:.62rem !important;
  }
}

/* Mobile/tablet hero final pass: eyebrow matches the hero title scale while
   the whole card uses one consistent compact spacing rhythm. */
@media (max-width:1024px) {
  .shop-page-wrap.shop-home-view .shop-hero-modern.shop-hero-modern-logo {
    padding:16px !important;
    border-radius:16px !important;
    box-sizing:border-box !important;
  }
  .shop-page-wrap.shop-home-view .shop-hero-modern.shop-hero-modern-logo > .shop-hero-copy {
    padding:0 !important;
    margin:0 auto !important;
    width:100% !important;
    max-width:100% !important;
  }
  .shop-page-wrap.shop-home-view .shop-hero-modern.shop-hero-modern-logo .shop-hero-badge {
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:auto !important;
    max-width:100% !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 auto 8px !important;
    padding:5px 10px !important;
    border-radius:999px !important;
    font-size:clamp(1.15rem,5.4vw,1.55rem) !important;
    font-weight:800 !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    box-sizing:border-box !important;
  }
  .shop-page-wrap.shop-home-view .shop-hero-modern.shop-hero-modern-logo .hero-main-title {
    margin:0 0 8px !important;
    font-size:clamp(1.15rem,5.4vw,1.55rem) !important;
    line-height:1.2 !important;
  }
  .shop-page-wrap.shop-home-view .shop-hero-modern.shop-hero-modern-logo .hero-subtext {
    margin:0 auto 12px !important;
    line-height:1.5 !important;
  }
  .shop-page-wrap.shop-home-view .shop-hero-modern.shop-hero-modern-logo .shop-hero-actions,
  .shop-page-wrap.shop-home-view .shop-hero-modern.shop-hero-modern-logo .hero-proof {
    gap:8px !important;
  }
}
@media (max-width:480px) {
  .shop-page-wrap.shop-home-view .shop-hero-modern.shop-hero-modern-logo {
    padding:12px !important;
    border-radius:14px !important;
  }
  .shop-page-wrap.shop-home-view .shop-hero-modern.shop-hero-modern-logo .shop-hero-badge,
  .shop-page-wrap.shop-home-view .shop-hero-modern.shop-hero-modern-logo .hero-main-title {
    font-size:1.08rem !important;
  }
  .shop-page-wrap.shop-home-view .shop-hero-modern.shop-hero-modern-logo .shop-hero-badge {
    margin-bottom:6px !important;
    padding:4px 8px !important;
  }
}

/* Mobile/tablet hero deal image: deterministic frame sizing and containment. */
@media (max-width:1024px) {
  .shop-page-wrap.shop-home-view .shop-hero-deal-panel .shop-hero-deal-img-wrap {
    width:100% !important;
    height:clamp(120px,32vw,190px) !important;
    min-height:0 !important;
    max-height:none !important;
    padding:8px !important;
    box-sizing:border-box !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
  }
  .shop-page-wrap.shop-home-view .shop-hero-deal-panel .shop-hero-deal-img-wrap img,
  .shop-page-wrap.shop-home-view .shop-hero-deal-panel .shop-hero-deal-item img {
    display:block !important;
    width:100% !important;
    height:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
    object-position:center !important;
    margin:auto !important;
  }
}
@media (max-width:480px) {
  .shop-page-wrap.shop-home-view .shop-hero-deal-panel .shop-hero-deal-img-wrap {
    height:clamp(100px,34vw,145px) !important;
    padding:6px !important;
    border-radius:10px !important;
  }
}

/* Mobile/tablet: discount badge is isolated from the image edge and always
   stays above the product artwork. */
@media (max-width:1024px) {
  .shop-page-wrap.shop-home-view .shop-hero-deal-panel .shop-hero-deal-img-wrap {
    isolation:isolate !important;
    overflow:hidden !important;
  }
  .shop-page-wrap.shop-home-view .shop-hero-deal-panel .shop-hero-deal-discount-badge {
    position:absolute !important;
    top:6px !important;
    inset-inline-end:6px !important;
    inset-inline-start:auto !important;
    z-index:20 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:auto !important;
    min-width:30px !important;
    max-width:calc(100% - 12px) !important;
    min-height:24px !important;
    padding:3px 7px !important;
    box-sizing:border-box !important;
    border:2px solid #fff !important;
    border-radius:999px !important;
    background:#dc2626 !important;
    color:#fff !important;
    font-size:.72rem !important;
    line-height:16px !important;
    font-weight:900 !important;
    white-space:nowrap !important;
    overflow:visible !important;
    box-shadow:0 2px 8px rgba(15,23,42,.3) !important;
  }
}
@media (max-width:480px) {
  .shop-page-wrap.shop-home-view .shop-hero-deal-panel .shop-hero-deal-discount-badge {
    top:4px !important;
    inset-inline-end:4px !important;
    min-width:27px !important;
    min-height:21px !important;
    padding:2px 6px !important;
    font-size:.64rem !important;
    line-height:15px !important;
    border-width:1.5px !important;
  }
}

/* Mobile/tablet modernization for «مسیر انتخاب فنی». Desktop is untouched. */
@media (max-width:1024px) {
  section.za-panel-kit-compact {
    margin:14px 0 12px !important;
    padding:14px 10px 12px !important;
    border-radius:14px !important;
    box-shadow:0 8px 20px -16px rgba(10,22,40,.35) !important;
  }
  section.za-panel-kit-compact .za-pkc-head {
    align-items:flex-start !important;
    text-align:start !important;
    margin:0 2px 10px !important;
  }
  section.za-panel-kit-compact .za-pkc-kicker {
    margin:0 0 4px !important;
    padding:3px 9px !important;
    font-size:.62rem !important;
  }
  section.za-panel-kit-compact h2 {
    margin:0 !important;
    font-size:clamp(.92rem,2.8vw,1.08rem) !important;
    line-height:1.45 !important;
    text-align:start !important;
  }
  section.za-panel-kit-compact .za-pkc-list {
    display:flex !important;
    gap:8px !important;
    margin:0 !important;
    padding:2px 2px 8px !important;
    overflow-x:auto !important;
    overscroll-behavior-inline:contain !important;
    scroll-snap-type:inline mandatory !important;
    scrollbar-width:none !important;
  }
  section.za-panel-kit-compact .za-pkc-list::-webkit-scrollbar { display:none !important; }
  section.za-panel-kit-compact .za-pkc-item {
    flex:0 0 min(78vw,250px) !important;
    min-width:0 !important;
    scroll-snap-align:start !important;
    display:grid !important;
    grid-template-columns:86px minmax(0,1fr) !important;
    gap:10px !important;
    align-items:center !important;
    padding:8px !important;
    border:1px solid rgba(13,115,119,.14) !important;
    border-radius:12px !important;
    background:rgba(255,255,255,.86) !important;
    box-shadow:0 3px 10px rgba(15,23,42,.06) !important;
  }
  section.za-panel-kit-compact .za-pkc-media {
    width:86px !important;
    height:86px !important;
    min-height:86px !important;
    border-radius:10px !important;
    overflow:hidden !important;
  }
  section.za-panel-kit-compact .za-pkc-media img {
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }
  section.za-panel-kit-compact .za-pkc-step {
    top:5px !important;
    inset-inline-start:5px !important;
    padding:2px 6px !important;
    font-size:.55rem !important;
  }
  section.za-panel-kit-compact .za-pkc-body {
    min-width:0 !important;
    display:grid !important;
    gap:3px !important;
    align-content:center !important;
  }
  section.za-panel-kit-compact h3 {
    margin:0 !important;
    font-size:.78rem !important;
    line-height:1.45 !important;
  }
  section.za-panel-kit-compact .za-pkc-desc {
    margin:0 !important;
    font-size:.64rem !important;
    line-height:1.45 !important;
  }
  section.za-panel-kit-compact .za-pkc-meta {
    margin:0 !important;
    font-size:.58rem !important;
    line-height:1.4 !important;
  }
  section.za-panel-kit-compact .za-pkc-btn {
    width:100% !important;
    min-width:0 !important;
    min-height:32px !important;
    height:32px !important;
    padding:4px 8px !important;
    font-size:.62rem !important;
    line-height:1.2 !important;
  }
  section.za-panel-kit-compact .za-pkc-quote {
    width:100% !important;
    min-height:38px !important;
    height:38px !important;
    margin:10px 0 0 !important;
    padding:6px 12px !important;
    font-size:.68rem !important;
  }
}
@media (max-width:480px) {
  section.za-panel-kit-compact { padding:12px 8px 10px !important; }
  section.za-panel-kit-compact .za-pkc-item {
    flex-basis:82vw !important;
    grid-template-columns:76px minmax(0,1fr) !important;
    gap:8px !important;
    padding:7px !important;
  }
  section.za-panel-kit-compact .za-pkc-media {
    width:76px !important;
    height:76px !important;
    min-height:76px !important;
  }
}

/* Mobile/tablet technical-path card refinement: larger right-aligned image,
   left-aligned copy, compact CTA. Desktop remains untouched. */
@media (max-width:1024px) {
  section.za-panel-kit-compact .za-pkc-item {
    grid-template-columns:minmax(0,1fr) 118px !important;
    gap:10px !important;
    text-align:start !important;
  }
  section.za-panel-kit-compact .za-pkc-media {
    grid-column:2 !important;
    grid-row:1 !important;
    width:118px !important;
    height:118px !important;
    min-height:118px !important;
    justify-self:end !important;
    order:2 !important;
  }
  section.za-panel-kit-compact .za-pkc-body {
    grid-column:1 !important;
    grid-row:1 !important;
    order:1 !important;
    min-width:0 !important;
    text-align:start !important;
    justify-items:start !important;
  }
  section.za-panel-kit-compact .za-pkc-body h3,
  section.za-panel-kit-compact .za-pkc-body .za-pkc-desc,
  section.za-panel-kit-compact .za-pkc-body .za-pkc-meta {
    width:100% !important;
    text-align:start !important;
  }
  section.za-panel-kit-compact .za-pkc-btn {
    width:auto !important;
    min-width:74px !important;
    min-height:28px !important;
    height:28px !important;
    padding:3px 8px !important;
    font-size:.58rem !important;
    line-height:1 !important;
  }
}
@media (max-width:480px) {
  section.za-panel-kit-compact .za-pkc-item {
    grid-template-columns:minmax(0,1fr) 104px !important;
    gap:8px !important;
  }
  section.za-panel-kit-compact .za-pkc-media {
    width:104px !important;
    height:104px !important;
    min-height:104px !important;
  }
  section.za-panel-kit-compact .za-pkc-btn {
    min-width:68px !important;
    min-height:26px !important;
    height:26px !important;
    padding-inline:7px !important;
    font-size:.55rem !important;
  }
}

/* Global storefront product-card price alignment, all viewports. */
.shop-page-wrap .product-card-price-row,
.shop-page-wrap .za-product-card-v3 .za-card-price-row {
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  width:100% !important;
  margin-inline:auto !important;
}
.shop-page-wrap .product-card-price-row .price-current,
.shop-page-wrap .product-card-price-row .price-old,
.shop-page-wrap .product-card-price-row .price-unit,
.shop-page-wrap .za-product-card-v3 .za-card-price-row .za-price-active,
.shop-page-wrap .za-product-card-v3 .za-card-price-row .za-price-old,
.shop-page-wrap .za-product-card-v3 .za-card-price-row .za-price-unit {
  text-align:center !important;
}
.shop-page-wrap .product-card-price-row .price-current,
.shop-page-wrap .za-product-card-v3 .za-card-price-row .za-price-active {
  display:inline-block !important;
}

/* TOUCH-2026-10: final, scoped minimum tap target sizes for storefront controls. */
@media (max-width: 1024px) {
  body.shop-body :is(button, [role="button"], select, input[type="submit"], input[type="button"]) {
    min-inline-size: 44px !important;
    min-block-size: 44px !important;
  }
  body.shop-body a:is([class*="btn"], [class*="action"], [class*="tab"], [class*="pill"]) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-inline-size: 44px !important;
    min-block-size: 44px !important;
  }
  body.shop-body :is(.shopbar-action, .shop-mobile-nav a, .shop-mobile-nav button, .shopbar-search button) {
    min-inline-size: 44px !important;
    min-block-size: 44px !important;
  }
  .shop-page-wrap .za-panel-kit-compact .za-pkc-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    min-width: 74px !important;
    min-height: 44px !important;
    padding: 8px 10px !important;
    font-size: .68rem !important;
    line-height: 1.25 !important;
  }
}

/*
 * Canonical shop mobile dock. This is intentionally loaded from head.php after
 * every per-page bundle, so catalog, product, account, cart and education pages
 * cannot drift when their bundle contents differ. Visual contract: match the
 * /shop catalog dock (compact translucent white surface, blue active state).
 */
@media (max-width: 1024px) {
  .shop-mobile-nav.za-mobile-dock,
  .shop-mobile-nav {
    position: fixed !important;
    inset-inline: 0 !important;
    inset-block-end: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: center !important;
    height: calc(48px + env(safe-area-inset-bottom, 0px)) !important;
    min-height: calc(48px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 2px 6px env(safe-area-inset-bottom, 4px) !important;
    background: rgba(255, 255, 255, .88) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    border-top: 1px solid rgba(226, 232, 240, .8) !important;
    box-shadow: 0 -2px 15px rgba(15, 23, 42, .06) !important;
    box-sizing: border-box !important;
  }

  .shop-mobile-nav .smn-item {
    position: relative !important;
    display: flex !important;
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1px !important;
    margin: 0 !important;
    padding: 2px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #64748b !important;
    font: inherit !important;
    text-decoration: none !important;
    cursor: pointer !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: color .2s cubic-bezier(.16, 1, .3, 1) !important;
  }

  .shop-mobile-nav .smn-icon-wrap {
    position: relative !important;
    display: inline-flex !important;
    width: 24px !important;
    height: 22px !important;
    flex: 0 0 22px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .shop-mobile-nav .smn-svg {
    display: block !important;
    width: 19px !important;
    height: 19px !important;
    stroke: currentColor !important;
    stroke-width: 1.8px !important;
    transition: transform .2s cubic-bezier(.16, 1, .3, 1), stroke-width .2s ease !important;
  }

  .shop-mobile-nav .smn-label {
    display: block !important;
    margin-top: 1px !important;
    color: inherit !important;
    font-size: .62rem !important;
    font-weight: 700 !important;
    letter-spacing: -.2px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    transition: color .2s ease, font-weight .2s ease !important;
  }

  .shop-mobile-nav .smn-item:hover,
  .shop-mobile-nav .smn-item:active,
  .shop-mobile-nav .smn-item.active {
    color: #004d99 !important;
  }

  .shop-mobile-nav .smn-item.active .smn-svg {
    transform: translateY(-1px) scale(1.05) !important;
    stroke-width: 2.1px !important;
  }

  .shop-mobile-nav .smn-item.active .smn-label {
    color: #004d99 !important;
    font-weight: 800 !important;
  }

  .shop-mobile-nav .smn-item.active::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    width: 16px !important;
    height: 2.5px !important;
    border-radius: 9999px !important;
    background: #004d99 !important;
    box-shadow: 0 1px 4px rgba(0, 77, 153, .4) !important;
  }

  .shop-mobile-nav .smn-badge {
    position: absolute !important;
    top: -3px !important;
    right: -7px !important;
    min-width: 15px !important;
    height: 15px !important;
    padding: 0 2px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1.5px solid #fff !important;
    border-radius: 9999px !important;
    background: #ef4444 !important;
    color: #fff !important;
    font-family: inherit !important;
    font-size: .55rem !important;
    font-weight: 900 !important;
    font-style: normal !important;
    line-height: 1 !important;
    box-shadow: 0 2px 5px rgba(239, 68, 68, .4) !important;
  }

  .shop-page-wrap {
    padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (min-width: 1025px) {
  .shop-mobile-nav { display: none !important; }
}

/* Keep the existing intentional exceptions: short landscape screens and print. */
@media (max-height: 520px) and (orientation: landscape) {
  .shop-mobile-nav { display: none !important; }
}
@media print {
  .shop-mobile-nav { display: none !important; }
}


@media (max-width: 1024px) { body.za-cart-drawer-open .shop-mobile-nav { display: none !important; } }
@media (min-width: 1025px) { .shop-mobile-nav { display: none !important; } }
@media (max-height: 520px) and (orientation: landscape) { .shop-mobile-nav { display: none !important; } }
@media print { .shop-mobile-nav { display: none !important; } }


/* Mobile/tablet product-card hierarchy: name → MPN → key spec, all centered. */
@media (max-width: 1024px) {
  .shop-page-wrap .za-product-card-v3 .za-card-body {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  .shop-page-wrap .za-product-card-v3 .za-card-title { order: 1 !important; width: 100% !important; text-align: center !important; }
  .shop-page-wrap .za-product-card-v3 .za-card-title a { display: block !important; width: 100% !important; text-align: center !important; }
  .shop-page-wrap .za-product-card-v3 .za-card-mpn-row { order: 2 !important; width: 100% !important; justify-content: center !important; gap: 6px !important; text-align: center !important; }
  .shop-page-wrap .za-product-card-v3 .za-card-mpn-row :is(.za-mpn-label,.za-mpn-value) { text-align: center !important; }
  .shop-page-wrap .za-product-card-v3 .za-card-highlight-spec { order: 3 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; text-align: center !important; }
  .shop-page-wrap .za-product-card-v3 .za-card-highlight-spec .za-spec-text { text-align: center !important; }
  .shop-page-wrap .za-product-card-v3 .za-card-meta-row { order: 4 !important; justify-content: center !important; text-align: center !important; }
  .shop-page-wrap .za-product-card-v3 .za-card-availability { order: 5 !important; justify-content: center !important; text-align: center !important; }
  .shop-page-wrap .za-product-card-v3 .za-card-price-section { order: 6 !important; width: 100% !important; text-align: center !important; }
  .shop-page-wrap .za-product-card-v3 .za-card-actions-row { order: 7 !important; width: 100% !important; }
}

/* Mobile/tablet seamless product presentation: pure-white page canvas and image stages. */
@media (max-width: 1024px) {
  body.shop-body,
  body.shop-body .shop-page-wrap {
    background-color: #fff !important;
  }
  body.shop-body .shop-page-wrap .product-card,
  body.shop-body .shop-page-wrap .za-product-card-v3 {
    background-color: #fff !important;
  }
  body.shop-body .shop-page-wrap .product-card-image,
  body.shop-body .shop-page-wrap .za-card-media-wrap,
  body.shop-body .shop-page-wrap .za-card-media-inner,
  body.shop-body .shop-page-wrap .za-card-picture {
    background-color: #fff !important;
  }
}

/* Mobile/tablet seamless product photos: image white should melt into card white.
   Catalog /shop uses a plain <body>, unlike most shop detail routes, so scope by
   the common rendered shop-page wrapper, never by body.shop-body. */
@media (max-width: 1024px) {
  html body .shop-page-wrap .product-card.za-product-card-v3 .za-card-media-wrap {
    background: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }
  html body .shop-page-wrap .product-card.za-product-card-v3 .za-card-media-wrap::before,
  html body .shop-page-wrap .product-card.za-product-card-v3 .za-card-media-wrap::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  html body .shop-page-wrap .product-card.za-product-card-v3 .za-card-media-inner,
  html body .shop-page-wrap .product-card.za-product-card-v3 .za-card-img-anchor,
  html body .shop-page-wrap .product-card.za-product-card-v3 .za-card-picture {
    background: #fff !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  html body .shop-page-wrap .product-card.za-product-card-v3 .za-card-media-wrap img {
    background: #fff !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  html body .shop-page-wrap .product-card.za-product-card-v3,
  html body .shop-page-wrap .product-card {
    background-color: #fff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .07), 0 4px 12px rgba(15, 23, 42, .045) !important;
  }
}

/* Mobile/tablet seamless white image treatment for the six technical-showcase tiles. */
@media (max-width: 1024px) {
  html body .shop-page-wrap .shop-procurement-tiles .procurement-tile {
    background-color: #fff !important;
  }
  html body .shop-page-wrap .shop-procurement-tiles .procurement-tile-media {
    background: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  html body .shop-page-wrap .shop-procurement-tiles .procurement-tile-media img {
    background: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}

/* Compact six-card technical showcase on phones/tablets only. */
@media (min-width: 769px) and (max-width: 1024px) {
  html body .shop-page-wrap .shop-procurement-tiles { margin-block: 18px 24px !important; }
  html body .shop-page-wrap .shop-procurement-tiles .procurement-tiles-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
}
@media (max-width: 768px) {
  html body .shop-page-wrap .shop-procurement-tiles { margin-block: 14px 20px !important; }
  html body .shop-page-wrap .shop-procurement-tiles .procurement-tiles-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
}
@media (max-width: 1024px) {
  html body .shop-page-wrap .shop-procurement-tiles .shop-section-head {
    margin-bottom: 8px !important;
    padding-bottom: 8px !important;
  }
  html body .shop-page-wrap .shop-procurement-tiles .procurement-tile {
    min-height: 0 !important;
    border-radius: 10px !important;
  }
  html body .shop-page-wrap .shop-procurement-tiles .procurement-tile-media {
    width: 100% !important;
    height: 78px !important;
    min-height: 78px !important;
    aspect-ratio: auto !important;
    padding: 6px !important;
    overflow: visible !important;
  }
  html body .shop-page-wrap .shop-procurement-tiles .procurement-tile-media img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }
  html body .shop-page-wrap .shop-procurement-tiles .procurement-tile-copy {
    gap: 1px !important;
    padding: 5px 6px 6px !important;
  }
  html body .shop-page-wrap .shop-procurement-tiles .procurement-tile-copy b {
    font-size: .72rem !important;
    line-height: 1.35 !important;
  }
  html body .shop-page-wrap .shop-procurement-tiles .procurement-tile-copy small {
    font-size: .62rem !important;
    line-height: 1.35 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
  }
  html body .shop-page-wrap .shop-procurement-tiles .procurement-tile-action {
    min-height: 0 !important;
    margin-top: 3px !important;
    padding: 2px 6px !important;
    gap: 3px !important;
    font-size: .6rem !important;
    line-height: 1.2 !important;
  }
  html body .shop-page-wrap .shop-procurement-tiles .procurement-tile-action svg {
    width: 10px !important;
    height: 10px !important;
  }
}
@media (max-width: 480px) {
  html body .shop-page-wrap .shop-procurement-tiles .procurement-tile-media {
    height: 68px !important;
    min-height: 68px !important;
    padding: 6px !important;
  }
  html body .shop-page-wrap .shop-procurement-tiles .procurement-tile-copy { padding: 4px 5px 5px !important; }
  html body .shop-page-wrap .shop-procurement-tiles .procurement-tile-copy b { font-size: .68rem !important; }
  html body .shop-page-wrap .shop-procurement-tiles .procurement-tile-copy small { font-size: .58rem !important; }
  /* The tile itself is the link, so remove the redundant mini-CTA on phones. */
  html body .shop-page-wrap .shop-procurement-tiles .procurement-tile-action { display: none !important; }
}

@media (max-width: 1024px) {
  html body .shop-page-wrap .shop-procurement-tiles .procurement-tile-media,
  html body .shop-page-wrap .shop-procurement-tiles .procurement-tile-media img {
    overflow: visible !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
  }
}

/* Final no-crop showcase image sizing. Increase the image stage itself by 50%,
   so intrinsic-ratio images grow visibly without cover/transform cropping. */
@media (min-width: 769px) and (max-width: 1024px) {
  html body .shop-page-wrap .shop-procurement-tiles .procurement-tile-media {
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: 114px !important;
    min-height: 114px !important;
    max-height: 114px !important;
    padding: 4px !important;
    overflow: visible !important;
    aspect-ratio: auto !important;
  }
  html body .shop-page-wrap .shop-procurement-tiles .procurement-tile-media img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }
}
@media (max-width: 768px) {
  html body .shop-page-wrap .shop-procurement-tiles .procurement-tile-media {
    height: 114px !important;
    min-height: 114px !important;
    max-height: 114px !important;
    padding: 4px !important;
  }
  html body .shop-page-wrap .shop-procurement-tiles .procurement-tile-media img {
    max-width: 100% !important;
    max-height: 100% !important;
  }
}
@media (max-width: 480px) {
  html body .shop-page-wrap .shop-procurement-tiles .procurement-tile-media {
    height: 96px !important;
    min-height: 96px !important;
    max-height: 96px !important;
    padding: 3px !important;
  }
}

/* Hard-locked full-image fit for technical showcase tiles.
   The media box is a fixed viewport; img fills the box but object-fit:contain
   scales the entire source inside it. No intrinsic-size overflow or hover zoom. */
@media (max-width: 1024px) {
  html body .shop-page-wrap .shop-procurement-tiles .procurement-tile-media {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: 114px !important;
    min-height: 114px !important;
    max-height: 114px !important;
    padding: 6px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    aspect-ratio: auto !important;
  }
  html body .shop-page-wrap .shop-procurement-tiles .procurement-tile-media img {
    position: absolute !important;
    inset: 6px !important;
    display: block !important;
    width: calc(100% - 12px) !important;
    height: calc(100% - 12px) !important;
    max-width: calc(100% - 12px) !important;
    max-height: calc(100% - 12px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
  }
}
@media (max-width: 768px) {
  html body .shop-page-wrap .shop-procurement-tiles .procurement-tile-media,
  html body .shop-page-wrap .shop-procurement-tiles .procurement-tile-media img {
    height: 114px !important;
    min-height: 114px !important;
    max-height: 114px !important;
  }
}
@media (max-width: 480px) {
  html body .shop-page-wrap .shop-procurement-tiles .procurement-tile-media,
  html body .shop-page-wrap .shop-procurement-tiles .procurement-tile-media img {
    height: 96px !important;
    min-height: 96px !important;
    max-height: 96px !important;
  }
  html body .shop-page-wrap .shop-procurement-tiles .procurement-tile-media img {
    inset: 5px !important;
    width: calc(100% - 10px) !important;
    max-width: calc(100% - 10px) !important;
  }
}

/* Mobile/tablet product cards: match the full card canvas to the image's pure white. */
@media (max-width: 1024px) {
  html body .shop-page-wrap .za-product-card-v3,
  html body .shop-page-wrap .za-product-card-v3.product-card--out {
    background: #fff !important;
    background-color: #fff !important;
  }
  html body .shop-page-wrap .za-product-card-v3 .za-card-top-bar,
  html body .shop-page-wrap .za-product-card-v3 .za-card-media-wrap,
  html body .shop-page-wrap .za-product-card-v3 .za-card-media-inner,
  html body .shop-page-wrap .za-product-card-v3 .za-card-img-anchor,
  html body .shop-page-wrap .za-product-card-v3 .za-card-picture,
  html body .shop-page-wrap .za-product-card-v3 .za-card-body,
  html body .shop-page-wrap .za-product-card-v3 .za-card-price-section,
  html body .shop-page-wrap .za-product-card-v3 .za-card-actions-row {
    background-color: #fff !important;
  }
}

/* Keep the product-card inquiry-price phrase black in every shop layout. */
.shop-page-wrap .za-product-card-v3 .za-price-quote .za-quote-text {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
}

/* Remove only the outer rectangular surface around the six quick-purchase
   category tiles on phones/tablets; preserve the heading and individual tiles. */
@media (max-width: 1024px) {
  html body .shop-page-wrap .shop-catgrid-wrap.shop-catgrid-compact {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    outline: 0 !important;
  }
  html body .shop-page-wrap .shop-catgrid-wrap.shop-catgrid-compact > .shop-catgrid {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
}