/*
 * What the store chrome needs to be true in CSS. Small on purpose, like
 * chrome.css: the LOOK comes from the site's own kit variables; this file
 * carries the geometry and the two ownership rules.
 */

/* ---- the mobile shop bar ------------------------------------------------ */
/*
 * Four doors under the thumb, phone widths only. Unlike the quick action
 * bar this is NAVIGATION, not an offer, so it is present from the first
 * frame - a bar that appears mid-scroll is a bar the thumb cannot learn.
 */
.iw-shop-bar { display: none; }

@media (max-width: 900px) {
  .iw-shop-bar {
    /* ABOVE the full-screen menu overlay (z 60 in chrome.css): the bar is
       how the menu opened, so it stays put and the same door closes it.
       A bar that vanishes under the panel it summoned strands the thumb. */
    position: fixed; z-index: 62;
    left: 0; right: 0; bottom: 0;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    background: var(--ground, #fff);
    border-top: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 -4px 18px rgba(0, 0, 0, .06);
  }

  .iw-shop-item {
    position: relative;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 2px;
    min-height: 48px; padding: 4px 2px;
    background: none; border: 0; border-radius: var(--radius, 6px);
    color: var(--ink, #222); text-decoration: none;
    font: inherit; cursor: pointer;
  }
  /* body button... because the KIT styles bare button elements - the same
     rule that once painted back-to-top like a CTA (see .iw-to-top in
     chrome.css). The kit's scope is .elementor-kit-N button, one class and
     an element; this is one class and TWO elements, so the doors stay
     doors and the accent stays in the badge. Same properties, one
     specificity step up, no !important.

     THE WHOLE LAYOUT REPEATS HERE, not just the colors: the kit's button
     rule also sets display and direction, so the two doors that are
     buttons laid their icon BESIDE the label while the two that are links
     stacked them ("icons/labels are not consistent" - Nick, 10 Sep). Every
     door reads identically or the bar reads as broken. */
  body button.iw-shop-item {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 2px;
    background: none; border: 0; box-shadow: none;
    padding: 4px 2px; min-height: 48px;
    border-radius: var(--radius, 6px);
    color: var(--ink, #222);
    font: inherit; line-height: 1;
  }

  .iw-shop-item span { font-size: 10px; font-weight: 650; letter-spacing: .02em; }
  .iw-shop-item svg { width: 20px; height: 20px; color: currentColor; }
  .iw-shop-item[aria-current="page"] { color: var(--accent, var(--ink, #222)); }

  /* Mirrored from the header widget's own counter by commerce.js. */
  .iw-shop-badge {
    position: absolute; top: 2px; right: calc(50% - 20px);
    min-width: 16px; height: 16px; padding: 0 4px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px;
    background: var(--accent, #111); color: var(--on-accent, #fff);
    font-size: 10px; font-weight: 700; line-height: 1;
  }

  /* The page ends above the bar, not under it. */
  body.iw-has-shop-bar { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

  /* THE SHOP BAR OWNS THE THUMB. One bar at the bottom of a phone, never
     two: where the shop bar exists the quick action bar stands down, and
     back to top rides above the bar instead of behind it. */
  body.iw-has-shop-bar .iw-cta-bar { display: none !important; }
  body.iw-has-shop-bar .iw-to-top { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}

/* ---- the category rail (the commerce header's third row) ---------------- */
/*
 * Server-rendered by [orca-categories] from the live catalog. Desktop: the
 * top-level terms in one side-scroll track, scrollbar hidden, snap points
 * so a flick lands on a name. Phone: the track yields to a burger that
 * opens the FULL hierarchy in a panel under the rail. Colors ride the
 * kit's variables so the rail rebrands with every palette push.
 */
.iw-cats {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-width: 0;
}

.iw-cats-track {
  display: flex; align-items: center; gap: 22px;
  overflow-x: auto; min-width: 0;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.iw-cats-track::-webkit-scrollbar { display: none; }

.iw-cats-track a {
  flex: 0 0 auto; scroll-snap-align: start;
  color: var(--ink, #222); text-decoration: none;
  font-size: 13px; font-weight: 650; letter-spacing: .02em;
  padding: 4px 0; white-space: nowrap;
}
.iw-cats-track a:hover { color: var(--accent, var(--ink, #222)); }
.iw-cats-track a[aria-current="page"] {
  color: var(--accent, var(--ink, #222));
  box-shadow: inset 0 -2px 0 var(--accent, currentColor);
}

/* The burger is the phone's door; on a desktop the shelf is already open. */
body button.iw-cats-burger, .iw-cats-burger { display: none; }

@media (max-width: 900px) {
  .iw-cats-track { display: none; }

  /* body button... - the kit styles bare buttons; same one-step-up escape
     the shop bar's doors use. */
  body button.iw-cats-burger, .iw-cats-burger {
    display: inline-flex; align-items: center; gap: 8px;
    background: none; border: 0; box-shadow: none; padding: 6px 0;
    color: var(--ink, #222); font: inherit;
    font-size: 13px; font-weight: 650; letter-spacing: .02em;
    cursor: pointer;
  }
  .iw-cats-burger svg { width: 18px; height: 18px; }

  .iw-cats-panel {
    position: absolute; left: 0; right: 0; top: 100%;
    z-index: 45;
    background: var(--ground, #fff);
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .12);
    max-height: 65vh; overflow-y: auto;
    padding: 8px 16px 14px;
  }
  .iw-cats-panel ul { list-style: none; margin: 0; padding: 0; }
  /* The hierarchy reads as indentation - each child shelf steps in. */
  .iw-cats-panel ul ul { padding-left: 16px; }
  .iw-cats-panel li a {
    display: block; padding: 9px 4px;
    color: var(--ink, #222); text-decoration: none;
    font-size: 15px; font-weight: 600;
  }
  .iw-cats-panel ul ul li a { font-weight: 500; font-size: 14px; }
  .iw-cats-panel li.current-cat > a { color: var(--accent, var(--ink, #222)); }
}

/* ---- the free-shipping meter -------------------------------------------- */
/*
 * Rendered whole by the server as a cart fragment; commerce.js seats it in
 * the side cart. Until it is seated - and always with JavaScript off - it
 * does not exist visually.
 */
.iw-ship-meter { display: none; }

.elementor-menu-cart__main .iw-ship-meter {
  display: block;
  padding: 4px 0 12px;
}

.iw-ship-track {
  height: 6px; border-radius: 999px;
  background: rgba(0, 0, 0, .08);
  overflow: hidden;
}

.iw-ship-fill {
  display: block; height: 100%;
  background: var(--accent, #111);
  border-radius: inherit;
  transition: width .3s ease;
}

.iw-ship-note {
  margin: 8px 0 0;
  font-size: 12px; font-weight: 600;
  color: var(--ink, #222);
}

@media (prefers-reduced-motion: reduce) {
  .iw-ship-fill { transition-duration: .01ms; }
}