/* ==========================================================================
   IRONBEASTS - SHOP ARCHIVE  (shop.css)
   Ported from new-theme-draft/assets/css/pages.css.
   Loaded only on the shop page and product category archives.
   ========================================================================== */

/* ---- Layout -------------------------------------------------------------- */
.shop {
  padding-block: var(--sp-5) clamp(3rem, 6vw, 6rem);
}

/* ---- Toolbar ------------------------------------------------------------- */
.shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-5);
}

/* ---- Filters control -----------------------------------------------------
   Borrows .btn's voice: the display face, uppercase, wide tracking, square
   corners. .btn is square everywhere else on the site, so a rounded control
   here would read as borrowed from a different design. Same height as
   .icon-btn in the header, so every control on the page lines up. */
.shop-filters__toggle {
  height: 42px;
  border: 1px solid var(--border);
  background-color: var(--surface);
  color: var(--text);
  font-family: var(--font-display);
  line-height: var(--lh-snug);
  font-weight: 600;
  font-size: var(--fs-13);
  letter-spacing: var(--ls-4);
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--t), background-color var(--t), color var(--t);
}

.shop-filters__toggle:hover {
  border-color: var(--heading);
}

/* ---- Filter panel --------------------------------------------------------
   Built on <details>, so it opens and closes with no JavaScript. The panel is
   fixed to the left edge and sits over the grid: the products keep their
   position and their column count whether it is open or not. */
.shop-filters__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding-inline: 1.1rem;
  list-style: none;
}

.shop-filters__toggle::-webkit-details-marker {
  display: none;
}

/* Open reads as pressed, the way a solid .btn does -- and the raised z-index
   keeps it above the backdrop, so it can still close the panel when no script
   has run. */
.shop-filters[open] .shop-filters__toggle {
  position: relative;
  z-index: var(--z-drawer);
  background-color: var(--heading);
  border-color: var(--heading);
  color: var(--bg);
}

.shop-filters[open]::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--shade-4);
  z-index: var(--z-overlay);
  animation: shop-fade-in var(--t);
}

.shop-filters__panel {
  position: fixed;
  inset-block: 0;
  left: 0;
  width: min(320px, 86vw);
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  padding: var(--sp-5);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.shop-filters[open] .shop-filters__panel {
  animation: shop-panel-in var(--t);
}

/* Closing runs the other way. A <details> stops rendering its content the
   instant it closes, so there is nothing left to animate -- shop.js holds it
   open, adds this class, and only closes it once the animation has finished.
   `forwards` keeps the panel off-screen for the gap between the two. */
.shop-filters.is-closing .shop-filters__panel {
  animation: shop-panel-out var(--t) forwards;
}

.shop-filters.is-closing::before {
  animation: shop-fade-out var(--t) forwards;
}

@keyframes shop-panel-in {
  from {
    transform: translateX(-100%);
  }
}

@keyframes shop-panel-out {
  to {
    transform: translateX(-100%);
  }
}

@keyframes shop-fade-in {
  from {
    opacity: 0;
  }
}

@keyframes shop-fade-out {
  to {
    opacity: 0;
  }
}

/* One of the panel's two dividing lines -- the other is above the price
   section. Same weight, same space either side, so they read as one device
   rather than two decisions. */
.shop-filters__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-bottom: var(--sp-5);
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--border);
}

.shop-filters__title {
  font-size: var(--fs-15);
  letter-spacing: var(--ls-5);
  margin: 0;
}

/* ---- Filter sections -----------------------------------------------------
   Sort, then size and colour, then price, each under a quiet label. */
.shop-filters__subtitle {
  font-family: var(--font-display);
  line-height: var(--lh-snug);
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: var(--ls-6);
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 var(--sp-2);
}

/* ---- Price ---------------------------------------------------------------
   WooCommerce's own widget, its own markup, and its own min_price/max_price
   parameters -- no template override, deliberately. An override is a second
   file that has to travel with this one, and a half-deployed pair renders
   WooCommerce's raw button in the middle of a borderless panel. Everything
   below is done by re-ordering and restyling the markup it already writes.

   The panel has no boxes and no borders except the one dividing line, so the
   controls here have none either: the readout is body text, the submit is a
   text action, and the fallback fields are underlined. */
/* Every section after the first carries the same dividing line, so the panel
   reads as one list broken into parts rather than several panels. The first
   sits under the head, which already draws one. */
.shop-filters__group + .shop-filters__group,
.shop-filters__group + .shop-filters__price {
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
}

.shop-filters__price .price_slider {
  position: relative;
  height: 2px;
  margin: var(--sp-4) 7px;
  background: var(--ib-200);
}

.shop-filters__price .ui-slider-range {
  position: absolute;
  z-index: 1;
  height: 100%;
  background: var(--heading);
}

.shop-filters__price .ui-slider-handle {
  position: absolute;
  z-index: 2;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  transform: translateY(-50%);
  background: var(--surface);
  border: 2px solid var(--heading);
  border-radius: 50%;
  cursor: grab;
  outline-offset: 3px;
}

/* Widens the grab area to 40px without widening the handle, so it is as easy
   to drag on a phone as it is to see. */
.shop-filters__price .ui-slider-handle::before {
  content: "";
  position: absolute;
  inset: -13px;
}

.shop-filters__price .ui-slider-handle:active {
  cursor: grabbing;
}

/* WooCommerce writes: inputs, submit, readout, hidden fields, clear. With the
   script running the inputs are hidden, so `order` puts the readout first and
   pushes the submit to the end of the row. */
.shop-filters__price .price_slider_amount {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  min-height: 30px;
}

.shop-filters__price .price_label {
  order: 1;
  font-size: var(--fs-14);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.shop-filters__price .price_slider_amount .button {
  order: 2;
  margin-left: auto;
  padding: 0 0 2px;
  min-height: 0;
  border: 0;
  border-bottom: 1px solid var(--ib-300);
  border-radius: 0;
  background: none;
  color: var(--text-muted);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-12);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-5);
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--t), border-color var(--t);
}

.shop-filters__price .price_slider_amount .button:hover {
  background: none;
  color: var(--heading);
  border-bottom-color: var(--heading);
}

/* Seen only when the script has not run -- then these are the control. */
.shop-filters__price .price_slider_amount input[type="text"] {
  width: 4.25rem;
  padding: .3rem .1rem;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: none;
  font-family: inherit;
  font-size: var(--fs-field);
  color: var(--text);
}

.shop-filters__price .price_slider_amount input[type="text"]:focus {
  border-bottom-color: var(--heading);
}

.shop-filters__price .clear {
  display: none;
}

/* ---- Rows ----------------------------------------------------------------
   No rules between rows: the one you are on is marked by weight, colour and
   its mark alone. Closed category branches sit tight, one under the next;
   an open one leaves a gap under its children so the next main category
   reads as a new group. */
.shop-filters__branch:has(> .shop-filters__list[data-expanded="true"]) {
  margin-bottom: var(--sp-2);
}

.shop-filters__branch-head {
  display: flex;
  align-items: center;
}

.shop-filters__row {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 30px;
  padding-block: .15rem;
  padding-left: calc(var(--depth, 0) * 1rem);
  font-size: var(--fs-14);
  color: var(--text);
  transition: color var(--t);
}

.shop-filters__label {
  flex: 1;
}

/* Top-level categories read as the heading of their branch: the display face,
   uppercase, at body size and in body ink rather than the heavy black of a
   title. Children are the detail under it: muted, and packed close so a
   branch reads as one block. The one you are on still turns bold and black
   through .is-on. */
.shop-filters__row--top {
  min-height: 36px;
}

.shop-filters__row--top .shop-filters__label {
  font-family: var(--font-display);
  line-height: var(--lh-snug);
  font-weight: 500;
  letter-spacing: var(--ls-2);
  text-transform: uppercase;
}

.shop-filters__row--sub {
  color: var(--text-muted);
}

.shop-filters__list {
  list-style: none;
  margin: var(--sp-1) 0 0;
  padding: 0;
}

.shop-filters__row:hover,
.shop-filters__row:hover .shop-filters__label {
  color: var(--heading);
}

.shop-filters__row.is-on .shop-filters__label {
  font-weight: 700;
  color: var(--heading);
}

/* ---- The mark ------------------------------------------------------------
   Every row carries one, and its shape says what the row does: a square for
   size and colour, which take several values at once, and a round one for
   the sort, which takes one. Same size, same ink, same fill when on -- the
   corner is the whole difference, the way it is on a form. */
.shop-filters__box {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1px solid var(--ib-300);
  transition: background-color var(--t), border-color var(--t);
}

.shop-filters__row--radio .shop-filters__box {
  border-radius: 50%;
}

.shop-filters__row--check:hover .shop-filters__box,
.shop-filters__row--radio:hover .shop-filters__box {
  border-color: var(--heading);
}

.shop-filters__row--check.is-on .shop-filters__box,
.shop-filters__row--radio.is-on .shop-filters__box {
  background-color: var(--heading);
  border-color: var(--heading);
}

/* The dot, for the one-at-a-time rows. */
.shop-filters__row--radio.is-on .shop-filters__box::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--surface);
}

/* The tick, drawn from two borders rather than shipping an icon for it.
   Centred by the grid above rather than by hand-placed offsets, so it stays
   centred if the box size ever changes. The 1px lift is optical: the rotated
   corner's ink sits below its own bounding box centre. */
.shop-filters__row--check.is-on .shop-filters__box::after {
  content: "";
  width: 4px;
  height: 8px;
  border: solid var(--surface);
  border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg);
}

/* ---- Collapsing a branch -------------------------------------------------
   The button ships hidden and the list ships open, so with no script every
   branch stays expanded and every category stays reachable. */
.shop-filters__collapse {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  color: var(--ib-300);
  cursor: pointer;
  transition: color var(--t), transform var(--t);
}

.shop-filters__collapse:hover {
  color: var(--heading);
}

.shop-filters__collapse[aria-expanded="false"] {
  transform: rotate(-90deg);
}

.shop-filters__list[data-expanded="false"] {
  display: none;
}

/* ---- Pagination ----------------------------------------------------------
   Markup comes from paginate_links(), so these are core's class names. */
.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem;
  margin-top: var(--sp-7);
}

.pagination .page-numbers {
  min-width: 42px;
  height: 42px;
  padding-inline: .6rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  font-family: var(--font-display);
  line-height: var(--lh-snug);
  font-weight: 600;
  font-size: var(--fs-14);
  letter-spacing: var(--ls-2);
  color: var(--text);
  transition: border-color var(--t), background-color var(--t), color var(--t);
}

.pagination a.page-numbers:hover {
  border-color: var(--heading);
}

.pagination .page-numbers.current {
  background: var(--heading);
  color: var(--bg);
  border-color: var(--heading);
}

.pagination .page-numbers.dots {
  border-color: transparent;
}

/* ---- Empty listing -------------------------------------------------------- */
.shop-empty {
  padding-block: var(--sp-8);
  text-align: center;
}

.shop-empty__message {
  color: var(--text-muted);
  margin-bottom: var(--sp-5);
}

@media (prefers-reduced-motion: reduce) {
  .shop-filters[open] .shop-filters__panel,
  .shop-filters.is-closing .shop-filters__panel,
  .shop-filters[open]::before,
  .shop-filters.is-closing::before {
    animation: none;
  }
}