/* ==========================================================================
   Tribe Aura — Accordion
   --------------------------------------------------------------------------
   Shared <details>/<summary> disclosure component.

   Used by the product page (Description / Materials & Craft / Size & Care /
   Shipping & Returns) and by the support pages' FAQ blocks. It lives in its own
   file rather than in either of those stylesheets so both get the identical
   component from one definition, and it is only loaded where it is used.

   No JavaScript: open/close, keyboard operation and semantics are native.
   ========================================================================== */

.ta-panels__list {
  border-top: var(--ta-border-width) solid var(--ta-color-border);
}

.ta-panel {
  border-bottom: var(--ta-border-width) solid var(--ta-color-border);
}

.ta-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ta-space-sm);
  /* 44px minimum touch target. */
  min-height: 3.5rem;
  padding-block: var(--ta-space-sm);
  cursor: pointer;
  list-style: none;
  color: var(--ta-color-heading);
}

/* Remove the native disclosure triangle — the chevron replaces it. */
.ta-panel__head::-webkit-details-marker {
  display: none;
}

.ta-panel__head::marker {
  content: "";
}

.ta-panel__title {
  font-family: var(--ta-font-display);
  font-size: var(--ta-text-lg);
  font-weight: var(--ta-weight-medium);
}

.ta-panel__icon {
  flex: 0 0 auto;
  color: var(--ta-color-text-muted);
  transition: transform var(--ta-transition);
}

.ta-panel[open] .ta-panel__icon {
  transform: rotate(180deg);
}

.ta-panel__body {
  padding-bottom: var(--ta-space-lg);
  color: var(--ta-color-text-muted);
  line-height: var(--ta-leading-relaxed);
}

.ta-panel__copy p + p {
  margin-top: var(--ta-space-sm);
}

/* Woo's attribute table inside the "Materials & Craft" panel. */
.ta-panel__body table.shop_attributes {
  width: 100%;
  border: 0;
}

.ta-panel__body table.shop_attributes th,
.ta-panel__body table.shop_attributes td {
  padding: var(--ta-space-2xs) 0;
  border-bottom: var(--ta-border-width) solid var(--ta-color-border);
  text-align: left;
  font-size: var(--ta-text-sm);
}

.ta-panel__body table.shop_attributes th {
  width: 12rem;
  font-weight: var(--ta-weight-medium);
  color: var(--ta-color-text);
}

.ta-panel__body table.shop_attributes td p {
  margin: 0;
}

/* Question-sized variant for FAQ lists, where the text is a sentence rather
   than a short section label. */
.ta-panel__title--sm {
  font-family: var(--ta-font-body);
  font-size: var(--ta-text-base);
  font-weight: var(--ta-weight-medium);
  line-height: var(--ta-leading-snug);
}


/* ==========================================================================
   Product details block
   --------------------------------------------------------------------------
   Everything below is scoped to .ta-panels, which only the product page's
   details section carries — the FAQ lists share the component above and are
   deliberately left as they are.

   TWO SHAPES, ONE MARKUP. Below 1024 this is the accordion, warmed up: a bigger
   head, a ringed indicator, and a gold marker down the open panel so the reader
   can see which section they are inside. At 1024 and above assets/js/gallery.js
   adds a rail of names and the block becomes vertical tabs — because on a wide
   screen there is room to show every section name at once, and hiding four
   headings behind four clicks tells the reader nothing about what is in them.
   ========================================================================== */

.ta-panels__head {
  margin-bottom: var(--ta-space-lg);
}

.ta-panels__title {
  margin: 0;
  font-family: var(--ta-font-display);
  font-size: var(--ta-text-2xl);
  font-weight: var(--ta-weight-regular);
  color: var(--ta-color-heading);
}

/* --- the accordion, warmed up ------------------------------------------- */

.ta-panels .ta-panel {
  position: relative;
  transition: background-color var(--ta-transition);
}

.ta-panels .ta-panel[open] {
  background-color: var(--ta-color-bg-alt);
}

/* A gold marker down the open section: which one am I reading? */
.ta-panels .ta-panel[open]::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 2px;
  background-color: var(--ta-color-accent);
}

.ta-panels .ta-panel__head,
.ta-panels .ta-panel__body {
  padding-inline: var(--ta-space-md);
}

.ta-panels .ta-panel__head {
  min-height: 4rem;
}

/* The chevron gets a ring, so it reads as something to press rather than as
   punctuation after the heading. */
.ta-panels .ta-panel__icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: var(--ta-border-width) solid var(--ta-color-border-strong);
  border-radius: 50%;
  transition: transform var(--ta-transition),
              border-color var(--ta-transition),
              color var(--ta-transition);
}

.ta-panels .ta-panel__head:hover .ta-panel__icon {
  border-color: var(--ta-color-accent);
  color: var(--ta-color-accent-text);
}

/* --- vertical tabs, desktop only ---------------------------------------- */

.ta-panels__rail {
  display: flex;
  flex-direction: column;
  gap: var(--ta-space-3xs);
}

.ta-panels__tab {
  /* Overrides the global button styling: this is a list of names, not a row
     of buttons, so it is left-aligned, quiet and full width. */
  justify-content: flex-start;
  min-height: 3rem;
  padding: var(--ta-space-2xs) var(--ta-space-sm);
  border: 0;
  border-left: 2px solid var(--ta-color-border);
  border-radius: 0;
  background-color: transparent;
  font-family: var(--ta-font-body);
  font-size: var(--ta-text-sm);
  font-weight: var(--ta-weight-regular);
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  color: var(--ta-color-text-muted);
}

.ta-panels__tab:hover {
  background-color: transparent;
  color: var(--ta-color-text);
}

.ta-panels__tab.is-active {
  border-left-color: var(--ta-color-accent);
  background-color: transparent;
  font-weight: var(--ta-weight-medium);
  color: var(--ta-color-heading);
}

/* The rail only exists once script has built it; until then, and on a phone,
   it is not in the document at all. */
@media (max-width: 1023px) {
  .ta-panels__rail {
    display: none;
  }
}

@media (min-width: 1024px) {
  .ta-panels__list--tabs {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    column-gap: var(--ta-space-2xl);
    align-items: start;
    border-top: 0;
  }

  .ta-panels__list--tabs .ta-panels__rail {
    grid-column: 1;
    grid-row: 1 / -1;
    position: sticky;
    top: var(--ta-space-xl);
  }

  /*
   * Every panel is held open by the script and stacked into the same cell, so
   * the pane does not jump in height as the reader moves between sections —
   * only the active one is painted.
   */
  /*
   * [open] in the selector deliberately: the accordion's tint is set on
   * .ta-panels .ta-panel[open], and every panel is held open in tab mode, so a
   * rule without it loses on specificity and the reading pane keeps a tinted
   * block wrapped around the paragraph.
   */
  .ta-panels__list--tabs .ta-panel,
  .ta-panels__list--tabs .ta-panel[open] {
    grid-column: 2;
    grid-row: 1;
    border-bottom: 0;
    background-color: transparent;
  }

  .ta-panels__list--tabs .ta-panel:not(.is-active) {
    display: none;
  }

  .ta-panels__list--tabs .ta-panel[open]::before {
    content: none;
  }

  /* The rail carries the names now. */
  .ta-panels__list--tabs .ta-panel__head {
    display: none;
  }

  .ta-panels__list--tabs .ta-panel__body {
    padding: 0;
    /* A reading measure, held here rather than on the container, so the block
       still lines up with the carousels above and below it. */
    max-width: 42rem;
    font-size: var(--ta-text-base);
  }
}