/* Load after style.css. Reuse existing marks; never create another underline. */

/* Keyboard feedback keeps the site's existing :focus-visible outline. */
#nav a:focus-visible,
.header > .header-contact:focus-visible,
.filter-row > .filter:focus-visible,
.tea-tabs > button:focus-visible,
.collection-pagination > button:not(:disabled):focus-visible {
  color: var(--text);
}

.collection-pagination .page-numbers > button:focus-visible > span {
  background: var(--text);
}

.header > .header-contact:focus-visible svg,
:where(.hero, .philosophy, .tea, .visit, .footer) .line-link:focus-visible svg {
  opacity: 1;
}

#product-grid .product-card:focus-visible .product-name { color: var(--accent); }
#product-grid .product-card:focus-visible .product-subtitle { color: #c0c8bd; }

/* Mouse-only polish; selected navigation, filters and tabs keep their line. */
@media (hover: hover) and (pointer: fine) {
  #nav a,
  .header > .header-contact,
  .filter-row > .filter,
  .tea-tabs > button,
  .collection-pagination > button:not(:disabled) {
    transition: color .28s ease;
  }

  #nav a::after,
  .filter-row > .filter::after,
  .tea-tabs > button::after {
    transform-origin: 100% 50%;
    transition: transform .46s var(--ease, ease), opacity .28s ease;
  }

  #nav a.current:hover::after,
  .filter-row > .filter[aria-pressed='true']:hover::after,
  .tea-tabs > button[aria-selected='true']:hover::after {
    transform: scaleX(.88);
    transform-origin: 0 50%;
    opacity: .82;
  }

  #nav a.current::after,
  .filter-row > .filter[aria-pressed='true']::after,
  .tea-tabs > button[aria-selected='true']::after {
    transform: scaleX(1);
    transform-origin: 0 50%;
    opacity: 1;
  }

  #nav a:hover,
  .header > .header-contact:hover,
  .filter-row > .filter:hover,
  .tea-tabs > button:hover,
  .collection-pagination > button:not(:disabled):hover {
    color: var(--text);
  }

  .header > .header-contact svg,
  :where(.hero, .philosophy, .tea, .visit, .footer) .line-link svg {
    opacity: .68;
    transition: opacity .3s ease;
  }

  .header > .header-contact:hover svg,
  .header > .header-contact:focus-visible svg,
  :where(.hero, .philosophy, .tea, .visit, .footer) .line-link:hover svg,
  :where(.hero, .philosophy, .tea, .visit, .footer) .line-link:focus-visible svg {
    opacity: 1;
  }

  :where(.hero, .philosophy, .tea, .visit, .footer) .line-link {
    transition: color .3s ease, border-color .35s ease;
  }

  /* The real pagination has fixed buttons containing one existing line span. */
  .collection-pagination .page-numbers > button > span {
    transform-origin: 50% 50%;
    transition: width .45s var(--ease, ease), background-color .28s ease,
      transform .4s var(--ease, ease);
  }

  .collection-pagination .page-numbers > button:hover > span,
  .collection-pagination .page-numbers > button:focus-visible > span {
    background: var(--text);
    transform: scaleX(1.15);
  }

  .collection-pagination .page-numbers > button[aria-current='page'] > span {
    transform: none;
  }

  .collection-pagination .page-numbers > button[aria-current='page']:hover > span {
    transform: scaleX(.88);
  }

  /* Only captions respond. Do not layer a hover zoom over the scroll animation. */
  #product-grid .product-card .product-name,
  #product-grid .product-card .product-subtitle {
    transition: color .32s ease;
  }

  #product-grid .product-card:hover .product-name { color: var(--accent); }
  #product-grid .product-card:hover .product-subtitle { color: #c0c8bd; }
  #product-grid .product-card:hover .product-photo img { transform: none; }
}

/* Neutralise legacy sticky :hover on touch while preserving selected and focus states. */
@media (hover: none), (pointer: coarse) {
  #nav a:hover:not(.current):not(:focus-visible),
  .filter-row > .filter:hover[aria-pressed='false']:not(:focus-visible),
  .tea-tabs > button:hover[aria-selected='false']:not(:focus-visible),
  .collection-pagination > button:not(:disabled):hover:not(:focus-visible) {
    color: var(--soft);
  }

  .collection-pagination .page-numbers > button:hover:not([aria-current='page']):not(:focus-visible) > span {
    background: #465047;
  }

  .collection-pagination .page-numbers > button[aria-current='page']:hover > span {
    background: var(--text);
  }

  :where(.hero, .tea, .footer) .line-link:hover:not(:focus-visible) {
    color: var(--text);
    border-color: #b7bcaa;
  }

  .philosophy .line-link:hover:not(:focus-visible) {
    color: var(--text);
    border-color: currentColor;
  }

  .visit .visit-actions > .line-link:hover:not(:focus-visible) {
    color: var(--soft);
    border-color: transparent;
  }

  #product-grid .product-card:hover .product-photo img { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  #nav a,
  #nav a::after,
  .header > .header-contact,
  .header > .header-contact svg,
  .filter-row > .filter,
  .filter-row > .filter::after,
  .tea-tabs > button,
  .tea-tabs > button::after,
  .collection-pagination > button,
  .collection-pagination .page-numbers > button,
  .collection-pagination .page-numbers > button > span,
  :where(.hero, .philosophy, .tea, .visit, .footer) .line-link,
  :where(.hero, .philosophy, .tea, .visit, .footer) .line-link svg,
  #product-grid .product-card .product-name,
  #product-grid .product-card .product-subtitle,
  #product-grid .product-card .product-photo img {
    transition: none !important;
    animation: none !important;
  }
}