/* Catalog filters and product actions — warm cream, brass and forest palette. */
.filter-panel {
  border: 1px solid #e2d2b2;
  border-radius: 16px;
  background: linear-gradient(145deg, #fffdf8 0%, #f7f0e3 100%);
  box-shadow: 0 10px 26px rgba(34, 29, 21, .08), inset 0 1px 0 rgba(255, 255, 255, .9);
}

.filter-title strong {
  color: #173b31;
  font-weight: 800;
}

.filter-title button {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid #ddc59c;
  border-radius: 9px;
  background: linear-gradient(145deg, #fff8e9, #f3e4c4);
  color: #5b4223;
  font-weight: 700;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.filter-title button:hover {
  transform: translateY(-1px);
  border-color: #c79e58;
  background: #efddba;
  box-shadow: 0 4px 10px rgba(80, 57, 24, .1);
}

.filter-group label {
  color: #294739;
}

.filter-field {
  border-color: #ddceb3;
  border-radius: 10px;
  background: rgba(255, 253, 248, .96);
  color: #20382f;
  box-shadow: inset 0 1px 2px rgba(62, 46, 27, .035), 0 1px 2px rgba(62, 46, 27, .025);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.filter-field:hover:not(:disabled) {
  border-color: #c8aa73;
  background: #fffefa;
}

.filter-field:focus-visible {
  outline: none;
  border-color: #b84a27;
  background: #fffefa;
  box-shadow: 0 0 0 3px rgba(184, 74, 39, .14), 0 4px 10px rgba(16, 36, 30, .07);
}

.filter-field:disabled {
  border-color: #e4ddd1;
  border-radius: 10px;
  background: #f0ede6;
  color: #898277;
}

.filter-apply-button {
  border: 1px solid #c7a45e;
  border-radius: 10px;
  background: linear-gradient(145deg, #21483b, #123329);
  color: #fffdf7;
  box-shadow: 0 4px 11px rgba(19, 49, 39, .16), inset 0 1px 0 rgba(255, 255, 255, .13);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.filter-apply-button:hover {
  transform: translateY(-1px);
  background: linear-gradient(145deg, #285343, #173d31);
  box-shadow: 0 7px 15px rgba(19, 49, 39, .2);
}

.card-actions .button:first-child {
  border: 1px solid #d8c39a;
  border-radius: 9px;
  background: linear-gradient(145deg, #fffdf8, #f4ead8);
  color: #193c31;
  box-shadow: 0 2px 6px rgba(57, 43, 25, .08), inset 0 1px 0 rgba(255, 255, 255, .9);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}

.card-actions .button:first-child:hover {
  transform: translateY(-1px);
  border-color: #cba45f;
  background: linear-gradient(145deg, #21483b, #123329);
  color: #fffdf7;
  box-shadow: 0 6px 13px rgba(19, 49, 39, .18);
}

.card-actions .button:last-child[data-favorite],
.card-actions .button:last-child[data-unfavorite] {
  border: 1px solid #ddc38f;
  border-radius: 9px;
  background: linear-gradient(145deg, #fffdf8, #f5e8ca);
  color: #a7472a;
  font-size: 20px;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(57, 43, 25, .08), inset 0 1px 0 rgba(255, 255, 255, .9);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}

.card-actions .button:last-child[data-favorite]:hover,
.card-actions .button:last-child[data-unfavorite]:hover {
  transform: translateY(-1px);
  border-color: #cba45f;
  background: linear-gradient(145deg, #21483b, #123329);
  color: #f5d48d;
  box-shadow: 0 6px 13px rgba(19, 49, 39, .18);
}

.filter-title button:focus-visible,
.filter-apply-button:focus-visible,
.card-actions .button:focus-visible {
  outline: 3px solid rgba(184, 74, 39, .28);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .filter-title button,
  .filter-field,
  .filter-apply-button,
  .card-actions .button {
    transition: none;
  }
}


/* Keep iOS Safari from auto-zooming when a customer focuses a form control. */
@media (max-width: 768px) {
  #app input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
  #app select,
  #app textarea {
    font-size: 16px;
  }
}