/*
 * Office Choice Kenya — Soft Neumorphism presentation layer
 * v0.6.3
 *
 * Deliberately restrained: raised/inset surfaces are used for hierarchy and
 * interaction, while product photography, dark conversion bands and the
 * footer remain visually grounded. This avoids the low-contrast usability
 * problems associated with extreme neumorphism.
 */

:root{
  --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,.92);
  --ock-nm-low:rgba(105,127,124,.36);
  --ock-nm-raised:9px 9px 22px var(--ock-nm-low),-9px -9px 22px var(--ock-nm-highlight);
  --ock-nm-raised-sm:5px 5px 13px rgba(105,127,124,.30),-5px -5px 13px rgba(255,255,255,.86);
  --ock-nm-inset:inset 5px 5px 12px rgba(105,127,124,.24),inset -5px -5px 12px rgba(255,255,255,.82);
  --ock-nm-inset-deep:inset 7px 7px 15px rgba(105,127,124,.30),inset -7px -7px 15px rgba(255,255,255,.88);
  --ock-nm-radius:12px;
  --ock-nm-radius-sm:9px;
}

html body.ock-site{
  --ock-bg:var(--ock-nm-bg);
  --ock-surface:var(--ock-nm-surface);
  --ock-border:var(--ock-nm-border);
  --ock-dark:var(--ock-nm-text);
  --ock-text-muted:var(--ock-nm-muted);
  --ock-r:var(--ock-nm-radius-sm);
  background:var(--ock-nm-bg)!important;
  color:var(--ock-nm-text);
}

/* One continuous base plane is fundamental to the effect. */
html body.ock-site .ock-home--retail,
html body.ock-site .ock-retail-section,
html body.ock-site .ock-retail-section--featured,
html body.ock-site .ock-retail-section--categories,
html body.ock-site .ock-retail-section--best,
html body.ock-site .ock-retail-section--news,
html body.ock-site .ock-retail-promos,
html body.ock-site .ock-retail-reviews,
html body.ock-site .ock-retail-news,
html body.ock-site .ock-index-section,
html body.ock-site .ock-floor-section,
html body.ock-site .ock-procurement-desk,
html body.ock-site .ock-sale-board,
html body.ock-site .ock-google-note,
html body.ock-site .ock-notebook,
html body.ock-site .ock-market-endcap,
html body.ock-site .ock-store-final,
html body.ock-site .ock-content-page,
html body.ock-site .ock-policy-page,
html body.ock-site .ock-rfq-page,
html body.ock-site .ock-categories-page,
html body.ock-site .ock-blog-index,
html body.ock-site .ock-account-page,
html body.ock-site .ock-single-product{
  background:var(--ock-nm-bg)!important;
}

/* ---------- Header ---------- */
html body.ock-site .ock-topbar{
  background:var(--ock-nm-bg)!important;
  border:0!important;
}
html body.ock-site .ock-header-shell,
html body.ock-site .ock-header-shell.ock-header--scrolled{
  background:rgba(228,236,234,.96)!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:blur(16px);
}
html body.ock-site .ock-header__frame{
  width:min(calc(100% - 34px),1320px)!important;
  margin:10px auto!important;
  padding:0 14px!important;
  border:1px solid rgba(255,255,255,.58)!important;
  border-radius:14px!important;
  background:var(--ock-nm-bg)!important;
  box-shadow:var(--ock-nm-raised-sm)!important;
}
html body.ock-site .ock-header__nav a{
  border-radius:9px!important;
  transition:box-shadow .18s ease,color .18s ease,transform .18s ease!important;
}
html body.ock-site .ock-header__nav a:hover,
html body.ock-site .ock-header__nav .current-menu-item>a{
  background:var(--ock-nm-bg)!important;
  box-shadow:var(--ock-nm-inset)!important;
  color:var(--ock-nm-primary)!important;
}
html body.ock-site .ock-header__icon,
html body.ock-site .ock-icon-btn,
html body.ock-site .ock-drawer__close{
  border:0!important;
  border-radius:10px!important;
  background:var(--ock-nm-bg)!important;
  color:var(--ock-nm-text)!important;
  box-shadow:var(--ock-nm-raised-sm)!important;
}
html body.ock-site .ock-header__icon:hover,
html body.ock-site .ock-icon-btn:hover,
html body.ock-site .ock-drawer__close:hover{
  color:var(--ock-nm-primary)!important;
  box-shadow:var(--ock-nm-inset)!important;
}
html body.ock-site .ock-header__quote-main{
  border:0!important;
  border-radius:10px!important;
  background:var(--ock-nm-primary)!important;
  color:#fff!important;
  box-shadow:5px 5px 13px rgba(116,135,126,.46),-4px -4px 11px rgba(255,255,255,.74)!important;
}
html body.ock-site .ock-header__quote-main:active{
  box-shadow:inset 4px 4px 9px rgba(4,44,42,.36),inset -3px -3px 8px rgba(50,128,123,.34)!important;
  transform:translateY(1px);
}

/* ---------- Buttons and interaction ---------- */
html body.ock-site .ock-btn,
html body.ock-site .ock-product-card__primary-action,
html body.ock-site .woocommerce a.button,
html body.ock-site .woocommerce button.button,
html body.ock-site .woocommerce input.button{
  border-radius:10px!important;
}
html body.ock-site .ock-btn--secondary,
html body.ock-site .ock-btn--light,
html body.ock-site .ock-shop-filter-trigger{
  border:0!important;
  background:var(--ock-nm-bg)!important;
  color:var(--ock-nm-text)!important;
  box-shadow:var(--ock-nm-raised-sm)!important;
}
html body.ock-site .ock-btn--secondary:hover,
html body.ock-site .ock-btn--light:hover,
html body.ock-site .ock-shop-filter-trigger:hover{
  color:var(--ock-nm-primary)!important;
  box-shadow:var(--ock-nm-inset)!important;
}
html body.ock-site .ock-btn--primary,
html body.ock-site a.ock-btn--primary,
html body.ock-site .ock-product-card__primary-action{
  border:0!important;
  background:var(--ock-nm-primary)!important;
  color:#fff!important;
  box-shadow:5px 5px 12px rgba(128,143,135,.45),-4px -4px 10px rgba(255,255,255,.74)!important;
}
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-nm-primary-dark)!important;
  transform:translateY(-1px);
}
html body.ock-site .ock-btn--primary:active,
html body.ock-site a.ock-btn--primary:active,
html body.ock-site .ock-product-card__primary-action:active{
  transform:translateY(1px);
  box-shadow:inset 4px 4px 9px rgba(4,44,42,.40),inset -3px -3px 8px rgba(59,137,132,.28)!important;
}
html body.ock-site .ock-btn--whatsapp,
html body.ock-site a.ock-btn--whatsapp,
html body.ock-site .ock-product-card__mini{
  border:0!important;
  border-radius:10px!important;
  box-shadow:4px 4px 11px rgba(121,144,129,.42),-4px -4px 10px rgba(255,255,255,.72)!important;
}
html body.ock-site :is(a,button,input,select,textarea):focus-visible,
html body.ock-site summary:focus-visible{
  outline:3px solid rgba(8,164,193,.28)!important;
  outline-offset:3px!important;
}

/* ---------- Search / menu drawers ---------- */
html body.ock-site .ock-drawer,
html body.ock-site .ock-search-popover__panel,
html body.ock-site .ock-menu{
  background:var(--ock-nm-bg)!important;
  border:1px solid rgba(255,255,255,.52)!important;
  box-shadow:18px 18px 42px rgba(105,119,111,.28),-14px -14px 34px rgba(255,255,255,.62)!important;
}
html body.ock-site .ock-search-popover__form,
html body.ock-site .ock-search-input,
html body.ock-site .ock-search-popover__form input,
html body.ock-site .ock-search-category,
html body.ock-site .ock-shop-ordering select,
html body.ock-site .ock-shop-price-fields input,
html body.ock-site .ock-rfq-product-search input,
html body.ock-site .ock-rfq-form-v10 input,
html body.ock-site .ock-rfq-form-v10 select,
html body.ock-site .ock-rfq-form-v10 textarea,
html body.ock-site .ock-rfq-form-v11 input,
html body.ock-site .ock-rfq-form-v11 select,
html body.ock-site .ock-rfq-form-v11 textarea,
html body.ock-site .ock-contact-form-v10 input,
html body.ock-site .ock-contact-form-v10 textarea,
html body.ock-site .woocommerce input.input-text,
html body.ock-site .woocommerce textarea,
html body.ock-site .woocommerce select{
  background:var(--ock-nm-bg)!important;
  border:0!important;
  border-radius:10px!important;
  color:var(--ock-nm-text)!important;
  box-shadow:var(--ock-nm-inset)!important;
}
html body.ock-site .ock-search-popover__browse a,
html body.ock-site .ock-menu a{
  border:0!important;
  border-radius:10px!important;
}
html body.ock-site .ock-search-popover__browse a:hover,
html body.ock-site .ock-menu a:hover{
  background:var(--ock-nm-bg)!important;
  box-shadow:var(--ock-nm-inset)!important;
}

/* ---------- Homepage / merchandising ---------- */
html body.ock-site .ock-retail-heading,
html body.ock-site .ock-category-rail__head,
html body.ock-site .ock-section-heading{
  position:relative;
  z-index:1;
}
html body.ock-site .ock-retail-category,
html body.ock-site .ock-category-card,
html body.ock-site .ock-category-index-card,
html body.ock-site .ock-commerce-category,
html body.ock-site .ock-retail-news-card,
html body.ock-site .ock-blog-card,
html body.ock-site .ock-notebook-card,
html body.ock-site .ock-guide-card{
  background:var(--ock-nm-bg)!important;
  border:1px solid rgba(255,255,255,.48)!important;
  border-radius:12px!important;
  box-shadow:var(--ock-nm-raised)!important;
  overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease!important;
}
html body.ock-site .ock-retail-category:hover,
html body.ock-site .ock-category-card:hover,
html body.ock-site .ock-category-index-card:hover,
html body.ock-site .ock-commerce-category:hover,
html body.ock-site .ock-retail-news-card:hover,
html body.ock-site .ock-blog-card:hover{
  transform:translateY(-3px);
  box-shadow:12px 12px 28px rgba(105,127,124,.34),-12px -12px 28px rgba(255,255,255,.94)!important;
}
html body.ock-site .ock-retail-category__image,
html body.ock-site .ock-category-index-card__media,
html body.ock-site .ock-commerce-category__media,
html body.ock-site .ock-retail-news-card__image,
html body.ock-site .ock-blog-card__media,
html body.ock-site .ock-notebook-card__image{
  background:var(--ock-nm-bg)!important;
  box-shadow:var(--ock-nm-inset-deep)!important;
}
html body.ock-site .ock-procurement-desk__paper,
html body.ock-site .ock-contact-form-v10,
html body.ock-site .ock-policy-content,
html body.ock-site .ock-policy-index,
html body.ock-site .ock-about-v10__facts,
html body.ock-site .ock-about-v10__range-grid,
html body.ock-site .ock-contact-v10__channels,
html body.ock-site .ock-contact-v10__location{
  background:var(--ock-nm-bg)!important;
  border:1px solid rgba(255,255,255,.5)!important;
  border-radius:14px!important;
  box-shadow:var(--ock-nm-raised)!important;
}

/* Hero stays photographic/dark; the copy becomes a tactile floating panel. */
html body.ock-site .ock-retail-slide__content{
  border:1px solid rgba(255,255,255,.16)!important;
  border-left:0!important;
  border-radius:14px!important;
  background:rgba(24,35,34,.74)!important;
  box-shadow:12px 12px 30px rgba(0,0,0,.24),-7px -7px 20px rgba(255,255,255,.08)!important;
  backdrop-filter:blur(10px)!important;
}
html body.ock-site .ock-retail-hero__dots button{
  box-shadow:inset 2px 2px 5px rgba(0,0,0,.22),inset -2px -2px 5px rgba(255,255,255,.16)!important;
}

/* ---------- Product cards ---------- */
html body.ock-site .ock-product-card,
html body.ock-site .ock-loop-item .ock-product-card,
html body.ock-site .ock-home--retail .ock-product-card{
  background:var(--ock-nm-bg)!important;
  border:1px solid rgba(255,255,255,.5)!important;
  border-radius:12px!important;
  box-shadow:var(--ock-nm-raised)!important;
  overflow:hidden!important;
  transition:transform .2s ease,box-shadow .2s ease!important;
}
html body.ock-site .ock-product-card:hover,
html body.ock-site .ock-loop-item .ock-product-card:hover,
html body.ock-site .ock-home--retail .ock-product-card:hover{
  transform:translateY(-3px)!important;
  border-color:rgba(255,255,255,.7)!important;
  box-shadow:12px 12px 28px rgba(151,165,157,.47),-12px -12px 28px rgba(255,255,255,.96)!important;
}
html body.ock-site .ock-product-card__media,
html body.ock-site .ock-home--retail .ock-product-card__media{
  margin:10px!important;
  width:calc(100% - 20px)!important;
  border-radius:10px!important;
  background:var(--ock-nm-bg)!important;
  box-shadow:var(--ock-nm-inset-deep)!important;
  overflow:hidden!important;
}
html body.ock-site .ock-product-card__media img{
  transform:scale(.96);
  transition:transform .24s ease!important;
}
html body.ock-site .ock-product-card:hover .ock-product-card__media img{
  transform:scale(1)!important;
}
html body.ock-site .ock-product-card__body{
  background:transparent!important;
}
html body.ock-site .ock-product-card__view{
  border-radius:8px!important;
  background:rgba(232,237,233,.92)!important;
  color:var(--ock-nm-text)!important;
  box-shadow:var(--ock-nm-raised-sm)!important;
}
html body.ock-site .ock-badge--sale,
html body.ock-site .ock-badge--new{
  border-radius:7px!important;
  box-shadow:3px 3px 8px rgba(90,105,97,.32),-2px -2px 7px rgba(255,255,255,.62)!important;
}

/* ---------- Shop archive ---------- */
html body.ock-site .ock-shop-v6{
  background:var(--ock-nm-bg)!important;
  border:1px solid rgba(255,255,255,.5)!important;
  border-radius:16px!important;
  box-shadow:var(--ock-nm-raised)!important;
}
html body.ock-site .ock-shop-v6 .ock-shop-v5__facts>div,
html body.ock-site .ock-shop-v6 .ock-shop-v5__rail>a,
html body.ock-site .ock-shop-toolbar,
html body.ock-site .ock-shop-ordering{
  background:var(--ock-nm-bg)!important;
  border:0!important;
  border-radius:10px!important;
  box-shadow:var(--ock-nm-raised-sm)!important;
}
html body.ock-site .ock-shop-v6 .ock-shop-v5__rail>a:hover,
html body.ock-site .ock-shop-v6 .ock-shop-v5__rail>a.is-active,
html body.ock-site .ock-shop-v6 .ock-shop-v5__rail>a[aria-current="page"]{
  background:var(--ock-nm-bg)!important;
  color:var(--ock-nm-primary)!important;
  box-shadow:var(--ock-nm-inset)!important;
}
html body.ock-site .ock-shop-filter-group{
  border-bottom-color:rgba(134,149,141,.24)!important;
}
html body.ock-site .ock-shop-filter-option{
  border-radius:8px!important;
}
html body.ock-site .ock-shop-filter-option:hover{
  background:var(--ock-nm-bg)!important;
  box-shadow:var(--ock-nm-inset)!important;
}

/* ---------- Single product ---------- */
html body.ock-site .ock-product-gallery__main,
html body.ock-site .ock-product-gallery__thumb,
html body.ock-site .ock-product-summary,
html body.ock-site .ock-product-summary-v3,
html body.ock-site .ock-product-summary-v4{
  background:var(--ock-nm-bg)!important;
  border:1px solid rgba(255,255,255,.52)!important;
  border-radius:14px!important;
  box-shadow:var(--ock-nm-raised)!important;
}
html body.ock-site .ock-product-gallery__main{
  box-shadow:var(--ock-nm-inset-deep)!important;
}
html body.ock-site .ock-product-gallery__thumb.is-active,
html body.ock-site .ock-product-gallery__thumb:hover{
  border-color:transparent!important;
  box-shadow:var(--ock-nm-inset)!important;
}
html body.ock-site .ock-product-summary__availability,
html body.ock-site .ock-product-summary__meta{
  border-color:rgba(123,139,130,.24)!important;
}

/* ---------- RFQ / forms / informational pages ---------- */
html body.ock-site .ock-rfq-v11__workspace,
html body.ock-site .ock-rfq-v11__brief,
html body.ock-site .ock-rfq-v11__catalogue,
html body.ock-site .ock-rfq-v11__selected,
html body.ock-site .ock-rfq-v11__upload,
html body.ock-site .ock-rfq-v11__visit,
html body.ock-site .ock-rfq-product,
html body.ock-site .ock-rfq-search-result,
html body.ock-site .ock-policy-summary,
html body.ock-site .ock-policy-note,
html body.ock-site .ock-policy-contact,
html body.ock-site .ock-faq__item,
html body.ock-site .ock-contact-details,
html body.ock-site .ock-account-native__card,
html body.ock-site .ock-cart-native__card,
html body.ock-site .ock-checkout-order-card,
html body.ock-site .woocommerce form.checkout,
html body.ock-site .woocommerce form.login,
html body.ock-site .woocommerce form.register{
  background:var(--ock-nm-bg)!important;
  border:1px solid rgba(255,255,255,.5)!important;
  border-radius:12px!important;
  box-shadow:var(--ock-nm-raised-sm)!important;
}
html body.ock-site .ock-faq__item[open]{
  box-shadow:var(--ock-nm-inset)!important;
}
html body.ock-site .ock-faq__item summary{
  border-radius:10px!important;
}

/* WooCommerce notices use a recessed strip instead of default boxes. */
html body.ock-site .woocommerce-message,
html body.ock-site .woocommerce-info,
html body.ock-site .woocommerce-error{
  background:var(--ock-nm-bg)!important;
  border:0!important;
  border-left:4px solid var(--ock-nm-primary)!important;
  border-radius:10px!important;
  box-shadow:var(--ock-nm-inset)!important;
}

/* ---------- Mobile bottom navigation ---------- */
html body.ock-site .ock-bottom-nav{
  background:rgba(232,237,233,.97)!important;
  border:1px solid rgba(255,255,255,.64)!important;
  box-shadow:0 -8px 24px rgba(141,155,147,.25),0 -1px 0 rgba(255,255,255,.72)!important;
  backdrop-filter:blur(16px);
}
html body.ock-site .ock-bottom-nav__item{
  border-radius:9px!important;
}
html body.ock-site .ock-bottom-nav__item:hover,
html body.ock-site .ock-bottom-nav__item.is-active{
  background:var(--ock-nm-bg)!important;
  box-shadow:var(--ock-nm-inset)!important;
}

/* Footer intentionally remains dark and flatter to stop the entire site
   from becoming visually "soft" and losing hierarchy. */
html body.ock-site .ock-footer,
html body.ock-site .ock-footer-v8{
  box-shadow:0 -14px 34px rgba(117,132,123,.20)!important;
}

@media(max-width:767px){
  html body.ock-site .ock-header__frame{
    width:calc(100% - 16px)!important;
    margin:7px auto!important;
    padding:0 8px!important;
    border-radius:12px!important;
  }
  html body.ock-site .ock-product-card,
  html body.ock-site .ock-loop-item .ock-product-card,
  html body.ock-site .ock-home--retail .ock-product-card{
    border-radius:10px!important;
    box-shadow:5px 5px 13px rgba(151,165,157,.40),-5px -5px 13px rgba(255,255,255,.90)!important;
  }
  html body.ock-site .ock-product-card:hover,
  html body.ock-site .ock-loop-item .ock-product-card:hover{
    transform:none!important;
  }
  html body.ock-site .ock-product-card__media,
  html body.ock-site .ock-home--retail .ock-product-card__media{
    margin:7px!important;
    width:calc(100% - 14px)!important;
    border-radius:8px!important;
    box-shadow:inset 4px 4px 9px rgba(151,165,157,.30),inset -4px -4px 9px rgba(255,255,255,.82)!important;
  }
  html body.ock-site .ock-retail-slide__content{
    border-radius:12px!important;
    border-top:1px solid rgba(255,255,255,.16)!important;
  }
  html body.ock-site .ock-shop-v6{
    border-radius:12px!important;
    box-shadow:5px 5px 14px rgba(105,127,124,.30),-5px -5px 14px rgba(255,255,255,.90)!important;
  }
}

@media(prefers-reduced-motion:reduce){
  html body.ock-site .ock-product-card,
  html body.ock-site .ock-retail-category,
  html body.ock-site .ock-btn,
  html body.ock-site .ock-header__nav a{
    transition:none!important;
    transform:none!important;
  }
}

/* ============================================================================
   OFFICE CHOICE KENYA v0.3.0 — functional neumorphism / homepage composition
   ============================================================================ */
:root{
  --ock-nm-bg:#E7ECE8;
  --ock-nm-surface:#E9EEEA;
  --ock-nm-surface-light:#F3F6F3;
  --ock-nm-text:#132321;
  --ock-nm-muted:#65706B;
  --ock-nm-border:#C5D3D1;
  --ock-nm-primary:#14758A;
  --ock-nm-primary-dark:#164D58;
  --ock-nm-raised:10px 10px 24px rgba(155,167,160,.34),-10px -10px 24px rgba(255,255,255,.88);
  --ock-nm-raised-sm:5px 5px 12px rgba(155,167,160,.28),-5px -5px 12px rgba(255,255,255,.78);
  --ock-nm-inset:inset 5px 5px 10px rgba(155,167,160,.24),inset -5px -5px 10px rgba(255,255,255,.72);
  --ock-nm-inset-deep:inset 7px 7px 15px rgba(155,167,160,.30),inset -7px -7px 15px rgba(255,255,255,.82);
}

html body.ock-site{
  background:var(--ock-nm-bg)!important;
}
html body.ock-site .ock-storefront-v4{
  background:transparent!important;
  color:var(--ock-nm-text)!important;
}

/* One compact raised header instead of several pale capsules. */
html body.ock-site .ock-topbar{display:none!important}
html body.ock-site .ock-header-shell,
html body.ock-site .ock-header-shell.ock-header--fixed,
html body.ock-site .ock-header-shell.ock-header--scrolled{
  position:sticky!important;
  top:0!important;
  z-index:1000!important;
  padding:12px 0!important;
  background:rgba(231,236,232,.94)!important;
  border:0!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:blur(14px)!important;
  backdrop-filter:blur(14px)!important;
}
html body.ock-site .ock-header-shell::before{display:none!important}
html body.ock-site .ock-header__frame,
html body.ock-site .ock-header__main{
  width:min(1320px,calc(100% - 36px))!important;
  min-height:72px!important;
  margin:0 auto!important;
  padding:0 16px!important;
  gap:24px!important;
  border:1px solid rgba(255,255,255,.58)!important;
  border-radius:16px!important;
  background:var(--ock-nm-surface)!important;
  box-shadow:var(--ock-nm-raised)!important;
}
html body.ock-site .ock-header__brand{
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
html body.ock-site .ock-header__brand img{max-width:196px!important;max-height:46px!important}
html body.ock-site .ock-header__nav .ock-nav__list{
  gap:2px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
html body.ock-site .ock-header__nav .ock-nav__list>li>a{
  min-height:40px!important;
  padding:0 12px!important;
  border:0!important;
  border-radius:9px!important;
  background:transparent!important;
  color:var(--ock-nm-text)!important;
  box-shadow:none!important;
}
html body.ock-site .ock-header__nav .ock-nav__list>li>a:hover,
html body.ock-site .ock-header__nav .ock-nav__list>li.current-menu-item>a,
html body.ock-site .ock-header__nav .ock-nav__list>li.current_page_item>a,
html body.ock-site .ock-header__nav .ock-nav__list>li.current-menu-ancestor>a{
  color:var(--ock-nm-primary)!important;
  background:var(--ock-nm-surface)!important;
  box-shadow:var(--ock-nm-inset)!important;
}
html body.ock-site .ock-header__nav .ock-nav__list>li>a::after{display:none!important}
html body.ock-site .ock-header__actions{
  margin-left:auto!important;
  padding:0!important;
  gap:8px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
html body.ock-site .ock-header__actions .ock-header__icon{
  width:42px!important;
  height:42px!important;
  border:0!important;
  border-radius:10px!important;
  background:var(--ock-nm-surface)!important;
  color:var(--ock-nm-text)!important;
  box-shadow:var(--ock-nm-raised-sm)!important;
}
html body.ock-site .ock-header__actions .ock-header__icon:hover,
html body.ock-site .ock-header__actions .ock-header__icon:focus-visible,
html body.ock-site .ock-header__actions .ock-header__icon.is-drawer-open{
  color:var(--ock-nm-primary)!important;
  background:var(--ock-nm-surface)!important;
  box-shadow:var(--ock-nm-inset)!important;
}
html body.ock-site .ock-header__actions .ock-header__quote-main{
  min-height:44px!important;
  padding:0 18px!important;
  border:0!important;
  border-radius:10px!important;
  background:var(--ock-nm-primary)!important;
  color:#fff!important;
  box-shadow:5px 5px 12px rgba(111,132,122,.35),-4px -4px 10px rgba(255,255,255,.58)!important;
  transform:none!important;
}
html body.ock-site .ock-header__actions .ock-header__quote-main:hover{
  background:var(--ock-nm-primary-dark)!important;
  transform:translateY(-1px)!important;
}
html body.ock-site .ock-header__actions .ock-header__quote-main:active{
  transform:translateY(1px)!important;
  box-shadow:inset 4px 4px 9px rgba(3,45,44,.34),inset -3px -3px 8px rgba(54,139,134,.24)!important;
}

/* Hero: photography stays dominant; the content panel becomes a tactile object. */
html body.ock-site .ock-v4-hero{padding:24px 0 10px!important;background:transparent!important}
html body.ock-site .ock-v4-hero__shell{
  min-height:500px!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.55)!important;
  border-radius:18px!important;
  background:var(--ock-nm-surface)!important;
  box-shadow:var(--ock-nm-raised)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
html body.ock-site .ock-v4-hero__slides,
html body.ock-site .ock-v4-hero__slide{min-height:500px!important}
html body.ock-site .ock-v4-hero__media::after{
  background:linear-gradient(90deg,rgba(13,31,29,.18) 0%,rgba(13,31,29,.05) 35%,rgba(13,31,29,.02) 68%,rgba(13,31,29,.12) 100%)!important;
}
html body.ock-site .ock-v4-hero__content{
  left:32px!important;
  width:min(485px,calc(100% - 64px))!important;
  padding:30px 32px!important;
  border:1px solid rgba(255,255,255,.60)!important;
  border-radius:16px!important;
  background:rgba(233,238,234,.94)!important;
  background-image:none!important;
  box-shadow:10px 10px 26px rgba(35,48,43,.24),-8px -8px 22px rgba(255,255,255,.34)!important;
  -webkit-backdrop-filter:blur(10px)!important;
  backdrop-filter:blur(10px)!important;
}
html body.ock-site .ock-v4-kicker{
  margin-bottom:11px!important;
  color:var(--ock-nm-primary)!important;
  font-size:10px!important;
  letter-spacing:.16em!important;
}
html body.ock-site .ock-v4-hero__content h2{
  max-width:12ch!important;
  color:var(--ock-nm-text)!important;
  font-size:clamp(2.55rem,3.5vw,3.7rem)!important;
  line-height:1!important;
  letter-spacing:-.047em!important;
}
html body.ock-site .ock-v4-hero__content p{
  max-width:44ch!important;
  margin-top:15px!important;
  color:var(--ock-nm-muted)!important;
  font-size:14px!important;
  line-height:1.55!important;
}
html body.ock-site .ock-v4-hero__actions{margin-top:20px!important;gap:10px!important}
html body.ock-site .ock-v4-btn{
  min-height:44px!important;
  padding:0 16px!important;
  border-radius:9px!important;
}
html body.ock-site .ock-v4-btn--primary{
  border:0!important;
  background:var(--ock-nm-primary)!important;
  color:#fff!important;
  box-shadow:4px 4px 10px rgba(115,136,126,.34),-3px -3px 8px rgba(255,255,255,.44)!important;
}
html body.ock-site .ock-v4-btn--primary:hover{background:var(--ock-nm-primary-dark)!important;border:0!important}
html body.ock-site .ock-v4-btn--primary:active{
  transform:translateY(1px)!important;
  box-shadow:inset 4px 4px 8px rgba(3,45,44,.34),inset -3px -3px 7px rgba(54,139,134,.22)!important;
}
html body.ock-site .ock-v4-btn--secondary{
  border:0!important;
  background:var(--ock-nm-surface)!important;
  color:var(--ock-nm-text)!important;
  box-shadow:var(--ock-nm-raised-sm)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
html body.ock-site .ock-v4-btn--secondary:hover{
  color:var(--ock-nm-primary)!important;
  background:var(--ock-nm-surface)!important;
  box-shadow:var(--ock-nm-inset)!important;
}

/* Recessed slider selector with tactile arrow keys. */
html body.ock-site .ock-v4-hero__nav{
  right:18px!important;
  bottom:18px!important;
  padding:7px!important;
  gap:7px!important;
  border:0!important;
  border-radius:12px!important;
  background:rgba(231,236,232,.94)!important;
  box-shadow:var(--ock-nm-raised-sm)!important;
  -webkit-backdrop-filter:blur(8px)!important;
  backdrop-filter:blur(8px)!important;
}
html body.ock-site .ock-v4-hero__dots button{
  width:30px!important;
  height:30px!important;
  border-radius:8px!important;
  color:#7A8580!important;
}
html body.ock-site .ock-v4-hero__dots button.is-active{
  background:var(--ock-nm-surface)!important;
  color:var(--ock-nm-primary)!important;
  box-shadow:var(--ock-nm-inset)!important;
}
html body.ock-site .ock-v4-hero__arrows{border-left:1px solid rgba(99,115,107,.16)!important}
html body.ock-site .ock-v4-hero__arrows button{
  width:31px!important;
  height:31px!important;
  border-radius:8px!important;
  background:var(--ock-nm-surface)!important;
  color:var(--ock-nm-text)!important;
  box-shadow:var(--ock-nm-raised-sm)!important;
}
html body.ock-site .ock-v4-hero__arrows button:active{box-shadow:var(--ock-nm-inset)!important}

/* Compact trust rail. */
html body.ock-site .ock-v4-benefits{
  margin-top:14px!important;
  gap:12px!important;
  border:0!important;
  background:transparent!important;
}
html body.ock-site .ock-v4-benefits>div,
html body.ock-site .ock-v4-benefits>div:last-child{
  min-height:72px!important;
  padding:10px 18px!important;
  border:1px solid rgba(255,255,255,.52)!important;
  border-radius:12px!important;
  background:var(--ock-nm-surface)!important;
  box-shadow:var(--ock-nm-raised-sm)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
html body.ock-site .ock-v4-benefits strong{font-size:13px!important;color:var(--ock-nm-text)!important}
html body.ock-site .ock-v4-benefits span{font-size:11px!important;color:var(--ock-nm-muted)!important}
html body.ock-site .ock-v4-benefits i{background:var(--ock-nm-primary)!important}

/* Sections remain on the common plane. The merchandise itself carries elevation. */
html body.ock-site .ock-v4-section,
html body.ock-site .ock-v4-products,
html body.ock-site .ock-v4-products--popular,
html body.ock-site .ock-v4-guides,
html body.ock-site .ock-v4-reviews,
html body.ock-site .ock-v4-quote{
  background:transparent!important;
  border:0!important;
}
html body.ock-site .ock-v4-categories>.ock-container,
html body.ock-site .ock-v4-products>.ock-container,
html body.ock-site .ock-v4-guides>.ock-container,
html body.ock-site .ock-v4-reviews>.ock-container{
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
html body.ock-site .ock-v4-heading h2{color:var(--ock-nm-text)!important}
html body.ock-site .ock-v4-heading>div>span,
html body.ock-site .ock-v4-quote__panel>div:first-child>span{color:var(--ock-nm-primary)!important}

html body.ock-site .ock-v4-category{
  padding:8px!important;
  border:1px solid rgba(255,255,255,.52)!important;
  border-radius:12px!important;
  background:var(--ock-nm-surface)!important;
  box-shadow:var(--ock-nm-raised-sm)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  transition:transform .18s ease,box-shadow .18s ease!important;
}
html body.ock-site .ock-v4-category:hover{transform:translateY(-2px)!important;box-shadow:var(--ock-nm-raised)!important}
html body.ock-site .ock-v4-category__image{
  border:0!important;
  border-radius:9px!important;
  background:var(--ock-nm-bg)!important;
  box-shadow:var(--ock-nm-inset-deep)!important;
}

html body.ock-site .ock-storefront-v4 .ock-product-card{
  border:1px solid rgba(255,255,255,.52)!important;
  border-radius:12px!important;
  background:var(--ock-nm-surface)!important;
  box-shadow:var(--ock-nm-raised-sm)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  transition:transform .18s ease,box-shadow .18s ease!important;
}
html body.ock-site .ock-storefront-v4 .ock-product-card:hover{
  transform:translateY(-2px)!important;
  box-shadow:var(--ock-nm-raised)!important;
}
html body.ock-site .ock-storefront-v4 .ock-product-card__media{
  margin:8px!important;
  width:calc(100% - 16px)!important;
  border-radius:9px!important;
  background:var(--ock-nm-bg)!important;
  box-shadow:var(--ock-nm-inset-deep)!important;
}
html body.ock-site .ock-storefront-v4 .ock-product-card__body{padding:11px 13px 13px!important;background:transparent!important}
html body.ock-site .ock-storefront-v4 .ock-product-card__actions .ock-btn{border-radius:8px!important}

html body.ock-site .ock-v4-guide{
  border:1px solid rgba(255,255,255,.52)!important;
  border-radius:12px!important;
  background:var(--ock-nm-surface)!important;
  box-shadow:var(--ock-nm-raised-sm)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

/* Keep one dark conversion anchor so the interface does not dissolve into soft grey. */
html body.ock-site .ock-v4-quote__panel{
  border:0!important;
  border-radius:16px!important;
  background:#102E36!important;
  box-shadow:10px 10px 24px rgba(138,151,144,.26),-8px -8px 20px rgba(255,255,255,.56)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

@media(max-width:1180px){
  html body.ock-site .ock-header__frame,
  html body.ock-site .ock-header__main{width:min(100%,calc(100% - 24px))!important;gap:14px!important}
  html body.ock-site .ock-v4-hero__content{left:24px!important;width:min(455px,calc(100% - 48px))!important;padding:28px!important}
  html body.ock-site .ock-v4-hero__content h2{font-size:clamp(2.35rem,4.5vw,3.35rem)!important}
}

@media(max-width:767px){
  html body.ock-site .ock-header-shell,
  html body.ock-site .ock-header-shell.ock-header--fixed,
  html body.ock-site .ock-header-shell.ock-header--scrolled{padding:7px 0!important}
  html body.ock-site .ock-header__frame,
  html body.ock-site .ock-header__main{
    width:calc(100% - 14px)!important;
    min-height:62px!important;
    padding:0 9px!important;
    border-radius:13px!important;
    box-shadow:5px 5px 14px rgba(155,167,160,.34),-5px -5px 14px rgba(255,255,255,.86)!important;
  }
  html body.ock-site .ock-header__brand img{max-width:150px!important;max-height:38px!important}
  html body.ock-site .ock-header__actions .ock-header__icon{width:39px!important;height:39px!important;border-radius:9px!important}

  html body.ock-site .ock-v4-hero{padding-top:12px!important}
  html body.ock-site .ock-v4-hero__shell,
  html body.ock-site .ock-v4-hero__slides,
  html body.ock-site .ock-v4-hero__slide{min-height:570px!important}
  html body.ock-site .ock-v4-hero__shell{border-radius:14px!important;box-shadow:5px 5px 16px rgba(155,167,160,.34),-5px -5px 16px rgba(255,255,255,.84)!important}
  html body.ock-site .ock-v4-hero__content{
    left:12px!important;
    right:12px!important;
    bottom:62px!important;
    width:auto!important;
    padding:20px!important;
    border-radius:13px!important;
    box-shadow:6px 6px 16px rgba(29,42,37,.24),-5px -5px 14px rgba(255,255,255,.30)!important;
  }
  html body.ock-site .ock-v4-hero__content h2{max-width:12ch!important;font-size:clamp(2.15rem,9.6vw,2.85rem)!important}
  html body.ock-site .ock-v4-hero__content p{font-size:13px!important;margin-top:10px!important}
  html body.ock-site .ock-v4-hero__actions{margin-top:14px!important}
  html body.ock-site .ock-v4-btn{min-height:41px!important;padding:0 13px!important}
  html body.ock-site .ock-v4-hero__nav{top:12px!important;right:12px!important;bottom:auto!important}
  html body.ock-site .ock-v4-benefits{grid-template-columns:1fr!important;gap:8px!important}
  html body.ock-site .ock-v4-benefits>div,
  html body.ock-site .ock-v4-benefits>div:last-child{min-height:58px!important;padding:9px 14px!important}
  html body.ock-site .ock-v4-category{padding:6px!important;border-radius:10px!important}
  html body.ock-site .ock-storefront-v4 .ock-product-card{border-radius:10px!important}
}

/* ============================================================================
   OFFICE CHOICE KENYA v0.4.0 — client logo integration
   ============================================================================ */
:root{
  --ock-brand-cyan:#1798B3;
  --ock-brand-teal:#14758A;
  --ock-brand-deep:#164D58;
  --ock-nm-primary:#14758A;
  --ock-nm-primary-dark:#164D58;
}
html body.ock-site .ock-header__brand img{
  width:auto!important;
  max-width:205px!important;
  max-height:52px!important;
  object-fit:contain!important;
  filter:none!important;
}
html body.ock-site .ock-header__brand{
  min-width:190px!important;
}
html body.ock-site .ock-cart-count,
html body.ock-site .ock-v4-benefits i{
  background:var(--ock-brand-cyan)!important;
}
html body.ock-site .ock-footer__logo-chip img{
  width:auto!important;
  max-width:220px!important;
  max-height:64px!important;
  object-fit:contain!important;
}
html body.ock-site .ock-menu__brand img{
  width:auto!important;
  max-width:190px!important;
  max-height:54px!important;
  object-fit:contain!important;
}
@media(max-width:767px){
  html body.ock-site .ock-header__brand{min-width:0!important}
  html body.ock-site .ock-header__brand img{max-width:145px!important;max-height:40px!important}
  html body.ock-site .ock-menu__brand img{max-width:170px!important;max-height:52px!important}
}
@media(max-width:390px){
  html body.ock-site .ock-header__brand img{max-width:128px!important;max-height:36px!important}
}


/* ============================================================================
   OFFICE CHOICE KENYA v0.5.0 — dark neumorphic footer + client identity
   The footer stays visually grounded, but now uses the same tactile depth as
   the light UI. The supplied reversed wordmark sits directly on the dark plane.
   ============================================================================ */
html body.ock-site .ock-footer{
  background:#171d1e!important;
  color:#f4f6f5!important;
  border-top:1px solid rgba(255,255,255,.06)!important;
  box-shadow:0 -14px 36px rgba(94,111,103,.18)!important;
}
html body.ock-site .ock-footer__cta{
  padding:28px 0 30px!important;
  background:#171d1e!important;
  border-bottom:1px solid rgba(255,255,255,.055)!important;
}
html body.ock-site .ock-footer__cta-inner{
  min-height:106px!important;
  padding:22px 26px!important;
  border:1px solid rgba(255,255,255,.09)!important;
  border-radius:16px!important;
  background:#202627!important;
  box-shadow:
    10px 10px 24px rgba(4,10,11,.34),
    -7px -7px 18px rgba(65,76,76,.18)!important;
}
html body.ock-site .ock-footer__cta-inner>div{gap:7px!important}
html body.ock-site .ock-footer__cta span{
  color:#54bfd1!important;
  font-size:10px!important;
  font-weight:850!important;
  letter-spacing:.13em!important;
}
html body.ock-site .ock-footer__cta strong{
  color:#f7f8f7!important;
  font-size:24px!important;
  line-height:1.18!important;
  letter-spacing:-.025em!important;
}
html body.ock-site .ock-footer__cta a{
  min-height:48px!important;
  padding:0 18px!important;
  border:1px solid rgba(63,174,191,.36)!important;
  border-radius:10px!important;
  background:#14758a!important;
  color:#fff!important;
  box-shadow:
    5px 5px 12px rgba(4,10,11,.30),
    -3px -3px 9px rgba(80,101,101,.14)!important;
}
html body.ock-site .ock-footer__cta a:hover{
  background:#217484!important;
  border-color:#217484!important;
  transform:translateY(-1px)!important;
}
html body.ock-site .ock-footer__cta a:active{
  transform:none!important;
  box-shadow:
    inset 3px 3px 7px rgba(3,28,32,.30),
    inset -2px -2px 6px rgba(63,174,191,.14)!important;
}
html body.ock-site .ock-footer__main--compact{
  padding-top:38px!important;
  padding-bottom:28px!important;
}
html body.ock-site .ock-footer__logo-chip{
  display:block!important;
  width:auto!important;
  max-width:300px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
html body.ock-site .ock-footer__logo-chip img{
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:290px!important;
  max-height:82px!important;
  object-fit:contain!important;
  object-position:left center!important;
}
html body.ock-site .ock-footer__brand--compact p{
  max-width:390px!important;
  margin:20px 0 17px!important;
  color:#bdc7c4!important;
  font-size:14px!important;
  line-height:1.6!important;
}
html body.ock-site .ock-footer__brand--compact .ock-footer__facts span{
  padding:7px 10px!important;
  border:1px solid rgba(84,191,209,.18)!important;
  border-radius:8px!important;
  background:#1c2324!important;
  color:#d5ddda!important;
  box-shadow:
    inset 2px 2px 5px rgba(3,10,11,.20),
    inset -2px -2px 5px rgba(70,82,82,.10)!important;
}
html body.ock-site .ock-footer__col h3,
html body.ock-site .ock-footer__contact-label{
  color:#f6f8f7!important;
}
html body.ock-site .ock-footer__col a,
html body.ock-site .ock-footer__contact-item{
  color:#c4cecb!important;
}
html body.ock-site .ock-footer__col a:hover,
html body.ock-site .ock-footer__contact-item:hover{
  color:#61c5d5!important;
}
html body.ock-site .ock-footer__contact--bar{
  border-top-color:rgba(255,255,255,.07)!important;
}
html body.ock-site .ock-footer__contact--bar .ock-footer__contact-item i{
  border-radius:8px!important;
  background:#1b2223!important;
  color:#61c5d5!important;
  box-shadow:
    inset 2px 2px 5px rgba(3,10,11,.24),
    inset -2px -2px 5px rgba(72,84,84,.10)!important;
}
html body.ock-site .ock-footer__bottom{
  border-top-color:rgba(255,255,255,.07)!important;
  color:#929d99!important;
}
html body.ock-site .ock-footer__bottom a{color:#b7c1be!important}
html body.ock-site .ock-footer__bottom a:hover{color:#61c5d5!important}

@media(max-width:767px){
  html body.ock-site .ock-footer__cta{padding:18px 0 20px!important}
  html body.ock-site .ock-footer__cta-inner{
    width:calc(100% - 24px)!important;
    padding:20px!important;
    border-radius:14px!important;
  }
  html body.ock-site .ock-footer__cta strong{font-size:20px!important}
  html body.ock-site .ock-footer__cta a{width:100%!important;justify-content:center!important}
  html body.ock-site .ock-footer__logo-chip img{
    max-width:250px!important;
    max-height:72px!important;
  }
}