/**
 * The shop catalog grid.
 *
 * Follows the same specification the configurator and cart already do: Sora for
 * headings and prices, Inter for everything else, and the corrected text
 * colours. The theme sets body text to #7A7A7A on its near black background,
 * which measures 4.05:1 and falls below the 4.5:1 normal size text needs. That
 * is the "really light and hard to read" the shop reported, so the catalog does
 * not inherit it.
 *
 * Layout inherits the theme's own colours where it can and only sets its own
 * where legibility depends on it.
 *
 * Everything is scoped to the shop path. The rest of the site is untouched.
 */

.path-shop {
  --ink: #F5F5F3;
  --ink-2: #C7CBD1;
  --muted: #9299A3;
  --accent: #E33B4F;
  --accent-bright: #E5485D;
  --line: #2A2D33;
  --panel: #15171A;
  --placeholder: #2A2D33;
  --font-head: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/*
 * The theme's body rule loads after this file, so setting colour on body would
 * lose. This selects the content region instead, which is more specific than
 * the rule being corrected and still covers the whole catalog.
 */
.path-shop .main-content {
  font-family: var(--font-body);
  color: var(--ink-2);
}

/* ---------- the group filter ---------- */

/*
 * Left as a single row so the control reads as one thing. The theme stretches
 * form buttons to fill their container, which is what turns the Filter button
 * into a band across half the page.
 */
.path-shop .views-exposed-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.path-shop .views-exposed-form .form-item {
  margin: 0;
}

.path-shop .views-exposed-form label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.path-shop .views-exposed-form select {
  min-width: 220px;
  padding: 8px 12px;
  font-family: var(--font-body);
  font-size: 15px;
}

.path-shop .views-exposed-form .form-actions {
  display: flex;
  gap: 8px;
  margin: 0;
}

.path-shop .views-exposed-form .form-actions input {
  width: auto;
  padding: 9px 22px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
}

/* ---------- the grid ---------- */

.path-shop .ua-catalog .view-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 32px 24px;
}

.path-shop .ua-catalog__item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

/* ---------- the photograph ---------- */

/*
 * A fixed square keeps every card the same height whatever the photograph is,
 * which is why the shop is asked for square images on a consistent background.
 * The placeholder is deliberate rather than an empty gap, because products are
 * entered before their photographs arrive and a collapsed card reads as broken.
 */
.path-shop .ua-catalog__media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
}

/*
 * The whole photograph, scaled to fit the square, on white. Most of the
 * shop's photographs are wider than they are tall, and squeezing them into
 * the square distorted every part shown. White matches the plain backgrounds
 * of the manufacturers' product shots, so the margins left over read as part
 * of the photograph.
 *
 * Positioned against the square itself, because the media markup wraps the
 * image in elements of no fixed height that a percentage height cannot fill.
 */
.path-shop .ua-catalog__media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.path-shop .ua-catalog__media:has(img) {
  background: #FFFFFF;
}

/*
 * A plain square where a product or a group has no photograph yet. Products
 * are entered before their photographs arrive, and a solid square keeps the
 * grid even without announcing what is missing.
 */
.path-shop .ua-catalog__media:not(:has(img)) {
  background: var(--placeholder);
}

/* ---------- the whole card is the link ---------- */

/*
 * The photograph opens the product as well as the name. Rather than wrap a
 * second link round the photograph, the name's link is stretched over the
 * whole card, so a keyboard or screen reader user meets one link per product
 * rather than two pointing at the same page.
 */
.path-shop .ua-catalog__item {
  position: relative;
}

.path-shop .ua-catalog__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.path-shop .ua-catalog__item:hover .ua-catalog__media,
.path-shop .ua-catalog__item:focus-within .ua-catalog__media {
  border-color: var(--accent-bright);
}

/* ---------- the group tiles ---------- */

/*
 * A group's tile is a single link, photograph and name together, laid out as
 * a product card so the two pages read as one shop.
 */
.path-shop .ua-category {
  color: inherit;
  text-decoration: none;
}

.path-shop .ua-category .ua-catalog__title {
  color: var(--ink);
}

.path-shop .ua-category:hover .ua-catalog__title,
.path-shop .ua-category:focus .ua-catalog__title {
  color: var(--accent-bright);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.path-shop .ua-shop-categories__heading,
.path-shop .ua-vehicle-selector__heading {
  margin: 0 0 18px;
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
}

/*
 * Two to a row on a phone. One full-width square per group would make the
 * visitor scroll past several screens of photographs to find theirs.
 */
@media (max-width: 759px) {
  .path-shop .ua-shop-categories .view-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 14px;
  }

  .path-shop .ua-shop-categories .ua-catalog__title {
    font-size: 15px;
  }
}

.path-shop .ua-shop-categories__empty {
  padding: 16px 0;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink-2);
}

/* ---------- the vehicle selector ---------- */

.path-shop .ua-vehicle-selector {
  margin-bottom: 40px;
  padding: 22px 24px 24px;
  background: var(--panel);
  border: 1px solid var(--line);
}

.path-shop .ua-vehicle-selector__current {
  margin: -8px 0 18px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink-2);
}

.path-shop .ua-vehicle-selector__current a {
  margin-left: 8px;
  font-weight: 600;
  color: var(--accent-bright);
}

.path-shop .ua-vehicle-selector__form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
}

/* The lists share each row, two to a row on a phone and all on one at desk. */
.path-shop .ua-vehicle-selector__field {
  flex: 1 1 150px;
  margin: 0;
}

.path-shop .ua-vehicle-selector__field[hidden] {
  display: none;
}

.path-shop .ua-vehicle-selector label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.path-shop .ua-vehicle-selector select {
  width: 100%;
  padding: 8px 12px;
  font-family: var(--font-body);
  font-size: 15px;
}

.path-shop .ua-vehicle-selector__submit {
  flex: 0 0 auto;
  width: auto;
  padding: 10px 24px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: #FFFFFF;
  background: var(--accent);
  border: 0;
  cursor: pointer;
}

.path-shop .ua-vehicle-selector__submit:hover,
.path-shop .ua-vehicle-selector__submit:focus {
  background: var(--accent-bright);
}

.path-shop .ua-vehicle-selector__submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ---------- the card text ---------- */

.path-shop .ua-catalog__title {
  margin: 0;
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}

.path-shop .ua-catalog__title a {
  color: var(--ink);
  text-decoration: none;
}

.path-shop .ua-catalog__title a:hover,
.path-shop .ua-catalog__title a:focus {
  color: var(--accent-bright);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.path-shop .ua-catalog__price {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.path-shop .ua-catalog__summary {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
}

.path-shop .ua-catalog__summary p {
  margin: 0;
}

/* ---------- the product page ---------- */

/*
 * The other half of the catalog. Same tokens, because a customer arriving from
 * the grid should not feel they have left it.
 */
.path-product {
  --ink: #F5F5F3;
  --ink-2: #C7CBD1;
  --muted: #9299A3;
  --accent-bright: #E5485D;
  --line: #2A2D33;
  --font-head: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

.path-product .main-content {
  font-family: var(--font-body);
  color: var(--ink-2);
}

.path-product .main-content .field--name-field-product-images img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--line);
}

/* The price Commerce renders through the variation, above the cart button. */
.path-product .main-content .field--name-price {
  margin: 16px 0 8px;
  font-family: var(--font-head);
  font-size: 26px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* The vehicles a part fits, under its description. */
.path-product .field--name-field-fitment {
  margin-top: 20px;
}

.path-product .field--name-field-fitment .field__label {
  margin-bottom: 6px;
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.path-product .ua-fitment {
  margin: 0;
  padding-left: 20px;
}

.path-product .ua-fitment li {
  margin: 2px 0;
}

.path-product .ua-product__more {
  display: inline-block;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--accent-bright);
  text-decoration: none;
}

.path-product .ua-product__more:hover,
.path-product .ua-product__more:focus {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- nothing to show ---------- */

.path-shop .view-empty {
  padding: 32px 0;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink-2);
}

.path-shop .view-empty a {
  color: var(--accent-bright);
}