/* ============================================================
   RFQ BASKET  —  sticky add-to-RFQ basket + modal inquiry form
   Plain CSS (not Tailwind) because the markup is injected by JS.
   ============================================================ */

/* ---------- Sticky basket button ---------- */
.rfq-launch {
  position: fixed;
  left: 22px;
  bottom: 22px;
  z-index: 98;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px 12px 16px;
  border: 0;
  border-radius: 999px;
  background: #2c3a6c;
  color: #fff;
  font-family: 'Lora', Georgia, serif;
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(44, 58, 108, .38);
  transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s;
}
.rfq-launch:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(44, 58, 108, .46); }
.rfq-launch svg { width: 20px; height: 20px; flex-shrink: 0; }
.rfq-launch__count {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  background: #EF7F1A;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1;
}
.rfq-launch.is-empty .rfq-launch__count { background: rgba(255, 255, 255, .22); }
.rfq-launch.is-bump { animation: rfq-bump .45s cubic-bezier(.2, .7, .2, 1); }
@keyframes rfq-bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
/* Hidden on pages where it is not wanted and the basket is empty */
.rfq-launch[hidden] { display: none; }

/* ---------- Product button added state ---------- */
.btn.is-in-rfq {
  background: #009846 !important;
  box-shadow: 0 10px 25px rgba(0, 152, 70, .32) !important;
}
.btn.is-in-rfq:hover { background: #007A38 !important; }

/* ---------- Toast ---------- */
.rfq-toast {
  position: fixed;
  left: 50%;
  bottom: 92px;
  z-index: 120;
  transform: translate(-50%, 20px);
  padding: 12px 20px;
  border-radius: 12px;
  background: #0A0A0A;
  color: #fff;
  font-family: 'Lora', Georgia, serif;
  font-size: .9rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s, transform .28s;
  max-width: calc(100vw - 40px);
  text-align: center;
}
.rfq-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Modal ---------- */
.rfq-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(10, 10, 10, .55);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s, visibility .25s;
  overflow-y: auto;
}
.rfq-overlay.is-open { opacity: 1; visibility: visible; }

.rfq-modal {
  position: relative;
  width: 100%;
  max-width: 720px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
  transform: translateY(14px);
  transition: transform .28s cubic-bezier(.2, .7, .2, 1);
}
.rfq-overlay.is-open .rfq-modal { transform: translateY(0); }
.rfq-modal::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: block;
  height: 6px;
  background: linear-gradient(90deg, #EF7F1A 0 33.3%, #2c3a6c 33.3% 66.6%, #009846 66.6%);
  border-radius: 24px 24px 0 0;
}
.rfq-modal__body { padding: 30px 30px 30px; }

.rfq-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 6px;
}
.rfq-modal__title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.45rem;
  font-weight: 600;
  color: #2c3a6c;
  line-height: 1.25;
  margin: 0;
}
.rfq-modal__sub {
  margin: 6px 0 0;
  font-size: .92rem;
  color: #6B6F6C;
  line-height: 1.7;
}
.rfq-close {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid #e6e6e6;
  border-radius: 999px;
  background: #fff;
  color: #2A2A2A;
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s;
}
.rfq-close:hover { background: #2c3a6c; border-color: #2c3a6c; color: #fff; }
.rfq-close svg { width: 17px; height: 17px; }

/* ---------- Item list ---------- */
.rfq-list {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
  border-top: 1px solid #eef1ef;
  padding-top: 18px;
}
.rfq-item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border: 1px solid #eef1ef;
  border-radius: 14px;
  background: #FAFBFA;
}
.rfq-item__img {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  object-fit: cover;
  background: #F1F8F4;
}
.rfq-item__name {
  font-family: 'Poppins', sans-serif;
  font-size: .98rem;
  font-weight: 600;
  color: #0A0A0A;
  line-height: 1.3;
}
.rfq-item__meta { font-size: .8rem; color: #6B6F6C; margin-top: 2px; }
.rfq-item__qty { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.rfq-item__qty input {
  width: 84px;
  padding: 7px 9px;
  border: 1px solid #dfe5e1;
  border-radius: 8px;
  font-family: 'Lora', Georgia, serif;
  font-size: .85rem;
  color: #2A2A2A;
  background: #fff;
}
.rfq-item__qty select {
  padding: 7px 9px;
  border: 1px solid #dfe5e1;
  border-radius: 8px;
  font-family: 'Lora', Georgia, serif;
  font-size: .85rem;
  color: #2A2A2A;
  background: #fff;
}
.rfq-item__qty label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #6B6F6C;
}
.rfq-remove {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid #e6e6e6;
  border-radius: 999px;
  background: #fff;
  color: #98A29B;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.rfq-remove:hover { background: #fdecec; border-color: #f6c9c9; color: #C62828; }
.rfq-remove svg { width: 14px; height: 14px; }

.rfq-empty {
  margin: 0;
  padding: 18px 0;
  text-align: center;
  color: #6B6F6C;
  font-size: .93rem;
}

.rfq-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  font-size: .85rem;
  color: #6B6F6C;
}
.rfq-clear {
  border: 0;
  background: none;
  padding: 0;
  color: #C62828;
  font-family: 'Lora', Georgia, serif;
  font-size: .85rem;
  text-decoration: underline;
  cursor: pointer;
}
.rfq-clear:hover { color: #9c1f1f; }

/* ---------- Form inside the modal ---------- */
.rfq-form { margin-top: 22px; border-top: 1px solid #eef1ef; padding-top: 20px; }
.rfq-form h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 1.05rem;
  color: #2c3a6c;
  margin: 0 0 14px;
}
.rfq-grid { display: grid; gap: 14px; }
@media (min-width: 560px) { .rfq-grid { grid-template-columns: 1fr 1fr; } }
.rfq-field { display: flex; flex-direction: column; gap: 6px; }
.rfq-field--full { grid-column: 1 / -1; }
.rfq-note { margin: 0; font-size: .8rem; color: #6B6F6C; }
.rfq-submit-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 18px; }
.rfq-success {
  display: none;
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #e9f8ef;
  color: #007A38;
  font-weight: 700;
  font-size: .94rem;
}
.rfq-success.is-on { display: block; }
.rfq-error {
  display: none;
  margin-top: 12px;
  color: #C62828;
  font-size: .85rem;
}
.rfq-error.is-on { display: block; }

/* keep the launched page from scrolling behind the modal */
body.rfq-locked { overflow: hidden; }

/* ---------- Small screens ---------- */
@media (max-width: 560px) {
  .rfq-launch { left: 14px; bottom: 14px; padding: 11px 16px 11px 14px; font-size: .88rem; }
  .rfq-launch__label { display: none; }
  .rfq-launch { gap: 8px; }
  .rfq-modal__body { padding: 20px 18px 24px; }
  .rfq-item { grid-template-columns: 44px 1fr auto; gap: 10px; padding: 10px; }
  .rfq-item__img { width: 44px; height: 44px; }
  .rfq-toast { bottom: 78px; font-size: .85rem; }
}

/* the hidden attribute must always win over the layout display values */
.rfq-list[hidden],
.rfq-tools[hidden],
.rfq-empty[hidden] { display: none !important; }

/* ============================================================
   PRODUCT PAGE SIDEBAR — category navigation (redesign)
   ============================================================ */
.ps-layout { display: grid; gap: 32px; align-items: start; }
@media (min-width: 1024px) {
  .ps-layout { grid-template-columns: 300px 1fr; gap: 44px; }
}

.ps-side { display: grid; gap: 16px; min-width: 0; }
@media (min-width: 1024px) {
  .ps-side {
    position: sticky;
    top: 132px;
    max-height: calc(100vh - 152px);
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-width: thin;
  }
}

.ps-card {
  min-width: 0;
  border: 1px solid #e9eeeb;
  border-radius: 20px;
  background: #fff;
  padding: 22px 18px;
  box-shadow: 0 10px 30px rgba(10, 20, 15, .06);
}

/* ---------- header ---------- */
.ps-head { padding: 2px 6px 14px; border-bottom: 1px solid #eef1ef; margin-bottom: 10px; }
.ps-eyebrow {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #009846;
}

/* ---------- category rows ---------- */
.ps-nav { display: grid; gap: 4px; }

.ps-item {
  position: relative;
  display: grid;
  grid-template-columns: 30px 1fr 18px;
  align-items: center;
  gap: 10px;
  padding: 11px 12px 11px 14px;
  border-radius: 12px;
  color: #2A2A2A;
  transition: background .22s, color .22s, box-shadow .22s;
}
.ps-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 0;
  border-radius: 0 3px 3px 0;
  background: #EF7F1A;
  transform: translateY(-50%);
  transition: height .25s;
}
.ps-item:hover { background: #F1F8F4; }
.ps-item:hover::before { height: 55%; }

.ps-item__num {
  font-family: 'Poppins', sans-serif;
  font-size: .74rem;
  font-weight: 700;
  color: #b7c2bb;
  letter-spacing: .04em;
}
.ps-item__meta { display: grid; gap: 1px; min-width: 0; }
.ps-item__name {
  min-width: 0;
  overflow-wrap: break-word;
  font-family: 'Poppins', sans-serif;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.3;
  color: #2c3a6c;
}
.ps-item__sub { font-size: .76rem; color: #6B6F6C; }
.ps-item__arrow {
  width: 15px; height: 15px;
  color: #c3cdc6;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .22s, transform .22s, color .22s;
}
.ps-item:hover .ps-item__arrow { opacity: 1; transform: translateX(0); color: #009846; }

/* active category */
.ps-item.is-active {
  background: #2c3a6c;
  box-shadow: 0 10px 22px rgba(44, 58, 108, .22);
}
.ps-item.is-active::before { height: 58%; }
.ps-item.is-active .ps-item__num { color: #EF7F1A; }
.ps-item.is-active .ps-item__name { color: #fff; }
.ps-item.is-active .ps-item__sub { color: rgba(255, 255, 255, .68); }
.ps-item.is-active .ps-item__arrow { opacity: 1; transform: translateX(0); color: #fff; }

/* ---------- CTA inside the card ---------- */
.ps-cta-block { margin-top: 16px; padding-top: 16px; border-top: 1px solid #eef1ef; }
.ps-cta-title {
  margin: 0 0 5px;
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #2c3a6c;
}
.ps-cta-text { margin: 0 0 14px; font-size: .86rem; line-height: 1.65; color: #2A2A2A; }
.ps-cta-btn { width: 100%; }
.ps-cta-btn svg { width: 17px; height: 17px; }
.ps-wa {
  display: block;
  margin-top: 10px;
  text-align: center;
  font-size: .84rem;
  font-weight: 700;
  color: #007A38;
  text-decoration: underline;
}
.ps-wa:hover { color: #009846; }

/* ---------- other categories card ---------- */
.ps-card--other { background: #F7FAF8; border-color: #e4ece7; }
.ps-others { display: grid; gap: 2px; margin-top: 10px; }
.ps-other {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  font-size: .88rem;
  color: #2A2A2A;
  transition: background .2s, color .2s;
}
.ps-other svg { width: 14px; height: 14px; color: #b7c2bb; transition: transform .2s, color .2s; }
.ps-other:hover { background: #fff; color: #007A38; }
.ps-other:hover svg { color: #009846; transform: translateX(2px); }

/* ---------- anchors sit below the fixed header ---------- */
.ps-main [id^="p-"] { scroll-margin-top: 132px; }

/* ---------- phones / tablets: horizontal category strip ---------- */
@media (max-width: 1023px) {
  .ps-side { order: -1; gap: 12px; }
  .ps-card { padding: 16px; }
  .ps-head { padding: 0 2px 12px; margin-bottom: 10px; }
  .ps-eyebrow { font-size: .74rem; }
  /* Wrap instead of scrolling so the category name is never clipped */
  .ps-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: 8px;
    overflow-x: visible;
    padding-bottom: 0;
  }
  .ps-item {
    grid-template-columns: auto 1fr;
    justify-content: start;
    gap: 8px;
    padding: 9px 15px;
    border: 1px solid #e2eae5;
    border-radius: 999px;
    background: #fff;
    min-width: 0;
  }
  .ps-item::before, .ps-item__arrow { display: none; }
  .ps-item__name { font-size: .87rem; }
  .ps-item__sub { display: none; }
  .ps-item.is-active { border-color: #2c3a6c; }
  .ps-cta-block { display: none; }
  .ps-card--other .ps-others { display: flex; flex-wrap: wrap; gap: 6px; }
  .ps-other { border: 1px solid #e2eae5; background: #fff; border-radius: 999px; padding: 7px 13px; font-size: .82rem; }
  .ps-other svg { display: none; }
  .ps-main [id^="p-"] { scroll-margin-top: 110px; }
}

/* Sending state on the RFQ submit button */
.rfq-form .btn.is-sending,
.rfq-form .btn[disabled] { opacity: .72; cursor: progress; pointer-events: none; }