/* X58 Cartel — red text hyperlinks

   Scope: body copy only. Everything here is scoped to <main class="content-for-layout">,
   so header nav, mega-menu, and the footer link columns keep their white text.
   Buttons and product-card title links are excluded explicitly / structurally.

   Horizon ships links as `color: currentcolor` with no link token at all, so this
   file introduces one. Change --color-link below to restyle every text link.

   The :root prefix is only there to out-specify the matching rules in base.css
   (which land at 0,2,2 and 0,2,3). Horizon has no @layer, so it is plain
   specificity + source order. */

:root {
  --color-link: #e10600;
  --color-link-hover: #ff3b30;
}

:root .content-for-layout p:not(.h1, .h2, .h3, .h4, .h5, .h6) a:where(:not(.button, .button-secondary, .button-custom, .button-unstyled)),
:root .content-for-layout .rte :is(p, ul, ol, table):not(.h1, .h2, .h3, .h4, .h5, .h6) a:where(:not(.button, .button-secondary, .button-custom, .button-unstyled)),
:root .content-for-layout .page-content a:where(:not(.button, .button-secondary, .button-custom, .button-unstyled)) {
  color: var(--color-link);
  text-decoration-color: currentcolor;

  &:visited {
    color: var(--color-link);
  }

  &:hover,
  &:focus-visible {
    color: var(--color-link-hover);
    text-decoration-color: currentcolor;
  }
}

/* X58 Cartel — product page layout (2026-09-24)
   Media column is 20% narrower than Horizon's default (2fr 1fr = 66.7% -> 53.3%),
   giving the product details column 46.7% instead of 33.3%. Tablet/desktop only;
   mobile stacks as before. :root prefix out-specifies the rules in
   snippets/product-information-content.liquid. */
@media screen and (min-width: 750px) {
  :root .product-information__grid:not(.product-information__grid--half, .product-information--media-none).product-information--media-left {
    grid-template-columns: 53.3% 46.7%;
  }

  :root .product-information__grid:not(.product-information__grid--half, .product-information--media-none).product-information--media-right {
    grid-template-columns: 46.7% 53.3%;
  }

  /* Let description text fill the wider column instead of stopping at the text block's max width */
  :root .product-details .text-block,
  :root .product-details :is(p, li, ul, ol, table, h2, h3, h4, blockquote) {
    max-width: 100%;
  }
}