/* =============================================================================
   store.css — additions and overrides layered on top of the theme.
   theme.css is left alone so the theme stays easy to update.
   ============================================================================= */

/* ---------- Base reset ----------
   The theme relied on OpenCart's Bootstrap, which no longer loads, so the
   global box-sizing is set here — without it .oc-container's width:100% plus
   padding creates horizontal scroll on mobile.

   NOTE: never put overflow-x:hidden on body — the header is position:sticky
   and it breaks under it. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

/* core.css sets `h1..h6 { color:#444 }`, which stops headings inheriting their
   parent's colour — headings went invisible on the dark hero slide. */
h1, h2, h3, h4, h5, h6 {
  color: inherit;
}

/* OpenCart leftovers in core.css — these left 700px+ of blank space below the page */
#container {
  position: static;
  margin-bottom: 0;
  min-height: 0;
}

#content,
#column-left,
#column-right {
  padding-bottom: 0;
}

img {
  max-width: 100%;
}

/* ---------- Header: logo + WhatsApp action ---------- */
.oc-header__logo-img {
  display: block;
  max-height: 44px;
  width: auto;
}

.oc-header__icon-item--wa {
  width: auto;
  padding: 0 14px;
  gap: 8px;
  background: #25d366;
  color: #ffffff;
  border-radius: 50px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: background var(--hover-transition, 0.25s ease), transform var(--hover-transition, 0.25s ease);
}

.oc-header__icon-item--wa:hover {
  background: #1da851;
  color: #ffffff;
  transform: translateY(-1px);
}

.oc-header__icon-item--wa i {
  font-size: 18px;
}

.oc-header__wa-label {
  text-transform: uppercase;
}

.oc-nav__caret {
  font-size: 10px;
  margin-left: 4px;
  opacity: 0.7;
}

.oc-nav__link.is-active {
  color: var(--oc-primary-hover, #ffd400);
}

/* ---------- Mega menu: sub-category links + view all ---------- */
.mm__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.mm__link {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 50px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: #334155;
  text-decoration: none;
  transition: all 0.2s ease;
}

.mm__link:hover {
  background: #0f172a;
  border-color: #0f172a;
  color: #ffffff;
}

.mm__view-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: #0f172a;
  text-decoration: none;
}

.mm__view-all:hover {
  color: #ca8a04;
}

/* ---------- Footer: WhatsApp CTA, in place of the newsletter ---------- */
.oc-footer__cta {
  max-width: var(--page-width);
  margin: 0 auto var(--gap-2xl);
  padding: 0 var(--gap-md) var(--gap-2xl);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-xl);
  flex-wrap: wrap;
}

.oc-footer__cta h3 {
  color: #ffffff;
  margin: 0;
  font-size: var(--fs-h4);
}

.oc-footer__cta p {
  color: rgba(255, 255, 255, 0.6);
  margin: var(--gap-sm) 0 0;
  font-size: 13px;
}

.oc-footer__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #25d366;
  color: #ffffff;
  border-radius: 50px;
  padding: 14px 26px;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.25s ease, transform 0.25s ease;
}

.oc-footer__cta-btn:hover {
  background: #1da851;
  color: #ffffff;
  transform: translateY(-2px);
}

.oc-footer__cta-btn i {
  font-size: 20px;
}

.oc-footer__about p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  line-height: 1.7;
  margin: 0 0 16px;
}

.oc-footer__social--inline {
  display: flex;
  gap: 10px;
}

.oc-footer__contact li {
  margin-bottom: 10px;
}

.oc-footer__contact a,
.oc-footer__contact span {
  display: inline-flex;
  align-items: flex-start;
  gap: 9px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  line-height: 1.6;
  text-decoration: none;
}

.oc-footer__contact a:hover {
  color: #ffd400;
}

.oc-footer__contact i {
  margin-top: 3px;
  width: 14px;
  flex-shrink: 0;
}

/* ---------- Mobile drawer: contact block ---------- */
.oc-mobile-drawer__contact {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #f1f5f9;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.oc-mobile-drawer__contact-link {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  color: #334155;
  text-decoration: none;
}

.oc-mobile-drawer__contact-link i {
  width: 19px;
  font-size: 17px;
  color: #64748b;
  flex-shrink: 0;
}

.oc-mobile-drawer__contact-link:hover {
  color: #0f172a;
}

/* ---------- Floating WhatsApp button ---------- */
.oc-wa-float {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1200;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px 13px 16px;
  border-radius: 50px;
  background: #25d366;
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(37, 211, 102, 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.oc-wa-float:hover {
  color: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(37, 211, 102, 0.45);
}

.oc-wa-float i {
  font-size: 24px;
}

@media (max-width: 576px) {
  .oc-wa-float {
    right: 14px;
    bottom: 14px;
    padding: 14px;
  }

  .oc-wa-float span {
    display: none;
  }
}

/* ---------- WhatsApp order buttons, in place of Add to Cart ---------- */
.oc-product-card__add-to-cart,
.oc-pdp-add-cart-btn,
.oc-gear-card__cart-btn {
  cursor: pointer;
}

.oc-wa-btn {
  background: #25d366 !important;
  border-color: #25d366 !important;
  color: #ffffff !important;
}

.oc-wa-btn:hover {
  background: #1da851 !important;
  border-color: #1da851 !important;
  color: #ffffff !important;
}

.oc-pdp-wa-note {
  margin-top: 12px;
  font-family: var(--font-accent);
  font-size: 12.5px;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 7px;
}

.oc-pdp-wa-note i {
  color: #25d366;
  font-size: 15px;
}

/* ---------- Shared bits ---------- */
.oc-empty-state {
  padding: 60px 20px;
  text-align: center;
  color: #64748b;
  font-family: var(--font-accent);
}

.oc-empty-state i {
  font-size: 42px;
  color: #cbd5e1;
  margin-bottom: 14px;
  display: block;
}

.oc-empty-state h2,
.oc-empty-state h3 {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.35;
  color: #0f172a;
  margin: 0 0 8px;
}

.oc-empty-state p {
  margin: 0;
  font-size: 14px;
}

.oc-page-content {
  font-family: var(--font-accent);
  font-size: 15px;
  line-height: 1.8;
  color: #334155;
}

.oc-page-content h2,
.oc-page-content h3,
.oc-page-content h4 {
  font-family: var(--font-heading);
  color: #0f172a;
  margin: 28px 0 12px;
}

.oc-page-content h2 { font-size: 24px; }
.oc-page-content h3 { font-size: 19px; }
.oc-page-content h4 { font-size: 16px; }

.oc-page-content p,
.oc-page-content ul,
.oc-page-content ol {
  margin: 0 0 16px;
}

.oc-page-content ul,
.oc-page-content ol {
  padding-left: 22px;
}

.oc-page-content li {
  margin-bottom: 8px;
}

.oc-page-content a {
  color: #ca8a04;
  text-decoration: underline;
}

.oc-page-content img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

/* Quick view close button */
.oc-qv-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 10;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: #f1f5f9;
  color: #0f172a;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.oc-qv-close:hover {
  background: #e2e8f0;
}

/* Sort/filter toolbar form */
.oc-cat-toolbar__form {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Pagination */
.oc-cat-pagination .pagination {
  margin: 0;
}

/* ---------- Lightbox ---------- */
.oc-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  background: rgba(9, 12, 20, 0.94);
}

.oc-lightbox.is-open {
  display: flex;
}

.oc-lightbox__figure {
  margin: 0;
  max-width: min(1100px, 92vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.oc-lightbox__img {
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: 12px;
  background: #ffffff;
}

.oc-lightbox__caption {
  color: rgba(255, 255, 255, 0.75);
  font-family: var(--font-body);
  font-size: 13px;
  text-align: center;
}

.oc-lightbox__close,
.oc-lightbox__nav {
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.2s ease;
}

.oc-lightbox__close:hover,
.oc-lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.25);
}

.oc-lightbox__close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  font-size: 28px;
  line-height: 1;
}

.oc-lightbox__nav {
  width: 48px;
  height: 48px;
  font-size: 20px;
  flex-shrink: 0;
}

@media (max-width: 576px) {
  .oc-lightbox {
    padding: 12px;
    gap: 6px;
  }

  .oc-lightbox__nav {
    width: 38px;
    height: 38px;
  }
}

/* ---------- Quick view button, in place of the wishlist heart ---------- */
.oc-btn-quickview {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 6;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0;
}

.oc-btn-quickview:hover {
  transform: scale(1.12);
  background: #0f172a;
  color: #ffffff;
}

/* ---------- Home: shop by category tiles ---------- */
.oc-catgrid-section {
  padding: 40px 0;
}

/* Single row category slider — arrows sit in the section header, so the
   track never overflows the container and the page cannot scroll sideways. */
.oc-catgrid-slider-wrap {
  position: relative;
}

.oc-catgrid-swiper {
  overflow: hidden;
  padding: 4px 0 6px;
}

.oc-catgrid__slide {
  height: auto;
}

.oc-catgrid__slide .oc-catgrid__card {
  height: 100%;
}

.oc-catgrid__controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.oc-catgrid__nav {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #0f172a;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.oc-catgrid__nav:hover {
  background: #0f172a;
  border-color: #0f172a;
  color: #ffffff;
}

.oc-catgrid__nav.swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}

@media (max-width: 576px) {
  .oc-catgrid__nav { display: none; }
}

.oc-catgrid__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 14px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 16px;
  text-decoration: none;
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.oc-catgrid__card:hover {
  transform: translateY(-4px);
  border-color: #0f172a;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1);
}

.oc-catgrid__thumb {
  width: 74px;
  height: 74px;
  object-fit: contain;
}

.oc-catgrid__name {
  font-family: var(--font-heading);
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: #0f172a;
  line-height: 1.35;
}

.oc-catgrid__count {
  font-family: var(--font-accent);
  font-size: 11.5px;
  color: #94a3b8;
}

/* ---------- Pagination ---------- */
.oc-pagination {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.oc-pagination__link {
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  background: #ffffff;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  text-decoration: none;
  transition: all 0.2s ease;
}

.oc-pagination__link:hover {
  background: #0f172a;
  border-color: #0f172a;
  color: #ffffff;
}

.oc-pagination__link.is-active {
  background: #ffd400;
  border-color: #ffd400;
  color: #121212;
}

.oc-pagination__link.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}

.oc-pagination__dots {
  padding: 0 4px;
  color: #94a3b8;
}

/* ---------- Listing toolbar sort select ---------- */
.oc-cat-toolbar__count {
  font-family: var(--font-accent);
  font-size: 13px;
  color: #64748b;
}

/* ---------- Sidebar banner ---------- */
.oc-cat-sidebar__banner {
  display: block;
  margin-top: 16px;
  border-radius: 14px;
  overflow: hidden;
}

.oc-cat-sidebar__banner img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---------- PDP: short description ---------- */
.oc-pdp-short-desc {
  font-family: var(--font-accent);
  font-size: 14px;
  line-height: 1.7;
  color: #475569;
  margin: 0 0 18px;
}

/* ---------- Contact page tweaks ---------- */
.oc-contact-map-title {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 900;
  text-transform: uppercase;
  color: #0f172a;
  margin-bottom: 16px;
}

.oc-contact-map-title i {
  margin-right: 6px;
}

.oc-contact-card__body h2 {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 6px;
}

.oc-contact-form-title {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 900;
  color: #0f172a;
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 9px;
}

.oc-contact-form-title i {
  color: #25d366;
}

.mb-3 { margin-bottom: 16px; }
.mb-4 { margin-bottom: 24px; }
.text-end { text-align: right; }

/* ---------- Header mega menu: shelves + featured products ---------- */
.oc-mm-links__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}

@media (min-width: 992px) {
  .oc-mm-links__layout:has(.oc-mm-links__products) {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 460px);
  }
}

.oc-mm-links__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #edf2f7;
}

.oc-mm-links__title {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #94a3b8;
  text-transform: uppercase;
}

.oc-mm-links__all {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: #0f172a;
  text-decoration: none;
  white-space: nowrap;
}

.oc-mm-links__all:hover {
  text-decoration: underline;
}

.oc-mm-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 2px 24px;
  max-height: 320px;
  overflow-y: auto;
}

.oc-mm-links__item {
  font-family: var(--font-body);
  font-size: 13px;
  color: #334155;
  text-decoration: none;
  padding: 5px 0;
  border-radius: 6px;
  transition: color 0.15s ease;
}

.oc-mm-links__item:hover,
.oc-mm-links__item.is-active {
  color: #0f172a;
  font-weight: 600;
}

.oc-mm-links__products .oc-mm-links__title {
  display: block;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #edf2f7;
}

.oc-mm-links__product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

@media (min-width: 1200px) {
  .oc-mm-links__product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---------- Home: all products grid with "Load more" ---------- */
.oc-allp-section {
  padding: 8px 0 56px;
}

.oc-allp__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

@media (min-width: 768px) {
  .oc-allp__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .oc-allp__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.oc-allp__cell {
  display: flex;
}

.oc-allp__cell > * {
  width: 100%;
}

.oc-allp__more {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

.oc-allp__more-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 34px;
  border-radius: 50px;
  border: 1px solid #0f172a;
  background: #ffffff;
  color: #0f172a;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.oc-allp__more-btn:hover {
  background: #0f172a;
  color: #ffffff;
  transform: translateY(-2px);
}

.oc-allp__more-btn[disabled] {
  opacity: 0.6;
  cursor: default;
  transform: none;
}

.oc-allp__more-btn.is-loading i {
  animation: oc-allp-spin 0.8s linear infinite;
}

@keyframes oc-allp-spin {
  to { transform: rotate(360deg); }
}

/* ---------- Sticky header: only the nav row stays on scroll ----------
   Desktop only. Below 992px .oc-header__bottom is display:none, so the top
   row is the whole header there and must keep the theme's sticky behaviour.

   The top row is NOT collapsed on a scroll class. Doing that changes the
   header's height, which shifts the page up, which drops scrollY back under
   the threshold, which expands it again — a flicker loop several times a
   second. Instead the header stops being sticky and only the nav row sticks,
   so the top row simply scrolls away and nothing ever changes height. */
@media (min-width: 992px) {
  .oc-header {
    position: static;
    border-bottom: 0;
  }

  .oc-header__bottom {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: var(--oc-bg);
    border-bottom: 1px solid var(--oc-border);
    transition: box-shadow 0.2s ease;
  }

  .oc-header.is-scrolled .oc-header__bottom {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  }
}

/* ---------- Category sidebar ----------
   Replaces the flat list-group. Categories are rows with a count badge; the
   open category's shelves nest under it against a rail, so the two levels
   are told apart at a glance instead of by a leading dash. */
.oc-cat-sidebar {
  width: 270px;
  flex-shrink: 0;
}

.oc-catnav {
  background: #ffffff;
  border: 1px solid #e8edf3;
  border-radius: 14px;
  padding: 8px;
  overflow: hidden;
}

.oc-catnav__heading {
  margin: 6px 8px 10px;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #94a3b8;
}

.oc-catnav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.oc-catnav__all,
.oc-catnav__item,
.oc-catnav__sub {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  border-radius: 9px;
  transition: background 0.16s ease, color 0.16s ease;
}

.oc-catnav__all,
.oc-catnav__item {
  padding: 9px 10px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  color: #1e293b;
}

.oc-catnav__all {
  margin-bottom: 6px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eef2f7;
  border-radius: 9px 9px 0 0;
}

.oc-catnav__all > span:first-child {
  flex: 1;
}

.oc-catnav__icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
  opacity: 0.7;
}

.oc-catnav__name {
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}

.oc-catnav__count {
  flex-shrink: 0;
  min-width: 22px;
  padding: 2px 7px;
  border-radius: 20px;
  background: #f1f5f9;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-align: center;
}

.oc-catnav__all:hover,
.oc-catnav__item:hover {
  background: #f6f8fb;
  color: #0f172a;
}

.oc-catnav__all.is-active,
.oc-catnav__item.is-active {
  background: #0f172a;
  color: #ffffff;
}

.oc-catnav__all.is-active .oc-catnav__count,
.oc-catnav__item.is-active .oc-catnav__count {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

.oc-catnav__item.is-active .oc-catnav__icon {
  opacity: 1;
  filter: invert(1) brightness(2);
}

/* An open category keeps its label dark even when a shelf below is selected.
   The active item is excluded: it already has a dark background, and this rule
   outranks .is-active on specificity, which would paint navy text on navy. */
.oc-catnav__group.is-open > .oc-catnav__item:not(.is-active) {
  color: #0f172a;
}

/* ---- Shelves of the open category ---- */
.oc-catnav__subs {
  list-style: none;
  margin: 2px 0 8px;
  padding: 2px 0 2px 12px;
  margin-left: 19px;
  border-left: 2px solid #e8edf3;
}

.oc-catnav__sub {
  padding: 7px 10px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  color: #64748b;
}

.oc-catnav__sub:hover {
  background: #f6f8fb;
  color: #0f172a;
}

.oc-catnav__sub.is-active {
  background: #fff7d6;
  color: #0f172a;
  font-weight: 700;
}

.oc-catnav__sub.is-active .oc-catnav__count {
  background: #f2d98b;
  color: #6b4f04;
}

@media (max-width: 991px) {
  .oc-cat-sidebar {
    width: 100%;
  }

  .oc-catnav__subs {
    max-height: 260px;
    overflow-y: auto;
  }
}

/* ---------- Quick view bar on listing cards ----------
   Sits over the bottom of the image and opens the product in a modal, so a
   shopper can look without leaving the listing. Hover reveals it on desktop;
   on touch there is no hover, so it stays visible. */
.oc-product-card__image {
  position: relative;
  overflow: hidden;
}

.oc-quickview-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 12px;
  border: 0;
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(4px);
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease, background 0.2s ease;
}

.oc-quickview-bar i {
  font-size: 13px;
}

.oc-product-card:hover .oc-quickview-bar,
.oc-quickview-bar:focus-visible {
  transform: translateY(0);
  opacity: 1;
}

.oc-quickview-bar:hover {
  background: #0f172a;
}

/* Touch devices never hover, so keep it on screen. */
@media (hover: none) {
  .oc-quickview-bar {
    transform: translateY(0);
    opacity: 1;
    padding: 9px 12px;
    font-size: 11px;
  }
}

/* ---------- Hero slide image: show the whole thing ----------
   The theme cropped posters to fill a fixed 360px card (object-fit: cover),
   which cut the top and bottom off square product shots. Contain them instead,
   and drop the card's dark plate for image slides so the slide's own
   background shows through behind the product. Video keeps the plate. */
.oc-hero-slide__poster-img {
  object-fit: contain;
  padding: 12px;
}

.oc-hero-slide__media-card:has(.oc-hero-slide__poster-img) {
  background: transparent;
  box-shadow: none;
}

@media (max-width: 768px) {
  .oc-hero-slide__poster-img {
    padding: 8px;
  }
}

/* Category tiles: reserve two lines for the name so a wrapping label
   ("Mobile Accessories") does not push its count below the others. */
.oc-catgrid__name {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.7em;
}

.oc-catgrid__card {
  justify-content: flex-start;
}

/* ---------- Sticky category sidebar ----------
   The sidebar follows the grid down instead of scrolling away. It sits below
   the sticky nav row, and scrolls internally when a category with many
   shelves is open so it never runs past the bottom of the viewport.
   Mobile is excluded: there the sidebar sits above the grid, full width. */
@media (min-width: 992px) {
  .oc-cat-sidebar > aside {
    position: sticky;
    /* Clears the sticky nav row (~62px) plus a little breathing room. */
    top: 78px;
    max-height: calc(100vh - 94px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding-right: 4px;
  }

  .oc-cat-sidebar > aside::-webkit-scrollbar {
    width: 6px;
  }

  .oc-cat-sidebar > aside::-webkit-scrollbar-thumb {
    background: #d8dee7;
    border-radius: 3px;
  }

  .oc-cat-sidebar > aside::-webkit-scrollbar-thumb:hover {
    background: #b9c2cf;
  }
}