/* ===================== GRAVIX FASHION — FAQ page ===================== */

.gx-faq-page{ overflow: hidden; }

/* ---------- Hero ---------- */
.gx-faq-hero{
  position: relative;
  background: linear-gradient(135deg, #151515 0%, #0A0A0A 60%, #1a1a1a 100%);
  text-align: center;
  padding: 64px 24px 48px;
  margin: 0 0 0;
}
.gx-faq-hero-inner{ max-width: 600px; margin: 0 auto; }
.gx-faq-hero-eyebrow{
  font-family: var(--gx-body); font-size: 12px; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--gx-accent, #B08D57); margin: 0 0 14px;
}
.gx-faq-hero h1{
  font-family: var(--gx-heading); font-weight: 900; font-size: clamp(28px, 5vw, 42px);
  letter-spacing: 0.01em; text-transform: uppercase; color: #fff; margin: 0 0 10px;
}
.gx-faq-hero-sub{
  font-family: var(--gx-heading); font-weight: 700; font-size: 15px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--gx-accent, #B08D57); margin: 0 0 16px;
}
.gx-faq-hero p{ font-family: var(--gx-body); font-size: 14.5px; line-height: 1.7; color: #cfcfcf; margin: 0 auto; max-width: 460px; }

/* ---------- Search ---------- */
.gx-faq-search-wrap{ background: #0A0A0A; padding: 0 24px 48px; }
.gx-faq-search{
  max-width: 560px; margin: 0 auto; position: relative;
  display: flex; align-items: center;
  background: #fff; border: 1px solid rgba(255,255,255,0.1);
}
.gx-faq-search svg{ width: 18px; height: 18px; color: #888; margin-left: 18px; flex-shrink: 0; }
.gx-faq-search input{
  flex: 1 1 auto; border: none; outline: none; background: transparent;
  padding: 15px 16px; font-family: var(--gx-body); font-size: 14.5px; color: var(--gx-ink, #1A1A1A);
}

/* ---------- Category tabs ---------- */
.gx-faq-categories{
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  max-width: 900px; margin: 40px auto 40px; padding: 0 24px;
}
.gx-faq-cat-btn{
  background: #fff; border: 1px solid var(--gx-line, #E8E8E8); color: var(--gx-ink, #1A1A1A);
  font-family: var(--gx-body); font-size: 13px; font-weight: 600; letter-spacing: 0.01em;
  padding: 10px 18px; cursor: pointer; transition: all .18s ease;
}
.gx-faq-cat-btn:hover{ border-color: var(--gx-accent, #B08D57); }
.gx-faq-cat-btn.is-active{
  background: var(--gx-black, #0A0A0A); color: #fff; border-color: var(--gx-black, #0A0A0A);
}

/* ---------- FAQ list ---------- */
.gx-faq-list{ max-width: 760px; margin: 0 auto 64px; padding: 0 24px; }
.gx-faq-category-block{ margin-bottom: 40px; }
.gx-faq-category-heading{
  font-family: var(--gx-heading); font-weight: 800; font-size: 17px; letter-spacing: 0.02em;
  color: var(--gx-ink, #1A1A1A); margin: 0 0 16px; padding-bottom: 10px;
  border-bottom: 2px solid var(--gx-accent, #B08D57);
}

.gx-faq-item{
  background: #fff; border: 1px solid var(--gx-line, #E8E8E8); margin-bottom: 10px;
  transition: border-color .2s ease;
}
.gx-faq-item:hover{ border-color: #d5cdbb; }
.gx-faq-question{
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: none; border: none; text-align: left; cursor: pointer;
  padding: 18px 20px; font-family: var(--gx-heading); font-weight: 700; font-size: 14.5px;
  color: var(--gx-ink, #1A1A1A);
}
.gx-faq-toggle-icon{
  flex-shrink: 0; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--gx-line, #E8E8E8); font-size: 16px; font-weight: 700; color: var(--gx-accent, #B08D57);
  transition: all .25s ease;
}
.gx-faq-item.is-open .gx-faq-toggle-icon{
  background: var(--gx-accent, #B08D57); color: #0A0A0A; border-color: var(--gx-accent, #B08D57);
  transform: rotate(180deg);
}
.gx-faq-answer{
  max-height: 0; overflow: hidden; transition: max-height .3s ease, padding .3s ease;
  padding: 0 20px;
}
.gx-faq-item.is-open .gx-faq-answer{ padding: 0 20px 20px; }
.gx-faq-answer p{ font-family: var(--gx-body); font-size: 14px; line-height: 1.7; color: #555; margin: 0; }
.gx-faq-inline-link{
  display: inline-block; margin-left: 6px; color: var(--gx-accent, #B08D57); font-weight: 700; text-decoration: none;
}
.gx-faq-inline-link:hover{ text-decoration: underline; }

.gx-faq-no-results{
  text-align: center; font-family: var(--gx-body); font-size: 14px; color: #888; padding: 40px 0;
}

/* ---------- Still need help CTA ---------- */
.gx-faq-help{ background: var(--gx-black, #0A0A0A); text-align: center; padding: 56px 24px; margin: 0; }
.gx-faq-help-inner{ max-width: 480px; margin: 0 auto; }
.gx-faq-help h2{
  font-family: var(--gx-heading); font-weight: 800; font-size: clamp(20px, 3vw, 26px);
  text-transform: uppercase; color: #fff; margin: 0 0 14px;
}
.gx-faq-help p{ font-family: var(--gx-body); font-size: 14.5px; line-height: 1.65; color: #b9b9b9; margin: 0 0 28px; }
.gx-faq-help-buttons{ display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.gx-faq-btn{
  display: inline-flex; padding: 14px 28px; font-family: var(--gx-body); font-size: 12.5px;
  font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  transition: all .18s ease; cursor: pointer;
}
.gx-faq-btn-primary{ background: var(--gx-accent, #B08D57); color: #0A0A0A; border: 1px solid var(--gx-accent, #B08D57); }
.gx-faq-btn-primary:hover{ background: transparent; color: var(--gx-accent, #B08D57); }
.gx-faq-btn-outline{ background: transparent; color: #fff; border: 1px solid #fff; }
.gx-faq-btn-outline:hover{ background: #fff; color: var(--gx-black, #0A0A0A); }

@media (max-width: 560px){
  .gx-faq-help-buttons{ flex-direction: column; }
  .gx-faq-btn{ width: 100%; justify-content: center; }
  .gx-faq-question{ font-size: 13.5px; padding: 15px 16px; }
}