/**
 * PrestaChamps Module Showroom - storefront top bar, design option E (about 2 cm tall).
 * Everything is scoped under .pchsr-bar so shop themes are not affected.
 */
.pchsr-bar {
  --pchsr-bg: #1d1646;
  --pchsr-ink: #f3f1ff;
  --pchsr-muted: #a9a3cf;
  --pchsr-brand: #df0067;
  position: relative;
  z-index: 1040;
  display: flex;
  align-items: stretch;
  gap: 6px;
  box-sizing: border-box;
  width: 100%;
  min-height: 84px;
  padding: 6px 10px 8px;
  background: var(--pchsr-bg);
  color: var(--pchsr-ink);
  font: 500 12px/1.25 "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  text-align: left;
}
.pchsr-bar *, .pchsr-bar *::before, .pchsr-bar *::after { box-sizing: border-box; }
.pchsr-bar::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, #df0067, #7b5cf0 55%, #2563eb);
}
.pchsr-bar a, .pchsr-bar a:hover, .pchsr-bar a:focus, .pchsr-bar a:visited { color: inherit; text-decoration: none !important; }
.pchsr-bar img { max-width: 100%; height: auto; display: block; }

.pchsr-home {
  flex: none; display: flex; flex-direction: column; justify-content: center; gap: 6px;
  padding: 4px 14px 4px 4px; border-right: 1px solid rgba(255, 255, 255, .12);
  font-size: 12.5px; font-weight: 700; line-height: 1.15; max-width: 92px;
}
.pchsr-home-ico {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--pchsr-brand); color: #fff;
}
.pchsr-home:hover .pchsr-home-ico { background: #c3005a; }

.pchsr-cats { flex: 1; min-width: 0; display: flex; justify-content: center; gap: 2px; }
.pchsr-cat { position: relative; display: flex; flex-direction: column; padding: 2px 6px 0; border-radius: 12px; }
.pchsr-cat:hover, .pchsr-cat:focus-within, .pchsr-cat.is-open { background: rgba(255, 255, 255, .07); }
.pchsr-cat-head {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  margin: 0; padding: 5px 4px 6px; border: 0; background: transparent; cursor: pointer;
  color: color-mix(in srgb, var(--pchsr-c) 45%, #ffffff);
  font-family: inherit; font-size: 10px; font-weight: 800; line-height: 1;
  letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.pchsr-cat-head em { font-style: normal; font-weight: 600; letter-spacing: 0; color: var(--pchsr-muted); }
.pchsr-cat.is-here .pchsr-cat-head { color: #fff; }
.pchsr-picks { display: flex; justify-content: center; gap: 2px; }
.pchsr-tile {
  width: 68px; display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 3px 2px 4px; border-radius: 10px; text-align: center; font-size: 11px; font-weight: 600;
}
.pchsr-tile .pchsr-ico {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; padding: 4px;
  background: #fff; transition: box-shadow .12s, transform .12s;
}
.pchsr-tile .pchsr-lbl { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pchsr-tile:hover .pchsr-ico { box-shadow: 0 0 0 3px color-mix(in srgb, var(--pchsr-m) 70%, #ffffff); transform: translateY(-1px); }
.pchsr-tile.is-current .pchsr-ico { box-shadow: 0 0 0 2px var(--pchsr-bg), 0 0 0 5px color-mix(in srgb, var(--pchsr-m) 75%, #ffffff); }
.pchsr-tile.is-disabled { opacity: .55; }

.pchsr-dd {
  display: none; position: absolute; top: 100%; left: 0; z-index: 1050; margin-top: 8px; width: 300px;
  padding: 10px; border: 1px solid #e7e4f0; border-radius: 14px; background: #fff; color: #1b1738;
  box-shadow: 0 2px 4px rgba(27, 23, 56, .06), 0 14px 34px rgba(27, 23, 56, .16);
}
.pchsr-dd::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.pchsr-cat:hover .pchsr-dd, .pchsr-cat:focus-within .pchsr-dd, .pchsr-cat.is-open .pchsr-dd { display: grid; gap: 2px; }
.pchsr-cat:nth-last-child(-n+2) .pchsr-dd { left: auto; right: 0; }
.pchsr-dd-title {
  margin: 2px 8px 6px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--pchsr-c);
}
.pchsr-dd-title span { color: #8f8ba6; letter-spacing: 0; }
.pchsr-item { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 9px; }
.pchsr-item:hover { background: color-mix(in srgb, var(--pchsr-m) 9%, #ffffff); }
.pchsr-item.is-current { background: color-mix(in srgb, var(--pchsr-m) 12%, #ffffff); box-shadow: inset 0 0 0 1.5px var(--pchsr-m); }
.pchsr-item .pchsr-ico {
  flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; padding: 3px;
  background: #fff; border: 1px solid color-mix(in srgb, var(--pchsr-m) 30%, transparent);
}
.pchsr-item-txt { min-width: 0; font-size: 13px; }
.pchsr-item-txt b { display: block; font-weight: 700; }
.pchsr-item-txt small { display: block; font-size: 11.5px; color: #8f8ba6; }

.pchsr-right {
  flex: none; max-width: 220px; display: flex; flex-direction: column; justify-content: center; gap: 6px;
  padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, .12);
}
.pchsr-now { font-size: 11.5px; color: var(--pchsr-muted); }
.pchsr-now b { display: block; font-size: 12.5px; color: var(--pchsr-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pchsr-switch { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; background: rgba(255, 255, 255, .08); }
.pchsr-switch a { padding: 5px 10px; border-radius: 7px; font-size: 12px; font-weight: 700; color: var(--pchsr-muted); }
.pchsr-switch a.is-on { background: #fff; color: var(--pchsr-bg); }
.pchsr-switch a:hover { color: var(--pchsr-ink); }
.pchsr-switch a.is-on:hover { color: var(--pchsr-bg); }

@media (max-width: 1100px) {
  .pchsr-now { display: none; }
  .pchsr-tile { width: 60px; }
}
@media (max-width: 900px) {
  .pchsr-bar { flex-wrap: wrap; min-height: 0; }
  .pchsr-home { flex-direction: row; align-items: center; max-width: none; border-right: 0; }
  .pchsr-cats { order: 3; flex-basis: 100%; flex-wrap: wrap; justify-content: flex-start; }
  .pchsr-picks { display: none; }
  .pchsr-cat-head { font-size: 11px; padding: 8px; }
  .pchsr-dd { width: min(300px, 86vw); }
  .pchsr-right { margin-left: auto; border-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .pchsr-tile .pchsr-ico { transition: none; } }

/* --------------------------------------------------------------------------
   Collapsible "ear" (storefront only): the dark bar is parked above the
   viewport and a small pink tab hangs at the top-left; clicking it slides the
   whole bar down. `.is-open` on #pchsr-bar is toggled by topbar.js.
   -------------------------------------------------------------------------- */
.pchsr-front.pchsr-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  transform: translateY(-100%);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
.pchsr-front.pchsr-bar.is-open {
  transform: translateY(0);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .38);
}
.pchsr-front .pchsr-home { display: none; }  /* the ear replaces the in-bar home button on the front */

.pchsr-ear {
  display: none;  /* only the front bar shows it (rule below) */
  position: absolute;
  top: 100%; left: 22px;
  align-items: center; gap: 8px;
  margin: 0; padding: 8px 15px;
  border: 0; cursor: pointer;
  background: #e6007e; color: #fff;
  font: 700 12.5px/1 inherit;
  border-radius: 0 0 13px 13px;
  box-shadow: 0 7px 20px rgba(0, 0, 0, .3);
}
.pchsr-front .pchsr-ear { display: inline-flex; }
.pchsr-ear:hover { background: #c3005a; }
.pchsr-ear-ico { display: grid; place-items: center; }
.pchsr-ear-chev { display: grid; place-items: center; transition: transform .3s; }
.pchsr-bar.is-open .pchsr-ear-chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .pchsr-front.pchsr-bar { transition: none; } }