/* ==========================================================================
   Tribe Aura — Shop archive
   --------------------------------------------------------------------------
   Archive header, filter sidebar/drawer, toolbar, product grid, pagination,
   empty state.

   Mobile-first; breakpoints written literally: 480 / 768 / 1024 / 1280.
   The sidebar becomes a static column at 1024px; below that it is a drawer.

   The product CARD itself is styled in home.css — one component, one place.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Archive header
   -------------------------------------------------------------------------- */

.ta-archive-head {
  position: relative;
  background-color: var(--ta-color-bg-alt);
  overflow: hidden;
}

.ta-archive-head__inner {
  position: relative;
  z-index: var(--ta-z-base);
  padding-block: var(--ta-section-y-tight);
}

.ta-archive-head__media {
  position: absolute;
  inset: 0;
}

.ta-archive-head__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The header is a wide, shallow band (roughly 4.8:1), so a `cover` crop shows
   only a narrow horizontal slice of whatever photograph is set — and which
   slice that is depends entirely on the image. A single-stop gradient left the
   title's contrast at the mercy of that slice: bright on one category, near
   black on another. A stronger ramp plus a flat tint holds the inverted text
   legible across the range, without flattening the photograph to grey. */
.ta-archive-head--media .ta-archive-head__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to top,
      rgba(20, 18, 16, 0.78) 0%,
      rgba(20, 18, 16, 0.48) 55%,
      rgba(20, 18, 16, 0.12) 100%
    );
}

.ta-archive-head--media .ta-archive-head__inner {
  color: var(--ta-color-text-invert);
}

.ta-archive-head--media .ta-archive-head__title,
.ta-archive-head--media .ta-eyebrow {
  color: var(--ta-color-text-invert);
}

.ta-archive-head__title {
  margin-top: var(--ta-space-3xs);
  font-size: var(--ta-text-3xl);
}

.ta-archive-head__text {
  margin-top: var(--ta-space-sm);
  max-width: var(--ta-measure);
  color: var(--ta-color-text-muted);
}

.ta-archive-head--media .ta-archive-head__text {
  color: var(--ta-color-text-invert);
}

/* --- Breadcrumb --- */

.ta-breadcrumb {
  font-size: var(--ta-text-2xs);
  letter-spacing: var(--ta-tracking-wide);
  color: var(--ta-color-text-muted);
  margin-bottom: var(--ta-space-sm);
}

.ta-breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.ta-breadcrumb a:hover {
  color: var(--ta-color-link-hover);
  text-decoration: underline;
}

.ta-breadcrumb__sep {
  margin-inline: var(--ta-space-2xs);
  color: var(--ta-color-text-subtle);
}

/* --- Child category pills --- */

.ta-subcats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ta-space-2xs);
  margin-top: var(--ta-space-md);
}

.ta-subcats li { margin: 0; }

.ta-subcats__link {
  display: inline-flex;
  align-items: center;
  gap: var(--ta-space-3xs);
  padding: var(--ta-space-3xs) var(--ta-space-sm);
  background-color: var(--ta-color-surface);
  border: var(--ta-border-width) solid var(--ta-color-border-strong);
  border-radius: var(--ta-radius-pill);
  font-size: var(--ta-text-2xs);
  letter-spacing: var(--ta-tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ta-color-text);
}

.ta-subcats__link:hover {
  border-color: var(--ta-color-accent);
  color: var(--ta-color-link-hover);
}

.ta-subcats__count {
  color: var(--ta-color-text-subtle);
}


/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.ta-shop {
  padding-bottom: var(--ta-section-y);
}

.ta-shop__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ta-space-xl);
  padding-top: var(--ta-section-y-tight);
}

@media (min-width: 1024px) {
  .ta-shop__layout {
    grid-template-columns: 16rem minmax(0, 1fr);
    gap: var(--ta-space-2xl);
  }
}

/* min-width:0 lets the grid column shrink; without it a long product title
   can force the whole results column wider than its track. */
.ta-shop__results {
  min-width: 0;
}


/* --------------------------------------------------------------------------
   Filters
   --------------------------------------------------------------------------
   Below 1024px this is a fixed off-canvas drawer. At 1024px+ every one of
   those positioning rules is unset and it becomes a normal sticky column.
   -------------------------------------------------------------------------- */

.ta-filters {
  position: fixed;
  inset: 0;
  z-index: var(--ta-z-drawer);
  visibility: hidden;
}

.ta-filters--open {
  visibility: visible;
}

.ta-filters__scrim {
  position: absolute;
  inset: 0;
  background-color: var(--ta-color-overlay);
  opacity: 0;
  transition: opacity var(--ta-transition);
}

.ta-filters--open .ta-filters__scrim {
  opacity: 1;
}

.ta-filters__panel {
  position: absolute;
  inset-block: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: min(21rem, 88vw);
  background-color: var(--ta-color-bg);
  box-shadow: var(--ta-shadow-xl);
  transform: translateX(-100%);
  transition: transform var(--ta-duration-base) var(--ta-ease-out);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ta-filters--open .ta-filters__panel {
  transform: translateX(0);
}

.ta-filters__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ta-space-sm);
  padding: var(--ta-space-sm) var(--ta-space-md);
  border-bottom: var(--ta-border-width) solid var(--ta-color-border);
}

.ta-filters__heading {
  font-family: var(--ta-font-body);
  font-size: var(--ta-text-2xs);
  font-weight: var(--ta-weight-semibold);
  letter-spacing: var(--ta-tracking-wider);
  text-transform: uppercase;
  color: var(--ta-color-text-muted);
}

.ta-filters__close {
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--ta-color-text);
}

.ta-filters__close:hover {
  background: transparent;
  color: var(--ta-color-link-hover);
}

.ta-filters__body {
  padding: var(--ta-space-md);
}

@media (min-width: 1024px) {
  /* Back to an ordinary column. */
  .ta-filters {
    position: static;
    visibility: visible;
    z-index: auto;
  }

  /* The scrim is the mobile drawer's backdrop and must stay gone on desktop. */
  .ta-filters__scrim {
    display: none;
  }

  /*
   * Only the CLOSE BUTTON is mobile-only. Hiding the whole head also removed
   * the "Filter" h2, which left the filter groups' h3s hanging directly off the
   * page h1 — a heading-level jump for anyone navigating by headings on
   * desktop. The heading stays in the document and is hidden visually instead,
   * so the outline is intact and nothing changes on screen.
   */
  .ta-filters__head {
    display: block;
    padding: 0;
    border-bottom: 0;
  }

  .ta-filters__close {
    display: none;
  }

  .ta-filters__heading {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .ta-filters__panel {
    position: sticky;
    /* Clears the sticky site header. */
    top: 6rem;
    width: auto;
    max-height: calc(100vh - 8rem);
    background: transparent;
    box-shadow: none;
    transform: none;
    overflow-y: auto;
  }

  .ta-filters__body {
    padding: 0;
  }
}

/* --- Groups --- */

.ta-filters__group + .ta-filters__group {
  margin-top: var(--ta-space-lg);
  padding-top: var(--ta-space-lg);
  border-top: var(--ta-border-width) solid var(--ta-color-border);
}

.ta-filters__label {
  font-family: var(--ta-font-body);
  font-size: var(--ta-text-2xs);
  font-weight: var(--ta-weight-semibold);
  letter-spacing: var(--ta-tracking-wider);
  text-transform: uppercase;
  color: var(--ta-color-text);
  margin-bottom: var(--ta-space-2xs);
}

.ta-filters__list {
  display: flex;
  flex-direction: column;
}

.ta-filters__list li { margin: 0; }

/* --- One filter option --- */

.ta-filter {
  display: flex;
  align-items: center;
  gap: var(--ta-space-2xs);
  /* 44px row: these are the primary touch targets on mobile. */
  min-height: 2.75rem;
  padding-block: var(--ta-space-3xs);
  font-size: var(--ta-text-sm);
  text-decoration: none;
  color: var(--ta-color-text);
}

.ta-filter:hover {
  color: var(--ta-color-link-hover);
}

/* Drawn rather than using a real checkbox: these are links (so they work
   without JS), and a checkbox inside a link is not a valid control. */
.ta-filter__box {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  border: var(--ta-border-width) solid var(--ta-color-border-strong);
  border-radius: var(--ta-radius-xs);
  background-color: var(--ta-color-surface);
  transition: background-color var(--ta-transition), border-color var(--ta-transition);
}

.ta-filter:hover .ta-filter__box {
  border-color: var(--ta-color-accent-soft);
}

.ta-filter--on .ta-filter__box {
  background-color: var(--ta-color-text);
  border-color: var(--ta-color-text);
  /* Tick drawn with a border, so it needs no extra element or image. */
  background-image: linear-gradient(45deg, transparent 42%, var(--ta-color-surface) 42%, var(--ta-color-surface) 58%, transparent 58%),
                    linear-gradient(-45deg, transparent 42%, var(--ta-color-surface) 42%, var(--ta-color-surface) 58%, transparent 58%);
  background-size: 55% 2px, 55% 2px;
  background-position: 15% 58%, 42% 58%;
  background-repeat: no-repeat;
}

.ta-filter__name {
  flex: 1 1 auto;
  min-width: 0;
}

.ta-filter--on .ta-filter__name {
  font-weight: var(--ta-weight-medium);
}

.ta-filter__count {
  flex: 0 0 auto;
  font-size: var(--ta-text-2xs);
  color: var(--ta-color-text-subtle);
  font-variant-numeric: tabular-nums;
}

/* A combination that would return nothing: visible so the list does not
   reflow on every click, but clearly unavailable. */
.ta-filter--off {
  opacity: 0.4;
  pointer-events: none;
}

/* --- Applied chips --- */

.ta-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ta-space-3xs);
}

.ta-chips li { margin: 0; }

.ta-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ta-space-3xs);
  padding: var(--ta-space-3xs) var(--ta-space-2xs);
  background-color: var(--ta-color-bg-alt);
  border: var(--ta-border-width) solid var(--ta-color-border-strong);
  border-radius: var(--ta-radius-pill);
  font-size: var(--ta-text-2xs);
  text-decoration: none;
  color: var(--ta-color-text);
}

.ta-chip:hover {
  border-color: var(--ta-color-danger);
  color: var(--ta-color-danger);
}

.ta-filters__clear {
  margin-top: var(--ta-space-2xs);
}

/* --- Price --- */

.ta-price__row {
  display: flex;
  align-items: center;
  gap: var(--ta-space-2xs);
  margin-bottom: var(--ta-space-2xs);
}

.ta-price__field {
  min-width: 0;
  text-align: center;
}

.ta-price__sep {
  color: var(--ta-color-text-subtle);
}


/* --------------------------------------------------------------------------
   Toolbar
   -------------------------------------------------------------------------- */

.ta-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ta-space-sm);
  padding-bottom: var(--ta-space-md);
  margin-bottom: var(--ta-space-lg);
  border-bottom: var(--ta-border-width) solid var(--ta-color-border);
}

.ta-toolbar__count {
  flex: 1 1 auto;
  margin: 0;
  max-width: none;
  font-size: var(--ta-text-sm);
  color: var(--ta-color-text-muted);
}

.ta-toolbar__filter {
  position: relative;
}

@media (min-width: 1024px) {
  /* The sidebar is always visible at this width, so the trigger is redundant. */
  .ta-toolbar__filter { display: none; }
}

.ta-toolbar__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.1rem;
  height: 1.1rem;
  padding-inline: 0.2rem;
  background-color: var(--ta-color-accent-soft);
  color: var(--ta-color-text-invert);
  border-radius: var(--ta-radius-pill);
  font-size: var(--ta-text-3xs);
  line-height: 1;
}

.ta-toolbar__sort .woocommerce-ordering {
  margin: 0;
}

.ta-toolbar__sort select {
  min-width: 12rem;
}


/* --------------------------------------------------------------------------
   Product grid
   -------------------------------------------------------------------------- */

.ta-shop ul.products,
ul.products.ta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ta-gap-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .ta-shop ul.products,
  ul.products.ta-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ta-gap-lg);
  }
}

@media (min-width: 1280px) {
  .ta-shop ul.products,
  ul.products.ta-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/*
 * Woo's own stylesheet floats and width-percentages these items; the grid needs
 * them reset or every card sits at a fraction of its column.
 *
 * The .columns-N variants have to be named EXPLICITLY. This override used to
 * list only `.ta-shop ul.products li.product`, which beats Woo's base rule
 * (equal specificity, and this file loads later) — but Woo also ships
 * `.woocommerce ul.products.columns-2 li.product { width: 48% }`, one class
 * higher, and that quietly won. The result was a card rendering at 79px inside a
 * 165px column on a phone: half-width cards with a gap beside each one, which
 * reads as a broken grid rather than a design.
 */
.ta-shop ul.products li.product,
.ta-shop ul.products.columns-1 li.product,
.ta-shop ul.products.columns-2 li.product,
.ta-shop ul.products.columns-3 li.product,
.ta-shop ul.products.columns-4 li.product,
.ta-shop ul.products.columns-5 li.product,
.ta-shop ul.products.columns-6 li.product {
  float: none;
  width: auto;
  margin: 0;
  min-width: 0;
}

/* Woo clearfixes ul.products with ::before/::after. In a float layout those
   are invisible; in a GRID they become real grid items, which showed up as an
   empty first cell pushing every product one place along. */
.ta-shop ul.products::before,
.ta-shop ul.products::after,
.ta-shop ul.products li.product::before,
.ta-shop ul.products li.product::after {
  content: none;
  display: none;
}


/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */

.ta-shop .woocommerce-pagination {
  margin-top: var(--ta-space-2xl);
  text-align: center;
}

.ta-shop .woocommerce-pagination ul {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ta-space-3xs);
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}


/* --------------------------------------------------------------------------
   Empty state
   -------------------------------------------------------------------------- */

.ta-empty {
  padding-block: var(--ta-section-y);
  max-width: var(--ta-measure);
}

.ta-empty__title {
  margin-top: var(--ta-space-3xs);
  font-size: var(--ta-text-2xl);
}

.ta-empty__text {
  margin-top: var(--ta-space-sm);
  color: var(--ta-color-text-muted);
}

.ta-empty__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ta-space-2xs);
  margin-top: var(--ta-space-lg);
  max-width: none;
}

/* --------------------------------------------------------------------------
   Search results
   --------------------------------------------------------------------------
   The theme had no search template at all, so results rendered in the parent
   theme — no cards, no prices, nothing to buy. Products now use the same card
   as every other shelf; pages and journal posts are listed plainly beneath.
   -------------------------------------------------------------------------- */

.ta-search__section + .ta-search__section {
  margin-top: var(--ta-space-2xl);
}

.ta-search__heading {
  margin-bottom: var(--ta-space-md);
  font-family: var(--ta-font-body);
  font-size: var(--ta-text-2xs);
  font-weight: var(--ta-weight-semibold);
  letter-spacing: var(--ta-tracking-wider);
  text-transform: uppercase;
  color: var(--ta-color-text-muted);
}

.ta-search__list {
  display: grid;
  gap: var(--ta-space-md);
  max-width: 60ch;
}

.ta-search__item {
  padding-bottom: var(--ta-space-md);
  border-bottom: var(--ta-border-width) solid var(--ta-color-border);
}

.ta-search__item:last-child {
  border-bottom: 0;
}

.ta-search__link {
  font-family: var(--ta-font-display);
  font-size: var(--ta-text-lg);
  color: var(--ta-color-heading);
}

.ta-search__excerpt {
  margin: var(--ta-space-3xs) 0 0;
  font-size: var(--ta-text-sm);
  color: var(--ta-color-text-muted);
}

.ta-archive-head__meta {
  margin-top: var(--ta-space-2xs);
  font-size: var(--ta-text-sm);
  color: var(--ta-color-text-muted);
}

/* --------------------------------------------------------------------------
   Price filter
   --------------------------------------------------------------------------
   The two boxes carried bare numbers with nothing to say they were money.
   A currency symbol now sits against each field, and the figures are set a step
   smaller so the pair reads as one control rather than two large numbers.
   -------------------------------------------------------------------------- */

.ta-price__symbol {
  margin-right: 0.15rem;
  font-size: var(--ta-text-2xs);
  color: var(--ta-color-text-muted);
}

/*
 * Smaller ONLY where it is safe to be.
 *
 * Every form control on this site has a hard 16px floor, because iOS Safari
 * zooms the whole page when a field below that takes focus — the fix for 50
 * such triggers found in the mobile pass. Setting the client's smaller size
 * unconditionally would have brought every one of them back on this control.
 *
 * A fine pointer means a mouse or trackpad, so no touch keyboard and no zoom.
 * Phones and tablets keep the 16px field.
 */
@media (hover: hover) and (pointer: fine) {
  /*
   * Matched at (0,3,1) deliberately. The form-control floor in base.css is
   *   input:not([type="checkbox"]):not([type="radio"]):not([type="range"])
   * and :not() carries the specificity of its argument, so those three
   * attribute selectors score it (0,3,1). A plain `.ta-price__field` at (0,1,0)
   * lost silently and the field stayed at 16px.
   */
  .ta-filters .ta-price__row input.ta-price__field {
    font-size: var(--ta-text-xs);
  }
}