/*
 * Office Choice Kenya — Identity separation layer
 * v0.6.3
 *
 * Uses the supplied client logo as the colour source and deliberately establishes
 * a separate Office Choice presentation. Functional neumorphism remains, but the
 * brand plane is cooler, more cyan-led and the search experience is a unique
 * catalogue command rail rather than the donor modal/grid.
 */
:root{
  --ock-brand-cyan:#08A4C1;
  --ock-brand-ocean:#14758A;
  --ock-brand-deep:#174D5B;
  --ock-brand-ink:#102E36;
  --ock-brand-fog:#E4ECEA;
  --ock-brand-surface:#EAF1EF;
  --ock-brand-border:#C5D3D1;
  --ock-brand-muted:#5D7074;

  --ock-primary:#14758A;
  --ock-primary-700:#174D5B;
  --ock-dark:#102E36;
  --ock-bg:#E4ECEA;
  --ock-surface:#EAF1EF;
  --ock-muted:#D9E4E2;
  --ock-accent:#08A4C1;
  --ock-border:#C5D3D1;
  --ock-text-muted:#5D7074;

  --ock-nm-bg:#E4ECEA;
  --ock-nm-surface:#E4ECEA;
  --ock-nm-text:#102E36;
  --ock-nm-muted:#5D7074;
  --ock-nm-border:#C5D3D1;
  --ock-nm-primary:#14758A;
  --ock-nm-primary-dark:#174D5B;
  --ock-nm-highlight:rgba(255,255,255,.90);
  --ock-nm-low:rgba(105,127,124,.36);
  --ock-nm-raised:9px 9px 22px rgba(105,127,124,.34),-9px -9px 22px rgba(255,255,255,.86);
  --ock-nm-raised-sm:5px 5px 13px rgba(105,127,124,.30),-5px -5px 13px rgba(255,255,255,.82);
  --ock-nm-inset:inset 5px 5px 11px rgba(105,127,124,.24),inset -5px -5px 11px rgba(255,255,255,.72);
}

html body.ock-site{
  --ock-primary:var(--ock-brand-ocean)!important;
  --ock-primary-700:var(--ock-brand-deep)!important;
  --ock-dark:var(--ock-brand-ink)!important;
  --ock-bg:var(--ock-brand-fog)!important;
  --ock-surface:var(--ock-brand-surface)!important;
  --ock-border:var(--ock-brand-border)!important;
  --ock-text-muted:var(--ock-brand-muted)!important;
  background:var(--ock-brand-fog)!important;
  color:var(--ock-brand-ink)!important;
}

/* Distinct Office Choice interaction language: cyan edge/underline, not donor pills. */
html body.ock-site .ock-header__nav a{
  position:relative;
  background:transparent!important;
  box-shadow:none!important;
}
html body.ock-site .ock-header__nav a::after{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  bottom:5px;
  height:2px;
  border-radius:2px;
  background:var(--ock-brand-cyan);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .18s ease;
}
html body.ock-site .ock-header__nav a:hover::after,
html body.ock-site .ock-header__nav .current-menu-item>a::after,
html body.ock-site .ock-header__nav li.is-ock-active>a::after{transform:scaleX(1)}
html body.ock-site .ock-header__nav a:hover,
html body.ock-site .ock-header__nav .current-menu-item>a,
html body.ock-site .ock-header__nav li.is-ock-active>a{
  color:var(--ock-brand-deep)!important;
  background:transparent!important;
  box-shadow:none!important;
}
html body.ock-site .ock-header__quote-main,
html body.ock-site .ock-btn--primary,
html body.ock-site a.ock-btn--primary,
html body.ock-site .ock-product-card__primary-action{
  background:var(--ock-brand-ocean)!important;
}
html body.ock-site .ock-header__quote-main:hover,
html body.ock-site .ock-btn--primary:hover,
html body.ock-site a.ock-btn--primary:hover,
html body.ock-site .ock-product-card__primary-action:hover{
  background:var(--ock-brand-deep)!important;
}
html body.ock-site .ock-cart-count,
html body.ock-site .ock-badge{background:var(--ock-brand-cyan)!important;color:#072D36!important}

/* Root overlay has a distinctly blue-green Office Choice tint. */
html body.ock-site .ock-drawer-backdrop{
  background:rgba(8,37,43,.48)!important;
  backdrop-filter:blur(7px) saturate(.82)!important;
  -webkit-backdrop-filter:blur(7px) saturate(.82)!important;
}

/* -------------------------------------------------------------------------
   Office Choice catalogue command rail — dedicated storefront search surface.
   ------------------------------------------------------------------------- */
html body.ock-site .ock-search-command{
  position:fixed!important;
  z-index:2147483001!important;
  top:0!important;
  right:0!important;
  bottom:0!important;
  left:auto!important;
  width:min(620px,96vw)!important;
  height:100dvh!important;
  padding:0!important;
  border:0!important;
  border-radius:28px 0 0 28px!important;
  overflow:hidden!important;
  background:var(--ock-brand-fog)!important;
  box-shadow:-22px 0 50px rgba(5,31,36,.22),-7px 0 18px rgba(255,255,255,.36)!important;
  transform:translateX(108%)!important;
  transition:transform .28s cubic-bezier(.2,.8,.2,1),visibility .28s!important;
}
html body.ock-site .ock-search-command.is-open{transform:translateX(0)!important;visibility:visible!important}
html body.admin-bar.ock-site .ock-search-command{top:32px!important;height:calc(100dvh - 32px)!important}

html body.ock-site .ock-search-command__shell{
  height:100%;
  display:flex;
  flex-direction:column;
  min-width:0;
}
html body.ock-site .ock-search-command__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:28px 30px 20px;
  border-bottom:1px solid rgba(16,46,54,.08);
}
html body.ock-site .ock-search-command__identity{display:flex;align-items:center;gap:13px;min-width:0}
html body.ock-site .ock-search-command__identity img{
  width:50px;
  height:50px;
  object-fit:contain;
  flex:0 0 auto;
  filter:drop-shadow(0 4px 7px rgba(19,79,93,.13));
}
html body.ock-site .ock-search-command__identity>div{display:grid;gap:3px;min-width:0}
html body.ock-site .ock-search-command__identity span,
html body.ock-site .ock-search-command__section-head>span{
  color:var(--ock-brand-ocean)!important;
  font:800 10px/1.2 Inter,Arial,sans-serif!important;
  letter-spacing:.15em!important;
  text-transform:uppercase!important;
}
html body.ock-site .ock-search-command__identity h2{
  margin:0!important;
  color:var(--ock-brand-ink)!important;
  font:700 clamp(24px,2.2vw,30px)/1.08 Archivo,Inter,Arial,sans-serif!important;
  letter-spacing:-.03em!important;
}
html body.ock-site .ock-search-command__close{
  width:46px!important;
  height:46px!important;
  flex:0 0 46px!important;
  color:var(--ock-brand-deep)!important;
  background:var(--ock-brand-fog)!important;
  box-shadow:var(--ock-nm-raised-sm)!important;
}
html body.ock-site .ock-search-command__close:hover{box-shadow:var(--ock-nm-inset)!important;color:var(--ock-brand-cyan)!important}

html body.ock-site .ock-search-command__form{
  display:grid!important;
  grid-template-columns:24px minmax(0,1fr) 38px auto!important;
  align-items:center!important;
  gap:8px!important;
  margin:22px 30px 0!important;
  min-height:64px!important;
  padding:7px 8px 7px 18px!important;
  border:1px solid rgba(255,255,255,.58)!important;
  border-radius:14px!important;
  background:var(--ock-brand-fog)!important;
  box-shadow:var(--ock-nm-inset)!important;
}
html body.ock-site .ock-search-command__icon{display:grid;place-items:center;color:var(--ock-brand-ocean)}
html body.ock-site .ock-search-command__icon svg{width:20px!important;height:20px!important}
html body.ock-site .ock-search-command__form input[type="search"]{
  width:100%!important;
  min-width:0!important;
  height:48px!important;
  padding:0 4px!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--ock-brand-ink)!important;
  font:600 16px/1.2 Inter,Arial,sans-serif!important;
}
html body.ock-site .ock-search-command__form input[type="search"]::placeholder{color:#7A8A8D!important;font-weight:500!important}
html body.ock-site .ock-search-command__clear{
  display:grid!important;
  place-items:center!important;
  width:36px!important;
  height:36px!important;
  padding:0!important;
  border:0!important;
  border-radius:9px!important;
  background:transparent!important;
  color:var(--ock-brand-muted)!important;
  box-shadow:none!important;
  cursor:pointer!important;
}
html body.ock-site .ock-search-command__clear[hidden]{display:none!important}
html body.ock-site .ock-search-command__clear:hover{color:var(--ock-brand-deep)!important;background:rgba(20,117,138,.08)!important}
html body.ock-site .ock-search-command__submit{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  min-width:108px!important;
  height:48px!important;
  padding:0 16px!important;
  border:0!important;
  border-radius:10px!important;
  background:var(--ock-brand-ocean)!important;
  color:#fff!important;
  box-shadow:4px 4px 10px rgba(87,109,107,.30),-3px -3px 9px rgba(255,255,255,.58)!important;
  font:800 12px/1 Inter,Arial,sans-serif!important;
  cursor:pointer!important;
}
html body.ock-site .ock-search-command__submit:hover{background:var(--ock-brand-deep)!important}
html body.ock-site .ock-search-command__submit svg{width:16px!important;height:16px!important}

html body.ock-site .ock-search-command__body{
  flex:1;
  min-height:0;
  overflow:auto;
  padding:24px 30px 32px;
  scrollbar-width:thin;
  scrollbar-color:rgba(20,117,138,.36) transparent;
}
html body.ock-site .ock-search-command__section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:12px;
}
html body.ock-site .ock-search-command__section-head>a{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:var(--ock-brand-deep)!important;
  font:700 12px/1 Inter,Arial,sans-serif!important;
  text-decoration:none!important;
}
html body.ock-site .ock-search-command__section-head>a svg{width:15px!important;height:15px!important}

/* Intentionally a simple list, not the donor 2x3 quick-browse card grid. */
html body.ock-site .ock-search-command__departments{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:0!important;
  border-top:1px solid rgba(16,46,54,.09)!important;
}
html body.ock-site .ock-search-command__departments>a{
  position:relative;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto 28px!important;
  align-items:center!important;
  gap:12px!important;
  min-height:66px!important;
  padding:0 4px!important;
  border:0!important;
  border-bottom:1px solid rgba(16,46,54,.09)!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--ock-brand-ink)!important;
  text-decoration:none!important;
}
html body.ock-site .ock-search-command__departments>a:hover{background:rgba(8,164,193,.055)!important;box-shadow:none!important}
html body.ock-site .ock-search-command__departments>a span{font:700 15px/1.25 Archivo,Inter,Arial,sans-serif!important}
html body.ock-site .ock-search-command__departments>a small{color:var(--ock-brand-muted)!important;font:600 11px/1 Inter,Arial,sans-serif!important}
html body.ock-site .ock-search-command__departments>a i{display:grid;place-items:center;color:var(--ock-brand-ocean);font-style:normal!important}
html body.ock-site .ock-search-command__departments>a i svg{width:16px!important;height:16px!important}

html body.ock-site .ock-search-command__quote-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:18px;
  margin-top:24px;
  padding:20px;
  border-radius:14px;
  background:var(--ock-brand-ink)!important;
  color:#fff!important;
  box-shadow:8px 8px 18px rgba(99,119,116,.28),-7px -7px 18px rgba(255,255,255,.66)!important;
}
html body.ock-site .ock-search-command__quote-card>div{display:grid;gap:5px}
html body.ock-site .ock-search-command__quote-card span{color:#7FD4E4;font:800 10px/1.2 Inter,Arial,sans-serif;text-transform:uppercase;letter-spacing:.12em}
html body.ock-site .ock-search-command__quote-card strong{font:700 15px/1.35 Archivo,Inter,Arial,sans-serif}
html body.ock-site .ock-search-command__quote-card>a{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:42px;
  padding:0 13px;
  border:1px solid rgba(127,212,228,.33)!important;
  border-radius:9px!important;
  background:rgba(8,164,193,.13)!important;
  color:#fff!important;
  box-shadow:none!important;
  font:800 11px/1 Inter,Arial,sans-serif!important;
  text-decoration:none!important;
  white-space:nowrap;
}
html body.ock-site .ock-search-command__quote-card>a:hover{background:rgba(8,164,193,.25)!important}
html body.ock-site .ock-search-command__quote-card>a svg{width:15px!important;height:15px!important}

/* ---------- live results ---------- */
html body.ock-site .ock-live-search[hidden]{display:none!important}
html body.ock-site .ock-live-search__status{
  min-height:28px;
  display:flex;
  align-items:center;
  gap:7px;
  margin-bottom:10px;
  color:var(--ock-brand-muted)!important;
  font:700 11px/1.3 Inter,Arial,sans-serif!important;
}
html body.ock-site .ock-live-search__status.is-loading::before{
  content:"";
  width:13px;
  height:13px;
  border:2px solid rgba(20,117,138,.18);
  border-top-color:var(--ock-brand-cyan);
  border-radius:50%;
  animation:ock-search-spin .65s linear infinite;
}
@keyframes ock-search-spin{to{transform:rotate(360deg)}}
html body.ock-site .ock-live-search__status.is-empty{
  display:grid;
  gap:4px;
  padding:18px;
  margin:2px 0 12px;
  border-radius:12px;
  background:var(--ock-brand-fog)!important;
  box-shadow:var(--ock-nm-inset)!important;
}
html body.ock-site .ock-live-search__status.is-empty strong{color:var(--ock-brand-ink);font:700 14px/1.3 Archivo,Inter,sans-serif}
html body.ock-site .ock-live-search__status.is-empty span{color:var(--ock-brand-muted);font:500 12px/1.4 Inter,Arial,sans-serif}
html body.ock-site .ock-live-search__results{display:grid;gap:9px}
html body.ock-site .ock-live-search__item{
  display:grid!important;
  grid-template-columns:78px minmax(0,1fr) 34px!important;
  align-items:center!important;
  gap:13px!important;
  min-height:94px!important;
  padding:8px 10px 8px 8px!important;
  border:1px solid rgba(255,255,255,.52)!important;
  border-radius:13px!important;
  background:var(--ock-brand-fog)!important;
  color:var(--ock-brand-ink)!important;
  box-shadow:var(--ock-nm-raised-sm)!important;
  text-decoration:none!important;
  transition:transform .16s ease,box-shadow .16s ease!important;
}
html body.ock-site .ock-live-search__item:hover{transform:translateX(-3px);box-shadow:7px 7px 16px rgba(105,127,124,.30),-6px -6px 15px rgba(255,255,255,.85)!important}
html body.ock-site .ock-live-search__media{
  display:grid;
  place-items:center;
  width:78px;
  height:78px;
  overflow:hidden;
  border-radius:10px;
  background:#F7FAF9!important;
  box-shadow:inset 3px 3px 8px rgba(104,125,122,.15),inset -3px -3px 8px rgba(255,255,255,.9)!important;
}
html body.ock-site .ock-live-search__media img{width:100%!important;height:100%!important;object-fit:contain!important;display:block!important}
html body.ock-site .ock-live-search__copy{display:grid;gap:4px;min-width:0}
html body.ock-site .ock-live-search__copy small{
  color:var(--ock-brand-ocean)!important;
  font:800 9px/1.2 Inter,Arial,sans-serif!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
html body.ock-site .ock-live-search__copy strong{
  color:var(--ock-brand-ink)!important;
  font:700 14px/1.28 Archivo,Inter,Arial,sans-serif!important;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}
html body.ock-site .ock-live-search__copy b{color:var(--ock-brand-deep)!important;font:800 12px/1.2 Inter,Arial,sans-serif!important}
html body.ock-site .ock-live-search__arrow{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;color:var(--ock-brand-ocean);box-shadow:var(--ock-nm-inset)!important}
html body.ock-site .ock-live-search__all{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  min-height:54px!important;
  margin-top:14px!important;
  padding:0 17px!important;
  border:0!important;
  border-radius:11px!important;
  background:var(--ock-brand-ocean)!important;
  color:#fff!important;
  box-shadow:var(--ock-nm-raised-sm)!important;
  font:800 12px/1 Inter,Arial,sans-serif!important;
  text-decoration:none!important;
}
html body.ock-site .ock-live-search__all[hidden]{display:none!important}
html body.ock-site .ock-live-search__all:hover{background:var(--ock-brand-deep)!important}
html body.ock-site .ock-live-search__all svg{width:17px!important;height:17px!important}

/* Keep the shop/filter UI on the same logo-derived cool plane. */
html body.ock-site .ock-shop-shell,
html body.ock-site .ock-shop-filter-panel,
html body.ock-site .ock-filter-drawer,
html body.ock-site .ock-product-card,
html body.ock-site .ock-category-card,
html body.ock-site .ock-retail-category{
  --ock-primary:var(--ock-brand-ocean)!important;
  --ock-accent:var(--ock-brand-cyan)!important;
  --ock-border:var(--ock-brand-border)!important;
}

@media(max-width:782px){
  html body.admin-bar.ock-site .ock-search-command{top:46px!important;height:calc(100dvh - 46px)!important}
}
@media(max-width:680px){
  html body.ock-site .ock-search-command{
    width:100vw!important;
    max-width:none!important;
    border-radius:0!important;
  }
  html body.ock-site .ock-search-command__head{padding:18px 17px 14px!important}
  html body.ock-site .ock-search-command__identity img{width:42px;height:42px}
  html body.ock-site .ock-search-command__identity h2{font-size:23px!important}
  html body.ock-site .ock-search-command__form{
    margin:14px 14px 0!important;
    grid-template-columns:22px minmax(0,1fr) 34px 48px!important;
    min-height:58px!important;
    padding:5px 6px 5px 14px!important;
  }
  html body.ock-site .ock-search-command__submit{min-width:48px!important;width:48px!important;padding:0!important}
  html body.ock-site .ock-search-command__submit span{display:none!important}
  html body.ock-site .ock-search-command__body{padding:20px 17px 28px!important}
  html body.ock-site .ock-search-command__quote-card{grid-template-columns:1fr!important}
  html body.ock-site .ock-search-command__quote-card>a{justify-content:center!important}
  html body.ock-site .ock-live-search__item{grid-template-columns:68px minmax(0,1fr) 30px!important;min-height:84px!important;gap:10px!important}
  html body.ock-site .ock-live-search__media{width:68px;height:68px}
}

@media(prefers-reduced-motion:reduce){
  html body.ock-site .ock-search-command,
  html body.ock-site .ock-live-search__item{transition:none!important}
  html body.ock-site .ock-live-search__status.is-loading::before{animation:none!important}
}

/* Brand-plane overrides for legacy hard-coded shell colours. */
html body.ock-site .ock-topbar{background:var(--ock-brand-fog)!important;color:var(--ock-brand-deep)!important}
html body.ock-site .ock-header-shell,
html body.ock-site .ock-header-shell.ock-header--scrolled{
  background:rgba(228,236,234,.965)!important;
  border-color:rgba(23,77,91,.10)!important;
}
html body.ock-site .ock-header__frame{
  background:var(--ock-brand-fog)!important;
  border-color:rgba(255,255,255,.62)!important;
}
html body.ock-site .ock-header__icon,
html body.ock-site .ock-icon-btn,
html body.ock-site .ock-drawer__close{
  background:var(--ock-brand-fog)!important;
  color:var(--ock-brand-ink)!important;
}
html body.ock-site .ock-footer,
html body.ock-site footer.ock-footer{background:#0D252B!important;color:#EAF5F5!important}
html body.ock-site .ock-footer a{color:#D7E7E8}
html body.ock-site .ock-footer a:hover{color:#78D3E2}
html body.ock-site .ock-footer__cta,
html body.ock-site .ock-footer-quote,
html body.ock-site .ock-footer__quote{border-color:rgba(8,164,193,.22)!important}