/* Tejori — FAQ page: banner, accordions, "how selling works" steps */

/* ---------- page banner ---------- */

.pb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: #f8f8f8;
}

.pb img {
  display: block;
  width: 100%;
  height: auto;
  /* A fixed banner shape (the homepage banner's), filled by the photo whatever its own
     shape, so a full-size photo can be dropped in uncropped; object-position picks the part
     shown (see how-it-works.css). */
  aspect-ratio: 2400 / 820;
  object-fit: cover;
  object-position: center;
}

/* Title styled like the homepage banner (home.css .hero__txt/.hero__h, client request):
   centred, white, uppercase, with its text shadow and no box behind it. It was black on a
   white box at the left edge (width 15.729vw, letter-spacing .414vw, right-aligned). */
.pb__c {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 50vw;
  text-align: center;
}

.pb__h {
  max-width: 100%;
  margin: 0;
  font-size: 3.75vw;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 1px 1.5px .75px rgba(0, 0, 0, .7);
}

/* ---------- accordions ---------- */

.faq__in {
  padding: 3.125vw 5.208vw 2.604vw;
  background: #fafafa;
}

.faq__h {
  margin: 2.708vw 0 2.292vw;
  font-size: 2.083vw;
  font-weight: 700;
  line-height: 1;
  color: #000;
}

.faq__g:first-child .faq__h {
  margin-top: 0;
}

/* subheading inside a main title (Seller FAQ's -> General, Payments, ...) */
.faq__sh {
  margin: 2.083vw 0 1.302vw;
  font-size: 1.667vw;
  font-weight: 700;
  line-height: 1;
  color: var(--c-green);
}

.faq__h + .faq__sh {
  margin-top: 0;
}

/* the frame is a picture, so the row has no border of its own. It is a
   9-slice border-image rather than a 100% x 100% background: stretching the
   whole picture to an open (tall) row thickened and smeared the top/bottom
   strokes, so open and closed rows looked like different frames. Slicing
   keeps the corners and stroke thickness fixed and only stretches the edges
   along their length. The frame sits on a ::before so it can be drawn
   smaller (thinner strokes) and faded (less black) without touching the
   text inside the row. */
.acc {
  position: relative;
  isolation: isolate; /* keeps the z-index:-1 frame above the page background */
  padding: 1.042vw 2.865vw;
}

.acc::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 0 solid transparent;
  border-image: url(../img/faqborder.webp) 24 fill / .75vw stretch;
  opacity: .55;
  pointer-events: none;
}

.acc + .acc {
  margin-top: 1.563vw;
}

/* the caret sits absolutely in the corner, so the question keeps the full row */
.acc summary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.acc summary::-webkit-details-marker {
  display: none;
}

.acc__t {
  font-size: 1.667vw;
  font-weight: 700;
  line-height: 1;
  color: #000;
}

.acc summary > svg {
  position: absolute;
  top: calc(50% - .2rem);
  right: 1.5rem;
  width: 1.458vw;
  height: .729vw;
}

.acc[open] summary > svg {
  transform: rotate(180deg);
}

.acc__c {
  padding: 1.823vw 0 .781vw;
}

.acc__c p,
.acc__c li {
  margin: 0;
  font-size: 1.25vw;
  font-weight: 700;
  color: #181818;
}

/* longer answers (e.g. the photo tips) run to several paragraphs and a list */
.acc__c p + p,
.acc__c ul + p,
.acc__c p + ul,
.acc__c ol + p,
.acc__c p + ol {
  margin-top: .781vw;
}

.acc__c ul,
.acc__c ol {
  margin: 0;
  padding-left: 1.563vw;
  list-style: disc;
}

.acc__c ol {
  list-style: decimal;
}

.acc__c a {
  color: var(--c-green);
  text-decoration: underline;
}

/* key phrases in an answer (dashboard statuses, what to do next) */
.acc__hl {
  color: var(--c-green);
}

.acc__c li + li {
  margin-top: .417vw;
}

.acc__c ul + h4,
.acc__c p + h4 {
  margin-top: 1.563vw;
}

.acc__sh {
  margin: 0 0 .521vw;
  font-size: 1.458vw;
  font-weight: 700;
  color: var(--c-green);
}

/* the suggested-price chart in "How do I price my outfit?" */
.acc__tbl {
  width: 100%;
  max-width: 41.667vw;
  margin: 1.042vw 0;
  border-collapse: collapse;
  font-size: 1.146vw;
  text-align: center;
}

.acc__tbl th,
.acc__tbl td {
  padding: .781vw 1.042vw;
  border: 1px solid #555;
  color: #181818;
}

.acc__tbl th {
  font-weight: 700;
  background: #d9d9d9;
}

.acc__tbl td {
  font-weight: 500;
  background: #fff;
}

/* ---------- how selling works ---------- */

.stp {
  position: relative;
  overflow: hidden;
  background: #fff;
}

.stp__box {
  position: relative;
  max-width: 75vw;
  margin-inline: auto;
  padding-block: 3.125vw;
}

.stp__box::after {
  content: "";
  position: absolute;
  top: 5.698vw;
  right: -6.458vw;
  width: 22.604vw;
  height: 16.979vw;
  background: url(../img/hookdesk.webp) no-repeat;
}

.stp__h {
  font-size: 2.5vw;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  color: #000;
}

.stp__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3.125vw 6.198vw;
  padding-block: 3.646vw;
}

.stp__i {
  display: flex;
  align-items: flex-start;
  column-gap: 1.563vw;
}

.stp__n {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.906vw;
  min-width: 3.906vw;
  height: 3.906vw;
  font-family: var(--ff-alt);
  font-size: 2.083vw;
  font-weight: 800;
  color: #fff;
  background: var(--c-green);
  border-radius: 50%;
}

.stp__c h3 {
  margin: 0;
  font-size: 2.083vw;
  font-weight: 700;
  letter-spacing: 0;
  color: #000;
}

.stp__c p {
  margin: 0;
  font-size: 1.25vw;
  font-weight: 500;
  line-height: 1.875vw;
  letter-spacing: 0;
  color: #000;
}

.stp .btn {
  max-width: 10.417vw;
  margin-inline: auto;
  padding: .547vw .521vw;
  color: #fff;
  background: var(--c-green);
}

.stp .btn__in {
  justify-content: center;
}

.stp .btn__in svg {
  height: 1.458vw;
}

@media (max-width: 767px) {
  /* inset by the same gutter as the text below (.faq__in, 4.545vw) — client report: the
     photo touched the screen edges while everything under it sat in from them */
  .pb {
    width: auto;
    margin-inline: 4.545vw;
  }

  .pb img {
    aspect-ratio: 880 / 444;
  }

  /* as the homepage banner on a phone (home.css) */
  .pb__c {
    max-width: 76.136vw;
  }

  .pb__h {
    font-size: 9.545vw;
    line-height: 11.818vw;
  }

  .faq__in {
    padding: 9.091vw 4.545vw;
    background: #fff;
  }

  .faq__h {
    margin: 8.636vw 0 7.955vw;
    font-size: 6.818vw;
  }

  .faq__sh {
    margin: 6.818vw 0 4.545vw;
    font-size: 5.455vw;
  }

  .acc {
    padding: 3.409vw 5.455vw;
    border-radius: 1.023vw;
    background: url(../img/bdrf.png) 0 0 / 100% 100% no-repeat;
  }

  .acc::before {
    content: none;
  }

  .acc[open] {
    background-image: url(../img/bdrm.png);
  }

  .acc + .acc {
    margin-top: 5.227vw;
  }

  .acc__t {
    padding-right: 7.591vw;
    font-size: 5.455vw;
    line-height: 5.341vw;
  }

  .acc summary > svg {
    top: 1.591vw;
    right: 0;
    width: 4.773vw;
    height: 2.386vw;
  }

  .acc__c {
    padding: 3.409vw 0 2.273vw;
  }

  .acc__c p,
  .acc__c li {
    font-size: 4.091vw;
    line-height: 6.136vw;
  }

  .acc__c p + p,
  .acc__c ul + p,
  .acc__c p + ul,
  .acc__c ol + p,
  .acc__c p + ol {
    margin-top: 2.273vw;
  }

  .acc__c ul,
  .acc__c ol {
    padding-left: 5.682vw;
  }

  .acc__c li + li {
    margin-top: 1.136vw;
  }

  .acc__c ul + h4,
  .acc__c p + h4 {
    margin-top: 5.682vw;
  }

  .acc__sh {
    margin-bottom: 2.273vw;
    font-size: 5.455vw;
  }

  .acc__tbl {
    max-width: 100%;
    margin: 3.409vw 0;
    font-size: 3.636vw;
  }

  .acc__tbl th,
  .acc__tbl td {
    padding: 2.727vw 2.273vw;
  }

  /* purani site yahan padding-top deti hai magar uske baad padding-block: 0
     likh deti hai, to top padding rehti hi nahi — wahi render rakha hai */
  .stp__box {
    max-width: 100%;
    padding-block: 0;
    padding-inline: 4.545vw;
  }

  .stp__box::after {
    top: auto;
    right: -7.273vw;
    bottom: 10.455vw;
    width: 46.591vw;
    height: 35vw;
    background-image: url(../img/hook.webp);
  }

  .stp__h {
    font-size: 8.182vw;
    line-height: 10.227vw;
    text-align: left;
  }

  .stp__grid {
    grid-template-columns: 1fr;
    gap: 8.636vw;
    padding-top: 7.091vw;
    padding-bottom: 0;
  }

  .stp__i {
    column-gap: 4.545vw;
  }

  .stp__n {
    align-items: normal;
    width: 12.614vw;
    min-width: 12.614vw;
    height: 12.614vw;
    margin-top: 1.136vw;
    font-size: 6.818vw;
    line-height: 13.409vw;
    text-align: center;
  }

  .stp__c h3 {
    margin-bottom: 2.727vw;
    font-size: 5.455vw;
    line-height: 1;
  }

  .stp__c p {
    font-size: 3.409vw;
    line-height: 5.114vw;
  }

  .stp .btn__in svg {
    width: 8.759vw;
    height: 6.58vw;
  }

  .stp__btn {
    display: none;
  }
}