/* ========================================
   FACETS — the shared filter vocabulary

   One filter language for every listing that narrows a catalogue: the category
   page and the search results. Both draw their panel from these rules, so a
   ticked box, a greyed-out option and a "clear all" mean the same thing on
   either page.

   A control here is a link, not a checkbox backed by script. The chosen state
   therefore travels in the address bar, survives a reload and a back button,
   and a shopper with JavaScript switched off still gets a working shop.

   The panel used to be a stack of cards — one box for the categories, one for
   two checkboxes, one for the price, one for the colours — each with its own
   border, its own corner and sixteen pixels of cream around it. Four boxes is
   four things to read before the first filter, so the card is the panel now
   and the groups inside it are separated by a hairline instead. What is left
   over is spent on the choices themselves.
   ======================================== */

/* One card, three bands: a head that stays, a body that scrolls, and a way out
   at the bottom. The head is outside the scrolling band, so "Filtri" and the
   number of filters in force never slide away behind a row of colours. */
.facet-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: var(--color-white);
  border: var(--border-width) solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-light);
}

.facet-panel__head {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 11px 14px;
  background: var(--color-cream);
  border-bottom: var(--border-width) solid var(--color-gray-200);
}

.facet-panel__title {
  margin: 0;
  color: var(--color-charcoal);
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: var(--font-weight-medium);
  line-height: 1.1;
}

/* The number of refinements, so the figure on the "Filtri" button below the
   grid has something to agree with. */
.facet-panel__count {
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--color-terracotta-strong);
  color: var(--color-white);
  font-size: 0.72rem;
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.facet-panel__clear {
  margin-left: auto;
  color: var(--color-gray-800);
  font-size: 0.8rem;
  font-weight: var(--font-weight-medium);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: var(--transition-fast);
}

.facet-panel__clear:hover {
  color: var(--color-terracotta-strong);
}

.facet-panel__clear:focus-visible {
  outline: var(--border-width-focus) solid var(--color-dusty-rose-strong);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* The band that grows. It scrolls on its own so the card stays exactly as tall
   as the room beside the goods, rather than pushing the page's own scrollbar
   around or hiding its tail behind a sticky clip. */
.facet-panel__body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--color-gray-300) transparent;
}

/* One heading, drawn as an overline rather than a headline: it names a band of
   choices, it does not compete with the name of the goods. */
.facet-group {
  flex: none;
  border-top: var(--border-width) solid var(--color-gray-200);
}

.facet-group:first-child {
  border-top: 0;
}

.facet-group__title,
.facet-group__summary {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 12px 14px;
  color: var(--color-gray-800);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-sm);
  text-transform: uppercase;
  list-style: none;
  cursor: pointer;
}

.facet-group__title {
  cursor: default;
}

.facet-group__summary::-webkit-details-marker {
  display: none;
}

.facet-group__summary:hover .facet-group__label {
  color: var(--color-charcoal);
}

.facet-group__summary:focus-visible {
  outline: var(--border-width-focus) solid var(--color-dusty-rose-strong);
  outline-offset: -2px;
  border-radius: var(--radius-md);
}

.facet-group__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: var(--transition-fast);
}

/* How many values of this one the shopper has already chosen. Said in the
   heading because a folded group would otherwise look untouched. */
.facet-group__pill {
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--color-dusty-rose);
  color: var(--color-charcoal);
  font-size: 0.68rem;
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  /* The heading it hangs in is set in capitals. A pill is not a heading: "no 100" is a phrase,
     and "NO 100" would read as a shout about a price. */
  letter-spacing: normal;
  text-transform: none;
}

.facet-group__chevron {
  flex: none;
  margin-left: auto;
  color: var(--color-gray-600);
  transition: transform var(--transition-fast);
}

.facet-group[open] .facet-group__chevron {
  transform: rotate(180deg);
}

.facet-group__body {
  padding: 0 10px 12px;
}

.facet-group__clear {
  color: var(--color-gray-800);
  font-size: 0.78rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: var(--transition-fast);
}

.facet-group__clear:hover {
  color: var(--color-terracotta-strong);
}

.facet-group__clear:focus-visible {
  outline: var(--border-width-focus) solid var(--color-dusty-rose-strong);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.facet-options {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* A colour is picked with the eye, and short names do not need a row each. Two
   columns put the whole palette in the space one list used. */
.facet-options--grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px 2px;
}

.facet-option {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 4px 7px;
  border-radius: var(--radius-md);
  color: var(--color-charcoal);
  font-size: 0.85rem;
  text-decoration: none;
  transition: var(--transition-fast);
}

.facet-option:hover {
  background: var(--color-cream);
}

.facet-option:focus-visible {
  outline: var(--border-width-focus) solid var(--color-dusty-rose-strong);
  outline-offset: -1px;
}

/* Chosen reads as chosen from across the room: the row is filled, not just its
   tick box, because the shopper is scanning the column for the one they picked. */
.facet-option--on {
  background: var(--color-dusty-rose-light);
  color: var(--color-charcoal);
  font-weight: var(--font-weight-medium);
}

.facet-option--on:hover {
  background: var(--color-dusty-rose);
}

/* The box that says "this is a filter you can tick". It is drawn, not a real
   checkbox, because the control is a link — but it must still read as a
   checkbox at a glance, or the panel stops looking like a filter. */
.facet-option__mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--color-gray-300);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-white);
  transition: var(--transition-fast);
}

.facet-option--on .facet-option__mark {
  background: var(--color-charcoal);
  border-color: var(--color-charcoal);
}

/* A value that names a colour shows the colour instead of a box. The ring on a
   selected swatch has to sit outside the fill, since the fill may be any hue. */
.facet-option__mark--swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border-color: rgba(45, 45, 45, 0.16);
}

.facet-option--on .facet-option__mark--swatch {
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-charcoal);
}

.facet-option__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.facet-option__count {
  flex: none;
  color: var(--color-gray-800);
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
}

.facet-option--on .facet-option__count {
  color: var(--color-charcoal);
}

/* Reachable in theory, empty in practice. Kept in place and quiet rather than
   deleted: a colour that has gone missing from a category should read as sold
   out there, not as a filter panel that changes shape for no reason. */
.facet-option--empty {
  opacity: var(--opacity-disabled-strong);
}

.facet-option--empty .facet-option__mark {
  border-style: dashed;
}

/* The one-tick filters, drawn as chips because that is what they are: a thing
   you either want or do not, not a value chosen out of a list. */
.facet-quick {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 14px;
  border-top: var(--border-width) solid var(--color-gray-200);
}

.facet-quick:first-child {
  border-top: 0;
}

.facet-quick__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 6px 11px;
  border: var(--border-width) solid var(--color-gray-200);
  border-radius: var(--radius-pill);
  background: var(--color-white);
  color: var(--color-gray-800);
  font-size: 0.8rem;
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition: var(--transition-fast);
}

.facet-quick__chip:hover {
  border-color: var(--color-dusty-rose);
  background: var(--color-cream);
  color: var(--color-charcoal);
}

.facet-quick__chip:focus-visible {
  outline: var(--border-width-focus) solid var(--color-dusty-rose-strong);
  outline-offset: 1px;
}

.facet-quick__chip--on {
  background: var(--color-dusty-rose);
  border-color: var(--color-dusty-rose);
  color: var(--color-charcoal);
}

.facet-quick__chip--on:hover {
  background: var(--color-dusty-rose-light);
  border-color: var(--color-dusty-rose-light);
}

/* The tick only earns its place once the chip is on: an empty circle waiting to
   be filled is the shape of a form, not of a filter. */
.facet-quick__tick {
  flex: none;
  display: none;
}

.facet-quick__chip--on .facet-quick__tick {
  display: block;
}

.facet-quick__count {
  flex: none;
  color: var(--color-gray-800);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

.facet-quick__chip--on .facet-quick__count {
  color: var(--color-charcoal);
}

/* The way out of an empty result, and the answer to "which filters are on", drawn in the
   voice of the panel beside it rather than as a third button style. */
.catalog__chips {
  row-gap: var(--space-xs);
}

/* The last word in the rail: not a filter, but the one place a stuck shopper
   can ask. Kept to a line so the choices above it get the height. */
.facet-panel__help {
  flex: none;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 10px;
  row-gap: 2px;
  padding: 12px 14px;
  background: var(--color-cream);
  border-top: var(--border-width) solid var(--color-gray-200);
}

.facet-panel__help-icon {
  grid-row: span 2;
  align-self: center;
  color: var(--color-dusty-rose-strong);
}

.facet-panel__help-text {
  color: var(--color-gray-600);
  font-size: 0.8rem;
  line-height: 1.4;
}

.facet-panel__help-link {
  justify-self: start;
  color: var(--color-terracotta-strong);
  font-size: 0.8rem;
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: var(--transition-fast);
}

.facet-panel__help-link:hover {
  color: var(--color-charcoal);
}

.facet-panel__help-link:focus-visible {
  outline: var(--border-width-focus) solid var(--color-dusty-rose-strong);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}


/* Category navigation drawn in the filter's voice: the same row, the same
   count on the right, the current place marked. */
.facet-nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0 10px 12px;
}

.facet-nav__up {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: start;
  margin: 0 7px 6px;
  padding: 3px 0;
  color: var(--color-terracotta-strong);
  font-size: 0.78rem;
  font-weight: var(--font-weight-medium);
  transition: var(--transition-fast);
}

.facet-nav__up:hover {
  color: var(--color-charcoal);
}

.facet-nav__up:focus-visible {
  outline: var(--border-width-focus) solid var(--color-dusty-rose-strong);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.facet-nav__link {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-xs);
  padding: 6px 7px;
  border-radius: var(--radius-md);
  color: var(--color-charcoal);
  font-size: 0.83rem;
  line-height: 1.3;
  transition: var(--transition-fast);
}

.facet-nav__link:hover {
  background: var(--color-cream);
}

.facet-nav__link:focus-visible {
  outline: var(--border-width-focus) solid var(--color-dusty-rose-strong);
  outline-offset: -1px;
}

/* A catalogue name that does not fit is broken in half rather than cut short:
   "Čaukstošie kvadrātiņi a…" is not a name a shopper can choose between two
   nearly identical collections by. The count hangs at the top of the row so it
   stays on one line no matter how many the label needs. */
.facet-nav__name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.facet-nav__link--current {
  background: var(--color-dusty-rose-light);
  font-weight: var(--font-weight-semibold);
}

.facet-nav__count {
  flex: none;
  padding-top: 1px;
  color: var(--color-gray-800);
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
}

.facet-nav__link--current .facet-nav__count {
  color: var(--color-charcoal);
}

/* The fold at the end of a long list. Hidden until the script has something to
   fold, so it is never a button that reveals nothing. */
.facet-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: calc(100% - 14px);
  margin: 2px 7px 0;
  padding: 6px 8px;
  border: var(--border-width) dashed var(--color-gray-300);
  border-radius: var(--radius-md);
  color: var(--color-gray-800);
  font-size: 0.78rem;
  font-weight: var(--font-weight-medium);
  transition: var(--transition-fast);
}

.facet-more:hover {
  border-color: var(--color-dusty-rose);
  border-style: solid;
  background: var(--color-cream);
  color: var(--color-charcoal);
}

.facet-more:focus-visible {
  outline: var(--border-width-focus) solid var(--color-dusty-rose-strong);
  outline-offset: 1px;
}

.facet-more__chevron {
  transition: transform var(--transition-fast);
}

.facet-more[aria-expanded="true"] .facet-more__chevron {
  transform: rotate(180deg);
}

/* The price form is the one control that has to type rather than click, so it
   is the one control that carries a button. */
.price-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: 0 7px 8px;
}

.price-form__row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.price-form__field {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 6px 8px;
  background: var(--color-white);
  border: var(--border-width) solid var(--color-gray-200);
  border-radius: var(--radius-md);
  transition: var(--transition-fast);
}

.price-form__field:focus-within {
  border-color: var(--color-dusty-rose);
  box-shadow: var(--focus-ring);
}

.price-form__caption {
  flex: none;
  color: var(--color-gray-600);
  font-size: 0.75rem;
}

.price-form__input {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-charcoal);
  font-family: var(--font-body);
  font-size: 0.85rem;
  appearance: textfield;
  -moz-appearance: textfield;
}

.price-form__input::-webkit-outer-spin-button,
.price-form__input::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
}

.price-form__input:focus {
  outline: none;
}

.price-form__input::placeholder {
  color: var(--color-gray-300);
}

.price-form__dash {
  flex: none;
  color: var(--color-gray-600);
}

.price-form__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.price-form__submit {
  flex: 1 1 auto;
}

/* The sheet is the page's top layer while it is open; the shop behind it must
   hold still rather than scroll out from under a panel in use. */
body.has-filter-sheet {
  overflow: hidden;
}
/* ========================================
   A SELECT THAT LOOKS LIKE THE REST OF THE PANEL
   ======================================== */
.select-shell {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.select-shell__control {
  padding: 9px 34px 9px 12px;
  border: var(--border-width) solid var(--color-gray-200);
  border-radius: var(--radius-md);
  background: var(--color-white);
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--color-charcoal);
  cursor: pointer;
  appearance: none;
  transition: var(--transition-fast);
}

.select-shell__control:hover {
  border-color: var(--color-dusty-rose);
}

.select-shell__control:focus-visible {
  outline: none;
  border-color: var(--color-dusty-rose);
  box-shadow: var(--focus-ring);
}

.select-shell__chevron {
  position: absolute;
  right: 12px;
  pointer-events: none;
  color: var(--color-gray-600);
}

/* ========================================
   CHIPS — the filters currently in force
   ======================================== */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  background: var(--color-white);
  border: var(--border-width) solid var(--color-gray-200);
  border-radius: var(--radius-pill);
  font-size: 0.83rem;
  color: var(--color-charcoal);
}

.chip__label {
  /* Long enough for the longest thing a filter can be called — "Tikai uzreiz pieejamās" — so a
     chip never truncates the very filter the shopper is being asked to let go of. */
  max-width: 24ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chip--removable svg {
  flex: none;
  color: var(--color-gray-600);
  transition: var(--transition-fast);
}

.chip--removable:hover {
  border-color: var(--color-terracotta);
  color: var(--color-terracotta-strong);
}

.chip--removable:hover svg {
  color: var(--color-terracotta-strong);
  transform: rotate(90deg);
}

.chip--removable:focus-visible {
  outline: var(--border-width-focus) solid var(--color-dusty-rose-strong);
  outline-offset: 2px;
}

/* ========================================
   THE SAME PANEL AS A SHEET, ON SMALL SCREENS
   ======================================== */
.filter-sheet {
  width: 100%;
  max-width: min(520px, 100%);
  max-height: min(86vh, 720px);
  margin: auto auto 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-charcoal);
}

.filter-sheet::backdrop {
  background: rgba(45, 45, 45, var(--opacity-bg-overlay));
}

.filter-sheet[open] {
  animation: filterSheetIn var(--transition-smooth);
}

@keyframes filterSheetIn {
  from {
    transform: translateY(16px);
    opacity: 0;
  }

  to {
    transform: none;
    opacity: 1;
  }
}

.filter-sheet__frame {
  display: flex;
  flex-direction: column;
  max-height: inherit;
  background: var(--color-cream);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: var(--shadow-modal);
}

.filter-sheet__header {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-white);
  border-bottom: var(--border-width) solid var(--color-gray-200);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.filter-sheet__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: var(--font-weight-medium);
}

.filter-sheet__close {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: var(--border-width) solid var(--color-gray-200);
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-charcoal);
  transition: var(--transition-fast);
}

.filter-sheet__close:hover {
  border-color: var(--color-dusty-rose);
  color: var(--color-terracotta-strong);
}

/* A dialog focuses its first control on open, and the browser's own ring is a
   blue circle that belongs to no part of this shop. */
.filter-sheet__close:focus-visible {
  outline: var(--border-width-focus) solid var(--color-dusty-rose-strong);
  outline-offset: 2px;
}

.filter-sheet__body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-sm) var(--space-sm) var(--space-md);
}

/* Once the panel is carried into the sheet it is the sheet that scrolls and it
   is the sheet header that says "Filtri". The panel gives both up — a scrolling
   card inside a scrolling sheet, under a second heading, is the same three
   nested boxes the rail just stopped being. The card itself stays: on the
   sheet's cream it is the one white thing holding the choices together. */
.facet-panel[data-facet-moved] {
  max-height: none;
}

.facet-panel[data-facet-moved] .facet-panel__head {
  display: none;
}

.facet-panel[data-facet-moved] .facet-panel__body {
  overflow: visible;
}

.filter-sheet__footer {
  flex: none;
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-white);
  border-top: var(--border-width) solid var(--color-gray-200);
}

.filter-sheet__footer .btn {
  flex: 1 1 0;
}

/* Above the tablet line the panel lives in the sidebar and a sheet over the
   page would only cover what it is meant to help with. */
@media (min-width: 1024px) {
  .filter-sheet {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .filter-sheet[open] {
    animation: none;
  }

  .facet-group__chevron,
  .facet-more__chevron,
  .chip--removable:hover svg {
    transition: none;
    transform: none;
  }
}