:root {
 --redovar-blue: #0B369A;
 --redovar-terracotta: #C34811;
 --light-hover: #F2F2EF;




 --light-bg: #FFFFFF;
 --light-surface: #F7F7F5;
 --light-text: #171717;
 --light-secondary: #6B6B68;
 --light-soft: #8B8B86;
 --light-border: #E7E7E3;
 --light-border-strong: #D9D9D4;
 --light-hover: #F2F2EF;




 --dark-bg: #111111;
 --dark-surface: #191919;
 --dark-raised: #202020;
 --dark-text: #F5F5F3;
 --dark-secondary: #A2A29E;
 --dark-soft: #858581;
 --dark-border: #2B2B2A;
 --dark-border-strong: #383836;




 --radius: 4px;




 --max: 1480px;
 --gutter: clamp(22px, 4.4vw, 72px);




 --header-h: 76px;




 --section-space: clamp(112px, 11vw, 176px);




  --ease: cubic-bezier(0.16, 1, 0.3, 1);




 --hero-background-image:
   url("../../assets/images/hero.PNG");
}


/* =========================================================
   OFFICIAL SECONDARY BUTTON
========================================================= */

.button-secondary {
  min-width:
    104px;

  min-height:
    44px;

  padding:
    0
    16px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    0;

  border-radius:
    var(--radius);

  background:
    transparent;

  box-shadow:
    inset
    0
    0
    0
    .5px
    var(--redovar-terracotta);

  color:
    #FFFFFF;

  font-size:
    12px;

  line-height:
    1;

  font-weight:
    600;

  text-align:
    center;

  transition:
    box-shadow
    160ms
    ease,
    color
    160ms
    ease,
    transform
    180ms
    var(--ease);
}


.button-secondary--inverse {
  color:
    #FFFFFF;
}


.button-secondary:hover,
.button-secondary:focus-visible {
  color:
    var(--redovar-terracotta);

  outline: none;
}


.button-secondary:active {
  transform:
    translateY(
      1px
    );
}


.hero-actions > a,
.software-hero-actions > a,
.hardware-hero-actions > a,
.business-hero-actions > a,
.camps-hero-actions > a {
  min-width:
    104px;
}


/* Keep every repeated closing CTA on the homepage scale. */

[data-pricing-closing-title] {
  font-size:
    clamp(
      30px,
      3.2vw,
      46px
    ) !important;

  line-height:
    1.02 !important;

  letter-spacing:
    -.045em !important;

  font-weight:
    550 !important;
}


[data-pricing-closing-title] > span {
  display:
    block;

  white-space:
    nowrap;
}


@media (max-width: 760px) {

  [data-pricing-closing-title] {
    font-size:
      clamp(
        30px,
        9vw,
        40px
      ) !important;
  }

}


/* Shared split-section motion: the visual or section introduction stays in
  view while the detailed side moves through the viewport. */
@media (min-width: 981px) {
 [data-sticky-split] {
   align-items: start;
 }


 [data-sticky-split] > [data-sticky-side] {
   position: sticky;
   top: calc(var(--header-h) + 44px);
   align-self: start;
 }
}


.split-heading-line {
 display: inline-block;
 white-space: nowrap;
}


body h2[data-pricing-closing-title] {
 max-width: 700px;
 margin: 0;
 font-size: clamp(42px, 5vw, 72px);
 font-weight: 500;
 line-height: .98;
 letter-spacing: -.05em;
}


body h2[data-pricing-closing-title] .split-heading-line {
 display: inline-block;
 white-space: nowrap;
}








/* =========================================================
  RESET
========================================================= */




* {
 box-sizing: border-box;
}




html {
 scroll-behavior: smooth;




 background: var(--dark-bg);
 color: var(--light-text);
}




body {
 margin: 0;




 min-width: 320px;




 overflow-x: hidden;




 font-family:
   "Onest",
   "Segoe UI Variable",
   "Helvetica Neue",
   Arial,
   sans-serif;




 font-size: 16px;
 line-height: 1.5;
 letter-spacing: -.015em;




 background: var(--light-bg);
 color: var(--light-text);




 -webkit-font-smoothing: antialiased;
 text-rendering: optimizeLegibility;
}




body.menu-open,
body.privacy-open {
 overflow: hidden;
}




img {
 display: block;
 max-width: 100%;
}




button,
a,
input,
select,
textarea {
 font: inherit;
}




button {
 border: 0;
}




a {
 color: inherit;
 text-decoration: none;
}




a[href],
button:not(:disabled),
summary,
select,
[role="button"],
[role="link"],
label[for],
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="checkbox"],
input[type="radio"],
input[type="file"] {
 cursor: pointer;
}




::selection {
 background: #D9E9FF;
 color: var(--light-text);
}




:focus-visible {
 outline: 2px solid var(--redovar-blue);
 outline-offset: 3px;
}








/* =========================================================
  SHARED WIDTH
========================================================= */




.shell,
.nav-shell,
.footer-shell,
.header-panel-shell {
 width: min(100%, var(--max));




 margin-inline: auto;




 padding-inline: var(--gutter);
}








/* =========================================================
  HEADER
========================================================= */




.site-header {
 position: fixed;




 inset: 0 0 auto;




 z-index: 220;




 height: var(--header-h);




 background: rgba(17, 17, 17, .98);




 color: var(--dark-text);




 border-bottom: 0;




 transition:
   background-color 180ms ease,
   border-color 180ms ease;
}




.site-header.is-scrolled,
.site-header.has-open-panel {
 background: #111111;
 border-bottom-color: transparent;
}








/* =========================================================
  HEADER INNER
========================================================= */




.nav-shell {
 min-height: var(--header-h);




 display: flex;
 align-items: center;
}








/* =========================================================
  BRAND
========================================================= */




.brand,
.footer-brand {
 flex: 0 0 auto;




 display: inline-flex;
 align-items: center;




 width: max-content;
}




.brand img {
 width: 120px;
 height: 40px;




 object-fit: contain;
 object-position: left center;
}








/* =========================================================
  MAIN NAV
========================================================= */




.main-nav {
 margin-left: 12px;




 display: flex;
 align-items: center;




 gap: 20px;




 white-space: nowrap;
}




.nav-link,
.nav-category {
 min-height: 40px;




 padding: 0;




 display: inline-flex;
 align-items: center;
 justify-content: center;




 gap: 7px;




 background: transparent;




 color: rgba(245, 245, 243, .72);




 font-size: 12px;
 line-height: 1;
 font-weight: 500;




 cursor: pointer;




 transition: color 150ms ease;
}




.nav-link:hover,
.nav-link:focus-visible,
.nav-category:hover,
.nav-category:focus-visible,
.nav-category[aria-expanded="true"] {
 color: #FFFFFF;
}




.nav-category img {
 width: 11px;
 height: 11px;




 object-fit: contain;




 opacity: .82;




 filter:
   brightness(0)
   saturate(100%)
   invert(100%);




 transition: opacity 150ms ease;
}




.nav-category:hover img,
.nav-category:focus-visible img,
.nav-category[aria-expanded="true"] img {
 opacity: 1;
}








/* =========================================================
  HEADER ACTIONS
========================================================= */




.nav-actions {
 margin-left: auto;




 display: flex;
 align-items: center;




 gap: 14px;
}




.nav-signin {
 min-height: 40px;




 display: inline-flex;
 align-items: center;




 color: rgba(245, 245, 243, .74);




 font-size: 12px;
 line-height: 1;
 font-weight: 500;




 transition: color 150ms ease;
}




.nav-signin:hover,
.nav-signin:focus-visible {
 color: #FFFFFF;
}




.site-account {
 position: relative;
 flex: 0 0 auto;
 display: flex;
 align-items: center;
}




.site-account-trigger {
 width: 26px;
 height: 26px;
 padding: 0;




 display: grid;
 place-items: center;




 border: 1px solid rgba(231, 231, 227, .48);
 border-radius: 50%;




 background: transparent;
 color: #F5F5F3;




 cursor: pointer;
}




.site-account-trigger:hover,
.site-account-trigger:focus-visible,
.site-account-trigger[aria-expanded="true"] {
 border-color: rgba(245, 245, 243, .78);
}




.site-account-trigger img {
 width: 13px;
 height: 13px;
 filter: brightness(0) invert(96%);
 opacity: .86;
 transition: opacity 150ms ease, transform 150ms ease;
}

.site-account-trigger:hover img,
.site-account-trigger:focus-visible img,
.site-account-trigger[aria-expanded="true"] img,
.site-account-trigger:hover .site-account-initial,
.site-account-trigger:focus-visible .site-account-initial,
.site-account-trigger[aria-expanded="true"] .site-account-initial {
 opacity: 1;
 transform: scale(1.08);
}




.site-account-trigger img[hidden],
.site-account-trigger .site-account-initial[hidden] {
 display: none !important;
}

.mobile-account-label {
 display: none;
}




.site-account-initial {
 font-size: 10px;
 line-height: 1;
 font-weight: 650;
 opacity: .86;
 transition: opacity 150ms ease, transform 150ms ease;
}




.site-account-menu {
 position: absolute;
 top: calc(100% + 9px);
 right: 0;
 z-index: 250;




 width: max-content;
 min-width: 184px;
 padding: 5px;




 display: grid;




 border: 0;
 border-radius: var(--radius);




 background: #FFFFFF;
 color: #171717;
}




.site-account-menu[hidden] {
 display: none;
}




.site-account-menu a,
.site-account-menu button {
 width: 100%;
 min-height: 36px;
 padding: 8px 10px;




 display: flex;
 align-items: center;
 gap: 9px;




 border: 0;
 border-radius: var(--radius);




 background: transparent;
 color: #171717;




 font-size: 12px;
 line-height: 1.35;
 font-weight: 500;
 text-align: left;




 cursor: pointer;
}

.site-account-menu a img,
.site-account-menu button img {
 width: 15px;
 height: 15px;
 flex: 0 0 15px;
 object-fit: contain;
 filter: brightness(0) saturate(100%) invert(8%) sepia(3%) saturate(123%) hue-rotate(314deg) brightness(67%) contrast(105%);
}

.site-account-menu .site-account-signin {
 color: #1258BF;
}

.site-account-menu .site-account-signin img {
 filter: brightness(0) saturate(100%) invert(28%) sepia(89%) saturate(1608%) hue-rotate(208deg) brightness(87%) contrast(95%);
}

.site-account-menu .site-account-signin:hover,
.site-account-menu .site-account-signin:focus-visible {
 background: #EDF5FF;
}

.site-account-menu .site-account-signout {
 color: #B42318;
}

.site-account-menu .site-account-signout img {
 filter: brightness(0) saturate(100%) invert(18%) sepia(76%) saturate(2477%) hue-rotate(345deg) brightness(78%) contrast(95%);
}

.site-account-menu .site-account-signout:hover,
.site-account-menu .site-account-signout:focus-visible {
 background: #FFF0EF;
}




.site-account-menu a:hover,
.site-account-menu a:focus-visible,
.site-account-menu button:hover,
.site-account-menu button:focus-visible {
 background: #F2F2EF;
}




.site-account-menu .site-account-camp {
 font-weight: 650;
 color: #1258BF;
}

.site-account-menu .site-account-camp img {
 filter: brightness(0) saturate(100%) invert(28%) sepia(89%) saturate(1608%) hue-rotate(208deg) brightness(87%) contrast(95%);
}




.site-account-menu hr {
 width: 100%;
 height: 1px;
 margin: 4px 0;




 border: 0;
 background: #E7E7E3;
}




.site-account-error {
 margin: 4px 10px 7px;
 color: #A72A20;
 font-size: 11px;
}




.nav-primary,
.mobile-primary {
 min-height: 40px;




 padding: 0 16px;




 display: inline-flex;
 align-items: center;
 justify-content: center;




 border-radius: var(--radius);




 background: var(--redovar-terracotta);
 color: #FFFFFF;




 font-size: 12px;
 line-height: 1;
 font-weight: 600;




 transition:
   background-color 150ms ease,
   transform 150ms ease;
}




.nav-primary:hover,
.nav-primary:focus-visible,
.mobile-primary:hover,
.mobile-primary:focus-visible {
 background: #A83D0D;
}




.nav-primary:active,
.mobile-primary:active {
 transform: translateY(1px);
}








/* =========================================================
  SHOPPING BAG
========================================================= */




.nav-bag,
.nav-bag-mobile {
 position: relative;




 width: 38px;
 height: 40px;




 flex: 0 0 auto;




 display: grid;
 place-items: center;




 border-radius: var(--radius);




 color: #FFFFFF;




 transition:
   background-color 150ms ease,
   opacity 150ms ease;
}




.nav-bag:hover,
.nav-bag:focus-visible,
.nav-bag-mobile:hover,
.nav-bag-mobile:focus-visible {
 background: transparent;
}




.nav-bag img,
.nav-bag-mobile img {
 width: 19px;
 height: 19px;




 object-fit: contain;




 opacity: .72;




 filter:
   brightness(0)
   saturate(100%)
   invert(100%);




 pointer-events: none;




 transition: opacity 150ms ease;
}




.nav-bag:hover img,
.nav-bag:focus-visible img,
.nav-bag-mobile:hover img,
.nav-bag-mobile:focus-visible img {
 opacity: .66;
}




.nav-bag-count {
  position: absolute;

  z-index: 2;

  right: -4px;
  bottom: -4px;

  width: 22px;
  height: 22px;

  min-width: 22px;
  max-width: 22px;

  padding: 0;

  display: grid;
  place-items: center;

  flex: 0 0 22px;

  aspect-ratio: 1 / 1;

  box-sizing: border-box;

  overflow: hidden;

  border:
    2px
    solid
    #111111;

  border-radius: 50%;

  background:
    #E7E7E3;

  color:
    #171717;

  font-size: 9px;

  line-height: 1;

  font-weight: 650;

  letter-spacing: -.035em;

  font-variant-numeric:
    tabular-nums;

  text-align: center;

  white-space: nowrap;

  pointer-events: none;
}




.nav-bag-count.is-overflow {
  width: 22px;
  height: 22px;

  min-width: 22px;
  max-width: 22px;

  flex: 0 0 22px;

  aspect-ratio: 1 / 1;

  padding: 0;

  border-radius: 50%;

  font-size: 8px;

  letter-spacing: -.055em;
}

/* =========================================================
 BAG COUNT — CHANGE MOTION
========================================================= */

.nav-bag-count.is-changing {
  animation:
    navBagCountChange
    320ms
    var(--ease);
}


@keyframes navBagCountChange {

  0% {
    transform:
      scale(1);
  }

  38% {
    transform:
      translateY(-1px)
      scale(1.08);
  }

  100% {
    transform:
      translateY(0)
      scale(1);
  }

}





.nav-bag-count[hidden] {
 display: none !important;
}

.site-search-trigger {
 position: relative;
 width: 38px;
 height: 40px;
 flex: 0 0 auto;
 display: grid;
 place-items: center;
 border: 0;
 border-radius: 50%;
 background: transparent;
 padding: 0;
}

.site-search-trigger:hover,
.site-search-trigger:focus-visible,
.site-search-trigger[aria-expanded="true"] {
 background: transparent;
}

.site-search-trigger img {
 width: 18px;
 height: 18px;
 object-fit: contain;
 opacity: .82;
 filter: brightness(0) saturate(100%) invert(100%);
 pointer-events: none;
}

.site-search-trigger:hover img,
.site-search-trigger:focus-visible img { opacity: .66; }

.site-search-trigger[aria-expanded="true"] img { opacity: .92; }

.site-search-trigger--mobile { display: none; }

.site-search-panel {
 position: absolute;
 z-index: 1605;
 top: 100%;
 left: 0;
 width: 100%;
 max-height: calc(100vh - 72px);
 overflow: auto;
 border-top: 1px solid rgba(17, 17, 17, .08);
 background: #fff;
 color: #171717;
 box-shadow: 0 28px 60px rgba(17, 17, 17, .12);
}

.site-search-panel[hidden] { display: none !important; }

.site-search-shell {
 width: min(100% - 48px, 1120px);
 margin: 0 auto;
 padding: 38px 0 52px;
}

.site-search-field {
 width: min(100%, 760px);
 min-height: 54px;
 display: grid;
 grid-template-columns: 24px minmax(0, 1fr) 30px;
 align-items: center;
 gap: 12px;
 border-bottom: 0;
}

.site-search-field > img {
 width: 20px;
 height: 20px;
 opacity: .62;
}

.site-search-field input {
  width: 100%;
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;
  border: 0;
 outline: 0;
 background: transparent;
 color: #171717;
 padding: 0;
 font: inherit;
 font-size: clamp(23px, 3vw, 34px);
 font-weight: 450;
 letter-spacing: -.035em;
}

.site-search-field input::placeholder { color: #7a7a76; opacity: 1; }
.site-search-field input::-webkit-search-cancel-button,
.site-search-field input::-webkit-search-decoration { display: none !important; -webkit-appearance: none; }

.site-search-clear { width: 30px; height: 30px; display: grid; place-items: center; justify-self: end; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; opacity: .58; }
.site-search-clear:hover,.site-search-clear:focus-visible { opacity: .82; outline: none; }
.site-search-clear img { width: 17px; height: 17px; object-fit: contain; opacity: .7; }
.site-search-clear[hidden] { display: none; }

.site-search-content {
 width: min(100%, 760px);
 margin-top: 24px;
 display: grid;
 justify-items: start;
 gap: 2px;
}

.site-search-group-label {
 margin: 18px 0 7px;
 color: #858580;
 font-size: 11px;
 font-weight: 550;
 text-transform: uppercase;
 letter-spacing: .06em;
}

.site-search-result {
 min-height: 50px;
 width: fit-content;
 max-width: 100%;
 display: inline-grid;
 grid-template-columns: 19px minmax(0, max-content) 16px;
 align-items: center;
 gap: 10px;
 border-radius: 4px;
 padding: 7px 9px;
 color: #171717;
 text-decoration: none;
}

.site-search-result:hover,
.site-search-result:focus-visible { background: #f4f4f1; }

.site-search-result > img {
 width: 16px;
 height: 16px;
 object-fit: contain;
 opacity: .64;
}

.site-search-result span { min-width: 0; display: block; }
.site-search-result strong { overflow: hidden; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.site-search-result .site-search-result-arrow { width: 13px; height: 13px; margin-left: 2px; }
.site-search-empty { margin: 20px 0 0; color: #73736f; font-size: 13px; }

.site-mini-bag {
 position: absolute;
 z-index: 1600;
 top: 100%;
 left: 0;
 width: 100%;
 max-height: calc(100vh - 72px);
 overflow: auto;
 border-top: 1px solid rgba(17, 17, 17, .08);
 background: #fff;
 color: #171717;
 box-shadow: 0 28px 60px rgba(17, 17, 17, .12);
}

.site-mini-bag[hidden] { display: none !important; }

.site-mini-bag-shell {
 width: min(100% - 48px, 1120px);
 margin: 0 auto;
 padding: 42px 0 54px;
}

.site-mini-bag-heading {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 24px;
}

.site-mini-bag-heading h2 {
 margin: 0;
 font-size: 28px;
 font-weight: 550;
 letter-spacing: -.04em;
}

.site-mini-bag-heading a {
 padding: 11px 18px;
 border-radius: 4px;
 background: var(--redovar-blue);
 color: #fff;
 font-size: 13px;
 font-weight: 550;
}

.site-mini-bag-items {
 width: min(100%, 760px);
 margin-top: 30px;
 display: grid;
 gap: 18px;
}

.site-mini-bag-item {
 display: grid;
 grid-template-columns: 76px minmax(0, 1fr);
 align-items: center;
 gap: 22px;
 min-height: 76px;
}

.site-mini-bag-item > img {
 width: 76px;
 height: 76px;
 object-fit: contain;
}

.site-mini-bag-item div { display: grid; gap: 5px; }
.site-mini-bag-item strong { font-size: 14px; font-weight: 550; }
.site-mini-bag-item span { color: #6b6b68; font-size: 12px; }
.site-mini-bag-empty { margin: 0; color: #6b6b68; font-size: 13px; }

.site-mini-bag-profile {
 margin-top: 38px;
 display: grid;
 width: max-content;
 min-width: 220px;
 gap: 2px;
}

.site-mini-bag-profile > span {
 margin-bottom: 8px;
 color: #858580;
 font-size: 12px;
}

.site-mini-bag-profile a {
 display: flex;
 align-items: center;
 gap: 11px;
 min-height: 34px;
 color: #2b2b2b;
 font-size: 13px;
 font-weight: 550;
}

.site-mini-bag-profile img {
 width: 15px;
 height: 15px;
 object-fit: contain;
 opacity: .64;
}

.site-mini-bag-profile a[href*="#saved-items"] img {
 filter: brightness(0) saturate(100%) invert(20%) sepia(89%) saturate(2356%) hue-rotate(218deg) brightness(78%) contrast(104%);
 opacity: 1;
}

/* Prevent the legacy text controls flashing before the avatar control mounts. */
.nav-signin,
.mobile-signin,
.demo-login { visibility: hidden; }




.nav-bag-mobile {
 display: none;
}

@media (max-width: 760px) {
 .site-search-trigger:not(.site-search-trigger--mobile) { display: none; }
 .site-search-trigger--mobile { display: grid; }
 .site-search-shell { width: min(100% - 32px, 1120px); padding: 26px 0 38px; }
 .site-search-field input { font-size: 23px; }
 .site-mini-bag-shell { width: min(100% - 32px, 1120px); padding: 28px 0 38px; }
 .site-mini-bag-heading h2 { font-size: 24px; }
 .site-mini-bag-heading a { padding: 10px 14px; }
 .site-mini-bag-items { max-height: 38vh; overflow: auto; }
 .site-mini-bag-item { grid-template-columns: 62px minmax(0, 1fr); gap: 16px; }
 .site-mini-bag-item > img { width: 62px; height: 62px; }
}








/* =========================================================
  DESKTOP MENU PANELS
========================================================= */




.header-panel {
 position: absolute;




 top: 100%;
 left: 0;
 right: 0;




 z-index: 210;




 background: #FFFFFF;
 color: var(--light-text);




 border-bottom: 1px solid var(--light-border);




 opacity: 0;
 visibility: hidden;




 transform: translateY(-5px);




 pointer-events: none;




 transition:
   opacity 160ms ease,
   transform 220ms var(--ease),
   visibility 160ms ease;
}




.header-panel.is-open {
 opacity: 1;
 visibility: visible;




 transform: none;




 pointer-events: auto;
}




.header-panel-links {
 margin-left: 192px;




 min-height: 150px;




 padding: 36px 0 42px;




 display: flex;
 align-items: flex-start;




 gap: clamp(54px, 7vw, 110px);
}




.header-panel-links a {
 position: relative;




 min-width: 130px;




 padding: 4px 0 10px;




 color: var(--light-text);




 font-size: 17px;
 line-height: 1.2;
 letter-spacing: -.025em;




 font-weight: 520;
}




.header-panel-links a::after {
 content: "";




 position: absolute;




 left: 0;
 bottom: 0;




 width: 24px;
 height: 2px;




 background: var(--redovar-terracotta);




 transform: scaleX(0);
 transform-origin: left center;




 transition: transform 180ms var(--ease);
}




.header-panel-links a:hover::after,
.header-panel-links a:focus-visible::after {
 transform: scaleX(1);
}








/* =========================================================
  STORE PANEL

  SAME WHITE PANEL AS THE EXISTING HEADER.

  No side flyout.
  No gray card.
  No separate rectangle.

  The contents simply change inside the existing panel.
========================================================= */




.header-panel--store
.header-panel-shell {
 position: relative;
}




.header-store-stage {
 position: relative;




 min-height: 150px;
}




.header-store-view {
 position: absolute;




 inset: 0;




 opacity: 0;
 visibility: hidden;




 pointer-events: none;




 transform: translateX(12px);




 transition:
   opacity 150ms ease,
   visibility 150ms ease,
   transform 220ms var(--ease);
}




.header-panel--store.is-open
.header-store-view.is-active {
  opacity: 1;
  visibility: visible;


  pointer-events: auto;


  transform: none;
}
.header-panel--store:not(.is-open)
.header-store-view,
.header-panel--store:not(.is-open)
.header-store-view.is-active {
  opacity: 0;
  visibility: hidden;


  pointer-events: none;


  transform: translateX(12px);
}





.header-panel-links--store {
 width: auto;
}




/* =========================================================
  STORE CATEGORY BUTTONS

  Deliberately styled to look exactly like the current
  header-panel links.
========================================================= */




.header-panel-category,
.header-store-back {
 position: relative;




 min-width: 130px;




 padding: 4px 0 10px;




 display: inline-flex;
 align-items: center;




 gap: 12px;




 border: 0;




 background: transparent;
 color: var(--light-text);




 font-size: 17px;
 line-height: 1.2;
 letter-spacing: -.025em;




 font-weight: 520;




 text-align: left;




 cursor: pointer;
}




.header-panel-category::after,
.header-store-back::after {
 content: "";




 position: absolute;




 left: 0;
 bottom: 0;




 width: 24px;
 height: 2px;




 background: var(--redovar-terracotta);




 transform: scaleX(0);
 transform-origin: left center;




 transition: transform 180ms var(--ease);
}




.header-panel-category:hover::after,
.header-panel-category:focus-visible::after,
.header-store-back:hover::after,
.header-store-back:focus-visible::after {
 transform: scaleX(1);
}




.header-panel-category:focus-visible,
.header-store-back:focus-visible {
 outline: 0;
}




/* =========================================================
  STORE FORWARD CHEVRON
========================================================= */




.header-panel-category-arrow {
 width: 8px;
 height: 8px;




 flex: 0 0 auto;




 margin-top: 1px;




 border-right:
   1.4px solid
   #777772;




 border-bottom:
   1.4px solid
   #777772;




 transform:
   rotate(-45deg);




 transition:
   border-color 150ms ease,
   transform 180ms var(--ease);
}




.header-panel-category:hover
.header-panel-category-arrow,
.header-panel-category:focus-visible
.header-panel-category-arrow {
 border-color: var(--light-text);




 transform:
   translateX(2px)
   rotate(-45deg);
}








/* =========================================================
  STORE BACK CHEVRON
========================================================= */




.header-store-back-arrow {
 width: 8px;
 height: 8px;




 flex: 0 0 auto;




 margin-left: 2px;




 border-left:
   1.4px solid
   #777772;




 border-bottom:
   1.4px solid
   #777772;




 transform:
   rotate(45deg);




 transition:
   border-color 150ms ease,
   transform 180ms var(--ease);
}




.header-store-back:hover
.header-store-back-arrow,
.header-store-back:focus-visible
.header-store-back-arrow {
 border-color: var(--light-text);




 transform:
   translateX(-2px)
   rotate(45deg);
}








/* =========================================================
  MOBILE TRIGGER
========================================================= */




.menu-trigger {
 display: none;




 width: 40px;
 height: 40px;




 margin-left: auto;




 padding: 0;




 align-items: center;
 justify-content: center;




 background: transparent;




 border-radius: var(--radius);




 cursor: pointer;
}




.menu-trigger img {
 width: 20px;
 height: 20px;




 object-fit: contain;




 filter:
   brightness(0)
   saturate(100%)
   invert(100%);
}








/* =========================================================
  MOBILE MENU
========================================================= */




.mobile-menu {
 position: fixed;




 inset:
   var(--header-h)
   0
   0;




 z-index: 200;




 padding:
   34px
   var(--gutter)
   42px;




 background: var(--dark-bg);
 color: var(--dark-text);




 opacity: 0;
 visibility: hidden;




 overflow-y: auto;




 pointer-events: none;




 transform: translateY(-5px);




 transition:
   opacity 180ms ease,
   transform 220ms var(--ease),
   visibility 180ms ease;
}




.mobile-menu.is-open {
 opacity: 1;
 visibility: visible;




 transform: none;




 pointer-events: auto;
}




.mobile-menu > nav {
 width: min(100%, 680px);




 margin-inline: auto;




 display: grid;
}




.mobile-nav-group {
 border-bottom: 0;
}




.mobile-submenu-trigger,
.mobile-nav-direct {
 width: 100%;
 min-height: 70px;




 padding: 0;




 display: flex;
 align-items: center;
 justify-content: space-between;




 background: transparent;
 color: #FFFFFF;




 font-size: clamp(22px, 6vw, 32px);
 line-height: 1;




 letter-spacing: -.035em;




 font-weight: 500;




 cursor: pointer;
}




.mobile-nav-direct {
 border-bottom: 0;
}




.mobile-submenu-trigger img {
 width: 14px;
 height: 14px;




 object-fit: contain;




 filter:
   brightness(0)
   saturate(100%)
   invert(100%);




 transition: transform 180ms var(--ease);
}




.mobile-submenu-trigger[aria-expanded="true"] img {
 transform: rotate(180deg);
}








/* =========================================================
  MOBILE SUBMENU
========================================================= */




.mobile-submenu {
 max-height: 0;




 overflow: hidden;




 opacity: 0;




 transition:
   max-height 320ms var(--ease),
   opacity 180ms ease,
   padding 220ms ease;
}




.mobile-submenu.is-open {
 max-height: 280px;




 padding-bottom: 26px;




 opacity: 1;
}




.mobile-submenu a {
 min-height: 42px;




 display: flex;
 align-items: center;




 color: var(--dark-secondary);




 font-size: 15px;
 line-height: 1;




 transition: color 150ms ease;
}




.mobile-submenu a:hover,
.mobile-submenu a:focus-visible {
 color: #FFFFFF;
}








/* =========================================================
  MOBILE STORE
========================================================= */




.mobile-submenu--store.is-open {
 max-height: 620px;
}




.mobile-store-category {
 width: 100%;
}




.mobile-store-category-trigger {
 width: 100%;
 min-height: 42px;




 padding: 0;




 display: flex;
 align-items: center;
 justify-content: space-between;




 border: 0;




 background: transparent;
 color: var(--dark-secondary);




 font-size: 15px;
 line-height: 1;




 font-weight: 400;




 text-align: left;




 cursor: pointer;




 transition: color 150ms ease;
}




.mobile-store-category-trigger:hover,
.mobile-store-category-trigger:focus-visible,
.mobile-store-category-trigger[aria-expanded="true"] {
 color: #FFFFFF;
}




.mobile-store-category-trigger:focus-visible {
 outline: 0;
}




.mobile-store-category-trigger img {
 width: 11px;
 height: 11px;




 margin-right: 2px;




 object-fit: contain;




 opacity: .68;




 filter:
   brightness(0)
   saturate(100%)
   invert(100%);




 transform: rotate(-90deg);




 transition:
   opacity 150ms ease,
   transform 180ms var(--ease);
}




.mobile-store-category-trigger:hover img,
.mobile-store-category-trigger:focus-visible img,
.mobile-store-category-trigger[aria-expanded="true"] img {
 opacity: 1;
}




.mobile-store-category-trigger[aria-expanded="true"] img {
 transform: rotate(0deg);
}




.mobile-store-nested {
 max-height: 0;




 padding-left: 18px;




 overflow: hidden;




 opacity: 0;




 transition:
   max-height 260ms var(--ease),
   opacity 160ms ease,
   padding 200ms ease;
}




.mobile-store-nested.is-open {
 max-height: 120px;




 padding-top: 2px;
 padding-bottom: 10px;




 opacity: 1;
}




.mobile-store-nested a {
 min-height: 38px;




 color: #FFFFFF;




 font-size: 14px;




 font-weight: 500;
}








/* =========================================================
  MOBILE ACTIONS
========================================================= */




.mobile-menu-actions {
 margin-top: 36px;




 display: flex;
 align-items: center;




 gap: 14px;
}




.mobile-signin {
 min-height: 42px;




 display: inline-flex;
 align-items: center;




 color: var(--dark-secondary);




 font-size: 13px;
 font-weight: 500;
}




.mobile-signin:hover,
.mobile-signin:focus-visible {
 color: #FFFFFF;
}








/* =========================================================
  FOOTER
========================================================= */




.site-footer {
 padding:
   86px
   0
   0;




 background: #0D0D0D;




 color: var(--dark-text);
}








/* =========================================================
  FOOTER MAIN
========================================================= */




.footer-main {
 padding-bottom: 76px;




 display: grid;




 grid-template-columns:
   minmax(250px, 1.35fr)
   repeat(4, minmax(120px, .62fr));




 gap: clamp(36px, 5vw, 82px);




 align-items: start;
}








/* =========================================================
  FOOTER BRAND
========================================================= */




.footer-brand-wrap {
 max-width: 330px;
}




.footer-brand img {
 width: 120px;
 height: 40px;




 object-fit: contain;
 object-position: left center;
}




.footer-brand-wrap p {
 margin: 22px 0 0;




 padding-left: 14px;




 max-width: 260px;




 color: var(--dark-secondary);




 font-size: 13px;
 line-height: 1.55;
}








/* =========================================================
  FOOTER COLUMNS
========================================================= */




.footer-column h3 {
 margin: 0 0 19px;




 color: var(--dark-soft);




 font-size: 10px;
 line-height: 1;




 letter-spacing: .035em;




 font-weight: 600;




 text-transform: uppercase;
}




.footer-column nav {
 display: grid;




 gap: 12px;
}




.footer-column a {
 width: max-content;
 max-width: 100%;




 color: #D8D8D4;




 font-size: 12px;
 line-height: 1.35;




 transition: color 150ms ease;
}




.footer-column a:hover,
.footer-column a:focus-visible {
 color: #FFFFFF;
}








/* =========================================================
  FOOTER LEGAL
========================================================= */




/* =========================================================
 FOOTER LEGAL
========================================================= */

.footer-legal {
  min-height:
    6px;

  height:
    var(--header-h);

  padding-top:
    0;

  padding-bottom:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    34px;

  border-top: 0;

  color:
    var(--dark-soft);
}





.footer-legal-links {
 flex: 1 1 auto;




 display: flex;
 align-items: center;




 gap: clamp(20px, 3vw, 42px);




 flex-wrap: wrap;
}




.footer-legal a,
.privacy-choices-link {
 padding: 0;




 background: transparent;




 color: var(--dark-soft);




 font-size: 10px;
 line-height: 1.4;




 cursor: pointer;




 transition: color 150ms ease;
}




.footer-legal a:hover,
.footer-legal a:focus-visible,
.privacy-choices-link:hover,
.privacy-choices-link:focus-visible {
 color: #FFFFFF;
}




.footer-copyright {
 flex: 0 0 auto;




 white-space: nowrap;




 font-size: 10px;
}








/* =========================================================
  PRIVACY MODAL
========================================================= */




.privacy-modal {
 position: fixed;




 inset: 0;




 z-index: 10000;




 display: grid;
 place-items: center;




 padding: 24px;




 opacity: 0;
 visibility: hidden;




 pointer-events: none;




 transition:
   opacity 180ms ease,
   visibility 180ms ease;
}




.privacy-modal.is-open {
 opacity: 1;
 visibility: visible;




 pointer-events: auto;
}








/* =========================================================
  PRIVACY BACKDROP
========================================================= */




.privacy-backdrop {
 position: absolute;




 inset: 0;




 background: rgba(8, 8, 8, .68);
}








/* =========================================================
  PRIVACY DIALOG
========================================================= */




.privacy-dialog {
 position: relative;




 z-index: 1;




 width: min(100%, 720px);
 max-height: min(820px, calc(100svh - 48px));




 overflow-y: auto;
 scrollbar-width: none;




 padding:
   clamp(30px, 5vw, 52px);




 border: 0;
 border-radius: var(--radius);




 background: #FFFFFF;
 color: var(--light-text);




 outline: 0;




 box-shadow: none;
}




.privacy-dialog::-webkit-scrollbar {
 display: none;
}








/* =========================================================
  PRIVACY CLOSE
========================================================= */




.privacy-close {
 position: absolute;




 top: 18px;
 right: 18px;




 width: 34px;
 height: 34px;




 padding: 0;




 display: grid;
 place-items: center;




 background: transparent;
 color: var(--light-secondary);




 font-size: 24px;
 line-height: 1;




 cursor: pointer;
}




.privacy-close:hover,
.privacy-close:focus-visible {
 color: var(--light-text);
}








/* =========================================================
  PRIVACY BRAND
========================================================= */




.privacy-brand {
 display: none;




 color: var(--redovar-blue);




 font-size: 13px;
 line-height: 1;




 font-weight: 650;
}








/* =========================================================
  PRIVACY HEADING
========================================================= */




.privacy-heading {
 margin-top: 0;
}




.privacy-heading h2 {
 margin: 0;




 font-size: clamp(28px, 4vw, 38px);
 line-height: 1;




 letter-spacing: -.045em;




 font-weight: 540;
}




.privacy-heading p {
 margin: 18px 0 0;




 max-width: 590px;




 color: var(--light-secondary);




 font-size: 13px;
 line-height: 1.65;
}








/* =========================================================
  PRIVACY OPTIONS
========================================================= */




.privacy-options {
 margin-top: 38px;




 display: grid;




 gap: 4px;
}




.privacy-choice {
 min-height: 74px;




 padding: 14px 0;




 display: grid;
 grid-template-columns: minmax(0, 1fr) auto;




 gap: 28px;




 align-items: center;
}




.privacy-choice > div {
 min-width: 0;
}




.privacy-choice strong {
 display: block;




 font-size: 13px;
 line-height: 1.2;




 font-weight: 600;
}




.privacy-choice p {
 margin: 6px 0 0;




 max-width: 470px;




 color: var(--light-secondary);




 font-size: 11px;
 line-height: 1.5;
}








/* =========================================================
  PRIVACY SWITCH
========================================================= */




.privacy-switch {
 position: relative;




 width: 54px;
 height: 30px;




 padding: 0;




 flex: 0 0 auto;




 border-radius: 999px;




 background: #DFDFDA;




 cursor: pointer;




 transition: background-color 160ms ease;
}




.privacy-switch::after {
 content: "";




 position: absolute;




 top: 4px;
 left: 4px;




 width: 22px;
 height: 22px;




 border-radius: 50%;




 background: #FFFFFF;




 transition: transform 180ms var(--ease);
}




.privacy-switch[aria-checked="true"] {
 background: var(--redovar-blue);
}




.privacy-switch[aria-checked="true"]::after {
 transform: translateX(24px);
}




.privacy-switch span {
 position: absolute;




 width: 1px;
 height: 1px;




 overflow: hidden;




 clip: rect(0, 0, 0, 0);




 white-space: nowrap;
}




.privacy-switch.is-required {
 background: #BFC8DB;




 cursor: default;
}








/* =========================================================
  PRIVACY ACTIONS
========================================================= */




.privacy-actions {
 margin-top: 36px;




 display: grid;
 grid-template-columns:
   minmax(0, 1fr)
   minmax(0, 1fr)
   minmax(0, 1fr);




 gap: 8px;
}




.privacy-action {
 min-height: 46px;




 padding: 0 14px;




 border-radius: var(--radius);




 background: var(--light-hover);
 color: var(--light-text);




 font-size: 11px;
 line-height: 1;




 font-weight: 600;




 cursor: pointer;




 transition:
   background-color 150ms ease,
   color 150ms ease;
}




.privacy-action:hover,
.privacy-action:focus-visible {
 background: #E8E8E3;
}




.privacy-action--primary {
 background: var(--redovar-terracotta);
 color: #FFFFFF;
}




.privacy-action--primary:hover,
.privacy-action--primary:focus-visible {
 background: #A83D0D;
}








/* =========================================================
  PRIVACY FOOTER
========================================================= */




.privacy-footer {
 margin-top: 28px;




 display: flex;
 justify-content: center;
}




.privacy-footer a {
 color: var(--light-secondary);




 font-size: 10px;




 text-decoration: underline;
 text-underline-offset: 3px;
}




.privacy-footer a:hover,
.privacy-footer a:focus-visible {
 color: var(--light-text);
}








/* =========================================================
  RESPONSIVE — HEADER
========================================================= */




@media (max-width: 960px) {




 .main-nav,
 .nav-actions,
 .header-panel {
   display: none;
 }




 .nav-bag-mobile {
   margin-left: auto;




   display: grid;
 }




 .menu-trigger {
   margin-left: 6px;




   display: inline-flex;
 }




}








/* =========================================================
  RESPONSIVE — FOOTER
========================================================= */




@media (max-width: 1100px) {




 .footer-main {
   grid-template-columns:
     minmax(240px, 1.3fr)
     repeat(2, minmax(140px, 1fr));




   row-gap: 54px;
 }




 .footer-brand-wrap {
   grid-row: span 2;
 }




}








@media (max-width: 760px) {




 .footer-main {
   grid-template-columns:
     1fr
     1fr;
 }




 .footer-brand-wrap {
   grid-column: 1 / -1;
   grid-row: auto;




   margin-bottom: 8px;
 }





.footer-legal {
  min-height:
    auto;

  height:
    auto;

  padding-top:
    20px;

  padding-bottom:
    20px;

  align-items:
    flex-start;

  flex-direction:
    column;

  gap:
    14px;
}


.footer-legal-links {
  gap:
    10px
    24px;
}





 .privacy-actions {
   grid-template-columns: 1fr;
 }




}








@media (max-width: 620px) {




 :root {
   --header-h: 68px;
   --gutter: 20px;
 }




 .brand img {
   width: 108px;
   height: 34px;
 }




 .footer-brand img {
   width: 108px;
   height: 34px;
 }




 .footer-main {
   grid-template-columns: 1fr 1fr;




   gap:
     44px
     26px;
 }




 .privacy-modal {
   padding: 12px;
 }




 .privacy-dialog {
   max-height: calc(100svh - 24px);




   padding:
     34px
     24px
     26px;
 }

 .privacy-heading {
   text-align: center;
 }

 .privacy-heading h2 {
   font-size: clamp(24px, 7.2vw, 28px);
 }

 .privacy-heading p {
   margin: 14px auto 0;
 }




 .privacy-choice {
   gap: 18px;
 }




}

@media (max-width: 760px) {
 .footer-legal { position: relative; flex-direction: row; align-items: center; gap: 14px; padding-top: 16px; padding-bottom: 16px; }
 .footer-legal-trigger { min-height: 34px; display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: var(--radius); background: transparent; color: #F5F5F3; padding: 6px 0; font: inherit; font-size: 12px; cursor: pointer; }
 .footer-legal-trigger img { width: 15px; height: 15px; filter: brightness(0) invert(96%); }
 .footer-legal-trigger:hover, .footer-legal-trigger[aria-expanded="true"] { color: #FFFFFF; }
 .footer-legal-links { display: flex; width: auto; flex: 0 0 auto; order: initial; margin-left: auto; }
 .footer-legal-links a { display: none; }
 .footer-legal-links .privacy-choices-link { padding: 6px 0; color: #BDBDB8; }
 .footer-legal-menu { position: absolute; z-index: 30; left: 50%; bottom: calc(100% + 8px); width: min(280px, calc(100vw - 32px)); min-width: 0; transform: translateX(-50%); padding: 5px; border: 0; border-radius: var(--radius); background: #FFFFFF; box-shadow: 0 12px 30px rgba(0,0,0,.22); }
 .footer-legal-menu a { min-height: 36px; display: flex; align-items: center; padding: 8px 10px; border-radius: var(--radius); color: #171717; text-decoration: none; font-size: 12px; }
 .footer-legal-menu a:hover, .footer-legal-menu a:focus-visible { background: #F2F2EF; }
}

.footer-legal-trigger { display: none; }

@media (max-width: 760px) {
 .footer-legal-trigger { display: inline-flex; }
 .footer-legal { flex-wrap: nowrap; }
 .footer-legal-links .privacy-choices-link,
 .footer-copyright { white-space: nowrap; }
 .footer-brand-wrap { max-width: none; }
 .footer-brand-wrap p { padding-left: 0; }
}








@media (max-width: 460px) {




 .footer-main {
   grid-template-columns: 1fr;
 }




 .footer-brand-wrap {
   grid-column: 1;
 }




 .mobile-menu-actions {
   align-items: center;
   flex-direction: row;
 }




 .mobile-signin,
 .mobile-primary {
   width: 100%;




   justify-content: center;
 }




 .mobile-primary {
   flex: 1;
 }




}

/* Phone and tablet navigation stays compact without changing desktop layout. */
@media (max-width: 620px) {
 .site-search-trigger--mobile { margin-left: auto; }
 .nav-bag-mobile { margin-left: 0; }
 .menu-trigger { margin-left: 4px; width: 36px; height: 36px; }
 .mobile-menu { padding-top: 20px; padding-bottom: 28px; }
 .mobile-submenu-trigger,
 .mobile-nav-direct { min-height: 52px; font-size: clamp(17px, 5vw, 20px); }
 .mobile-submenu.is-open { padding-bottom: 14px; }
 .mobile-submenu a,
 .mobile-store-category-trigger { min-height: 36px; font-size: 14px; }
 .mobile-menu-actions { margin-top: 24px; align-items: flex-start; flex-direction: column; gap: 8px; }
 .mobile-account { width: max-content; }
 .mobile-account .site-account-trigger { width: auto; min-width: 0; height: 36px; display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; border-radius: 0; }
 .mobile-account .site-account-trigger img,
 .mobile-account .site-account-trigger .site-account-initial { width: 26px; height: 26px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(231, 231, 227, .48); border-radius: 50%; padding: 5px; }
 .mobile-account .site-account-trigger .site-account-initial { padding: 0; font-size: 10px; }
 .mobile-account-label { display: inline; color: #FFFFFF; font-size: 13px; font-weight: 600; white-space: nowrap; }
 .mobile-account .site-account-menu { top: calc(100% + 7px); right: auto; left: 0; width: min(220px, calc(100vw - 40px)); }
 .mobile-primary { width: 100%; min-height: 40px; flex: 0 0 auto; align-self: stretch; justify-content: center; margin-top: 32px; padding-inline: 18px; }
 .menu-trigger,
 .footer-legal-trigger,
 .menu-trigger:focus,
 .footer-legal-trigger:focus,
 .menu-trigger:focus-visible,
 .footer-legal-trigger:focus-visible { outline: 0; box-shadow: none; }
}

@media (max-width: 620px) {
 .privacy-dialog { padding: 68px 24px 30px; }
 .privacy-close { top: 16px; right: 16px; }
}








/* =========================================================
  REDUCED MOTION
========================================================= */




@media (prefers-reduced-motion: reduce) {




 html {
   scroll-behavior: auto;
 }




 *,
 *::before,
 *::after {
   animation-duration: .001ms !important;
   animation-iteration-count: 1 !important;
   transition-duration: .001ms !important;
 }


.nav-bag-count.is-changing {
  animation:
    none !important;
}


}