/* =========================================
   ASICS Atomic CSS - Full Recreation
   ========================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 1.5; color: #000; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }
picture { display: block; }

/* ===== Display ===== */
.d_block { display: block; }
.d_flex { display: flex; }
.d_grid { display: grid; }
.d_none { display: none; }

/* ===== Position ===== */
.pos_relative { position: relative; }
.pos_absolute { position: absolute; }
.inset_0 { inset: 0; }
.top_0 { top: 0; }
.top_36\% { top: 36%; }
.top_50\% { top: 50%; }
.bottom_0 { bottom: 0; }
.left_0 { left: 0; }
.left_4 { left: 1rem; }
.left_8 { left: 2rem; }
.right_0 { right: 0; }
.right_4 { right: 1rem; }
.right_8 { right: 2rem; }

/* ===== Z-index ===== */
.z_1 { z-index: 1; }
.z_2 { z-index: 2; }
.z_-1 { z-index: -1; }

/* ===== Flexbox ===== */
.flex-d_column { flex-direction: column; }
.flex-d_row { flex-direction: row; }
.flex_1 { flex: 1 1 0%; }
.flex_unset { flex: unset; }
.flex-sh_0 { flex-shrink: 0; }
.flex-b_60\% { flex-basis: 60%; }
.flex-b_75\% { flex-basis: 75%; }
.flex-b_90\% { flex-basis: 90%; }
.jc_center { justify-content: center; }
.jc_flex-start { justify-content: flex-start; }
.jc_flex-end { justify-content: flex-end; }
.jc_var(--mobile-slot-alignment) { justify-content: var(--mobile-slot-alignment); }
.ai_center { align-items: center; }
.ai_flex-start { align-items: flex-start; }
.ai_flex-end { align-items: flex-end; }
.ai_stretch { align-items: stretch; }
.as_center { align-self: center; }
.as_flex-start { align-self: flex-start; }

/* ===== Grid ===== */
.grid-tc_1fr { grid-template-columns: 1fr; }
.cg_5 { column-gap: 1.25rem; }
.rg_5 { row-gap: 1.25rem; }

/* ===== Width ===== */
.w_full { width: 100%; }
.w_100\% { width: 100%; }
.w_var(--body-mobile-container-width) { width: var(--body-mobile-container-width); }
.w_var(--buttons-mobile-container-width) { width: var(--buttons-mobile-container-width); }
.w_var(--headline-mobile-container-width) { width: var(--headline-mobile-container-width); }
.w_var(--mobile-slot-width) { width: var(--mobile-slot-width); }
.max-w_full { max-width: 100%; }
.max-w_auto { max-width: none; }
.max-w_max-content { max-width: max-content; }
.max-w_8xl { max-width: 90rem; }
.max-w_md { max-width: 28rem; }
.max-w_95\% { max-width: 95%; }
.max-w_50\% { max-width: 50%; }
.min-w_0 { min-width: 0; }
.min-w_full { min-width: 100%; }

/* ===== Height ===== */
.h_full { height: 100%; }
.h_12 { height: 3rem; }
.h_2\.5 { height: 0.625rem; }
.max-h_auto { max-height: none; }
.min-h_0 { min-height: 0; }
.min-h_240px { min-height: 240px; }
.min-h_auto { min-height: auto; }

/* ===== Aspect Ratio ===== */
.asp_1\/1 { aspect-ratio: 1 / 1; }
.asp_75\/89 { aspect-ratio: 75 / 89; }
.asp_auto { aspect-ratio: auto; }
.asp_var(--ratio) { aspect-ratio: var(--ratio); }
.asp_var(--ratio-mobile) { aspect-ratio: var(--ratio-mobile); }

/* ===== Padding ===== */
.p_0 { padding: 0; }
.p_4 { padding: 1rem; }
.p_6 { padding: 1.5rem; }
.p_12px { padding: 12px; }
.px_4 { padding-left: 1rem; padding-right: 1rem; }
.px_5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.py_4 { padding-top: 1rem; padding-bottom: 1rem; }
.py_5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.py_6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.pt_0 { padding-top: 0; }
.pt_5 { padding-top: 1.25rem; }
.pt_55px { padding-top: 55px; }
.pb_0 { padding-bottom: 0; }
.pb_10 { padding-bottom: 2.5rem; }
.pb_40px { padding-bottom: 40px; }
.pl_0 { padding-left: 0; }
.pr_0 { padding-right: 0; }

/* ===== Margin ===== */
.mx_0 { margin-left: 0; margin-right: 0; }
.mx_auto { margin-left: auto; margin-right: auto; }
.mt_5 { margin-top: 1.25rem; }
.mt_8 { margin-top: 2rem; }
.mb_4 { margin-bottom: 1rem; }
.ml_2 { margin-left: 0.5rem; }

/* ===== Gap ===== */
.gap_0 { gap: 0; }
.gap_0\.5 { gap: 0.125rem; }
.gap_1 { gap: 0.25rem; }
.gap_2 { gap: 0.5rem; }
.gap_3 { gap: 0.75rem; }
.gap_4 { gap: 1rem; }
.gap_5 { gap: 1.25rem; }
.gap_6 { gap: 1.5rem; }
.gap_8 { gap: 2rem; }

/* ===== Typography - Text Align ===== */
.ta_center { text-align: center; }
.ta_left { text-align: left; }
.ta_var(--cta-align-mobile) { text-align: var(--cta-align-mobile); }
.ta_var(--text-align-mobile) { text-align: var(--text-align-mobile); }

/* ===== Typography - Font Size ===== */
.fs_0 { font-size: 0; }
.fs_sm { font-size: 0.875rem; }
.fs_lg { font-size: 1.125rem; }
.fs_4xl { font-size: 2.25rem; }
.fs_5xl { font-size: 3rem; }

/* ===== Typography - Font Weight ===== */
.fw_bold { font-weight: 700; }
.fw_700 { font-weight: 700; }
.fw_medium { font-weight: 500; }
.fw_normal { font-weight: 400; }

/* ===== Typography - Font Family ===== */
.ff_default { font-family: inherit; }

/* ===== Typography - Line Height ===== */
.leading_1 { line-height: 1; }

/* ===== Typography - Text Transform ===== */
.tt_uppercase { text-transform: uppercase; }

/* ===== Typography - Text Decoration ===== */
.td_none { text-decoration: none; }
.td_underline { text-decoration: underline; }

/* ===== Typography - Letter Spacing ===== */
.tracking_wide { letter-spacing: 0.025em; }

/* ===== Typography - Text Wrap ===== */
.tw_balance { text-wrap: balance; }

/* ===== Color ===== */
.c_white { color: #fff; }
.c_transparent { color: transparent; }
.c_foreground\.strong { color: #111; }
.c_text\.brand { color: #001e63; }
.c_var(--badge-color) { color: var(--badge-color); }
.c_var(--eyebrow-color) { color: var(--eyebrow-color); }
.c_var(--eyebrow-mobile-color) { color: var(--eyebrow-mobile-color); }
.c_var(--headline-mobile-color) { color: var(--headline-mobile-color); }
.c_var(--mobile-color) { color: var(--mobile-color); }
.c_var(--richtext-color) { color: var(--richtext-color); }
.c_var(--richtext-color-mobile) { color: var(--richtext-color-mobile); }

/* ===== Background ===== */
.bg_white { background: #fff; }
.bg-c_white { background-color: #fff; }
.bg-c_black { background-color: #000; }
.bg-c_background\.gray { background-color: #f5f5f5; }
.bg_var(--badge-bg) { background: var(--badge-bg); }
.bg-c_var(--desktop-overlay-background-color) { background-color: var(--desktop-overlay-background-color); }
.bg-c_var(--mobile-background-color) { background-color: var(--mobile-background-color); }
.bg-c_var(--mobile-overlay-background-color) { background-color: var(--mobile-overlay-background-color); }
.bg_linear-gradient(180deg,_rgba(0,0,0,0)_0%,_rgba(0,0,0,0.4)_100\%) { background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 100%); }
.bg_rgba(0,_30,_99,_0.8) { background: rgba(0, 30, 99, 0.8); }

/* ===== Border ===== */
.bd_none { border: none; }
.bd-w_1px { border-width: 1px; }
.bdr_full { border-radius: 9999px; }

/* ===== Box Shadow ===== */
.bx-sh_0px_2px_8px_-4px_rgba(0,_0,_0,_0.08),_0px_4px_8px_0px_rgba(0,_0,_0,_0.08) {
  box-shadow: 0px 2px 8px -4px rgba(0, 0, 0, 0.08), 0px 4px 8px 0px rgba(0, 0, 0, 0.08);
}

/* ===== Opacity ===== */
.op_0 { opacity: 0; }
.op_0\.04 { opacity: 0.04; }
.op_1 { opacity: 1; }

/* ===== Overflow ===== */
.ov_hidden { overflow: hidden; }

/* ===== Object Fit ===== */
.obj-f_cover { object-fit: cover; }

/* ===== Transform ===== */
.trf_translateY(-50\%) { transform: translateY(-50%); }

/* ===== Transition ===== */
.trs_opacity_0\.1s_ease-out { transition: opacity 0.1s ease-out; }
.trs_opacity_0\.3s_ease { transition: opacity 0.3s ease; }
.trs_opacity_0\.3s_ease-in-out { transition: opacity 0.3s ease-in-out; }
.trs_width_0\.2s_ease-in-out_0\.05s,_height_0\.2s_ease-in-out_0\.05s {
  transition: width 0.2s ease-in-out 0.05s, height 0.2s ease-in-out 0.05s;
}

/* ===== Cursor ===== */
.cursor_pointer { cursor: pointer; }
.cursor_default { cursor: default; }

/* ===== Pointer Events ===== */
.pointer-events_none { pointer-events: none; }
.pointer-events_auto { pointer-events: auto; }
.pointer-events_all { pointer-events: all; }

/* ===== User Select ===== */
.us_none { user-select: none; }

/* ===== Screen Reader ===== */
.sr_true {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== Will Change ===== */
.will-change_width,_height,_transform { will-change: width, height, transform; }

/* ===== Show/Hide ===== */
.show_md { display: none; }
.show_lg { display: none; }
.hide_md { display: block; }
.hide_lg { display: block; }

/* =========================================
   Component: Button
   ========================================= */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all 0.2s ease;
  cursor: pointer;
  border: none;
  text-decoration: none;
  text-align: center;
  line-height: 1;
}
.button--size_md { padding: 0.875rem 1.75rem; font-size: 0.8125rem; min-height: 48px; }
.button--size_sm { padding: 0.625rem 1.25rem; font-size: 0.75rem; min-height: 36px; }
.button--size_icon { padding: 0.5rem; width: 40px; height: 40px; }
.button--variant_primary { background: #001e63; color: #fff; }
.button--variant_primary:hover { background: #00154a; }
.button--variant_primary_alt { background: #fff; color: #001e63; }
.button--variant_primary_alt:hover { background: #f0f0f0; }
.button--variant_secondary { background: transparent; color: #fff; border: 2px solid #fff; }
.button--variant_secondary:hover { background: rgba(255,255,255,0.1); }
.button-content { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; }
.button-loader-overlay { display: none; }
.button--isLoading_false .button-loader-overlay { display: none; }

/* =========================================
   Component: Badge
   ========================================= */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
}
.badge--size_md { padding: 0.375rem 0.75rem; font-size: 0.6875rem; }
.badge--variant_default { background: #001e63; color: #fff; }

/* =========================================
   Component: Text
   ========================================= */
.text { display: block; }
.text--variant_body-l { font-size: 1.125rem; line-height: 1.6; font-weight: 400; }
.text--variant_body-xs { font-size: 0.75rem; line-height: 1.4; font-weight: 400; }
.text--variant_heading3 { font-size: 1.875rem; font-weight: 700; line-height: 1.2; }
.text--variant_heading4 { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }

/* =========================================
   Component: Link
   ========================================= */
.link { color: inherit; text-decoration: none; cursor: pointer; }

/* =========================================
   Component: Image
   ========================================= */
.image { display: block; }
.image--fill_true { width: 100%; height: 100%; }
.image--fit_cover { object-fit: cover; }
.image--fit_contain { object-fit: contain; }
.image--position_center { object-position: center; }

/* =========================================
   Component: Icon
   ========================================= */
.icon { display: inline-flex; align-items: center; justify-content: center; }
.icon--size_md { width: 24px; height: 24px; }
.icon--size_lg { width: 32px; height: 32px; }

/* =========================================
   Component: Price
   ========================================= */
.price { font-weight: 700; font-size: 1rem; }
.price--size_base { font-size: 1rem; }
.price--variant_list { color: #111; }
.price--fontWeight_normal { font-weight: 400; }

/* =========================================
   Component: Carousel
   ========================================= */
.carousel__root { position: relative; width: 100%; }
.carousel__viewport { overflow: hidden; width: 100%; }
.carousel__content { display: flex; transition: transform 0.4s ease; }
.carousel__slide { flex-shrink: 0; width: 100%; }
.carousel__navigation {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  padding: 0 0.5rem;
  z-index: 2;
}
.carousel__navigation .button { pointer-events: auto; }
.carousel__pipPagination {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 0;
}
.carousel__pipPagination button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ccc;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}
.carousel__pipPagination button.active { background: #001e63; }

/* =========================================
   Component: Product Tile
   ========================================= */
.productTile__root { display: flex; flex-direction: column; width: 100%; }
.productTile__image { position: relative; width: 100%; overflow: hidden; }
.productTile__badges {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  z-index: 1;
}
.productTile__content {
  padding: 0.875rem 0 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.productTile__title { font-size: 0.875rem; font-weight: 500; line-height: 1.4; }
.productTile__classification { font-size: 0.75rem; color: #666; }
.productTile__price { margin-top: 0.25rem; }

/* =========================================
   Responsive: sm (640px+)
   ========================================= */
@media (min-width: 640px) {
  .sm\:flex-b_33\.33\% { flex-basis: 33.33%; }
  .sm\:mb_3 { margin-bottom: 0.75rem; }
  .sm\:pb_6 { padding-bottom: 1.5rem; }
  .sm\:pt_6 { padding-top: 1.5rem; }
  .sm\:px_8 { padding-left: 2rem; padding-right: 2rem; }
  .sm\:px_16 { padding-left: 4rem; padding-right: 4rem; }
  .sm\:py_6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
}

/* =========================================
   Responsive: md (768px+)
   ========================================= */
@media (min-width: 768px) {
  .md\:d_flex { display: flex; }
  .md\:d_none { display: none; }
  .md\:flex-d_row { flex-direction: row; }
  .md\:flex_1 { flex: 1 1 0%; }
  .md\:flex-b_100\% { flex-basis: 100%; }
  .md\:jc_center { justify-content: center; }
  .md\:jc_flex-start { justify-content: flex-start; }
  .md\:jc_start { justify-content: flex-start; }
  .md\:jc_var(--desktop-slot-alignment) { justify-content: var(--desktop-slot-alignment); }
  .md\:ai_center { align-items: center; }
  .md\:ai_flex-start { align-items: flex-start; }
  .md\:ai_flex-end { align-items: flex-end; }
  .md\:ai_start { align-items: flex-start; }
  .md\:as_center { align-self: center; }
  .md\:as_flex-start { align-self: flex-start; }
  .md\:as_start { align-self: flex-start; }
  .md\:grid-tc_repeat(2,_1fr) { grid-template-columns: repeat(2, 1fr); }
  .md\:gap_8 { gap: 2rem; }
  .md\:gap_12 { gap: 3rem; }
  .md\:px_0 { padding-left: 0; padding-right: 0; }
  .md\:px_8 { padding-left: 2rem; padding-right: 2rem; }
  .md\:px_14 { padding-left: 3.5rem; padding-right: 3.5rem; }
  .md\:px_16 { padding-left: 4rem; padding-right: 4rem; }
  .md\:py_0 { padding-top: 0; padding-bottom: 0; }
  .md\:py_6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
  .md\:py_8 { padding-top: 2rem; padding-bottom: 2rem; }
  .md\:pt_6 { padding-top: 1.5rem; }
  .md\:pt_16 { padding-top: 4rem; }
  .md\:pb_6 { padding-bottom: 1.5rem; }
  .md\:pb_16 { padding-bottom: 4rem; }
  .md\:pl_0 { padding-left: 0; }
  .md\:pr_0 { padding-right: 0; }
  .md\:mx_5 { margin-left: 1.25rem; margin-right: 1.25rem; }
  .md\:mt_8 { margin-top: 2rem; }
  .md\:max-w_8xl { max-width: 90rem; }
  .md\:max-w_50\% { max-width: 50%; }
  .md\:min-h_100\% { min-height: 100%; }
  .md\:min-h_auto { min-height: auto; }
  .md\:w_var(--desktop-slot-width) { width: var(--desktop-slot-width); }
  .md\:w_var(--headline-tablet-container-width) { width: var(--headline-tablet-container-width); }
  .md\:w_var(--body-tablet-container-width) { width: var(--body-tablet-container-width); }
  .md\:w_var(--buttons-tablet-container-width) { width: var(--buttons-tablet-container-width); }
  .md\:w_auto { width: auto; }
  .md\:ta_center { text-align: center; }
  .md\:ta_start { text-align: left; }
  .md\:ta_var(--cta-align) { text-align: var(--cta-align); }
  .md\:ta_var(--text-align) { text-align: var(--text-align); }
  .md\:c_var(--desktop-color) { color: var(--desktop-color); }
  .md\:c_var(--eyebrow-color) { color: var(--eyebrow-color); }
  .md\:c_var(--headline-color) { color: var(--headline-color); }
  .md\:c_var(--richtext-color) { color: var(--richtext-color); }
  .md\:fs_5xl { font-size: 3rem; }
  .md\:text--variant_heading4 { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
  .md\:asp_1\/1 { aspect-ratio: 1 / 1; }
  .md\:asp_16\/7 { aspect-ratio: 16 / 7; }
  .md\:asp_auto { aspect-ratio: auto; }
  .md\:asp_var(--ratio) { aspect-ratio: var(--ratio); }
  .md\:asp_var(--ratio-tablet) { aspect-ratio: var(--ratio-tablet); }
  .show_md { display: flex !important; }
  .hide_md { display: none !important; }
}

/* =========================================
   Responsive: lg (1024px+)
   ========================================= */
@media (min-width: 1024px) {
  .lg\:ai_center { align-items: center; }
  .lg\:asp_var(--ratio) { aspect-ratio: var(--ratio); }
  .lg\:cg_6 { column-gap: 1.5rem; }
  .lg\:flex-b_20\% { flex-basis: 20%; }
  .lg\:fs_4xl { font-size: 2.25rem; }
  .lg\:fs_md { font-size: 1rem; }
  .lg\:grid-tc_repeat(2,_1fr) { grid-template-columns: repeat(2, 1fr); }
  .lg\:jc_center { justify-content: center; }
  .lg\:max-w_50\% { max-width: 50%; }
  .lg\:mx_16 { margin-left: 4rem; margin-right: 4rem; }
  .lg\:p_6 { padding: 1.5rem; }
  .lg\:ta_center { text-align: center; }
  .lg\:text--variant_body-m { font-size: 1rem; line-height: 1.5; }
  .lg\:text--variant_heading3 { font-size: 1.875rem; font-weight: 700; line-height: 1.2; }
  .lg\:w_var(--body-desktop-container-width) { width: var(--body-desktop-container-width); }
  .lg\:w_var(--buttons-desktop-container-width) { width: var(--buttons-desktop-container-width); }
  .lg\:w_var(--headline-desktop-container-width) { width: var(--headline-desktop-container-width); }
  .show_lg { display: flex !important; }
  .hide_lg { display: none !important; }
}

/* =========================================
   Responsive: xl (1280px+)
   ========================================= */
@media (min-width: 1280px) {
  .xl\:cg_12 { column-gap: 3rem; }
  .xl\:mx_20 { margin-left: 5rem; margin-right: 5rem; }
  .xl\:px_0 { padding-left: 0; padding-right: 0; }
  .xl\:px_16 { padding-left: 4rem; padding-right: 4rem; }
}

/* =========================================
   Focus Visible
   ========================================= */
.focusVisible\:ring_none:focus-visible { outline: none; }
.focusVisible\:ring_2px_solid:focus-visible { outline: 2px solid; }
.focusVisible\:ring-c_brand:focus-visible { outline-color: #001e63; }
.focusVisible\:ring-o_-3px:focus-visible { outline-offset: -3px; }

/* =========================================
   Banner Component Styles
   ========================================= */
[data-test="banner"] { width: 100%; position: relative; }
[data-test="banner-wrapper"] { position: relative; width: 100%; }
[data-test="banner-background-link"] {
  display: block;
  position: relative;
  width: 100%;
  text-decoration: none;
  cursor: pointer;
}
[data-test="banner-media"] { position: relative; }
[data-test="banner-image-container"] { position: relative; width: 100%; overflow: hidden; }
[data-test="banner-image-container"] img { width: 100%; height: 100%; object-fit: cover; display: block; }
[data-test="banner-content-overlay"] {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
}
[data-test="banner-content-wrapper"] {
  width: 100%;
  max-width: 90rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}
[data-test="banner-content"] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 95%;
}
[data-test="banner-headline"] {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.1;
  text-wrap: balance;
}
[data-test="banner-body"] {
  font-size: 1.125rem;
  line-height: 1.6;
}
[data-test="banner-cta-buttons"] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
[data-test="banner-mobile-text-below"] {
  padding: 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Mobile text below layout */
[data-test="banner"].mobile-text-below [data-test="banner-content-overlay"] {
  display: none;
}

@media (min-width: 768px) {
  [data-test="banner-content-wrapper"] { padding: 0 2rem; }
  [data-test="banner-content"] { max-width: 50%; gap: 1.5rem; }
  [data-test="banner-headline"] { font-size: 3rem; }
  [data-test="banner-cta-buttons"] { flex-direction: row; gap: 1rem; }
  [data-test="banner-mobile-text-below"] { display: none; }
  [data-test="banner"].mobile-text-below [data-test="banner-content-overlay"] { display: flex; }
}

/* =========================================
   Hover Tiles Component
   ========================================= */
[data-test="hover-tiles"] { width: 100%; }
[data-test="hover-tile"] { position: relative; overflow: hidden; cursor: pointer; }
[data-test="hover-tile"] img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
[data-test="hover-tile"]:hover img { transform: scale(1.05); }
[data-test="hover-tile-overlay-text"] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  z-index: 1;
}
[data-test="hover-tile-headline-under"] {
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
[data-test="hover-tile-overlay-cta"] {
  margin-top: 1rem;
  display: inline-block;
  border-bottom: 2px solid #fff;
  padding-bottom: 0.25rem;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
[data-test="hover-tile-content-cta"] {
  padding: 1rem 0;
  text-align: center;
}
[data-test="hover-tile-mobile-overlay-text"] {
  display: none;
}

@media (min-width: 768px) {
  [data-test="hover-tile-headline-under"] { font-size: 1.875rem; }
}

/* =========================================
   Product Carousel Component
   ========================================= */
[data-test="product-carousel"] { width: 100%; padding: 2rem 0; }
[data-test="product-carousel-headline"] {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}
[data-test="product-carousel-wrapper"] { position: relative; }
[data-test="product-tile-link"] { display: block; text-decoration: none; color: inherit; }
[data-test="product-tile-image"] { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; }
[data-test="product-tile-image"] img { width: 100%; height: 100%; object-fit: cover; }
[data-test="product-tile-title"] { font-size: 0.875rem; font-weight: 500; margin-top: 0.75rem; }
[data-test="product-tile-price"] { font-size: 0.875rem; font-weight: 700; margin-top: 0.25rem; }
[data-test="product-tile-badge"] {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  background: #001e63;
  color: #fff;
  padding: 0.25rem 0.75rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  z-index: 1;
}

@media (min-width: 768px) {
  [data-test="product-carousel-headline"] { font-size: 2.25rem; margin-bottom: 2rem; }
}

/* =========================================
   Split Product Banner Component
   ========================================= */
[data-test="split-product-banner"] { width: 100%; }
[data-test="split-product-banner-wrapper"] {
  display: flex;
  flex-direction: column;
  width: 100%;
}
[data-test="split-product-banner-media"] { width: 100%; }
[data-test="split-product-banner-media"] img { width: 100%; height: 100%; object-fit: cover; }
[data-test="split-product-banner-text"] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem 1.25rem;
  gap: 1rem;
}
[data-test="split-product-banner-headline"] {
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.2;
}
[data-test="split-product-banner-body"] {
  font-size: 1rem;
  line-height: 1.6;
}
[data-test="split-product-banner-text-link"] {
  display: inline-block;
  margin-top: 0.5rem;
}

@media (min-width: 768px) {
  [data-test="split-product-banner-wrapper"] { flex-direction: row; }
  [data-test="split-product-banner-media"] { width: 50%; }
  [data-test="split-product-banner-text"] { width: 50%; padding: 3rem 3rem; gap: 1.5rem; }
  [data-test="split-product-banner-headline"] { font-size: 2.25rem; }
}

/* =========================================
   Video Banner Component
   ========================================= */
[data-test="video-banner"] { width: 100%; position: relative; }
[data-test="video-banner-wrapper"] { position: relative; width: 100%; }
[data-test="video-banner-media"] { position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden; }
[data-test="video-banner-media"] img { width: 100%; height: 100%; object-fit: cover; }
[data-test="video-banner-content"] {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-test="video-banner-content-wrapper"] {
  width: 100%;
  max-width: 90rem;
  margin: 0 auto;
  padding: 0 1.25rem;
  text-align: center;
}
[data-test="video-banner-headline"] {
  font-size: 2.25rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
  text-wrap: balance;
  margin-bottom: 1rem;
}
[data-test="video-banner-body"] {
  font-size: 1.125rem;
  color: #fff;
  margin-bottom: 1.5rem;
}
[data-test="video-banner-cta-buttons"] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  justify-content: center;
  align-items: center;
}
[data-test="video-banner-desktop-overlay-below"],
[data-test="video-banner-mobile-overlay-below"] {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);
  pointer-events: none;
}

@media (min-width: 768px) {
  [data-test="video-banner-content-wrapper"] { padding: 0 2rem; }
  [data-test="video-banner-headline"] { font-size: 3rem; }
  [data-test="video-banner-cta-buttons"] { flex-direction: row; }
}

/* =========================================
   Article Tiles Component
   ========================================= */
[data-test="article-tiles"] { width: 100%; padding: 2rem 0; }
[data-test="article-tiles-headline"] {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}
[data-test="article-tile"] {
  display: flex;
  flex-direction: column;
}
[data-test="article-tile-image"] { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; }
[data-test="article-tile-image"] img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
[data-test="article-tile"]:hover [data-test="article-tile-image"] img { transform: scale(1.05); }
[data-test="article-tile-content"] {
  padding: 1rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
[data-test="article-tile-category"] {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #001e63;
}
[data-test="article-tile-title"] {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
}
[data-test="article-tile-link"] {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 2px solid #000;
  padding-bottom: 0.25rem;
  display: inline-block;
  margin-top: 0.5rem;
}

@media (min-width: 768px) {
  [data-test="article-tiles-headline"] { font-size: 2.25rem; margin-bottom: 2rem; }
}