/* ============================================================
   SKS FAQ — accordion with smooth open/close
   Mirrors ui/collection/collection.html `.faq-section`
   ============================================================ */

.sks-faq {
  background: var(--sks-faq-bg, #FFFFFF);
  padding: var(--sks-faq-pad-top, 70px) 48px var(--sks-faq-pad-bottom, 70px);
  font-family: 'Jost', 'Helvetica Neue', sans-serif;
}

.sks-faq__wrap {
  max-width: 840px;
  margin: 0 auto;
}

.sks-faq__eyebrow {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #B8520A;
  font-weight: 600;
  margin: 0 0 10px;
  font-family: 'Jost', sans-serif;
}

.sks-faq__heading {
  font-family: 'Playfair Display', serif;
  font-size: 32px;
  font-weight: 600;
  color: #1A1A1A;
  line-height: 1.15;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}

.sks-faq__sub,
.sks-faq__sub p {
  font-size: 14.5px;
  color: #4A4440;
  line-height: 1.6;
  margin: 0 0 36px;
  font-weight: 300;
}

.sks-faq__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid #E5E0DA;
}

.sks-faq__item {
  border-bottom: 1px solid #E5E0DA;
}

.sks-faq__q {
  width: 100%;
  text-align: left;
  padding: 18px 0;
  background: none;
  border: none;
  font-family: 'Playfair Display', serif;
  font-size: 17px;
  color: #1A1A1A;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  line-height: 1.3;
  transition: color 0.15s;
}

.sks-faq__q:hover {
  color: #B8520A;
}

.sks-faq__q .sks-faq__chev {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9A9088;
  transition: transform 0.25s ease, color 0.15s;
}

.sks-faq__q[aria-expanded="true"] .sks-faq__chev {
  transform: rotate(180deg);
  color: #B8520A;
}

.sks-faq__a {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s ease, padding 0.25s ease;
  padding: 0;
}

.sks-faq__a[data-open="true"] {
  max-height: 2000px;
  padding: 0 0 22px;
}

.sks-faq__a p {
  font-size: 14px;
  color: #4A4440;
  line-height: 1.7;
  font-weight: 300;
  margin: 0 0 10px;
}

.sks-faq__a p:last-child {
  margin-bottom: 0;
}

.sks-faq__a a {
  color: #B8520A;
  text-decoration: underline;
  text-decoration-color: rgba(184, 82, 10, 0.3);
  text-underline-offset: 2px;
  transition: text-decoration-color .2s;
}

.sks-faq__a a:hover {
  text-decoration-color: #B8520A;
}

/* Responsive */
@media screen and (max-width: 960px) {
  .sks-faq {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media screen and (max-width: 749px) {
  .sks-faq {
    padding: 48px 16px;
  }
  .sks-faq__heading {
    font-size: 24px;
  }
  .sks-faq__q {
    font-size: 15.5px;
    padding: 16px 0;
  }
  .sks-faq__a p {
    font-size: 13.5px;
  }
}

/* =====================================================================
   DESIGN VARIANT V2 — "The Weave" (categorized loom)
   Structure inspired by ui/extra/scottish-kilt-homepage-redesign.html
   `.weave` FAQ; palette re-mapped to the current theme (amber /
   onyx / parch / ivory) so it reads as of-a-piece with the rest of
   the shop. All rules scoped under .sks-faq--v2 so v1 is untouched.
   ===================================================================== */

.sks-faq--v2 .sks-faq__list {
  position: relative;
  border-top: none;
  padding-left: 32px;
  margin-top: 6px;
}

/* Left loom stripe — vertical multicolor band running the full height
   of the FAQ list. Instead of the gold/red/navy of the reference mock,
   we thread the shop's amber against parch/ivory rules so the ornament
   still reads as "weave" but stays visually tied to the rest of the
   page. */
.sks-faq--v2 .sks-faq__list::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: linear-gradient(
    180deg,
    #B8520A 0 8%,
    transparent 8% 10%,
    #E8DFD0 10% 42%,
    #B8520A 42% 45%,
    #E8DFD0 45% 66%,
    #B8520A 66% 69%,
    #4A4440 69% 100%
  );
  border-radius: 1px;
}

.sks-faq--v2 .sks-faq__item {
  border-bottom: 1px solid #E5E0DA;
}
.sks-faq--v2 .sks-faq__item:first-child {
  border-top: 1px solid #E5E0DA;
}

.sks-faq--v2 .sks-faq__q {
  padding: 22px 44px 22px 0;
  position: relative;
  align-items: flex-start;
  gap: 20px;
}

/* Q body wrapper — flex column so the category tag stacks above the
   question line. */
.sks-faq--v2 .sks-faq__q-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

/* Category tag above each question — amber uppercase eyebrow that
   matches the shop's other section eyebrows. */
.sks-faq--v2 .sks-faq__cat {
  font-family: 'Jost', 'Helvetica Neue', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #B8520A;
  display: block;
}

.sks-faq--v2 .sks-faq__q-text {
  display: block;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 19px;
  font-weight: 600;
  color: #1A1A1A;
  line-height: 1.3;
  letter-spacing: -0.005em;
}

.sks-faq--v2 .sks-faq__q:hover .sks-faq__q-text {
  color: #B8520A;
}

/* Small square indicator on the right — rotates 45° and fills amber
   when the item opens. Replaces the chevron used in v1. */
.sks-faq--v2 .sks-faq__mark {
  position: absolute;
  right: 6px;
  top: 50%;
  width: 10px;
  height: 10px;
  transform: translateY(-50%);
  border: 1.5px solid #B8520A;
  transition: transform 0.3s ease, background-color 0.3s ease;
  flex-shrink: 0;
}

.sks-faq--v2 .sks-faq__q[aria-expanded="true"] .sks-faq__mark {
  transform: translateY(-50%) rotate(45deg);
  background: #B8520A;
}

/* Horizontal padding is stable across both closed and open states so
   the answer text doesn't rewrap mid-transition — only padding-bottom
   grows when opening. (Base v1 rule transitions ALL padding sides,
   which is why v2 was previously visibly reflowing.) */
.sks-faq--v2 .sks-faq__a {
  padding: 0 40px 0 0;
}

.sks-faq--v2 .sks-faq__a[data-open="true"] {
  padding: 0 40px 26px 0;
}

.sks-faq--v2 .sks-faq__a p {
  font-size: 15px;
  line-height: 1.75;
  color: #4A4440;
  max-width: 66ch;
}

/* Mobile — collapse loom offset and tighten typography */
@media screen and (max-width: 749px) {
  .sks-faq--v2 .sks-faq__list {
    padding-left: 22px;
  }
  .sks-faq--v2 .sks-faq__list::before {
    width: 5px;
  }
  .sks-faq--v2 .sks-faq__q {
    padding: 18px 32px 18px 0;
    gap: 14px;
  }
  .sks-faq--v2 .sks-faq__q-text {
    font-size: 16px;
  }
  .sks-faq--v2 .sks-faq__cat {
    font-size: 10px;
    letter-spacing: 0.2em;
  }
  .sks-faq--v2 .sks-faq__a p {
    font-size: 13.5px;
  }
  /* Mobile also keeps padding-right stable (12px) between states so the
     answer text width doesn't shift as the panel opens. */
  .sks-faq--v2 .sks-faq__a {
    padding: 0 12px 0 0;
  }
  .sks-faq--v2 .sks-faq__a[data-open="true"] {
    padding: 0 12px 22px 0;
  }
}

/* =====================================================================
   TWO-COLUMN DESKTOP LAYOUT — opt-in via "Two columns on desktop"
   checkbox (adds .sks-faq--2col). Items are wrapped by the Liquid
   template into two explicit <div class="sks-faq__col"> siblings so
   each column is its own independent block flow: opening an answer
   only pushes items below it IN THE SAME column, and the left
   column's loom stripe (v2) anchors to only the left column's height
   instead of the taller of the two.

   Reading order: items 1..ceil(N/2) go in column 1, remainder in
   column 2 — top-to-bottom-then-next-column. On mobile below 990px
   the flex container returns to column direction so the two <div>s
   stack vertically in source order (col1's items first, then col2's).
   ===================================================================== */
@media screen and (min-width: 990px) {
  /* Two-column mode spans a wider container — matched to the video
     section's .sks-video__wrap (1100px) so the two sections line up
     when stacked on the homepage. Single-column keeps the 840px
     reading width. */
  .sks-faq--2col .sks-faq__wrap {
    max-width: 1100px;
  }

  .sks-faq--2col .sks-faq__list {
    display: flex;
    /* Override the base .sks-faq__list `flex-direction: column` — the base
       stacks items vertically for single-column mode; here we want the two
       .sks-faq__col children side-by-side. */
    flex-direction: row;
    gap: 48px;
    /* flex-start prevents columns from stretching to match each other's
       height — each column takes only the height of its own items, so
       the loom stripe on col--1 doesn't inherit col--2's taller height
       when a right-column answer is open. */
    align-items: flex-start;
    /* Container has no top border in 2col — each column carries its own. */
    border-top: none;
  }

  .sks-faq--2col .sks-faq__col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    /* v1 border-top used to live on .sks-faq__list; move it here so
       each column shows a rule at its own top. */
    border-top: 1px solid #E5E0DA;
  }

  /* --- v2 in 2-col: relocate the loom stripe to col--1 only --- */

  /* Kill the container-level stripe from single-column mode — it would
     extend the full height of the flex container (still the taller
     column) and hang below the shorter column. */
  .sks-faq--2col.sks-faq--v2 .sks-faq__list::before {
    content: none;
  }
  /* Container was padding 32px to reserve room for the container stripe;
     in 2col that padding moves to col--1 where the stripe now lives. */
  .sks-faq--2col.sks-faq--v2 .sks-faq__list {
    padding-left: 0;
  }
  .sks-faq--2col.sks-faq--v2 .sks-faq__col {
    /* v2's :first-child rule already gives each column's top item a
       border-top; unset the col-level top border so it doesn't
       double-line above that first item. */
    border-top: none;
  }
  .sks-faq--2col.sks-faq--v2 .sks-faq__col--1 {
    position: relative;
    padding-left: 32px;
  }
  .sks-faq--2col.sks-faq--v2 .sks-faq__col--1::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: linear-gradient(
      180deg,
      #B8520A 0 8%,
      transparent 8% 10%,
      #E8DFD0 10% 42%,
      #B8520A 42% 45%,
      #E8DFD0 45% 66%,
      #B8520A 66% 69%,
      #4A4440 69% 100%
    );
    border-radius: 1px;
  }
}

/* Below 990px the two <div class="sks-faq__col"> siblings still exist
   in the DOM. `display: contents` collapses each col's box so its
   items participate in .sks-faq__list's own flex column directly —
   items stack in source order (col1's, then col2's) as if there was
   no wrapper. */
@media screen and (max-width: 989px) {
  .sks-faq--2col .sks-faq__col {
    display: contents;
  }
  /* At the seam between col--1's last item and col--2's first item,
     v2 draws both a border-bottom (bottom of last col1 item) and a
     border-top (:first-child of col--2). Strip the border-top so the
     seam reads as a single 1px rule like every other item boundary. */
  .sks-faq--2col.sks-faq--v2 .sks-faq__col--2 .sks-faq__item:first-child {
    border-top: 0;
  }
}