/**
 * TransferJet — catalog surfaces that are not the card, the filter panel or
 * the pager.
 *
 * Two of them so far: attribute swatches, which appear both on the product
 * page and inside layered navigation, and the previous/next controls on the
 * product sliders (related, up-sell, cross-sell). Neither belongs in
 * product-card.css, filters.css or pagination.css, and both are one rule.
 */

/* ---------------------------------------------------------------------------
   The swatch ring.

   Hyvä UI's components/swatches.css paints hover, selected and focus from a
   single token, --form-active-color, which resolves to --color-primary. That
   put a #c11422 ring on a selected swatch, which reads as an alert rather than
   a selection — red on this site means the one action that leaves the page.

   Re-pointing the token rather than rewriting the three rules. The component
   keeps its own structure, so it stays diffable against a future Hyvä UI
   release, and only swatches are affected: --form-active-color is also what
   draws the focus border on every text input and select on the site, and those
   stay red.

   All three states move together. Selected in near-black with hover still red
   would be two colours doing one job, and the eye would read the red as the
   stronger state.

   The class is doubled deliberately. Hyvä UI's own rules are a bare
   .swatch-option, so a single class here is a tie broken by source order —
   which is decided by layout merge between the parent theme's
   default_head_blocks.xml and this theme's default.xml, and is not something
   worth depending on. Two classes wins outright. There is no useful ancestor
   to scope to instead: swatches render under .product-info-main on the product
   page and inside the filter list in layered navigation, and both need this.
   --------------------------------------------------------------------------- */

.swatch-option.swatch-option {
    --form-active-color: #1f1a16;
}

/* ---------------------------------------------------------------------------
   Product slider previous/next.

   Hyva_Theme::elements/slider.phtml renders both as `btn btn-secondary`, and
   in this theme btn-secondary hovers to --color-primary-lighter (#e92939).
   Against white that is the palest red on the site, so the arrow gets fainter
   at exactly the moment it is being pointed at. Pressed is already right:
   --btn-active-bg is --color-primary with a white glyph.

   Hover moves to --color-primary, which sits between the #8a0e18 resting
   colour and the filled pressed state instead of jumping past both.

   Only the two nav buttons, matched on the data attributes the slider's Alpine
   component binds to. .snap-slider .btn-secondary would have been shorter and
   would also have caught any secondary button inside a slide.

   --btn-hover-bg is left alone. The lighter red still earns its place as a
   fill on .btn-primary, where it lightens a solid ground rather than thinning
   a 1px glyph.
   --------------------------------------------------------------------------- */

.snap-slider [data-prev],
.snap-slider [data-next] {
    --btn-hover-color: var(--color-primary);
    --btn-hover-stroke: var(--color-primary);
}

/* ---------------------------------------------------------------------------
   The gallery's own controls, including the lightbox.

   Same problem, different hooks. #gallery carries `snap-slider` itself and its
   preview arrows carry data-prev/data-next, so the rule above already reached
   them — but the lightbox arrows bind on @click="navigateLightboxPrev" with no
   data attribute, and the close button has neither. Both were left behind.

   Every control in the gallery is built from one string, $btnCssClasses:
   `btn btn-secondary border-transparent p-1 rounded-full shadow-sm`. Matching
   on btn-secondary inside #gallery catches the whole set at once, including
   the preview arrows a second time, harmlessly.

   --btn-hover-stroke is not redundant despite border-transparent sitting in
   that class string. The compiled rule is `.btn:hover { border-color: … }` at
   (0,1,1), and the utility is (0,1,0), so the border loses on hover — which
   put a pale red ring around a button that has no border at rest. It is the
   more visible half of the problem on the round controls.

   Hover only. The lightbox arrows carry :disabled bindings for the first and
   last image, and those are meant to stay in charge.
   --------------------------------------------------------------------------- */

#gallery .btn-secondary {
    --btn-hover-color: var(--color-primary);
    --btn-hover-stroke: var(--color-primary);
}