/* =========================================================
  REDOVAR STORE
  Developed by Cavendish Pierre-Louis
  https://cavendishpierrelouis.io

  Store content only.

  Existing shared header / footer remain owned elsewhere.
========================================================= */


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

.store-main {

  --store-blue:
    #0B369A;

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

  --store-black:
    #111111;

  --store-text:
    #171717;

  --store-muted:
    #6B6B68;

  --store-soft:
    #92928D;

  --store-border:
    #E7E7E3;

  --store-border-strong:
    #D9D9D4;

  --store-surface:
    #F7F7F5;

  --store-surface-hover:
    #F3F3F0;

  --store-white:
    #FFFFFF;

  --store-arrow:
    #E8E8ED;

  --store-arrow-hover:
    #DEDEE2;

  --store-arrow-icon:
    #5B5B57;

  --store-radius:
    4px;

  --store-max:
    1480px;

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

  --store-header-h:
    var(
      --header-h,
      76px
    );

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

  width:
    100%;

  overflow:
    clip;

  background:
    var(--store-white);

  color:
    var(--store-text);

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

  -webkit-font-smoothing:
    antialiased;

  text-rendering:
    optimizeLegibility;

}


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

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

  box-sizing:
    border-box;

}


.store-main a {

  color:
    inherit;

  text-decoration:
    none;

}


.store-main button {

  font:
    inherit;

}


.store-main img {

  display:
    block;

}


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

.store-shell {

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

  margin-inline:
    auto;

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

}


/* =========================================================
 HERO
========================================================= */

.store-hero {
  position: relative;

  width: 100%;

  min-height: 100vh;
  min-height: 100svh;

  display: flex;

  align-items: stretch;

  overflow: hidden;

  background: #202020;

  isolation: isolate;
}


/* =========================================================
 FULL-BLEED HERO IMAGE
========================================================= */

.store-hero-image {
  position: absolute;

  inset: 0;

  z-index: 0;

  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  object-position: center;

  margin: 0;
  padding: 0;
}


/* =========================================================
 HERO CONTENT ABOVE IMAGE
========================================================= */

.store-hero-shade,
.store-hero-shell {
  position: relative;

  z-index: 1;
}



/* =========================================================
  HERO CONTRAST

  Keeps typography readable without turning the image
  into a dark block.
========================================================= */

.store-hero-shade {

  position:
    absolute;

  inset:
    0;

  z-index:
    1;

  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, .06) 0%,
      rgba(0, 0, 0, .12) 42%,
      rgba(0, 0, 0, .46) 100%
    );

  pointer-events:
    none;

}


/* =========================================================
  HERO LAYOUT
========================================================= */

.store-hero-shell {

  position:
    relative;

  z-index:
    2;

  width:
    100%;

  padding-top:
    calc(
      var(--store-header-h)
      +
      72px
    );

  padding-bottom:
    clamp(
      64px,
      7vw,
      104px
    );

  display:
    grid;

  grid-template-columns:
    minmax(
      260px,
      .82fr
    )
    minmax(
      440px,
      1.18fr
    );

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

  align-items:
    end;

}


/* =========================================================
  HERO — LEFT
========================================================= */

.store-hero-name h1 {

  margin:
    0;

  color:
    #FFFFFF;

  font-size:
    clamp(
      58px,
      7vw,
      88px
    );

  line-height:
    .94;

  letter-spacing:
    -.06em;

  font-weight:
    500;

}


/* =========================================================
  HERO — RIGHT
========================================================= */

.store-hero-copy {

  width:
    min(
      100%,
      680px
    );

  justify-self:
    end;

}


.store-hero-copy h2 {

  margin:
    0;

  color:
    #FFFFFF;

  font-size:
    clamp(
      38px,
      4.4vw,
      58px
    );

  line-height:
    .98;

  letter-spacing:
    -.052em;

  font-weight:
    500;

}



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

.store-shop-intro {

  padding:
    clamp(
      92px,
      9vw,
      138px
    )
    0
    clamp(
      54px,
      6vw,
      82px
    );

  background:
    var(--store-white);

}


.store-shop-intro h2 {

  margin:
    0;

  color:
    var(--store-black);

  font-size:
    clamp(
      18px,
      3.4vw,
      40px
    );

  line-height:
    .98;

  letter-spacing:
    -.052em;

  font-weight:
    500;

}

.store-shop-intro h2 {
  margin: 0;
  color: var(--store-black);
  font-size: clamp(18px, 3.4vw, 40px);
  line-height: .98;
  letter-spacing: -.052em;
  font-weight: 500;
}

.store-shop-intro h2 span {
  color: var(--store-muted);
}



/* =========================================================
  STICKY STORE CONTROLS
========================================================= */

.store-controls-wrap {

  position:
    sticky;

  top:
    var(--store-header-h);

  z-index:
    80;

  background:
    rgba(
      255,
      255,
      255,
      .95
    );

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

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

  backdrop-filter:
    blur(18px);

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

}


.store-controls {

  min-height:
    76px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    32px;

}


/* =========================================================
  FILTERS
========================================================= */

.store-filter-group {

  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    7px;

}


.store-filter {

  min-height:
    32px;

  padding:
    0
    10px;

  border: 0;

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

  background:
    transparent;

  color:
    var(--store-muted);

  font-size:
    12px;

  line-height:
    1;

  font-weight:
    500;

  letter-spacing:
    0;

  text-transform:
    none;

  cursor:
    pointer;

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

}


.store-filter:hover,
.store-filter:focus-visible {

  color:
    var(--store-blue);

  background:
    rgba(
      11,
      54,
      154,
      .045
    );

}


.store-filter.is-active {

  color:
    var(--store-blue);

  background:
    rgba(
      11,
      54,
      154,
      .045
    );

}


.store-filter:focus-visible {
  outline: none;

}


.store-filter:active {
  transform:
    translateY(
      1px
    );

}


/* =========================================================
  SORT
========================================================= */

.store-sort {

  position:
    relative;

  flex:
    0
    0
    auto;

}


.store-sort-trigger {

  min-height:
    40px;

  padding:
    0
    4px
    0
    10px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  border:
    0;

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

  background:
    transparent;

  color:
    var(--store-muted);

  font-size:
    12px;

  line-height:
    1;

  cursor:
    pointer;

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

}


.store-sort-trigger:hover,
.store-sort-trigger:focus-visible,
.store-sort.is-open
.store-sort-trigger {

  color:
    var(--store-black);

  background:
    var(--store-surface);

}


.store-sort-trigger strong {

  color:
    var(--store-text);

  font-weight:
    550;

}


.store-sort-prefix {

  color:
    var(--store-soft);

}


.store-sort-trigger:focus-visible {

  outline:
    2px
    solid
    var(--store-blue);

  outline-offset:
    3px;

}


/* =========================================================
  SORT CHEVRON
========================================================= */

.store-sort-chevron {

  position:
    relative;

  width:
    18px;

  height:
    18px;

  flex:
    0
    0
    18px;

}


.store-sort-chevron::before,
.store-sort-chevron::after {

  content:
    "";

  position:
    absolute;

  top:
    8px;

  width:
    6px;

  height:
    1px;

  background:
    currentColor;

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

}


.store-sort-chevron::before {

  left:
    4px;

  transform:
    rotate(
      45deg
    );

}


.store-sort-chevron::after {

  right:
    4px;

  transform:
    rotate(
      -45deg
    );

}


.store-sort.is-open
.store-sort-chevron::before {

  transform:
    rotate(
      -45deg
    );

}


.store-sort.is-open
.store-sort-chevron::after {

  transform:
    rotate(
      45deg
    );

}


/* =========================================================
  SORT MENU
========================================================= */

.store-sort-menu {

  position:
    absolute;

  top:
    calc(
      100%
      +
      8px
    );

  right:
    0;

  z-index:
    100;

  width:
    224px;

  padding:
    6px;

  display:
    grid;

  gap:
    2px;

  border:
    1px
    solid
    var(--store-border-strong);

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

  background:
    var(--store-white);

  box-shadow:
    0
    16px
    42px
    rgba(
      17,
      17,
      17,
      .09
    );

  opacity:
    0;

  visibility:
    hidden;

  transform:
    translateY(
      -4px
    );

  pointer-events:
    none;

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

}


.store-sort.is-open
.store-sort-menu {

  opacity:
    1;

  visibility:
    visible;

  transform:
    none;

  pointer-events:
    auto;

}


.store-sort-option {

  width:
    100%;

  min-height:
    42px;

  padding:
    0
    11px;

  display:
    grid;

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

  gap:
    9px;

  align-items:
    center;

  border:
    0;

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

  background:
    transparent;

  color:
    var(--store-text);

  font-size:
    12px;

  font-weight:
    450;

  line-height:
    1.25;

  text-align:
    left;

  cursor:
    pointer;

}


.store-sort-option:hover,
.store-sort-option:focus-visible {

  background:
    var(--store-surface);

}


.store-sort-option:focus-visible {

  outline:
    2px
    solid
    var(--store-blue);

  outline-offset:
    -2px;

}


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

.store-sort-check {

  position:
    relative;

  width:
    16px;

  height:
    16px;

}


.store-sort-option.is-selected
.store-sort-check::before {

  content:
    "";

  position:
    absolute;

  left:
    3px;

  top:
    2px;

  width:
    6px;

  height:
    10px;

  border-right:
    1.5px
    solid
    var(--store-black);

  border-bottom:
    1.5px
    solid
    var(--store-black);

  transform:
    rotate(
      45deg
    );

}


/* =========================================================
  PRODUCTS
========================================================= */

.store-products {

  position:
    relative;

  padding:
    clamp(
      28px,
      3vw,
      44px
    )
    var(--store-gutter)
    clamp(
      118px,
      11vw,
      176px
    );

  background:
    var(--store-white);

}


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

.store-status {

  position:
    absolute;

  width:
    1px;

  height:
    1px;

  margin:
    -1px;

  padding:
    0;

  overflow:
    hidden;

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

  white-space:
    nowrap;

  border:
    0;

}


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

  Deliberately asymmetric:
  Device receives the largest space.
========================================================= */

.store-product-grid {

  width:
    min(
      100%,
      calc(
        var(--store-max)
        -
        (
          var(--store-gutter)
          *
          2
        )
      )
    );

  margin-inline:
    auto;

  display:
    grid;

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

  gap:
    18px;

  transition:
    opacity
    140ms
    ease;

}


.store-product-grid.is-updating {

  opacity:
    .58;

}


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

.store-product-card {

  position:
    relative;

  min-width:
    0;

  grid-column:
    span
    4;

  overflow:
    hidden;

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

  background:
    var(--store-surface);

  transition:
    background-color
    180ms
    ease;

}


.store-product-card--device {

  grid-column:
    span
    8;

}


.store-product-grid[data-active-filter="devices"]
.store-product-card--device {

  grid-column:
    1 / -1;

}


.store-product-card[hidden] {

  display:
    none !important;

}


.store-product-card:hover,
.store-product-card:focus-within {

  background:
    var(--store-surface-hover);

}


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

.store-product-inner {

  min-height:
    560px;

  padding:
    clamp(
      28px,
      3.3vw,
      50px
    );

  display:
    grid;

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

  gap:
    30px;

}


.store-product-card--device
.store-product-inner {

  min-height:
    620px;

}


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

.store-product-media {

  position:
    relative;

  min-width:
    0;

  min-height:
    380px;

  display:
    grid;

  place-items:
    center;

  overflow:
    hidden;

}


.store-product-card--device
.store-product-media {

  min-height:
    430px;

}


.store-product-media-link {

  width:
    100%;

  height:
    100%;

  min-height:
    inherit;

  display:
    grid;

  place-items:
    center;

}


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

.store-product-media
[data-store-gallery-image] {

  grid-area:
    1 / 1;

  width:
    min(
      88%,
      400px
    );

  height:
    min(
      88%,
      350px
    );

  max-width:
    100%;

  max-height:
    100%;

  object-fit:
    contain;

  object-position:
    center;

  transform:
    scale(
      1
    );

  transform-origin:
    center;

  transition:
    transform
    420ms
    var(--store-ease);

}


.store-product-card--device
.store-product-media
[data-store-gallery-image] {

  width:
    min(
      88%,
      660px
    );

  height:
    min(
      90%,
      430px
    );

}


.store-product-media
[data-store-gallery-image][hidden] {

  display:
    none !important;

}


.store-product-card:hover
.store-product-media
[data-store-gallery-image].is-active {

  transform:
    scale(
      1.018
    );

}


/* =========================================================
  MEDIA FOCUS
========================================================= */

.store-product-media-link:focus-visible {

  outline:
    2px
    solid
    var(--store-blue);

  outline-offset:
    -2px;

}


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

  Same quiet circular treatment used by Accessories.
========================================================= */

.store-product-arrow {

  position:
    absolute;

  top:
    50%;

  z-index:
    6;

  width:
    42px;

  height:
    42px;

  margin:
    0;

  padding:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    0;

  border-radius:
    50%;

  background:
    var(--store-arrow);

  cursor:
    pointer;

  opacity:
    0;

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

  transition:
    opacity
    170ms
    ease,
    transform
    220ms
    var(--store-ease),
    background-color
    170ms
    ease;

}


.store-product-arrow--previous {

  left:
    8px;

}


.store-product-arrow--next {

  right:
    8px;

}


.store-product-card:hover
.store-product-arrow,
.store-product-card:focus-within
.store-product-arrow,
.store-product-arrow:focus-visible {

  opacity:
    1;

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

}


.store-product-arrow:hover {

  background:
    var(--store-arrow-hover);

}


.store-product-arrow:active {

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

}


.store-product-arrow:focus-visible {

  outline:
    2px
    solid
    var(--store-blue);

  outline-offset:
    3px;

}


.store-product-arrow img {

  width:
    13px;

  height:
    13px;

  max-width:
    none;

  max-height:
    none;

  object-fit:
    contain;

  opacity:
    .72;

  pointer-events:
    none;

}


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

.store-product-info {

  min-width:
    0;

  padding-top:
    3px;

}


.store-product-info-link {

  display:
    block;

  width:
    fit-content;

  max-width:
    100%;

}


.store-product-info h3 {

  max-width:
    430px;

  margin:
    0;

  color:
    var(--store-text);

  font-size:
    clamp(
      17px,
      1.55vw,
      21px
    );

  line-height:
    1.25;

  letter-spacing:
    -.028em;

  font-weight:
    500;

  transition:
    color
    150ms
    ease;

}


.store-product-card--device
.store-product-info h3 {

  font-size:
    clamp(
      20px,
      1.7vw,
      25px
    );

}


.store-product-info p {

  margin:
    10px
    0
    0;

  color:
    var(--store-muted);

  font-size:
    14px;

  line-height:
    1.3;

  letter-spacing:
    -.012em;

  font-weight:
    450;

}


.store-product-card:hover
.store-product-info h3,
.store-product-info-link:focus-visible h3 {

  color:
    var(--store-blue);

}


.store-product-info-link:focus-visible {

  outline:
    2px
    solid
    var(--store-blue);

  outline-offset:
    6px;

}


/* =========================================================
  EMPTY STATE
========================================================= */

.store-empty {

  min-height:
    420px;

  display:
    grid;

  place-items:
    center;

  text-align:
    center;

}


.store-empty[hidden] {

  display:
    none;

}


.store-empty p {

  margin:
    0;

  color:
    var(--store-muted);

  font-size:
    14px;

  line-height:
    1.5;

}


/* =========================================================
  REVEALS
========================================================= */

.store-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 450ms ease,
    transform 450ms cubic-bezier(0.16, 1, 0.3, 1);
}

.store-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* =========================================================
  RESPONSIVE — 1100
========================================================= */

@media (max-width: 1100px) {

  .store-product-card {

    grid-column:
      span
      6;

  }


  .store-product-card--device {

    grid-column:
      1 / -1;

  }


  .store-product-card--device
  .store-product-inner {

    min-height:
      600px;

  }

}


/* =========================================================
  RESPONSIVE — 900
========================================================= */

@media (max-width: 900px) {

  .store-hero {

    min-height:
      680px;

  }


  .store-hero-shell {

    grid-template-columns:
      1fr;

    gap:
      50px;

  }


  .store-hero-copy {

    justify-self:
      start;

  }


  .store-controls {

    min-height:
      78px;

  }


  .store-product-inner {

    min-height:
      520px;

  }


  .store-product-media {

    min-height:
      330px;

  }

}


/* =========================================================
  RESPONSIVE — 720
========================================================= */

@media (max-width: 720px) {

  .store-hero {

    min-height:
      640px;

  }


  .store-hero-shell {

    padding-top:
      calc(
        var(--store-header-h)
        +
        70px
      );

    padding-bottom:
      54px;

  }


  .store-hero-name h1 {

    font-size:
      clamp(
        52px,
        15vw,
        70px
      );

  }


  .store-hero-copy h2 {

    font-size:
      clamp(
        36px,
        10vw,
        50px
      );

  }


  .store-shop-intro {

    padding-top:
      76px;

    padding-bottom:
      48px;

  }


  .store-controls-wrap {

    position:
      relative;

    top:
      auto;

  }


  .store-controls {

    min-height:
      0;

    padding:
      16px
      0;

    align-items:
      stretch;

    flex-direction:
      column;

    gap:
      13px;

  }


  .store-filter-group {

    width:
      100%;

    display:
      grid;

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

  }


  .store-filter {

    width:
      100%;

  }


  .store-sort {

    width:
      100%;

  }


  .store-sort-trigger {

    width:
      100%;

    justify-content:
      flex-start;

    padding-inline:
      2px;

  }


  .store-sort-chevron {

    margin-left:
      auto;

  }


  .store-sort-menu {

    right:
      0;

    left:
      0;

    width:
      100%;

  }


  .store-products {

    padding-inline:
      0;

  }


  .store-product-grid {

    width:
      100%;

    grid-template-columns:
      1fr;

    gap:
      1px;

    background:
      var(--store-border);

  }


  .store-product-card,
  .store-product-card--device,
  .store-product-grid[data-active-filter="devices"]
  .store-product-card--device {

    grid-column:
      auto;

  }


  .store-product-card {

    border-radius:
      0;

  }


  .store-product-inner,
  .store-product-card--device
  .store-product-inner {

    min-height:
      560px;

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

  }


  .store-product-media,
  .store-product-card--device
  .store-product-media {

    min-height:
      365px;

  }


  .store-product-arrow {

    width:
      40px;

    height:
      40px;

    opacity:
      .92;

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

  }

}


/* =========================================================
  RESPONSIVE — 520
========================================================= */

@media (max-width: 520px) {

  .store-hero {

    min-height:
      610px;

  }


  .store-hero-shell {

    gap:
      40px;

  }


  .store-hero-copy p {

    margin-top:
      18px;

    font-size:
      14px;

  }


  .store-filter-group {

    gap:
      6px;

  }


  .store-filter {

    min-height:
      32px;

    padding-inline:
      8px;

    font-size:
      12px;

  }


  .store-product-inner,
  .store-product-card--device
  .store-product-inner {

    min-height:
      500px;

    padding-top:
      28px;

    padding-bottom:
      34px;

  }


  .store-product-media,
  .store-product-card--device
  .store-product-media {

    min-height:
      310px;

  }


  .store-product-media
  [data-store-gallery-image],
  .store-product-card--device
  .store-product-media
  [data-store-gallery-image] {

    width:
      min(
        91%,
        360px
      );

    height:
      min(
        90%,
        310px
      );

  }


  .store-product-arrow {

    width:
      38px;

    height:
      38px;

  }


  .store-product-arrow--previous {

    left:
      2px;

  }


  .store-product-arrow--next {

    right:
      2px;

  }

}


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

@media (hover: none) {

  .store-product-card:hover
  .store-product-media
  [data-store-gallery-image].is-active {

    transform:
      none;

  }


  .store-product-arrow {

    opacity:
      .92;

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

  }

}


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

/* Phone and tablet Store controls: use an anchored filter popover while
   preserving the full three-button controls on desktop. */
.store-mobile-filter { display: none; }

@media (max-width: 720px) {
  .store-controls {
    position: relative;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .store-filter-group { display: none; }
  .store-mobile-filter { position: relative; display: block; }

  .store-mobile-filter-trigger {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 8px 0 0;
    border: 0;
    border-radius: var(--store-radius);
    background: transparent;
    color: var(--store-text);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
  }

  .store-mobile-filter-trigger img {
    width: 17px;
    height: 17px;
    opacity: .72;
    filter: brightness(0);
  }
  .store-mobile-filter-menu[hidden] { display: none; }

  .store-mobile-filter-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 120;
    width: min(220px, calc(100vw - 40px));
    padding: 6px;
    display: grid;
    gap: 2px;
    border: 0;
    border-radius: var(--store-radius);
    background: var(--store-white);
    box-shadow: 0 16px 42px rgba(17, 17, 17, .12);
  }

  .store-mobile-filter-menu .store-filter {
    width: 100%;
    min-height: 38px;
    justify-content: flex-start;
    padding-inline: 10px;
    border-radius: 4px;
    text-align: left;
  }

  .store-sort { width: auto; }
  .store-sort-trigger { width: auto; min-height: 38px; padding: 0; gap: 4px; }
  .store-sort-trigger:hover,
  .store-sort-trigger:focus-visible,
  .store-sort.is-open .store-sort-trigger { background: transparent; }
  .store-sort-menu { right: 0; left: auto; width: min(224px, calc(100vw - 40px)); }
}

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

  .store-filter,
  .store-sort-trigger,
  .store-sort-chevron::before,
  .store-sort-chevron::after,
  .store-sort-menu,
  .store-product-grid,
  .store-product-card,
  .store-product-media
  [data-store-gallery-image],
  .store-product-arrow,
  .store-product-info h3,
  .store-reveal {

    transition:
      none;

  }


  .store-reveal {

    opacity:
      1;

    transform:
      none;

  }

}


/* =========================================================
  WHY REDOVAR
========================================================= */

.store-why {

  padding:
    clamp(
      120px,
      12vw,
      190px
    )
    0;

  background:
    var(--store-surface);

}


.store-why-copy {

  width:
    min(
      100%,
      760px
    );

  margin-inline:
    auto;

  text-align:
    center;

}


.store-why-copy h2 {

  margin:
    0;

  color:
    var(--store-black);

  font-size:
    clamp(
      38px,
      4.8vw,
      60px
    );

  line-height:
    .98;

  letter-spacing:
    -.052em;

  font-weight:
    500;

}


.store-why-copy p {

  width:
    min(
      100%,
      680px
    );

  margin:
    26px
    auto
    0;

  color:
    var(--store-muted);

  font-size:
    clamp(
      17px,
      1.6vw,
      21px
    );

  line-height:
    1.55;

  letter-spacing:
    -.022em;

  font-weight:
    450;

}


/* =========================================================
  WHY REDOVAR — MOBILE
========================================================= */

@media (max-width: 620px) {

  .store-why {

    padding:
      96px
      0
      104px;

  }


  .store-why-copy p {

    margin-top:
      20px;

    font-size:
      16px;

    line-height:
      1.5;

  }

}