/* nox_custom.css
   Generated by brand-kit-extractor 0.1.0 from brand.tokens.json; rebuild with build_swift2.py.
   Loaded after swift.css and the Style assets through Custom/NoxHeadInclude.cshtml.
   Button fills and label colours come from the colour scheme JSON; this sheet only sets
   hover, focus and shape details on top of them. */

:root {
  --nox-brandkit: "0.1.0";
  --nox-primary: #f04e3e;
  --nox-primary-rgb: 240, 78, 62;
  --nox-secondary: #000000;
  --nox-secondary-rgb: 0, 0, 0;
  --nox-accent: #0071ce;
  --nox-accent-rgb: 0, 113, 206;
  --nox-text: #3d3d3d;
  --nox-text-rgb: 61, 61, 61;
  --nox-muted: #686868;
  --nox-muted-rgb: 104, 104, 104;
  --nox-bg: #ffffff;
  --nox-bg-rgb: 255, 255, 255;
  --nox-bg-subtle: #f7f7f7;
  --nox-bg-subtle-rgb: 247, 247, 247;
  --nox-bg-inverse: #0d0c0c;
  --nox-bg-inverse-rgb: 13, 12, 12;
  --nox-link: #0d0c0c;
  --nox-link-rgb: 13, 12, 12;
  --nox-link-hover: #3d3d3d;
  --nox-link-hover-rgb: 61, 61, 61;
  --nox-border: #cfcfcf;
  --nox-border-rgb: 207, 207, 207;
  --nox-border-strong: #a0a0a0;
  --nox-border-strong-rgb: 160, 160, 160;
  --nox-font-body: "Nunito Sans", sans-serif;
  --nox-font-heading: "Jost", sans-serif;
  --nox-radius-sm: 2px;
  --nox-radius-md: 9px;
  --nox-radius-lg: 24px;
  --nox-btn-radius: 2px;
  --nox-card-radius: 8px;
  --nox-card-shadow: 0px 5px 18px 0px rgba(0, 0, 0, 0.08);
  --nox-input-radius: 2px;
  --nox-input-focus: #3d3d3d;
  --nox-input-focus-rgb: 61, 61, 61;
  --nox-btn-primary-hover: #0d0c0c;
  --nox-btn-primary-hover-text: #ffffff;
  --nox-btn-secondary-hover: #f6f6f7;
  --nox-btn-secondary-hover-text: #1a1a1a;
  --nox-focus-ring: #3d3d3d;
}

/* Hover and focus colours per colour scheme; the nearest scheme ancestor wins. */
[data-dw-colorscheme="light"] {
  --nox-btn-primary-hover: #0d0c0c;
  --nox-btn-primary-hover-text: #ffffff;
  --nox-btn-secondary-hover: #f6f6f7;
  --nox-btn-secondary-hover-text: #1a1a1a;
  --nox-focus-ring: #3d3d3d;
}
[data-dw-colorscheme="lightgrey1"] {
  --nox-btn-primary-hover: #0d0c0c;
  --nox-btn-primary-hover-text: #ffffff;
  --nox-btn-secondary-hover: #f6f6f7;
  --nox-btn-secondary-hover-text: #1a1a1a;
  --nox-focus-ring: #3d3d3d;
}
[data-dw-colorscheme="lightgrey2"] {
  --nox-btn-primary-hover: #0d0c0c;
  --nox-btn-primary-hover-text: #ffffff;
  --nox-btn-secondary-hover: #f6f6f7;
  --nox-btn-secondary-hover-text: #1a1a1a;
  --nox-focus-ring: #3d3d3d;
}
[data-dw-colorscheme="dark"] {
  --nox-btn-primary-hover: #0d0c0c;
  --nox-btn-primary-hover-text: #ffffff;
  --nox-btn-secondary-hover: #e4e4e4;
  --nox-btn-secondary-hover-text: #1a1a1a;
  --nox-focus-ring: #ffffff;
}
[data-dw-colorscheme="darksubtle"] {
  --nox-btn-primary-hover: #0d0c0c;
  --nox-btn-primary-hover-text: #ffffff;
  --nox-btn-secondary-hover: #f6f6f7;
  --nox-btn-secondary-hover-text: #1a1a1a;
  --nox-focus-ring: #ffffff;
}
[data-dw-colorscheme="primary"] {
  --nox-btn-primary-hover: #323232;
  --nox-btn-primary-hover-text: #ffffff;
  --nox-btn-secondary-hover: #f6f6f7;
  --nox-btn-secondary-hover-text: #1a1a1a;
  --nox-focus-ring: #1a1a1a;
}
[data-dw-colorscheme="secondary"] {
  --nox-btn-primary-hover: #0d0c0c;
  --nox-btn-primary-hover-text: #ffffff;
  --nox-btn-secondary-hover: #e4e4e4;
  --nox-btn-secondary-hover-text: #1a1a1a;
  --nox-focus-ring: #ffffff;
}

/* Solid button variants only: outline, link, ghost and icon buttons keep Swift's own states. */
[data-dw-button]:is([data-dw-button="primary"], .btn-primary):not(.btn-link):not(.btn-outline-primary):not(.btn-outline-secondary):not(.btn-outline-success):not(.btn-outline-info):not(.btn-outline-warning):not(.btn-outline-danger):not(.btn-outline-light):not(.btn-outline-dark):not(.btn-ghost):not(.btn-icon) {
  --bs-btn-hover-bg: var(--nox-btn-primary-hover);
  --bs-btn-hover-border-color: var(--nox-btn-primary-hover);
  --bs-btn-hover-color: var(--nox-btn-primary-hover-text);
  --bs-btn-active-bg: var(--nox-btn-primary-hover);
  --bs-btn-active-border-color: var(--nox-btn-primary-hover);
  --bs-btn-active-color: var(--nox-btn-primary-hover-text);
}
[data-dw-button]:is([data-dw-button="secondary"], .btn-secondary):not(.btn-link):not(.btn-outline-primary):not(.btn-outline-secondary):not(.btn-outline-success):not(.btn-outline-info):not(.btn-outline-warning):not(.btn-outline-danger):not(.btn-outline-light):not(.btn-outline-dark):not(.btn-ghost):not(.btn-icon) {
  --bs-btn-hover-bg: var(--nox-btn-secondary-hover);
  --bs-btn-hover-border-color: var(--nox-btn-secondary-hover);
  --bs-btn-hover-color: var(--nox-btn-secondary-hover-text);
  --bs-btn-active-bg: var(--nox-btn-secondary-hover);
  --bs-btn-active-border-color: var(--nox-btn-secondary-hover);
  --bs-btn-active-color: var(--nox-btn-secondary-hover-text);
}
[data-dw-button]:not(.btn-link):not(.btn-outline-primary):not(.btn-outline-secondary):not(.btn-outline-success):not(.btn-outline-info):not(.btn-outline-warning):not(.btn-outline-danger):not(.btn-outline-light):not(.btn-outline-dark):not(.btn-ghost):not(.btn-icon) {
  --bs-btn-border-radius: var(--nox-btn-radius);
}
[data-dw-button]:not(.btn-link):not(.btn-outline-primary):not(.btn-outline-secondary):not(.btn-outline-success):not(.btn-outline-info):not(.btn-outline-warning):not(.btn-outline-danger):not(.btn-outline-light):not(.btn-outline-dark):not(.btn-ghost):not(.btn-icon):focus-visible {
  outline: 2px solid var(--nox-focus-ring);
  outline-offset: 2px;
  box-shadow: none;
}

/* Link colours on the light schemes. */
main :is([data-dw-colorscheme="light"], [data-dw-colorscheme="lightgrey1"], [data-dw-colorscheme="lightgrey2"]) a:not(.btn):not(.page-link):not(.dropdown-item):not(.nav-link):not([data-dw-button]) {
  color: var(--nox-link);
}
main :is([data-dw-colorscheme="light"], [data-dw-colorscheme="lightgrey1"], [data-dw-colorscheme="lightgrey2"]) a:not(.btn):not(.page-link):not(.dropdown-item):not(.nav-link):not([data-dw-button]):hover {
  color: var(--nox-link-hover, var(--nox-link));
}

main .card {
  --bs-card-border-radius: var(--nox-card-radius);
  --bs-card-inner-border-radius: calc(var(--nox-card-radius) - 1px);
  border-radius: var(--nox-card-radius);
  box-shadow: var(--nox-card-shadow);
}

:is(.form-control, .form-select) {
  border-radius: var(--nox-input-radius);
}
:is(.form-control, .form-select):focus {
  border-color: var(--nox-input-focus);
  box-shadow: 0 0 0 0.2rem rgba(var(--nox-input-focus-rgb), 0.25);
}

/* Logo lockup: 210 px wide on desktop, 150 px below md. */
header[data-swift-page-header] :is(figure, figure svg, figure img) {
  max-width: 210px;
  height: auto;
}
@media (max-width: 767.98px) {
  header[data-swift-page-header] :is(figure, figure svg, figure img) {
    max-width: 150px;
  }
}

/* Content image bands never tower over the fold; a full-bleed poster is not affected. */
main :is([data-dw-itemtype="swift-v2_image"], [data-dw-itemtype="swift-v2_slider"]) figure {
  max-height: min(60vh, 640px);
  overflow: hidden;
}
main :is([data-dw-itemtype="swift-v2_image"], [data-dw-itemtype="swift-v2_slider"]) figure img {
  width: 100%;
  max-height: min(60vh, 640px);
  object-fit: cover;
}

/* Header paint on the landmark attribute (never .navbar); child rows are cleared so the paint shows. */
header[data-swift-page-header] {
  background-color: #ffffff;
}
header[data-swift-page-header] section[data-swift-gridrow][data-dw-colorscheme] {
  background-color: transparent;
}

/* NOX additions on top of the brand-kit sheet (scripts/b1-brand.ps1 appends this file to Custom/brand.css). */
/* Navigation in NOX's own voice: Jost capitals, like noxsport.com. */
header .nav-link, header .dropdown-toggle, .offcanvas .nav-link { font-family: "Jost", sans-serif; text-transform: uppercase; letter-spacing: .04em; font-weight: 500; }
/* Product names on lists and cards read as NOX names, not as headings. */
.js-product .h6, .js-product h3, .js-product .product-title { text-transform: none; }
/* Product pictures sit on white like the NOX shop. */
.js-product img, .product-image img { background: #fff; }
/* NOX red for prices of a signed-in account. */
.text-price, .product-price { color: #0d0c0c; }