/* mirror-fixes.css — restores layouts that the original site produced with
   JavaScript, using CSS only. Loaded last, after all theme/Elementor CSS.
   Every rule here replaces a specific jQuery behaviour that no longer runs. */

/* ---------------------------------------------------------------------------
   1. Owl Carousel → native CSS scroll-snap slider
   Owl turned N stacked items into a slider at runtime. Without it every item
   rendered in the flow (the homepage grew to ~29,000px). A scroll-snap strip
   is the same interaction — swipe on touch, trackpad/scrollbar on desktop —
   with no script at all.
--------------------------------------------------------------------------- */
.owl-carousel {
  display: flex !important;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 20px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 4px;
  scrollbar-width: thin;
  padding-bottom: 14px;
}
.owl-carousel > * {
  flex: 0 0 clamp(240px, 84vw, 360px);
  min-width: 0;
  scroll-snap-align: start;
}
@media (min-width: 768px) {
  .owl-carousel > * { flex-basis: clamp(280px, 30%, 380px); }
}
/* the hero quote slider is a single full-width slide */
.owl_3 { gap: 0; scroll-snap-type: x mandatory; }
.owl_3 > * { flex-basis: 100%; }
/* owl's runtime-only chrome never renders without JS */
.owl-carousel .owl-nav,
.owl-carousel .owl-dots { display: none; }

/* ---------------------------------------------------------------------------
   2. Sidebar category accordion
   jQuery collapsed every panel except the current one. Without it all panels
   were open, and their absolutely-positioned lists pushed the page ~260px
   wider than the viewport (horizontal scroll on mobile).
--------------------------------------------------------------------------- */
.category_item:not(.open) > .link_list { display: none; }
.category_item > .header { cursor: pointer; }

/* ---------------------------------------------------------------------------
   3. Off-canvas menu — closed by default, opened by the shim.
   Its sub-menus were collapsed by jQuery; without it all 27 links rendered as
   one flat list. Only the 7 top-level entries show; the three that have
   children expand on tap.
--------------------------------------------------------------------------- */
#el-mobile-menu { transition: right 250ms ease; }
#el-mobile-menu.is-open { right: 0 !important; box-shadow: -8px 0 24px rgba(0, 0, 0, 0.28); }
.el-menu-backdrop {
  position: fixed; inset: 0; background: rgba(10, 12, 24, 0.45);
  z-index: 998; border: 0; padding: 0; cursor: pointer;
}
.hamburger { cursor: pointer; }

#el-mobile-menu .sub-menu { display: none; }
#el-mobile-menu li.is-expanded > .sub-menu { display: block; }
#el-mobile-menu li.menu-item-has-children { position: relative; }
#el-mobile-menu li.menu-item-has-children > a { padding-inline-end: 44px; }
#el-mobile-menu .mm-toggle {
  position: absolute; inset-inline-end: 6px; top: 4px;
  width: 34px; height: 34px; padding: 0; margin: 0;
  background: none; border: 0; cursor: pointer; color: #ed6732;
  display: grid; place-items: center; z-index: 2;
}
#el-mobile-menu .mm-toggle::before {
  content: ""; width: 9px; height: 9px; margin-top: -4px;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform 180ms ease;
}
#el-mobile-menu li.is-expanded > .mm-toggle::before { transform: rotate(135deg); margin-top: 4px; }
#el-mobile-menu .sub-menu a {
  font-size: 0.9em; opacity: 0.85; padding-inline-start: 20px;
  white-space: normal; line-height: 1.45;
}

/* ---------------------------------------------------------------------------
   4. Header layout
   The theme puts an inline `justify-content:center` on .el-wrap-components, so
   the whole header group floats in the middle of the bar: the logo never
   reaches the right edge, and at widths where the desktop menu is hidden it
   drifts towards the centre. Spread the row instead — logo pinned to the right
   (the RTL start edge), action buttons to the left, menu between them.
--------------------------------------------------------------------------- */
@media (min-width: 768px) {
  #el-main-header .el-wrap-components { justify-content: space-between !important; }
  /* the nav must keep its natural width — it wraps to two lines if squeezed */
  #el-main-header .el-menu-row { flex: 0 0 auto; }
}

/* The logo asset is 200×92, but the theme caps .el-logotype at 135px on every
   screen under 1500px, so it renders shrunken on any laptop. Give it its real
   width back. */
@media (min-width: 992px) {
  #el-main-header .el-logotype { width: 200px !important; max-width: 200px !important; padding-left: 0; }
  #el-main-header .el-logotype img { width: 200px; max-width: 100% !important; height: auto; }
}

/* The theme hides the desktop menu below 1084px but only reveals the burger
   below 991px — so between 992px and 1084px the site has no navigation at all
   (the live WordPress site has the same gap). Reveal the burger there. */
@media (min-width: 992px) and (max-width: 1084px) {
  /* the off-canvas panel itself is display:none above 991px — bring it back,
     otherwise the burger we reveal here has nothing to open */
  #el-mobile-menu {
    display: block !important;
    position: fixed !important;
    top: 0; bottom: 0; left: auto; right: -234px; width: 234px;
    overflow-y: auto;
    z-index: 999; /* must sit above the backdrop (998) */
  }
  /* burger sits next to the logo on the right, where a menu control belongs in
     RTL — not stranded at the far left of the bar */
  #el-main-header .el-wrap-components > * { order: 3; }
  #el-main-header .el-mb-logo-shop { order: 1; }
  #el-main-header .el-btn-menu.el-toggle-menu-btn {
    display: flex !important;
    position: static !important;
    order: 2;
    align-items: center;
    margin: 0 22px 0 auto;
  }
}

/* ---------------------------------------------------------------------------
   5. Elementor popups were injected and shown by JS; inline they would render
   as stray content in the page flow.
--------------------------------------------------------------------------- */
[data-elementor-type="popup"] { display: none !important; }

/* ---------------------------------------------------------------------------
   6. Safety net: no page should scroll sideways. `clip` (not `hidden`) keeps
   position: sticky working.
--------------------------------------------------------------------------- */
html, body { overflow-x: clip; max-width: 100%; }

@media (prefers-reduced-motion: reduce) {
  #el-mobile-menu { transition: none; }
  .owl-carousel { scroll-behavior: auto; }
}