/* =========================================================
   REDOVAR ACCESSORY PURCHASE PAGE

   Universal accessory purchase surface:
   /store/order-accessories/?product=<productKey>

   Header / footer / privacy remain owned by:
   ../../files/css/header-footer.css
========================================================= */


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


.accessory-main {
  --accessory-blue: #0B369A;
  --accessory-blue-hover: #2450A8;

  --accessory-terra: #C34811;

  --accessory-black: #111111;
  --accessory-text: #171717;
  --accessory-muted: #6B6B68;
  --accessory-soft: #92928D;

  --accessory-border: #E6E6E2;
  --accessory-border-strong: #D7D7D1;

  --accessory-white: #FFFFFF;
  --accessory-surface: #F7F7F5;
  --accessory-surface-2: #F2F2EF;
  --accessory-warm: #FEFEFC;

  --accessory-radius: 4px;

  --accessory-max: 1480px;

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

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

  width: 100%;

  overflow: clip;

  background:
    var(--accessory-white);

  color:
    var(--accessory-text);

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

  -webkit-font-smoothing:
    antialiased;

  text-rendering:
    optimizeLegibility;
}




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


.accessory-main *,
.accessory-main *::before,
.accessory-main *::after {
  box-sizing:
    border-box;
}


.accessory-main a {
  text-decoration:
    none;
}


.accessory-main button {
  font:
    inherit;
}


.accessory-main img {
  display:
    block;
}




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


.accessory-shell {
  width:
    min(
      100%,
      var(--accessory-max)
    );

  margin-inline:
    auto;

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




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


.accessory-product {
  padding:
    calc(
      var(--header-h)
      +
      clamp(
        36px,
        4vw,
        58px
      )
    )
    0
    clamp(
      108px,
      9vw,
      150px
    );

  background:
    var(--accessory-white);
}




/* =========================================================
   TOPLINE
========================================================= */


.accessory-topline {
  min-height:
    34px;

  margin-bottom:
    clamp(
      32px,
      4vw,
      48px
    );

  display:
    flex;

  align-items:
    center;
}


.accessory-back-link {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    9px;

  color:
    var(--accessory-muted);

  font-size:
    11px;

  font-weight:
    550;

  line-height:
    1;

  transition:
    color
    150ms
    ease;
}


.accessory-back-link:hover,
.accessory-back-link:focus-visible {
  color:
    var(--accessory-black);
}


.accessory-back-arrow {
  width:
    8px;

  height:
    8px;

  border-left:
    1.4px
    solid
    currentColor;

  border-bottom:
    1.4px
    solid
    currentColor;

  transform:
    rotate(45deg);
}




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


.accessory-product-grid {
  display:
    grid;

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

  gap:
    clamp(
      68px,
      9vw,
      150px
    );

  align-items:
    start;
}




/* =========================================================
   PURCHASE COLUMN
========================================================= */


.accessory-purchase {
  min-width:
    0;
}


.accessory-purchase-inner {
  width:
    min(
      100%,
      450px
    );
}





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


.accessory-purchase h1 {
  margin:
    14px
    0
    0;

  max-width:
    430px;

  color:
    var(--accessory-black);

  font-size:
    clamp(
      34px,
      3.4vw,
      48px
    );

  font-weight:
    520;

  letter-spacing:
    -.047em;

  line-height:
    1.02;
}




/* =========================================================
   PRICE
========================================================= */


.accessory-price {
  margin-top:
    24px;
}


.accessory-price strong {
  color:
    var(--accessory-black);

  font-size:
    21px;

  font-weight:
    500;

  letter-spacing:
    -.025em;

  line-height:
    1;
}




/* =========================================================
   INTRO
========================================================= */


.accessory-intro {
  max-width:
    390px;

  margin:
    22px
    0
    0;

  color:
    var(--accessory-muted);

  font-size:
    13px;

  font-weight:
    400;

  line-height:
    1.65;
}




/* =========================================================
   PURCHASE DIVIDER
========================================================= */


.accessory-purchase-divider {
  width:
    100%;

  height:
    1px;

  margin:
    38px
    0
    28px;

  background:
    var(--accessory-border);
}




/* =========================================================
   DELIVERY NOTE
========================================================= */


.accessory-delivery-note {
  display:
    grid;

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

  gap:
    13px;

  align-items:
    start;
}


.accessory-delivery-icon {
  width:
    28px;

  height:
    28px;

  display:
    grid;

  place-items:
    center;
}


.accessory-delivery-icon img {
  width:
    20px;

  height:
    20px;

  object-fit:
    contain;

  opacity:
    .62;
}


.accessory-delivery-note > div:last-child {
  display:
    grid;

  gap:
    5px;
}


.accessory-delivery-note strong {
  color:
    var(--accessory-text);

  font-size:
    12px;

  font-weight:
    600;

  line-height:
    1.3;
}


.accessory-delivery-note span {
  max-width:
    330px;

  color:
    var(--accessory-muted);

  font-size:
    11px;

  line-height:
    1.55;
}




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


.accessory-add-button {
  width:
    100%;

  min-height:
    50px;

  margin-top:
    30px;

  padding:
    0
    20px;

  border:
    0;

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

  background:
    var(--accessory-blue);

  color:
    #FFFFFF;

  font-size:
    13px;

  font-weight:
    600;

  line-height:
    1;

  cursor:
    pointer;

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


.accessory-add-button:hover,
.accessory-add-button:focus-visible {
  background:
    var(--accessory-blue-hover);
}


.accessory-add-button:focus-visible {
  outline:
    3px
    solid
    rgba(
      11,
      54,
      154,
      .12
    );

  outline-offset:
    3px;
}


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


.accessory-add-button:disabled {
  opacity:
    .64;

  cursor:
    wait;
}




/* =========================================================
   ADD STATUS
========================================================= */


.accessory-add-status {
  min-height:
    17px;

  margin:
    10px
    0
    0;

  color:
    var(--accessory-muted);

  font-size:
    10px;

  line-height:
    1.45;
}


.accessory-add-status.is-error {
  color:
    #A53C24;
}




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


.accessory-save {
  margin-top:
    30px;

  padding-top:
    12px;

}


.accessory-save > strong {
  display:
    block;

  color:
    var(--accessory-text);

  font-size:
    12px;

  font-weight:
    600;
}


.accessory-save > p {
  max-width:
    350px;

  margin:
    7px
    0
    0;

  color:
    var(--accessory-muted);

  font-size:
    11px;

  line-height:
    1.55;
}


.accessory-save > button {
  margin-top:
    13px;

  padding:
    0;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    8px;

  border:
    0;

  background:
    transparent;

  color:
    var(--accessory-blue);

  font-size:
    11px;

  font-weight:
    550;

  cursor:
    pointer;
}


.accessory-save > button:hover,
.accessory-save > button:focus-visible {
  color:
    var(--accessory-blue-hover);

  outline:
    0;
}




/* =========================================================
   BOOKMARK ICON
========================================================= */


.accessory-save-icon {
  width:
    17px;

  height:
    17px;

  background: var(--accessory-blue);
  -webkit-mask: url("../../../assets/icons/store/save-2-svgrepo-com.svg") center / contain no-repeat;
  mask: url("../../../assets/icons/store/save-2-svgrepo-com.svg") center / contain no-repeat;
}


.accessory-save-icon::after {
  content: none;
}

[data-save-accessory][aria-pressed="true"] .accessory-save-icon {
  -webkit-mask-image: url("../../../assets/icons/store/saved--svgrepo-com.svg");
  mask-image: url("../../../assets/icons/store/saved--svgrepo-com.svg");
}



/* =========================================================
   HELP
========================================================= */

.accessory-help,
.order-help {

  margin-top:
    28px;

  padding-top:
    23px;

  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    5px;

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

  color:
    var(--accessory-muted);

  font-size:
    11px;

  line-height:
    1.4;

}


.accessory-help a,
.order-help a {

  position:
    relative;

  color:
    var(--accessory-blue);

  font-weight:
    550;

}


.accessory-help a::after,
.order-help a::after {

  content:
    "";

  position:
    absolute;

  right:
    0;

  bottom:
    -2px;

  left:
    0;

  height:
    1px;

  background:
    currentColor;

  transform:
    scaleX(.3);

  transform-origin:
    left;

  transition:
    transform 180ms ease;

}


.accessory-help a:hover,
.accessory-help a:focus-visible,
.order-help a:hover,
.order-help a:focus-visible {

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

}


.accessory-help a:hover::after,
.accessory-help a:focus-visible::after,
.order-help a:hover::after,
.order-help a:focus-visible::after {

  transform:
    scaleX(1);

}


/* =========================================================
   HELP ICON
========================================================= */


.accessory-help-icon {
  width:
    18px;

  height:
    14px;

  margin-right:
    5px;

  background: var(--accessory-muted);
  -webkit-mask: url("../../../assets/icons/email-svgrepo-com.svg") center / contain no-repeat;
  mask: url("../../../assets/icons/email-svgrepo-com.svg") center / contain no-repeat;
}


.accessory-help-icon::after {
  content: none;
}




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


.accessory-gallery {
  min-width:
    0;
}


.accessory-gallery-stage {
  width:
    100%;

  min-height:
    620px;

  display:
    grid;

  place-items:
    center;

  overflow:
    hidden;

  background:
    var(--accessory-white);
}


.accessory-gallery-image {
  width:
    min(
      88%,
      650px
    );

  max-height:
    570px;

  object-fit:
    contain;

  object-position:
    center;

  opacity:
    1;

  transform:
    translateY(0)
    scale(1);

  transition:
    opacity
    220ms
    ease,
    transform
    320ms
    var(--accessory-ease);
}


.accessory-gallery-image.is-changing {
  opacity:
    .15;

  transform:
    translateY(3px)
    scale(.992);
}




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


.accessory-gallery-controls {
  min-height:
    74px;

  margin-top:
    20px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    11px;
}


.accessory-gallery-thumb {
  width:
    58px;

  height:
    58px;

  padding:
    7px;

  display:
    grid;

  place-items:
    center;

  overflow:
    hidden;

  border:
    0;

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

  background:
    var(--accessory-surface);

  cursor:
    pointer;

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


.accessory-gallery-thumb:hover,
.accessory-gallery-thumb:focus-visible {
  background:
    var(--accessory-surface-2);

  transform:
    translateY(-1px);
}


.accessory-gallery-thumb:focus-visible {
  outline:
    2px
    solid
    rgba(
      11,
      54,
      154,
      .14
    );

  outline-offset:
    2px;
}


.accessory-gallery-thumb.is-active {
  background:
    var(--accessory-white);

  box-shadow:
    inset
    0
    0
    0
    1px
    rgba(
      17,
      17,
      17,
      .72
    );
}


.accessory-gallery-thumb img {
  width:
    100%;

  height:
    100%;

  object-fit:
    contain;
}




/* =========================================================
   INFORMATION SECTION
========================================================= */


.accessory-information {
  background:
    var(--accessory-white);
}


.accessory-information-block {
  border-top:
    1px
    solid
    var(--accessory-border);
}




/* =========================================================
   INFORMATION TOGGLE
========================================================= */


.accessory-information-toggle,
.accessory-compatibility-toggle {
  width:
    100%;

  min-height:
    112px;

  padding:
    0;

  display:
    grid;

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

  gap:
    30px;

  align-items:
    center;

  border:
    0;

  background:
    transparent;

  text-align:
    left;

  cursor:
    pointer;
}


.accessory-information-toggle h2,
.accessory-compatibility-toggle h2 {
  margin:
    0;

  color:
    var(--accessory-black);

  font-size:
    clamp(
      28px,
      2.6vw,
      38px
    );

  font-weight:
    520;

  letter-spacing:
    -.042em;

  line-height:
    1;
}




/* =========================================================
   APPLE-LIKE CHEVRON
========================================================= */


.accessory-chevron {
  width:
    16px;

  height:
    16px;

  justify-self:
    end;

  border-right:
    3px
    solid
    #8A8A85;

  border-bottom:
    3px
    solid
    #8A8A85;

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

  transition:
    transform
    180ms
    ease;
}


.accessory-chevron.is-open {
  transform:
    rotate(225deg)
    translate(
      -2px,
      -2px
    );
}




/* =========================================================
   INFORMATION CONTENT
========================================================= */


.accessory-information-content {
  display:
    grid;
}


.accessory-information-content[hidden] {
  display:
    none;
}




/* =========================================================
   INFORMATION ROW
========================================================= */


.accessory-info-row {
  min-height:
    122px;

  padding:
    34px
    0;

  display:
    grid;

  grid-template-columns:
    minmax(
      210px,
      .38fr
    )
    minmax(
      0,
      1fr
    );

  gap:
    clamp(
      40px,
      7vw,
      110px
    );

  border-top:
    1px
    solid
    var(--accessory-border);
}


.accessory-info-row h3 {
  margin:
    0;

  color:
    var(--accessory-black);

  font-size:
    20px;

  font-weight:
    550;

  letter-spacing:
    -.025em;

  line-height:
    1.2;
}


.accessory-overview-row {
  grid-template-columns:
    minmax(0, 1fr);
}


.accessory-info-copy p {
  max-width:
    760px;

  margin:
    0;

  color:
    var(--accessory-text);

  font-size:
    14px;

  line-height:
    1.7;
}




/* =========================================================
   SPECS
========================================================= */


.accessory-specs {
  max-width:
    760px;

  display:
    grid;
}


.accessory-specs > div {
  min-height:
    52px;

  padding:
    12px
    0;

  display:
    grid;

  grid-template-columns:
    minmax(
      130px,
      .4fr
    )
    minmax(
      0,
      1fr
    );

  gap:
    30px;

  align-items:
    start;

  border-bottom:
    1px
    solid
    var(--accessory-border);
}


.accessory-specs > div:first-child {
  padding-top:
    0;
}


.accessory-specs > div:last-child {
  border-bottom:
    0;
}


.accessory-specs strong {
  color:
    var(--accessory-text);

  font-size:
    12px;

  font-weight:
    600;
}


.accessory-specs span {
  color:
    var(--accessory-muted);

  font-size:
    12px;

  line-height:
    1.5;
}




/* =========================================================
   COMPATIBILITY
========================================================= */


.accessory-compatibility {
  border-top:
    1px
    solid
    var(--accessory-border);

  border-bottom:
    1px
    solid
    var(--accessory-border);
}


.accessory-compatibility-content[hidden] {
  display:
    none;
}


.accessory-compatibility-content {
  padding:
    0
    0
    38px;
}


.accessory-compatibility-list {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    9px;
}


.accessory-compatibility-list span {
  min-height:
    38px;

  padding:
    0
    15px;

  display:
    inline-flex;

  align-items:
    center;

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

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

  color:
    var(--accessory-text);

  font-size:
    11px;

  font-weight:
    500;
}




/* =========================================================
   RELATED
========================================================= */


.accessory-related {
  padding:
    clamp(
      104px,
      9vw,
      148px
    )
    0
    clamp(
      124px,
      11vw,
      178px
    );

  background:
    var(--accessory-white);
}


.accessory-related-heading {
  text-align:
    center;
}


.accessory-related-heading h2 {
  margin:
    0;

  color:
    var(--accessory-black);

  font-size:
    clamp(
      34px,
      3.7vw,
      50px
    );

  font-weight:
    520;

  letter-spacing:
    -.047em;

  line-height:
    1;
}




/* =========================================================
   RELATED GRID
========================================================= */


.accessory-related-grid {
  width:
    min(
      100%,
      1120px
    );

  margin:
    clamp(
      58px,
      6vw,
      84px
    )
    auto
    0;

  display:
    grid;

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

  gap:
    clamp(
      40px,
      7vw,
      44px
    );
}




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


.accessory-related-card {
  min-width:
    0;
}


.accessory-related-link {
  display:
    grid;

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


.accessory-related-image {
  height:
    260px;

  display:
    grid;

  place-items:
    center;

  background:
    var(--accessory-white);
}


.accessory-related-image img {
  width:
    min(
      84%,
      230px
    );

  max-height:
    220px;

  object-fit:
    contain;

  transition:
    transform
    260ms
    var(--accessory-ease);
}


.accessory-related-link:hover
.accessory-related-image img,
.accessory-related-link:focus-visible
.accessory-related-image img {
  transform:
    translateY(-4px);
}


.accessory-related-copy {
  padding-top:
    26px;

  text-align:
    center;
}


.accessory-related-copy h3 {
  margin:
    0;

  color:
    var(--accessory-text);

  font-size:
    16px;

  font-weight:
    550;

  letter-spacing:
    -.02em;

  line-height:
    1.35;
}


.accessory-related-copy strong {
  margin-top:
    10px;

  display:
    block;

  color:
    var(--accessory-text);

  font-size:
    13px;

  font-weight:
    500;
}

.accessory-related-add {
  margin: 18px auto 0;
  min-width: 132px;
  min-height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: 4px;
  background: var(--accessory-blue);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  cursor: pointer;
}

.accessory-related-add:hover,
.accessory-related-add:focus-visible { background: var(--accessory-blue-hover); }




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


.accessory-main.is-invalid
.accessory-product-grid {
  grid-template-columns:
    minmax(
      0,
      620px
    );
}


.accessory-main.is-invalid
.accessory-gallery {
  display:
    none;
}


.accessory-main.is-invalid
.accessory-add-button,
.accessory-main.is-invalid
.accessory-save {
  display:
    none;
}




/* =========================================================
   RESPONSIVE — 1040
========================================================= */


@media (max-width: 1040px) {


  .accessory-product-grid {
    grid-template-columns:
      minmax(
        310px,
        .88fr
      )
      minmax(
        450px,
        1.12fr
      );

    gap:
      56px;
  }


  .accessory-gallery-stage {
    min-height:
      540px;
  }


}




/* =========================================================
   RESPONSIVE — 860
========================================================= */


@media (max-width: 860px) {


  .accessory-product-grid {
    grid-template-columns:
      1fr;

    gap:
      56px;
  }


  .accessory-gallery {
    grid-row:
      1;
  }


  .accessory-purchase {
    grid-row:
      2;
  }


  .accessory-gallery-stage {
    min-height:
      520px;
  }


  .accessory-purchase-inner {
    width:
      min(
        100%,
        620px
      );
  }


  .accessory-info-row {
    grid-template-columns:
      minmax(
        170px,
        .34fr
      )
      minmax(
        0,
        1fr
      );

    gap:
      46px;
  }


}




/* =========================================================
   RESPONSIVE — 680
========================================================= */


@media (max-width: 680px) {


  .accessory-product {
    padding-top:
      calc(
        var(--header-h)
        +
        28px
      );
  }


  .accessory-topline {
    margin-bottom:
      26px;
  }


  .accessory-gallery-stage {
    min-height:
      390px;
  }


  .accessory-gallery-image {
    max-height:
      350px;
  }


  .accessory-purchase h1 {
    font-size:
      clamp(
        32px,
        9vw,
        42px
      );
  }


  .accessory-info-row {
    grid-template-columns:
      1fr;

    gap:
      18px;

    padding:
      28px
      0;
  }


  .accessory-info-row h3 {
    font-size:
      18px;
  }


  .accessory-info-copy p {
    font-size:
      13px;
  }


  .accessory-related-grid {
    grid-template-columns:
      1fr;

    width:
      min(
        100%,
        520px
      );
  }


}




/* =========================================================
   RESPONSIVE — 440
========================================================= */


@media (max-width: 440px) {


  .accessory-gallery-stage {
    min-height:
      330px;
  }


  .accessory-gallery-image {
    width:
      94%;

    max-height:
      300px;
  }


  .accessory-gallery-thumb {
    width:
      52px;

    height:
      52px;
  }


  .accessory-information-toggle,
  .accessory-compatibility-toggle {
    min-height:
      94px;
  }


  .accessory-information-toggle h2,
  .accessory-compatibility-toggle h2 {
    font-size:
      27px;
  }


  .accessory-specs > div {
    grid-template-columns:
      1fr;

    gap:
      6px;
  }


  .accessory-related-image {
    height:
      220px;
  }


}




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


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


  .accessory-gallery-image,
  .accessory-gallery-thumb,
  .accessory-chevron,
  .accessory-related-image img,
  .accessory-add-button {
    transition:
      none;
  }


}