/* =========================================================
  REDOVAR DEVICE ORDER
========================================================= */


/* =========================================================
  VARIABLES
========================================================= */

:root {

  --order-blue:
    #0B369A;

  --order-blue-hover:
    #2450A8;

  --order-terra:
    #C34811;

  --order-text:
    #171717;

  --order-muted:
    #6B6B68;

  --order-soft:
    #92928D;

  --order-border:
    #E7E7E3;

  --order-white:
    #FFFFFF;

  --order-warm-white:
    #FEFEFC;

  --order-surface:
    #F6F6F3;

  --order-surface-2:
    #ECECE8;

  --order-radius:
    4px;

  --order-max:
    1480px;

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

  --order-ease:
    cubic-bezier(
      .22,
      .61,
      .36,
      1
    );

}


/* =========================================================
  BASE
========================================================= */

.order-main {

  width:
    100%;

  overflow:
    visible;

  background:
    var(--order-white);

  color:
    var(--order-text);

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

  -webkit-font-smoothing:
    antialiased;

  text-rendering:
    optimizeLegibility;

}


.order-main *,
.order-main *::before,
.order-main *::after {

  box-sizing:
    border-box;

}


.order-main button,
.order-main input,
.order-main select {

  font:
    inherit;

}


.order-main button {

  -webkit-tap-highlight-color:
    transparent;

}


.order-main img {

  max-width:
    100%;

  display:
    block;

}


/* =========================================================
  HIDDEN
========================================================= */

.order-visually-hidden {

  position:
    absolute !important;

  width:
    1px !important;

  height:
    1px !important;

  padding:
    0 !important;

  margin:
    -1px !important;

  overflow:
    hidden !important;

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

  white-space:
    nowrap !important;

  border:
    0 !important;

}


/* =========================================================
  SHELL
========================================================= */

.order-shell {

  width:
    min(
      100%,
      var(--order-max)
    );

  margin-inline:
    auto;

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

}


/* =========================================================
  PRODUCT
========================================================= */

.order-product {

  position:
    relative;

  padding:
    calc(
      var(
        --header-h,
        76px
      )
      +
      clamp(
        30px,
        3.6vw,
        52px
      )
    )
    0
    clamp(
      110px,
      9vw,
      156px
    );

  background:
    var(--order-surface);

}


/* =========================================================
  SHOP HEADING
========================================================= */

.order-shop-heading {

  display:
    block;

}


.order-shop-heading-copy h1 {

  margin:
    0;

  color:
    var(--order-text);

  font-size:
    clamp(
      30px,
      3.2vw,
      50px
    );

  line-height:
    .96;

  letter-spacing:
    -.057em;

  font-weight:
    520;

}


.order-shop-price {

  margin-top:
    17px;

  display:
    block;

  color:
    var(--order-text);

  font-size:
    clamp(
      26px,
      2.3vw,
      34px
    );

  line-height:
    1;

  letter-spacing:
    -.042em;

  font-weight:
    550;

  font-variant-numeric:
    tabular-nums;

}

/* =========================================================
  PRICE + QUANTITY
========================================================= */

.order-shop-purchase-row {

  margin-top:
    18px;

  display:
    flex;

  align-items:
    center;

  gap:
    18px;

}


.order-shop-purchase-row
.order-shop-price {

  margin-top:
    0;

}


/* =========================================================
  DEVICE QUANTITY
========================================================= */

.order-device-quantity {

  min-width:
    88px;

  min-height:
    44px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-start;

}


/* =========================================================
  DEVICE QUANTITY — 1–9
========================================================= */

.order-device-quantity-select {

  position:
    relative;

  width:
    84px;

  height:
    44px;

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

  background:
    transparent;

}

.order-device-quantity-select:hover,
.order-device-quantity-select:focus-within {
  background:
    var(--order-surface);
}


.order-device-quantity-select select {

  width:
    100%;

  height:
    44px;

  padding:
    0
    30px
    0
    15px;

  border:
    0;

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

  outline:
    0;

  background:
    transparent;

  color:
    var(--order-text);

  font-size:
    13px;

  font-weight:
    600;

  cursor:
    pointer;

  appearance:
    none;

  -webkit-appearance:
    none;

}


.order-device-quantity-select::after {

  content:
    "";

  position:
    absolute;

  top:
    50%;

  right:
    14px;

  width:
    7px;

  height:
    7px;

  border-right:
    1.4px
    solid
    #555551;

  border-bottom:
    1.4px
    solid
    #555551;

  pointer-events:
    none;

  transform:
    translateY(
      -72%
    )
    rotate(
      45deg
    );

}


/* =========================================================
  DEVICE QUANTITY — 10+
========================================================= */

.order-device-custom-quantity {

  width:
    94px;

  height:
    44px;

  padding:
    0
    12px;

  border:
    1px solid var(--order-border);

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

  outline:
    0;

  background:
    var(--order-white);

  color:
    var(--order-text);

  font-size:
    13px;

  font-weight:
    600;

  text-align:
    center;

  font-variant-numeric:
    tabular-nums;

}


.order-device-custom-quantity:focus {

  outline:
    2px
    solid
    rgba(
      11,
      54,
      154,
      .16
    );

  outline-offset:
    2px;

}


/* =========================================================
  PRODUCT GRID
========================================================= */

.order-product-grid {

  margin-top:
    clamp(
      22px,
      2.6vw,
      38px
    );

  display:
    grid;

  grid-template-columns:
    minmax(
      520px,
      1.15fr
    )
    minmax(
      370px,
      .85fr
    );

  gap:
    clamp(
      64px,
      7vw,
      118px
    );

  align-items:
    start;

}


/* =========================================================
  GALLERY

  IMPORTANT:
  Sticky left side.
  The product info on the right continues scrolling.
========================================================= */

.order-gallery {

  position:
    sticky;

  top:
    calc(
      var(
        --header-h,
        76px
      )
      +
      14px
    );

  min-width:
    0;

  align-self:
    start;

}


/* =========================================================
  GALLERY MAIN
========================================================= */

.order-gallery-main {

  position:
    relative;

  isolation:
    isolate;

  width:
    100%;

  height:
    clamp(
      540px,
      56vw,
      720px
    );

  display:
    grid;

  place-items:
    center;

  overflow:
    visible;

  background:
    transparent;

}


.order-gallery-stage {

  position:
    relative;

  width:
    100%;

  height:
    100%;

  display:
    grid;

  place-items:
    center;

  outline:
    0;

}


/* =========================================================
  GALLERY IMAGE
========================================================= */

.order-gallery-image {

  position:
    absolute;

  inset:
    0;

  width:
    auto;

  height:
    auto;

  max-width:
    96%;

  max-height:
    96%;

  margin:
    auto;

  object-fit:
    contain;

  object-position:
    center;

  opacity:
    0;

  transform:
    scale(
      .99
    );

  pointer-events:
    none;

  user-select:
    none;

  -webkit-user-drag:
    none;

  transition:
    opacity
    420ms
    ease,
    transform
    560ms
    var(--order-ease);

}


.order-gallery-image.is-active {

  opacity:
    1;

  transform:
    scale(
      1
    );

}


/* =========================================================
  GALLERY ARROWS
========================================================= */

.order-gallery-arrow {

  position:
    absolute;

  top:
    50%;

  z-index:
    8;

  width:
    42px;

  height:
    42px;

  padding:
    0;

  display:
    grid;

  place-items:
    center;

  border:
    0;

  border-radius:
    50%;

  outline:
    0;

  background:
    rgba(
      84,
      84,
      80,
      .12
    );

  opacity:
    0;

  visibility:
    hidden;

  pointer-events:
    none;

  cursor:
    pointer;

  transform:
    translateY(
      -50%
    )
    scale(
      .96
    );

  transition:
    opacity
    160ms
    ease,
    visibility
    160ms
    ease,
    transform
    180ms
    ease,
    background-color
    160ms
    ease;

}


.order-gallery-main:hover
.order-gallery-arrow,

.order-gallery-main:focus-within
.order-gallery-arrow {

  opacity:
    1;

  visibility:
    visible;

  pointer-events:
    auto;

  transform:
    translateY(
      -50%
    )
    scale(
      1
    );

}


.order-gallery-arrow:hover,
.order-gallery-arrow:focus-visible {

  background:
    rgba(
      84,
      84,
      80,
      .2
    );

}


.order-gallery-arrow img {

  width:
    13px;

  height:
    13px;

  object-fit:
    contain;

  opacity:
    .72;

  pointer-events:
    none;

}


.order-gallery-arrow--previous {

  left:
    5px;

}


.order-gallery-arrow--next {

  right:
    5px;

}


.order-gallery-arrow--previous img {

  transform:
    rotate(
      90deg
    );

}


.order-gallery-arrow--next img {

  transform:
    rotate(
      -90deg
    );

}


/* =========================================================
  GALLERY DOTS
========================================================= */

.order-gallery-dots {

  min-height:
    28px;

  margin-top:
    8px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    9px;

}


.order-gallery-dot {

  width:
    7px;

  height:
    7px;

  min-width:
    7px;

  min-height:
    7px;

  padding:
    0;

  border:
    0;

  border-radius:
    50%;

  background:
    #CCCCCA;

  cursor:
    pointer;

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

}


.order-gallery-dot:hover,
.order-gallery-dot:focus-visible {

  background:
    #888883;

  transform:
    scale(
      1.2
    );

  outline:
    0;

}


.order-gallery-dot.is-active {

  background:
    #333330;

  transform:
    scale(
      1.16
    );

}


/* =========================================================
  PRODUCT INFORMATION
========================================================= */

.order-product-information {

  min-width:
    0;

  padding-top:
    10px;

}


/* =========================================================
  FEATURES
========================================================= */

.order-feature-list {

  display:
    grid;

  gap:
    44px;

}


.order-feature {

  display:
    flex;

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

  gap:
    18px;

  align-items:
    center;

}


.order-feature-icon {

  width:
    38px;

  height:
    38px;

  display:
    grid;

  place-items:
    center;

}


.order-feature-icon img {

  width:
    28px;

  height:
    28px;

  object-fit:
    contain;

 flex: 0 0 28px;

 display: block;

 object-fit: contain;

}




.order-feature p {

  max-width:
    490px;

  margin:
    0;

  color:
    var(--order-muted);

  font-size:
    14px;

  line-height:
    1.62;

  letter-spacing:
    -.008em;

}


.order-feature strong {

  color:
    var(--order-text);

  font-weight:
    600;

}


/* =========================================================
  PRODUCT INFORMATION
========================================================= */

.order-information {

  margin-top:
    56px;

  display:
    grid;

  gap:
    8px;

}


.order-information details {

  border:
    0;

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

  background:
    var(--order-white);

}


.order-information summary {

  min-height:
    64px;

  padding:
    18px
    20px;

  display:
    grid;

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

  gap:
    20px;

  align-items:
    center;

  list-style:
    none;

  cursor:
    pointer;

}


.order-information summary::-webkit-details-marker {

  display:
    none;

}


.order-information summary > span:first-child {

  color:
    var(--order-text);

  font-size:
    12px;

  font-weight:
    600;

}


/* =========================================================
  DETAIL ICON
========================================================= */

.order-detail-icon {

  position:
    relative;

  width:
    20px;

  height:
    20px;

  justify-self:
    end;

}


.order-detail-icon::before,
.order-detail-icon::after {

  content:
    "";

  position:
    absolute;

  top:
    50%;

  left:
    50%;

  width:
    9px;

  height:
    1px;

  background:
    var(--order-muted);

  transform:
    translate(
      -50%,
      -50%
    );

}


.order-detail-icon::after {

  transform:
    translate(
      -50%,
      -50%
    )
    rotate(
      90deg
    );

  transition:
    opacity
    150ms
    ease;

}


.order-information details[open]
.order-detail-icon::after {

  opacity:
    0;

}


/* =========================================================
  DETAIL CONTENT
========================================================= */

.order-detail-content {

  padding:
    0
    20px
    22px;

}


.order-detail-content p {

  max-width:
    450px;

  margin:
    0;

  color:
    var(--order-muted);

  font-size:
    11px;

  line-height:
    1.65;

}


.order-detail-list {

  margin:
    0;

  display:
    grid;

}


.order-detail-list > div {

  min-height:
    44px;

  display:
    grid;

  grid-template-columns:
    minmax(
      110px,
      .58fr
    )
    minmax(
      0,
      1fr
    );

  gap:
    20px;

  align-items:
    center;

}


.order-detail-list dt {

  color:
    var(--order-soft);

  font-size:
    10px;

}


.order-detail-list dd {

  margin:
    0;

  color:
    var(--order-text);

  font-size:
    10px;

  line-height:
    1.4;

  text-align:
    right;

}


/* =========================================================
  ERROR
========================================================= */

.order-product-error {

  width:
    min(
      100%,
      620px
    );

  margin:
    34px
    0
    0;

  color:
    #A53C24;

  font-size:
    12px;

  line-height:
    1.55;

}


.order-product-error[hidden] {

  display:
    none;

}


/* =========================================================
  PLAN + CARE
========================================================= */

.order-service-section {

  padding:
    clamp(
      104px,
      8.5vw,
      146px
    )
    0;

  background:
    var(--order-white);

}


.order-care-section {

  background:
    var(--order-surface);

}


.order-service-grid {

  display:
    grid;

  grid-template-columns:
    minmax(
      380px,
      .92fr
    )
    minmax(
      430px,
      1.08fr
    )
    minmax(
      255px,
      .64fr
    );

  gap:
    clamp(
      38px,
      4.6vw,
      68px
    );

  align-items:
    start;

}


/* =========================================================
  SERVICE TITLE
========================================================= */

.order-service-heading {

  min-width:
    0;

}


.order-service-heading h2 {

  width:
    max-content;

  max-width:
    100%;

  margin:
    0;

  color:
    var(--order-text);

  font-size:
    clamp(
      36px,
      3vw,
      45px
    );

  line-height:
    1;

  letter-spacing:
    -.047em;

  font-weight:
    520;

  white-space:
    nowrap;

}


/* =========================================================
  CHOICE GROUP
========================================================= */

.order-choice-group {

  min-width:
    0;

  margin:
    0;

  padding:
    0;

  border:
    0;

}


/* =========================================================
  CHOICE
========================================================= */

.order-choice {

  position:
    relative;

  min-height:
    102px;

  padding:
    23px
    24px;

  display:
    grid;

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

  gap:
    16px;

  align-items:
    start;

  border:
    0;

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

  background:
    #FAFAF8;

  cursor:
    pointer;

  transition:
    background-color
    160ms
    ease;

}


.order-choice
+
.order-choice {

  margin-top:
    9px;

}


/* ---------------------------------------------------------
  IMPORTANT

  Unselected choices remain plain white.

  Selected choices become gray.
--------------------------------------------------------- */

.order-choice:hover,
.order-choice:focus-within {

  background:
    #F8F8F6;

}


.order-choice.is-selected,
.order-choice.is-selected:hover,
.order-choice.is-selected:focus-within {

  background:
    var(--order-surface-2);

}


.order-care-section
.order-choice {

  background:
    #FAFAF8;

}


.order-care-section
.order-choice.is-selected,

.order-care-section
.order-choice.is-selected:hover,

.order-care-section
.order-choice.is-selected:focus-within {

  background:
    var(--order-surface-2);

}


/* =========================================================
  HIDDEN RADIO
========================================================= */

.order-choice input {

  position:
    absolute;

  width:
    1px;

  height:
    1px;

  overflow:
    hidden;

  opacity:
    0;

  pointer-events:
    none;

}


/* =========================================================
  CHECK
========================================================= */

.order-choice-check {

  position:
    relative;

  width:
    22px;

  height:
    22px;

  margin-top:
    1px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

  background:
    #D0D0CC;

  transition:
    background-color
    160ms
    ease;

}


.order-choice-check span {

  width:
    8px;

  height:
    5px;

  border-left:
    1.8px
    solid
    #FFFFFF;

  border-bottom:
    1.8px
    solid
    #FFFFFF;

  opacity:
    0;

  transform:
    translateY(
      -1px
    )
    rotate(
      -45deg
    );

}


.order-choice.is-selected
.order-choice-check {

  background:
    var(--order-blue);

}


.order-choice.is-selected
.order-choice-check span {

  opacity:
    1;

}


/* =========================================================
  COPY
========================================================= */

.order-choice-copy {

  min-width:
    0;

  display:
    grid;

  gap:
    8px;

}


.order-choice-copy strong {

  color:
    var(--order-text);

  font-size:
    15px;

  line-height:
    1.25;

  font-weight:
    600;

}


.order-choice-copy > span {

  max-width:
    440px;

  color:
    var(--order-muted);

  font-size:
    12px;

  line-height:
    1.52;

}


/* =========================================================
  PLAN MATCH
========================================================= */

.order-plan-match {

  margin-top:
    16px;

  padding:
    20px
    22px;

  display:
    grid;

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

  gap:
    5px
    22px;

  align-items:
    end;

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

  background:
    var(--order-surface);

}


.order-plan-match[hidden] {

  display:
    none;

}


.order-plan-match > span {

  color:
    var(--order-soft);

  font-size:
    10px;

}


.order-plan-match > strong {

  color:
    var(--order-text);

  font-size:
    16px;

  font-weight:
    600;

}


.order-plan-match > small {

  color:
    var(--order-muted);

  font-size:
    10px;

}


.order-plan-match-price {

  grid-column:
    2;

  grid-row:
    1
    /
    4;

  display:
    flex;

  align-items:
    baseline;

  gap:
    5px;

}


.order-plan-match-price strong {

  color:
    var(--order-text);

  font-size:
    22px;

  line-height:
    1;

  letter-spacing:
    -.035em;

  font-weight:
    550;

}


.order-plan-match-price span {

  color:
    var(--order-muted);

  font-size:
    10px;

}


/* =========================================================
  CARE TITLE
========================================================= */

.order-care-title {

  display:
    inline-flex !important;

  align-items:
    center;

  gap:
    9px;

}


.order-care-title img {

  width:
    24px;

  height:
    24px;

  flex:
    0
    0
    auto;

  object-fit:
    contain;

}


.order-care-price {

  margin-top:
    4px;

  color:
    var(--order-text) !important;

  font-size:
    11px !important;

  font-weight:
    550 !important;

    text-align: right;

}


/* =========================================================
  PLAN / CARE HELP

  No forced height.
  It ends naturally with its content.
========================================================= */

.order-service-help {

  width:
    100%;

  min-height:
    0;

  padding:
    24px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  align-self:
    start;

  border:
    0;

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

  background:
    var(--order-surface);

}


.order-care-section
.order-service-help {

  background:
    var(--order-white);

}


.order-service-help h3 {

  max-width:
    235px;

  margin:
    0;

  color:
    var(--order-text);

  font-size:
    19px;

  line-height:
    1.18;

  letter-spacing:
    -.03em;

  font-weight:
    550;

}


.order-service-help p {

  max-width:
    250px;

  margin:
    12px
    0
    0;

  color:
    var(--order-muted);

  font-size:
    11px;

  line-height:
    1.55;

}


.order-service-help button {

  margin-top:
    22px;

  padding:
    0;

  border:
    0;

  background:
    transparent;

  color:
    var(--order-blue);

  font-size:
    11px;

  line-height:
    1.4;

  font-weight:
    600;

  cursor:
    pointer;

  text-decoration:
    underline;

  text-decoration-thickness:
    1px;

  text-underline-offset:
    4px;

}


.order-service-help button:hover,
.order-service-help button:focus-visible {

  color:
    var(--order-blue-hover);

  outline:
    0;

}


/* =========================================================
  ACCESSORIES
========================================================= */

.order-accessories {

  padding:
    clamp(
      108px,
      9vw,
      154px
    )
    0;

  background:
    var(--order-white);

}


.order-accessories-heading {

  margin-bottom:
    clamp(
      46px,
      5vw,
      70px
    );

}


.order-accessories-heading h2 {

  margin:
    0;

  color:
    var(--order-text);

  font-size:
    clamp(
      40px,
      4.2vw,
      58px
    );

  line-height:
    .98;

  letter-spacing:
    -.052em;

  font-weight:
    520;

    text-align: center;

}


/* =========================================================
  ACCESSORY CAROUSEL
========================================================= */

.order-accessory-carousel {

  width:
    100%;

}


.order-accessory-viewport {

  width:
    100%;

  overflow:
    hidden;

}


.order-accessory-track {

  width:
    200%;

  display:
    flex;

  transform:
    translate3d(
      0,
      0,
      0
    );

  transition:
    transform
    600ms
    var(--order-ease);

  will-change:
    transform;

}


.order-accessory-page {

  width:
    50%;

  flex:
    0
    0
    50%;

  display:
    grid;

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

  gap:
    clamp(
      28px,
      3.4vw,
      50px
    );

}


/* =========================================================
  ACCESSORY CARD
========================================================= */

.order-accessory-card {

  min-width:
    0;

  display:
    grid;

  grid-template-rows:
    minmax(
      310px,
      1fr
    )
    auto;

  background:
    transparent;

}


/* =========================================================
  ACCESSORY IMAGE
========================================================= */

.order-accessory-image {

  min-height:
    310px;

  padding:
    clamp(
      22px,
      2.8vw,
      40px
    );

  display:
    grid;

  place-items:
    center;

  background:
    var(--order-surface);

}


.order-accessory-image img {

  width:
    min(
      100%,
      290px
    );

  max-height:
    275px;

  object-fit:
    contain;

}


/* =========================================================
  ACCESSORY CONTENT
========================================================= */

.order-accessory-content {

  position:
    relative;

  min-height:
    96px;

  padding:
    20px
    50px
    0
    0;

}


.order-accessory-copy h3 {

  margin:
    0;

  color:
    var(--order-text);

  font-size:
    17px;

  line-height:
    1.26;

  letter-spacing:
    -.026em;

  font-weight:
    550;

}


.order-accessory-price {

  margin-top:
    8px;

  display:
    block;

  color:
    var(--order-muted);

  font-size:
    13px;

  line-height:
    1;

  font-weight:
    500;

}


/* =========================================================
  ACCESSORY ADD

  NO GENERATED PLUS GLYPH.

  If changethisplusicon.svg does not exist yet,
  the control stays empty.
========================================================= */

.order-accessory-add {

  position:
    absolute;

  top:
    17px;

  right:
    0;

  width:
    38px;

  height:
    38px;

  padding:
    0;

  display:
    grid;

  place-items:
    center;

  border:
    0;

  border-radius:
    50%;

  background:
    rgba(
      84,
      84,
      80,
      .1
    );

  cursor:
    pointer;

  transition:
    background-color
    160ms
    ease,
    transform
    160ms
    ease;

}


.order-accessory-add:hover,
.order-accessory-add:focus-visible {

  background:
    rgba(
      84,
      84,
      80,
      .18
    );

  outline:
    0;

}


.order-accessory-add:active {

  transform:
    scale(
      .95
    );

}


.order-accessory-add img {

  width:
    22px;

  height:
    22px;

  display:
    block;

  object-fit:
    contain;

}


/* =========================================================
  ACCESSORY STATUS
========================================================= */

.order-accessory-status {

  min-height:
    16px;

  margin-top:
    8px;

  display:
    block;

  color:
    var(--order-blue);

  font-size:
    10px;

  font-weight:
    550;

}


/* =========================================================
  ACCESSORY DOTS
========================================================= */

.order-accessory-dots {

  margin-top:
    38px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    9px;

}


.order-accessory-dot {

  width:
    7px;

  height:
    7px;

  padding:
    0;

  border:
    0;

  border-radius:
    50%;

  background:
    #CACAC6;

  cursor:
    pointer;

}


.order-accessory-dot.is-active {

  background:
    var(--order-text);

}


/* =========================================================
  FINAL PACKAGE
========================================================= */

.order-final {

  position:
    relative;

  padding:
    clamp(
      104px,
      9vw,
      150px
    )
    0
    clamp(
      118px,
      10vw,
      170px
    );

  background:
    var(--order-surface);

}


/* =========================================================
  FINAL GRID

  LEFT:
  package title + image

  MIDDLE:
  complete order breakdown + Save for later

  RIGHT:
  Due today + Annual services + Add to Bag
========================================================= */

.order-final-grid {

  display:
    grid;

  grid-template-columns:
    minmax(
      300px,
      .82fr
    )
    minmax(
      360px,
      1.05fr
    )
    minmax(
      260px,
      .7fr
    );

  gap:
    clamp(
      44px,
      5.2vw,
      78px
    );

  align-items:
    stretch;

}


/* =========================================================
  LEFT — PACKAGE
========================================================= */

.order-final-primary-wrap {

  min-width:
    0;

  align-self:
    stretch;

}


.order-final-primary {

  position:
    sticky;

  top:
    calc(
      var(
        --header-h,
        76px
      )
      +
      38px
    );

}


/* =========================================================
  PACKAGE TITLE
========================================================= */

.order-final-intro h2 {

  width:
    min(
      100%,
      335px
    );

  margin:
    0;

  color:
    var(--order-text);

  font-size:
    clamp(
      34px,
      3.3vw,
      46px
    );

  line-height:
    .98;

  letter-spacing:
    -.049em;

  font-weight:
    520;

}


.order-final-intro p {

  width:
    min(
      100%,
      310px
    );

  margin:
    12px
    0
    0;

  color:
    #9A9A96;

  font-size:
    clamp(
      19px,
      1.8vw,
      25px
    );

  line-height:
    1.15;

  letter-spacing:
    -.03em;

  font-weight:
    500;

}


/* =========================================================
  PACKAGE IMAGE

  No white card.
  No image background.
  Product artwork stands directly on the section.
========================================================= */

.order-final-media {

  width:
    100%;

  min-height:
    340px;

  margin-top:
    34px;

  display:
    grid;

  place-items:
    center;

  background:
    transparent;

}


.order-final-media img {

  width:
    min(
      100%,
      350px
    );

  height:
    auto;

  max-height:
    330px;

  display:
    block;

  object-fit:
    contain;

  object-position:
    center;

}


/* =========================================================
  MIDDLE — ORDER SUMMARY
========================================================= */

.order-final-summary {

  min-width:
    0;

  padding-top:
    2px;

}


/* =========================================================
  ORDER ITEMS
========================================================= */

.order-final-items {

  display:
    grid;

  gap:
    34px;

}


/* =========================================================
  ORDER ITEM
========================================================= */

.order-final-item {

  min-width:
    0;

  display:
    grid;

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

  gap:
    20px;

  align-items:
    start;

}


/* =========================================================
  ORDER ITEM COPY
========================================================= */

.order-final-item-copy {

  min-width:
    0;

}


.order-final-item-copy strong {

  display:
    block;

  margin:
    0;

  color:
    var(--order-text);

  font-size:
    14px;

  line-height:
    1.35;

  font-weight:
    600;

}


.order-final-item-copy span {

  margin-top:
    6px;

  display:
    block;

  color:
    var(--order-muted);

  font-size:
    11px;

  line-height:
    1.45;

}


.order-final-item-copy small {

  margin-top:
    4px;

  display:
    block;

  color:
    var(--order-soft);

  font-size:
    10px;

  line-height:
    1.45;

}


/* =========================================================
  ORDER ITEM PRICE
========================================================= */

.order-final-item-price {

  flex:
    0
    0
    auto;

  color:
    var(--order-text);

  font-size:
    15px;

  line-height:
    1.3;

  font-weight:
    550;

  text-align:
    right;

  white-space:
    nowrap;

  font-variant-numeric:
    tabular-nums;

}


.order-final-item-price.is-zero {

  color:
    var(--order-soft);

}


/* =========================================================
  ACCESSORY ACTIONS
========================================================= */

.order-final-accessory-actions {

  margin-top:
    12px;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

}


/* =========================================================
  ACCESSORY QUANTITY — 1–9
========================================================= */

.order-accessory-quantity-select {

  position:
    relative;

  width:
    68px;

  height:
    38px;

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

  background:
    transparent;

}

.order-accessory-quantity-select:hover,
.order-accessory-quantity-select:focus-within {
  background:
    var(--order-surface);
}


.order-accessory-quantity-select select {

  width:
    100%;

  height:
    38px;

  padding:
    0
    28px
    0
    12px;

  border:
    0;

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

  outline:
    0;

  background:
    transparent;

  color:
    var(--order-text);

  font-size:
    12px;

  line-height:
    38px;

  font-weight:
    550;

  cursor:
    pointer;

  appearance:
    none;

  -webkit-appearance:
    none;

}


.order-accessory-quantity-select::after {

  content:
    "";

  position:
    absolute;

  top:
    50%;

  right:
    11px;

  width:
    6px;

  height:
    6px;

  border-right:
    1.4px
    solid
    #555551;

  border-bottom:
    1.4px
    solid
    #555551;

  pointer-events:
    none;

  transform:
    translateY(
      -70%
    )
    rotate(
      45deg
    );

}


/* =========================================================
  ACCESSORY QUANTITY — 10+
========================================================= */

.order-accessory-custom-quantity {

  width:
    80px;

  height:
    38px;

  padding:
    0
    10px;

  border:
    1px solid var(--order-border);

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

  outline:
    0;

  background:
    var(--order-white);

  color:
    var(--order-text);

  font-size:
    12px;

  font-weight:
    550;

  text-align:
    center;

  font-variant-numeric:
    tabular-nums;

}


.order-accessory-custom-quantity:focus {

  outline:
    2px
    solid
    rgba(
      11,
      54,
      154,
      .16
    );

  outline-offset:
    2px;

}


/* =========================================================
  REMOVE ACCESSORY
========================================================= */

.order-final-accessory-remove {
  width: 30px;
  height: 30px;
  padding: 6px;
  display: grid;
  place-items: center;

  border:
    0;

  background:
    transparent;

  cursor:
    pointer;

}


.order-final-accessory-remove:hover,
.order-final-accessory-remove:focus-visible {
  background: rgba(195, 72, 17, .07);

  outline:
    0;

}

.order-final-remove-icon {
  width: 16px;
  height: 16px;
  display: block;
  background: var(--order-terra);
  -webkit-mask: url("../../../assets/icons/store/trash-bin-minimalistic-2-svgrepo-com.svg") center / contain no-repeat;
  mask: url("../../../assets/icons/store/trash-bin-minimalistic-2-svgrepo-com.svg") center / contain no-repeat;
}


/* =========================================================
  SAVE FOR LATER
========================================================= */

.order-final-save {

  margin-top:
    48px;

  padding-top:
    32px;

  border-top:
    1px
    solid
    var(--order-border);

}


.order-final-save h3 {

  margin:
    0;

  color:
    var(--order-text);

  font-size:
    14px;

  line-height:
    1.35;

  font-weight:
    600;

}


.order-final-save p {

  width:
    min(
      100%,
      430px
    );

  margin:
    9px
    0
    0;

  color:
    var(--order-muted);

  font-size:
    11px;

  line-height:
    1.6;

}


.order-final-save button {

  margin-top:
    14px;

  padding:
    0;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    7px;

  border:
    0;

  background:
    transparent;

  color:
    var(--order-blue);

  font-size:
    11px;

  line-height:
    1.4;

  font-weight:
    600;

  cursor:
    pointer;

}


.order-final-save button:hover,
.order-final-save button:focus-visible {

  color:
    var(--order-blue-hover);

  outline:
    0;

}


.order-save-icon {

  width:
    15px;

  height:
    15px;

  flex:
    0
    0
    auto;

  display:
    block;

  object-fit:
    contain;

  filter: brightness(0) saturate(100%) invert(20%) sepia(89%) saturate(2356%) hue-rotate(218deg) brightness(78%) contrast(104%);

}

.order-save-icon[hidden] {
  display: none !important;
}


/* =========================================================
  RIGHT — TOTALS + BAG
========================================================= */

.order-final-actions {

  min-width:
    0;

  align-self:
    start;

  padding-top:
    2px;

}


/* =========================================================
  DUE TODAY
========================================================= */

.order-final-actions
.order-final-total {

  width:
    100%;

  margin:
    0;

  padding:
    0;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    22px;

  border:
    0;

}


.order-final-total > div {

  min-width:
    0;

  display:
    grid;

  gap:
    5px;

}


.order-final-total > div > strong {

  color:
    var(--order-text);

  font-size:
    14px;

  line-height:
    1.35;

  font-weight:
    600;

}


.order-final-total > div > span {

  color:
    var(--order-muted);

  font-size:
    10px;

  line-height:
    1.45;

}


.order-final-total > strong {

  flex:
    0
    0
    auto;

  color:
    var(--order-text);

  font-size:
    23px;

  line-height:
    1;

  letter-spacing:
    -.04em;

  font-weight:
    550;

  text-align:
    right;

  white-space:
    nowrap;

  font-variant-numeric:
    tabular-nums;

}


/* =========================================================
  ANNUAL SERVICES

  The words "Annual services" are the control.
  No second link below.
========================================================= */

.order-final-actions
.order-final-annual {

  width:
    100%;

  min-height:
    58px;

  margin:
    18px
    0
    0;

  padding:
    14px
    0
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    22px;

  border:
    0;

  border-top:
    1px
    solid
    var(--order-border);

  background:
    transparent;

  text-align:
    left;

  cursor:
    pointer;

}


.order-final-annual-label {

  color:
    var(--order-blue);

  font-size:
    13px;

  line-height:
    1.35;

  font-weight:
    600;

  transition:
    color
    150ms
    ease;

}


.order-final-annual:hover
.order-final-annual-label,

.order-final-annual:focus-visible
.order-final-annual-label {

  color:
    var(--order-blue-hover);

}


.order-final-annual:focus-visible {

  outline:
    0;

}


.order-final-annual > strong {

  flex:
    0
    0
    auto;

  color:
    var(--order-text);

  font-size:
    17px;

  line-height:
    1;

  font-weight:
    550;

  text-align:
    right;

  white-space:
    nowrap;

  font-variant-numeric:
    tabular-nums;

}


.order-final-annual > strong.is-zero {

  color:
    var(--order-soft);

}


/* =========================================================
  ADD TO BAG
========================================================= */

.order-add-to-bag {

  width:
    100%;

  min-height:
    50px;

  margin-top:
    32px;

  padding:
    0
    20px;

  border:
    0;

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

  background:
    var(--order-blue);

  color:
    #FFFFFF;

  -webkit-text-fill-color:
    #FFFFFF;

  font-size:
    13px;

  line-height:
    1;

  font-weight:
    600;

  text-align:
    center;

  cursor:
    pointer;

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

}


.order-add-to-bag:hover,
.order-add-to-bag:focus-visible {

  background:
    var(--order-blue-hover);

  outline:
    0;

}


.order-add-to-bag:active {

  transform:
    translateY(
      1px
    );

}


.order-add-to-bag:disabled {

  opacity:
    .58;

  cursor:
    wait;

}


.order-contact-redovar {

  width:
    100%;

  min-height:
    50px;

  margin-top:
    12px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid var(--order-blue);

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

  color:
    var(--order-blue);

  font-size:
    13px;

  font-weight:
    600;

  line-height:
    1;

  text-decoration:
    none;

  transition:
    border-color 220ms ease,
    color 220ms ease;

}


.order-contact-redovar[hidden] {

  display:
    none !important;

}


.order-contact-redovar:hover,
.order-contact-redovar:focus-visible {

  border-color:
    var(--order-terra);

  color:
    var(--order-terra);

  outline:
    0;

}


/* =========================================================
  RESPONSIVE — FINAL PACKAGE / 1180
========================================================= */

@media (max-width: 1180px) {

  .order-final-grid {

    grid-template-columns:
      minmax(
        260px,
        .76fr
      )
      minmax(
        320px,
        1fr
      )
      minmax(
        230px,
        .64fr
      );

    gap:
      38px;

  }


  .order-final-media {

    min-height:
      300px;

  }


  .order-final-media img {

    width:
      min(
        100%,
        300px
      );

    max-height:
      290px;

  }

}


/* =========================================================
  RESPONSIVE — FINAL PACKAGE / 980
========================================================= */

@media (max-width: 980px) {

  .order-final-grid {

    grid-template-columns:
      minmax(
        270px,
        .78fr
      )
      minmax(
        0,
        1.22fr
      );

    gap:
      52px;

  }


  .order-final-actions {

    grid-column:
      2;

    width:
      100%;

    padding-top:
      8px;

  }

}


/* =========================================================
  RESPONSIVE — FINAL PACKAGE / 760
========================================================= */

@media (max-width: 760px) {

  .order-final-grid {

    grid-template-columns:
      1fr;

    gap:
      52px;

  }


  .order-final-primary {

    position:
      static;

    top:
      auto;

  }


  .order-final-intro h2 {

    width:
      min(
        100%,
        520px
      );

  }


  .order-final-media {

    width:
      min(
        100%,
        460px
      );

    min-height:
      300px;

    justify-items:
      center;

  }


  .order-final-summary {

    width:
      min(
        100%,
        600px
      );

  }


  .order-final-actions {

    grid-column:
      auto;

    width:
      min(
        100%,
        600px
      );

    padding-top:
      0;

  }

}


/* =========================================================
  RESPONSIVE — FINAL PACKAGE / 620
========================================================= */

@media (max-width: 620px) {

  .order-final {

    padding-top:
      88px;

    padding-bottom:
      110px;

  }


  .order-final-media {

    min-height:
      260px;

    margin-top:
      26px;

  }


  .order-final-media img {

    width:
      min(
        92%,
        300px
      );

    max-height:
      260px;

  }


  .order-final-item {

    gap:
      14px;

  }


  .order-final-item-price {

    font-size:
      14px;

  }


  .order-final-actions
  .order-final-total {

    gap:
      18px;

  }


  .order-final-total > strong {

    font-size:
      21px;

  }


  .order-final-annual > strong {

    font-size:
      16px;

  }

}


/* =========================================================
  ACCESSORY ACTIONS
========================================================= */

.order-final-accessory-actions {

  margin-top:
    12px;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

}


/* =========================================================
  ACCESSORY SELECT
========================================================= */

.order-accessory-quantity-select {

  position:
    relative;

  width:
    68px;

  height:
    38px;

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

  background:
    var(--order-white);

}


.order-accessory-quantity-select select {

  width:
    100%;

  height:
    38px;

  padding:
    0
    28px
    0
    12px;

  border:
    0;

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

  outline:
    0;

  background:
    transparent;

  color:
    var(--order-text);

  font-size:
    12px;

  font-weight:
    550;

  cursor:
    pointer;

  appearance:
    none;

  -webkit-appearance:
    none;

}


.order-accessory-quantity-select::after {

  content:
    "";

  position:
    absolute;

  top:
    50%;

  right:
    11px;

  width:
    6px;

  height:
    6px;

  border-right:
    1.4px
    solid
    #555551;

  border-bottom:
    1.4px
    solid
    #555551;

  pointer-events:
    none;

  transform:
    translateY(
      -70%
    )
    rotate(
      45deg
    );

}


/* =========================================================
  ACCESSORY CUSTOM QUANTITY
========================================================= */

.order-accessory-custom-quantity {

  width:
    80px;

  height:
    38px;

  padding:
    0
    10px;

  border:
    0;

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

  outline:
    0;

  background:
    var(--order-white);

  color:
    var(--order-text);

  font-size:
    12px;

  font-weight:
    550;

  text-align:
    center;

  font-variant-numeric:
    tabular-nums;

}


.order-accessory-custom-quantity:focus {

  outline:
    2px
    solid
    rgba(
      11,
      54,
      154,
      .16
    );

  outline-offset:
    2px;

}


/* =========================================================
  REMOVE
========================================================= */

.order-final-accessory-remove {

  padding:
    4px
    0;

  border:
    0;

  background:
    transparent;

  color:
    var(--order-terra);

  font-size:
    10px;

  font-weight:
    550;

  cursor:
    pointer;

}


/* =========================================================
  SAVE
========================================================= */

.order-final-save {

  margin-top:
    46px;

  padding-top:
    32px;

  border-top:
    1px
    solid
    var(--order-border);

}


.order-final-save h3 {

  margin:
    0;

  color:
    var(--order-text);

  font-size:
    14px;

  font-weight:
    600;

}


.order-final-save p {

  max-width:
    430px;

  margin:
    9px
    0
    0;

  color:
    var(--order-muted);

  font-size:
    11px;

  line-height:
    1.6;

}


.order-final-save button {

  margin-top:
    13px;

  padding:
    0;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    7px;

  border:
    0;

  background:
    transparent;

  color:
    var(--order-blue);

  font-size:
    11px;

  font-weight:
    600;

  cursor:
    pointer;

}


.order-final-save button:hover,
.order-final-save button:focus-visible {

  color:
    var(--order-blue-hover);

  outline:
    0;

}


.order-save-icon {

  width:
    15px;

  height:
    15px;

  object-fit:
    contain;

}


/* =========================================================
  FINAL RIGHT
========================================================= */

.order-final-actions {

  min-width:
    0;

  padding-top:
    3px;

  display:
    flex;

  flex-direction:
    column;

}


/* =========================================================
  SHIPPING
========================================================= */

.order-final-shipping {

  display:
    grid;

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

  gap:
    12px;

  align-items:
    start;

}


.order-final-shipping > img {

  width:
    20px;

  height:
    20px;

  object-fit:
    contain;

}


.order-final-shipping > div {

  display:
    grid;

  gap:
    4px;

}


.order-final-shipping strong {

  color:
    var(--order-text);

  font-size:
    12px;

  line-height:
    1.4;

  font-weight:
    600;

}


.order-final-shipping span {

  color:
    var(--order-muted);

  font-size:
    11px;

  line-height:
    1.45;

}


/* =========================================================
  AGREEMENT
========================================================= */

.order-final-agreement {

  margin-top:
    28px;

  padding-top:
    27px;

  display:
    grid;

  gap:
    5px;

  border-top:
    1px
    solid
    var(--order-border);

}


.order-final-agreement strong {

  color:
    var(--order-text);

  font-size:
    12px;

  font-weight:
    600;

}


.order-final-agreement span {

  color:
    var(--order-muted);

  font-size:
    10px;

  line-height:
    1.5;

}


/* =========================================================
  ADD TO BAG
========================================================= */

.order-add-to-bag {

  width:
    100%;

  min-height:
    50px;

  margin-top:
    32px;

  padding:
    0
    20px;

  border:
    0;

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

  background:
    var(--order-blue);

  color:
    #FFFFFF;

  font-size:
    13px;

  line-height:
    1;

  font-weight:
    600;

  cursor:
    pointer;

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

}


.order-add-to-bag:hover,
.order-add-to-bag:focus-visible {

  background:
    var(--order-blue-hover);

  outline:
    0;

}


.order-add-to-bag:active {

  transform:
    translateY(
      1px
    );

}


.order-add-to-bag:disabled {

  opacity:
    .58;

  cursor:
    wait;

}


/* =========================================================
  MODALS

  Explicit hidden state prevents anything from rendering
  below the page / footer.
========================================================= */

.order-modal {

  position:
    fixed;

  inset:
    0;

  z-index:
    10000;

  display:
    none;

}


.order-modal[aria-hidden="true"] {

  display:
    none !important;

}


.order-modal[aria-hidden="false"] {

  display:
    block;

}


/* =========================================================
  MODAL BACKDROP
========================================================= */

.order-modal-backdrop {

  position:
    absolute;

  inset:
    0;

  width:
    100%;

  height:
    100%;

  padding:
    0;

  border:
    0;

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

  backdrop-filter:
    blur(
      8px
    );

  -webkit-backdrop-filter:
    blur(
      8px
    );

}


/* =========================================================
  MODAL DIALOG
========================================================= */

.order-modal-dialog {

  position:
    absolute;

  top:
    50%;

  left:
    50%;

  width:
    min(
      calc(
        100%
        -
        40px
      ),
      760px
    );

  max-height:
    calc(
      100vh
      -
      50px
    );

  overflow-y:
    auto;

  padding:
    clamp(
      28px,
      4vw,
      44px
    );

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

  outline:
    0;

  background:
    var(--order-white);

  box-shadow:
    0
    24px
    80px
    rgba(
      17,
      17,
      17,
      .14
    );

  transform:
    translate(
      -50%,
      -50%
    );

}


.order-modal-dialog--small {

  width:
    min(
      calc(
        100%
        -
        40px
      ),
      420px
    );

}


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

.order-modal-close {

  position:
    absolute;

  top:
    18px;

  right:
    20px;

  width:
    32px;

  height:
    32px;

  padding:
    0;

  border:
    0;

  background:
    transparent;

  color:
    var(--order-muted);

  font-size:
    24px;

  line-height:
    1;

  cursor:
    pointer;

}


/* =========================================================
  MODAL TYPE
========================================================= */

.order-modal-dialog h2 {

  max-width:
    calc(
      100%
      -
      50px
    );

  margin:
    0;

  color:
    var(--order-text);

  font-size:
    clamp(
      30px,
      3.4vw,
      44px
    );

  line-height:
    1;

  letter-spacing:
    -.047em;

  font-weight:
    520;

}


.order-modal-lead {

  max-width:
    500px;

  margin:
    15px
    0
    0;

  color:
    var(--order-muted);

  font-size:
    13px;

  line-height:
    1.6;

}


/* =========================================================
  PLAN MODAL
========================================================= */

.order-plan-modal-grid {

  margin-top:
    34px;

  display:
    grid;

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

  gap:
    10px;

}


.order-plan-modal-grid article {

  min-height:
    164px;

  padding:
    23px;

  display:
    flex;

  flex-direction:
    column;

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

  background:
    var(--order-surface);

}


.order-plan-modal-grid article strong {

  color:
    var(--order-text);

  font-size:
    18px;

  font-weight:
    600;

}


.order-plan-modal-grid article span {

  margin-top:
    7px;

  color:
    var(--order-muted);

  font-size:
    11px;

}


.order-plan-modal-grid article b {

  margin-top:
    auto;

  color:
    var(--order-text);

  font-size:
    15px;

  font-weight:
    550;

}


/* =========================================================
  CARE MODAL
========================================================= */

.order-care-modal-list {

  margin-top:
    32px;

  display:
    grid;

  gap:
    8px;

}


.order-care-modal-list > div {

  padding:
    20px;

  display:
    grid;

  gap:
    6px;

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

  background:
    var(--order-surface);

}


.order-care-modal-list strong {

  color:
    var(--order-text);

  font-size:
    12px;

  font-weight:
    600;

}


.order-care-modal-list span {

  color:
    var(--order-muted);

  font-size:
    11px;

  line-height:
    1.55;

}


/* =========================================================
  ANNUAL MODAL
========================================================= */

.order-annual-modal-items {

  margin-top:
    28px;

  display:
    grid;

  gap:
    20px;

}


.order-annual-modal-item {

  display:
    grid;

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

  gap:
    14px;

  align-items:
    start;

}


.order-annual-modal-item-copy {

  display:
    grid;

  gap:
    4px;

}


.order-annual-modal-item-copy strong {

  color:
    var(--order-text);

  font-size:
    12px;

  font-weight:
    600;

}


.order-annual-modal-item-copy span {

  color:
    var(--order-muted);

  font-size:
    10px;

  line-height:
    1.45;

}


.order-annual-modal-item > strong {

  color:
    var(--order-text);

  font-size:
    12px;

  font-weight:
    550;

  text-align:
    right;

}


.order-annual-modal-item > strong.is-zero {

  color:
    var(--order-soft);

}


/* =========================================================
  FAQ
  FINAL SECTION
========================================================= */

.order-faq {

  position:
    relative;

  padding:
    clamp(
      112px,
      10vw,
      166px
    )
    0
    clamp(
      130px,
      11vw,
      184px
    );

  background:
    var(--order-white);

}


.order-faq-shell {

  display:
    grid;

  grid-template-columns:
    minmax(
      340px,
      .8fr
    )
    minmax(
      480px,
      1.2fr
    );

  gap:
    clamp(
      70px,
      9vw,
      145px
    );

  align-items:
    stretch;

}


/* =========================================================
  FAQ TITLE
========================================================= */

.order-faq-heading-wrap {

  align-self:
    stretch;

}


.order-faq-heading-sticky {

  position:
    sticky;

  top:
    calc(
      var(
        --header-h,
        76px
      )
      +
      46px
    );

}


.order-faq-heading-sticky h2 {

  max-width:
    520px;

  margin:
    0;

  color:
    var(--order-text);

  font-size:
    clamp(
      40px,
      4.2vw,
      60px
    );

  line-height:
    .98;

  letter-spacing:
    -.052em;

  font-weight:
    520;

}


/* =========================================================
  FAQ LIST
========================================================= */

.order-faq-list {

  display:
    grid;

  gap:
    6px;

}


.order-faq-list details {

  overflow:
    hidden;

  border:
    0;

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

  background:
    transparent;

  transition:
    background-color
    160ms
    ease;

}


.order-faq-list details:hover,
.order-faq-list details[open] {

  background:
    var(--order-surface);

}


.order-faq-list summary {

  min-height:
    70px;

  padding:
    20px
    22px;

  display:
    grid;

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

  gap:
    24px;

  align-items:
    center;

  list-style:
    none;

  cursor:
    pointer;

}


.order-faq-list summary::-webkit-details-marker {

  display:
    none;

}


.order-faq-list summary > span:first-child {

  color:
    var(--order-text);

  font-size:
    13px;

  line-height:
    1.45;

  font-weight:
    550;

}


/* =========================================================
  FAQ ICON
========================================================= */

.order-faq-icon {

  position:
    relative;

  width:
    22px;

  height:
    22px;

  justify-self:
    end;

}


.order-faq-icon::before,
.order-faq-icon::after {

  content:
    "";

  position:
    absolute;

  top:
    50%;

  left:
    50%;

  width:
    9px;

  height:
    1px;

  background:
    var(--order-muted);

  transform:
    translate(
      -50%,
      -50%
    );

}


.order-faq-icon::after {

  transform:
    translate(
      -50%,
      -50%
    )
    rotate(
      90deg
    );

  transition:
    opacity
    160ms
    ease;

}


.order-faq-list details[open]
.order-faq-icon::after {

  opacity:
    0;

}


/* =========================================================
  FAQ ANSWER
========================================================= */

.order-faq-answer {

  padding:
    0
    56px
    26px
    22px;

}


.order-faq-answer p {

  max-width:
    620px;

  margin:
    0;

  color:
    var(--order-muted);

  font-size:
    12px;

  line-height:
    1.7;

}


/* =========================================================
  RESPONSIVE — 1180
========================================================= */

@media (max-width: 1180px) {


  .order-product-grid {

    grid-template-columns:
      minmax(
        430px,
        1.04fr
      )
      minmax(
        340px,
        .96fr
      );

    gap:
      54px;

  }


  .order-service-grid {

    grid-template-columns:
      minmax(
        0,
        1fr
      )
      minmax(
        260px,
        .62fr
      );

    gap:
      34px
      48px;

  }


  .order-service-heading {

    grid-column:
      1
      /
      -1;

  }


  .order-service-heading h2 {

    width:
      auto;

    max-width:
      none;

    white-space:
      normal;

  }


  .order-final-grid {

    grid-template-columns:
      minmax(
        280px,
        .76fr
      )
      minmax(
        340px,
        1fr
      )
      minmax(
        240px,
        .64fr
      );

    gap:
      38px;

  }


}


/* =========================================================
  RESPONSIVE — 980
========================================================= */

@media (max-width: 980px) {


  .order-product-grid {

    grid-template-columns:
      1fr;

    gap:
      66px;

  }


  .order-gallery {

    position:
      static;

    top:
      auto;

    width:
      min(
        100%,
        760px
      );

    margin-inline:
      auto;

  }


  .order-gallery-main {

    height:
      630px;

  }


  .order-product-information {

    width:
      min(
        100%,
        680px
      );

    margin-inline:
      auto;

  }


  .order-accessory-page {

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

  }


  .order-final-grid {

    grid-template-columns:
      minmax(
        280px,
        .78fr
      )
      minmax(
        0,
        1.22fr
      );

    gap:
      52px;

  }


  .order-final-actions {

    grid-column:
      2;

  }


}


/* =========================================================
  RESPONSIVE — 760
========================================================= */

@media (max-width: 760px) {


  .order-shop-heading {

    grid-template-columns:
      1fr;

    align-items:
      start;

  }


  .order-device-quantity {

    justify-content:
      flex-start;

  }


  .order-service-grid {

    grid-template-columns:
      1fr;

  }


  .order-service-heading,
  .order-choice-group,
  .order-service-help {

    grid-column:
      auto;

  }


  .order-service-heading h2 {

    white-space:
      normal;

  }


  .order-final-grid {

    grid-template-columns:
      1fr;

    gap:
      52px;

  }


  .order-final-primary {

    position:
      static;

  }


  .order-final-actions {

    grid-column:
      auto;

  }


  .order-faq-shell {

    grid-template-columns:
      1fr;

    gap:
      48px;

  }


  .order-faq-heading-sticky {

    position:
      static;

  }


}


/* =========================================================
  RESPONSIVE — 620
========================================================= */

@media (max-width: 620px) {


  .order-product {

    padding-top:
      calc(
        var(
          --header-h,
          76px
        )
        +
        30px
      );

  }


  .order-shop-heading-copy h1 {

    font-size:
      clamp(
        40px,
        11vw,
        54px
      );

  }


  .order-gallery-main {

    height:
      430px;

  }


  .order-gallery-image {

    max-width:
      98%;

    max-height:
      98%;

  }


  .order-gallery-arrow {

    width:
      36px;

    height:
      36px;

    opacity:
      1;

    visibility:
      visible;

    pointer-events:
      auto;

  }


  .order-feature-list {

    gap:
      32px;

  }


  .order-feature {

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

    gap:
      14px;

  }


  .order-feature-icon {

    width:
      32px;

    height:
      32px;

  }


  .order-feature-icon img {

    width:
      21px;

    height:
      21px;

  }


  .order-feature p {

    font-size:
      12px;

  }


  .order-plan-modal-grid {

    grid-template-columns:
      1fr;

  }


  .order-accessory-page {

    grid-template-columns:
      1fr;

  }


  .order-accessory-card {

    width:
      min(
        100%,
        460px
      );

    margin-inline:
      auto;

  }


  .order-final-media {

    min-height:
      280px;

  }


  .order-final-media img {

    max-height:
      270px;

  }


}


/* =========================================================
  TOUCH
========================================================= */

@media (hover: none) {


  .order-gallery-arrow {

    opacity:
      1;

    visibility:
      visible;

    pointer-events:
      auto;

  }


}


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

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


  .order-gallery-image,
  .order-gallery-arrow,
  .order-gallery-dot,
  .order-choice,
  .order-accessory-track,
  .order-accessory-add,
  .order-add-to-bag {

    transition:
      none;

  }


}


/* =========================================================
  MOBILE ACCESSORY SWIPE CAROUSEL
========================================================= */

@media (max-width: 760px) {

  .order-accessory-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }


  .order-accessory-viewport::-webkit-scrollbar {
    display: none;
  }


  .order-accessory-track {
    width: max-content;
    min-width: 100%;
    gap: 16px;
    padding-right: 22px;
    transform: none !important;
    transition: none;
  }


  .order-accessory-page {
    display: contents;
  }


  .order-accessory-card {
    width: calc(100vw - 66px);
    max-width: 360px;
    flex: 0 0 calc(100vw - 66px);
    margin-inline: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }


  .order-accessory-dots {
    display: none;
  }

}

/* Final review controls intentionally override the earlier legacy block. */
.order-final-accessory-remove {
  width: 30px;
  height: 30px;
  padding: 6px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 4px;
  background: transparent;
}

.order-final-accessory-remove:hover,
.order-final-accessory-remove:focus-visible { background: rgba(195, 72, 17, .07); }

.order-device-quantity-select,
.order-accessory-quantity-select { background: transparent; }

.order-device-quantity-select:hover,
.order-device-quantity-select:focus-within,
.order-accessory-quantity-select:hover,
.order-accessory-quantity-select:focus-within { background: var(--order-surface); }

.order-device-custom-quantity,
.order-accessory-custom-quantity { border: 1px solid var(--order-border); }