/* ============================================================
   Kumite Lifestyle — Collection top bar
   ============================================================
   The promo-code notice band + the "← Back to Collections"
   breadcrumb that sit at the top of EVERY collection page:

       shop.html            (Main Collection view)
       shop.html            (USA Collection view)
       dba-drop.html        (Delaware Bushido Academy)
       ikap-drop.html       (IKAP)
       parkview-rv-drop.html (Parkview RV)

   WHY THIS IS A SHARED FILE
   -------------------------
   Nicholas, Sep 8 2026: "make sure that every collection page
   ... what you see in the screenshot shows at the top of that
   page so that way it's consistent."

   These two elements were originally written inline in
   shop.html only. Copying them into three more pages would
   mean four copies drifting apart the first time one gets
   tweaked. They live here instead, so a change to the wording
   or the styling lands on every collection page at once — and
   any NEW collection page inherits it with one <link>.

   The rules are a byte-for-byte port of the shop.html
   originals (.kl-shop2-codebar / .kl-shop2-back), so the two
   shop views look identical to the three drop pages. shop.html
   keeps its own inline copy of these rules; identical values,
   so loading both is a no-op. Do not "fix" that by deleting
   one without checking the other.

   HOW TO ADD IT TO A NEW PAGE
   ---------------------------
   1. <link rel="stylesheet" href="assets/css/kl-collection-topbar.css">
      (RELATIVE, not "/assets/..." — a leading slash resolves to
      the top of the hard drive when the page is opened off disk
      to preview it. Identical once deployed.)
   2. Paste the markup block from dba-drop.html, just inside the
      page's main content wrapper.
   ============================================================ */

/* Wrapper so the two pieces keep their spacing relationship on
   pages that have no other layout container around them. */
.kl-coll-topbar {
  margin: 0;
  padding: 0;
}

/* ─── Promo-code notice band ─── */
.kl-shop2-codebar {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  max-width: 1340px;
  margin: 2rem auto 0;
  padding: 0.85rem 1.15rem;
  border: 1px solid #e5e7eb;
  border-left: 3px solid #c8102e;
  background: #fafafa;
  font-family: 'DM Sans', system-ui, sans-serif;
}
.kl-shop2-codebar-tag {
  flex: none;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #c8102e;
  white-space: nowrap;
}
.kl-shop2-codebar-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #374151;
}
.kl-shop2-codebar-text strong {
  font-weight: 700;
  color: #111827;
}
/* Inset by the same 1.5rem the shop tile rows use, so on a wide
   screen the band's edges line up with theirs. */
@media (min-width: 1372px) {
  .kl-shop2-codebar { max-width: 1292px; }
}
@media (max-width: 900px) {
  .kl-shop2-codebar { margin-left: 1.5rem; margin-right: 1.5rem; }
}
/* Phone: the tag stacks above the sentence rather than squeezing
   it into a narrow ribbon beside a 100px label. */
@media (max-width: 620px) {
  .kl-shop2-codebar {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    margin-left: 1.25rem;
    margin-right: 1.25rem;
    padding: 0.8rem 1rem;
  }
  .kl-shop2-codebar-text { font-size: 13.5px; }
}

/* ─── Back-to-Collections breadcrumb ───
   On shop.html this is a <button> that restores the tile landing
   state without a page load. On the three drop pages it is an
   <a href="shop.html"> — a real navigation, since those are
   separate documents. Both are styled here so the two cases are
   visually indistinguishable. */
.kl-coll-topbar .kl-shop2-back {
  max-width: 1340px;
  margin: 0 auto 0.5rem;
  padding: 1rem 1.5rem 0.25rem;
  display: block;
  text-align: center;
}
.kl-coll-topbar .kl-shop2-back a,
.kl-coll-topbar .kl-shop2-back button {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0.4rem 0;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1a1a1a;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  border-bottom: 2px solid transparent;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.kl-coll-topbar .kl-shop2-back a:hover,
.kl-coll-topbar .kl-shop2-back button:hover {
  border-bottom-color: #c8102e;
  color: #c8102e;
}
.kl-coll-topbar .kl-shop2-back a::before,
.kl-coll-topbar .kl-shop2-back button::before {
  content: '\2190';
  font-size: 18px;
  line-height: 1;
}