/* =========================================================
REDOVAR DEVICE — GEN 1
Developed by Cavendish Pierre-Louis
https://cavendishpierrelouis.io

PAGE-SPECIFIC STORE CONTENT ONLY.

Header, footer, mobile navigation and privacy UI remain
owned by Redovar's global files.
========================================================= */


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

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

  --store-terra: #C34811;
  --store-terra-light: #E06D35;
  --store-terra-dark: #8E2F0C;

  --store-black: #111111;
  --store-hero-black: #050505;

  --store-text: #171717;

  --store-muted: #6B6B68;
  --store-soft: #92928D;
  --store-soft-2: #B1B1AC;

  --store-border: #E7E7E3;

  --store-surface: #F5F5F2;
  --store-surface-2: #EFEFEC;
  --store-surface-3: #E8E8E4;

  --store-white: #FFFFFF;

  --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 {
  text-decoration:
    none;
}


.store-main button {
  font:
    inherit;
}


.store-main img {
  display:
    block;

  max-width:
    100%;
}


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

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

  margin-inline:
    auto;

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


/* =========================================================
SECTION SCROLL POSITION
========================================================= */

#overview,
#product-gallery,
#store-box,
#store-plans,
#store-faq {
  scroll-margin-top:
    calc(
      var(--store-header-h)
      +
      92px
    );
}


/* =========================================================
SHARED SECTION HEADING
========================================================= */

.store-section-heading {
  width:
    min(
      100%,
      760px
    );

  margin-inline:
    auto;

  text-align:
    center;
}


.store-section-heading--left {
  width:
    100%;

  max-width:
    900px;

  margin-inline:
    0;

  text-align:
    left;
}


.store-section-heading h2,
.store-gallery-heading h2,
.store-box-heading h2,
.store-faq-heading h2 {
  margin:
    0;

  color:
    var(--store-black);

  font-size:
    clamp(
      40px,
      4.45vw,
      64px
    );

  font-weight:
    500;

  letter-spacing:
    -.054em;

  line-height:
    .97;
}


.store-section-heading p {
  max-width:
    560px;

  margin:
    18px
    auto
    0;

  color:
    var(--store-muted);

  font-size:
    14px;

  font-weight:
    400;

  letter-spacing:
    -.01em;

  line-height:
    1.65;
}


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

.store-hero {
  position:
    relative;

  width:
    100%;

  height:
    185vh;

  height:
    185svh;

  background:
    var(--store-hero-black);

  color:
    var(--store-white);
}


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

The frame fills the entire visible viewport beneath the
existing Redovar global header.
========================================================= */

.store-hero-frame {
  position:
    sticky;

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

  width:
    100%;

  height:
    calc(
      100vh
      -
      var(--store-header-h)
    );

  height:
    calc(
      100svh
      -
      var(--store-header-h)
    );

  min-height:
    620px;

  overflow:
    hidden;

  background:
    var(--store-hero-black);
}


/* =========================================================
HERO TITLE AREA
========================================================= */

.store-hero-heading {
  position:
    absolute;

  z-index:
    8;

  top:
    clamp(
      36px,
      5vh,
      64px
    );

  right:
    var(--store-gutter);

  left:
    var(--store-gutter);

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  text-align:
    center;

  pointer-events:
    none;
}


/* =========================================================
REDOVAR DEVICE NAME
========================================================= */

.store-hero-name {
  margin:
    0;

  color:
    var(--store-terra);

  background:
    linear-gradient(
      105deg,
      #E7834E
      0%,
      #D25B27
      42%,
      #A93810
      100%
    );

  -webkit-background-clip:
    text;

  background-clip:
    text;

  -webkit-text-fill-color:
    transparent;

  font-size:
    clamp(
      22px,
      2.4vw,
      34px
    );

  font-weight:
    500;

  letter-spacing:
    -.045em;

  line-height:
    1;
}


/* =========================================================
GEN 1
========================================================= */

.store-hero h1 {
  margin:
    clamp(
      4px,
      .8vh,
      10px
    )
    0
    0;

   color:
    var(--store-terra);

  background:
    linear-gradient(
      105deg,
      #E7834E
      0%,
      #D25B27
      42%,
      #A93810
      100%
    );

  -webkit-background-clip:
    text;

  background-clip:
    text;

  -webkit-text-fill-color:
    transparent;

  font-size:
    clamp(
      80px,
      10vw,
      170px
    );

  font-weight:
    600;

  letter-spacing:
    -.038em;

  line-height:
    .78;
}


/* =========================================================
HERO PRODUCT VISUAL
========================================================= */

.store-hero-visual {
  position:
    absolute;

  z-index:
    2;

  top:
    clamp(
      126px,
      17vh,
      184px
    );

  right:
    0;

  bottom:
    0;

  left:
    0;

  overflow:
    hidden;

  pointer-events:
    none;
}


/* =========================================================
HERO DEVICE BASE
========================================================= */

.store-hero-device {
  position:
    absolute;

  right:
    50%;

  bottom:
    clamp(
      -150px,
      -13vh,
      -72px
    );

  width:
    min(
      96vw,
      1280px
    );

  margin:
    0;

  display:
    grid;

  place-items:
    center;

  transform-origin:
    center
    bottom;

  will-change:
    transform,
    opacity;

  pointer-events:
    none;
}


.store-hero-device img {
  width:
    100%;

  max-height:
    82vh;

  object-fit:
    contain;

  object-position:
    center
    bottom;
}


/* =========================================================
FIRST HERO DEVICE
========================================================= */

.store-hero-device--first {
  z-index:
    3;

  opacity:
    var(
      --hero-first-opacity,
      1
    );

  transform:
    translate3d(
      50%,
      calc(
        var(
          --hero-first-y,
          0
        )
        *
        1vh
      ),
      0
    )
    scale(
      var(
        --hero-first-scale,
        1.035
      )
    );
}


/* =========================================================
SECOND HERO DEVICE
========================================================= */

.store-hero-device--second {
  z-index:
    2;

  opacity:
    var(
      --hero-second-opacity,
      0
    );

  transform:
    translate3d(
      50%,
      calc(
        var(
          --hero-second-y,
          -12
        )
        *
        1vh
      ),
      0
    )
    scale(
      var(
        --hero-second-scale,
        .99
      )
    );
}


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

.store-hero-description {
  max-width:
    470px;

  margin:
    0;

  color:
    rgba(
      255,
      255,
      255,
      .74
    );

  font-size:
    clamp(
      13px,
      1.1vw,
      15px
    );

  font-weight:
    450;

  letter-spacing:
    -.012em;

  line-height:
    1.5;
}


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

.store-hero-buy {
  min-height:
    40px;

  margin-top:
    18px;

  padding:
    0
    18px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

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

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

  background:
    var(--store-blue);

  color:
    var(--store-white);

  font-size:
    12px;

  font-weight:
    600;

  line-height:
    1;

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


.store-hero-buy:hover,
.store-hero-buy:focus-visible {
  border-color:
    var(--store-blue-hover);

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

  color:
    var(--store-white);
}


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

.store-hero-price {
  margin:
    15px
    0
    0;

  color:
    rgba(
      255,
      255,
      255,
      .78
    );

  font-size:
    clamp(
      13px,
      1.18vw,
      16px
    );

  font-weight:
    550;

  letter-spacing:
    -.016em;

  line-height:
    1.35;
}


/* =========================================================
LOCAL PRODUCT NAV
========================================================= */

.store-local-nav {
  position:
    sticky;

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

  z-index:
    60;

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

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

  backdrop-filter:
    blur(
      14px
    );

  -webkit-backdrop-filter:
    blur(
      14px
    );
}


/* =========================================================
LOCAL NAV INNER
========================================================= */

.store-local-nav-inner {
  min-height:
    66px;

  display:
    grid;

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

  gap:
    34px;

  align-items:
    center;
}


/* =========================================================
LOCAL PRODUCT IDENTITY
========================================================= */

.store-local-nav-product {
  display:
    flex;

  align-items:
    baseline;

  gap:
    9px;

  white-space:
    nowrap;
}


.store-local-nav-product strong {
  color:
    var(--store-black);

  font-size:
    15px;

  font-weight:
    600;

  letter-spacing:
    -.026em;

  line-height:
    1.2;
}


.store-local-nav-product span {
  color:
    var(--store-muted);

  font-size:
    10px;

  font-weight:
    550;

  letter-spacing:
    .025em;

  line-height:
    1.2;
}


/* =========================================================
LOCAL NAV LINKS
========================================================= */

.store-local-nav-links {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    24px;

  white-space:
    nowrap;
}


.store-local-nav-links a {
  position:
    relative;

  padding:
    6px
    0;

  color:
    var(--store-muted);

  font-size:
    11px;

  font-weight:
    550;

  line-height:
    1.2;

  transition:
    color
    150ms
    ease;
}


.store-local-nav-links a::after {
  content:
    "";

  position:
    absolute;

  right:
    0;

  bottom:
    0;

  left:
    0;

  height:
    1px;

  background:
    currentColor;

  transform:
    scaleX(
      0
    );

  transform-origin:
    center;

  transition:
    transform
    180ms
    ease;
}


.store-local-nav-links a:hover,
.store-local-nav-links a:focus-visible,
.store-local-nav-links a.is-active {
  color:
    var(--store-black);
}


.store-local-nav-links a.is-active::after {
  transform:
    scaleX(
      1
    );
}


/* =========================================================
LOCAL NAV ACTIONS
========================================================= */

.store-local-nav-actions {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;
}


.store-local-nav-explore,
.store-local-nav-buy {
  min-height:
    36px;

  padding:
    0
    14px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

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

  font-size:
    11px;

  font-weight:
    600;

  line-height:
    1;
}


/* =========================================================
EXPLORE
========================================================= */

.store-local-nav-explore {
  border:
    1px solid
    #C9C9C5;

  background:
    var(--store-white);

  color:
    var(--store-black);

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


.store-local-nav-explore:hover,
.store-local-nav-explore:focus-visible {
  border-color:
    #AAAAA5;

  background:
    var(--store-surface);

  color:
    var(--store-black);
}


/* =========================================================
BUY
========================================================= */

.store-local-nav-buy {
  border:
    1px solid
    var(--store-blue);

  background:
    var(--store-blue);

  color:
    var(--store-white);

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


.store-local-nav-buy:hover,
.store-local-nav-buy:focus-visible {
  border-color:
    var(--store-blue-hover);

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

  color:
    var(--store-white);
}


/* =========================================================
OVERVIEW
========================================================= */

.store-overview {
  padding:
    clamp(
      112px,
      10vw,
      168px
    )
    0;

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


/* =========================================================
OVERVIEW GRID
========================================================= */

.store-overview-grid {
  margin-top:
    clamp(
      54px,
      6vw,
      84px
    );

  display:
    grid;

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

  gap:
    12px;
}


/* =========================================================
OVERVIEW CARD

No border.
No divider line.
No shadow.
========================================================= */

.store-overview-card {
  min-width:
    0;

  min-height:
    300px;

  padding:
    clamp(
      28px,
      3vw,
      38px
    );

  display:
    flex;

  flex-direction:
    column;

  border:
    0;

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

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


/* =========================================================
OVERVIEW ICON
========================================================= */

.store-overview-icon {
  width:
    30px;

  height:
    30px;

  flex:
    0
    0
    auto;

  object-fit:
    contain;

  object-position:
    center;
}


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

.store-overview-copy {
  margin-top:
    auto;

  padding-top:
    54px;
}


.store-overview-card h3 {
  margin:
    0;

  color:
    var(--store-black);

  font-size:
    20px;

  font-weight:
    550;

  letter-spacing:
    -.032em;

  line-height:
    1.18;
}


.store-overview-card p {
  max-width:
    300px;

  margin:
    13px
    0
    0;

  color:
    var(--store-muted);

  font-size:
    13px;

  font-weight:
    400;

  letter-spacing:
    -.008em;

  line-height:
    1.62;
}


/* =========================================================
PRODUCT GALLERY SECTION

The ENTIRE area is gray.

There is no white gallery card behind transparent PNGs.
========================================================= */

.store-gallery {
  padding:
    clamp(
      112px,
      10vw,
      168px
    )
    0
    clamp(
      96px,
      9vw,
      146px
    );

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


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

.store-gallery-heading {
  width:
    100%;

  margin:
    0
    0
    clamp(
      42px,
      5vw,
      68px
    );

  text-align:
    left;
}


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

.store-gallery-carousel {
  width:
    100%;
}


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

Arrows live on the left and right of the actual image area.
========================================================= */

.store-gallery-stage {
  position:
    relative;

  width:
    100%;

  min-height:
    clamp(
      610px,
      63vw,
      900px
    );

  display:
    grid;

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

  gap:
    clamp(
      8px,
      1.5vw,
      22px
    );

  align-items:
    center;
}


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

Same gray as the surrounding gallery.
========================================================= */

.store-gallery-viewport {
  position:
    relative;

  width:
    100%;

  min-width:
    0;

  min-height:
    clamp(
      610px,
      63vw,
      900px
    );

  overflow:
    hidden;

  border:
    0;

  border-radius:
    0;

  background:
    transparent;

  touch-action:
    pan-y;
}


.store-gallery-viewport:focus-visible {
  outline:
    2px solid
    var(--store-blue);

  outline-offset:
    4px;
}


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

.store-gallery-track {
  width:
    100%;

  height:
    100%;

  display:
    flex;

  transform:
    translate3d(
      0,
      0,
      0
    );

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

  will-change:
    transform;
}


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

.store-gallery-slide {
  flex:
    0
    0
    100%;

  width:
    100%;

  min-height:
    clamp(
      610px,
      63vw,
      900px
    );

  margin:
    0;

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

  display:
    grid;

  place-items:
    center;

  background:
    transparent;
}


.store-gallery-slide img {
  width:
    min(
      100%,
      1080px
    );

  height:
    min(
      75vh,
      760px
    );

  max-width:
    100%;

  max-height:
    100%;

  object-fit:
    contain;

  object-position:
    center;
}


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

.store-gallery-arrow {
  position:
    relative;

  z-index:
    8;

  width:
    44px;

  height:
    44px;

  padding:
    0;

  display:
    grid;

  place-items:
    center;

  justify-self:
    center;

  border:
    0;

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

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

  color:
    var(--store-black);

  cursor:
    pointer;

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


.store-gallery-arrow:hover,
.store-gallery-arrow:focus-visible {
  background:
    var(--store-surface-3);
}


.store-gallery-arrow:active {
  transform:
    scale(
      .97
    );
}


/* =========================================================
GALLERY ARROW GLYPH
========================================================= */

.store-gallery-arrow span {
  width:
    11px;

  height:
    11px;

  display:
    block;

  border-top:
    1.5px solid
    currentColor;

  border-right:
    1.5px solid
    currentColor;
}


.store-gallery-arrow--previous span {
  margin-left:
    4px;

  transform:
    rotate(
      -135deg
    );
}


.store-gallery-arrow--next span {
  margin-right:
    4px;

  transform:
    rotate(
      45deg
    );
}


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

No counter.
========================================================= */

.store-product-dots {
  min-height:
    30px;

  margin-top:
    22px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    9px;
}


.store-product-dot {
  width:
    6px;

  height:
    6px;

  padding:
    0;

  border:
    0;

  border-radius:
    50%;

  background:
    #C6C6C1;

  cursor:
    pointer;

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


.store-product-dot:hover {
  background:
    #8B8B86;
}


.store-product-dot.is-active {
  background:
    var(--store-black);

  transform:
    scale(
      1.18
    );
}


.store-product-dot:focus-visible {
  outline:
    2px solid
    var(--store-blue);

  outline-offset:
    4px;
}


/* =========================================================
IN THE BOX
========================================================= */

.store-box {
  padding:
    clamp(
      112px,
      10vw,
      164px
    )
    0;

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


/* =========================================================
IN THE BOX HEADING
========================================================= */

.store-box-heading {
  text-align:
    center;
}


/* =========================================================
IN THE BOX GRID
========================================================= */

.store-box-grid {
  margin-top:
    clamp(
      54px,
      6vw,
      82px
    );

  display:
    grid;

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

  gap:
    clamp(
      18px,
      2vw,
      30px
    );
}


/* =========================================================
IN THE BOX ITEM
========================================================= */

.store-box-item {
  min-width:
    0;

  margin:
    0;

  text-align:
    center;
}


/* =========================================================
IN THE BOX IMAGE
========================================================= */

.store-box-image {
  width:
    100%;

  aspect-ratio:
    1
    /
    1;

  padding:
    clamp(
      32px,
      4vw,
      58px
    );

  display:
    grid;

  place-items:
    center;

  overflow:
    hidden;

  border:
    0;

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

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


.store-box-image img {
  width:
    min(
      100%,
      350px
    );

  height:
    min(
      100%,
      350px
    );

  max-width:
    100%;

  max-height:
    100%;

  object-fit:
    contain;

  object-position:
    center;
}


/* =========================================================
IN THE BOX LABEL
========================================================= */

.store-box-item h3 {
  margin:
    22px
    0
    0;

  color:
    var(--store-black);

  font-size:
    15px;

  font-weight:
    550;

  letter-spacing:
    -.022em;

  line-height:
    1.35;
}


/* =========================================================
PLANS
========================================================= */

.store-plans {
  padding:
    clamp(
      112px,
      10vw,
      164px
    )
    0;

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


/* =========================================================
PLAN GRID
========================================================= */

.store-plan-grid {
  margin-top:
    clamp(
      52px,
      5.5vw,
      76px
    );

  display:
    grid;

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

  gap:
    12px;
}


/* =========================================================
PLAN CARD

No border.
========================================================= */

.store-plan {
  min-height:
    250px;

  padding:
    28px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  border:
    0;

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

  background:
    var(--store-white);

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


.store-plan:hover {
  background:
    #FDFDFC;

  transform:
    translateY(
      -2px
    );
}


/* =========================================================
PLAN NUMBER
========================================================= */

.store-plan-number {
  color:
    #CACAC5;

  font-size:
    clamp(
      42px,
      4vw,
      62px
    );

  font-weight:
    500;

  letter-spacing:
    -.06em;

  line-height:
    .9;
}


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

.store-plan h3 {
  margin:
    0;

  color:
    var(--store-black);

  font-size:
    clamp(
      24px,
      2vw,
      31px
    );

  font-weight:
    500;

  letter-spacing:
    -.04em;

  line-height:
    1;
}


.store-plan p {
  margin:
    10px
    0
    0;

  color:
    var(--store-muted);

  font-size:
    12px;

  font-weight:
    400;

  line-height:
    1.4;
}


/* =========================================================
CUSTOM PLAN
========================================================= */

.store-plan--custom {
  background:
    var(--store-black);
}


.store-plan--custom:hover {
  background:
    #1A1A1A;
}


.store-plan--custom
.store-plan-number {
  color:
    rgba(
      255,
      255,
      255,
      .28
    );
}


.store-plan--custom h3 {
  color:
    var(--store-white);
}


.store-plan--custom p {
  color:
    rgba(
      255,
      255,
      255,
      .56
    );
}


/* =========================================================
SEE PRICING
========================================================= */

.store-plan-link-wrap {
  margin-top:
    34px;

  display:
    flex;

  justify-content:
    center;
}


.store-plan-link {
  position:
    relative;

  padding:
    4px
    0;

  color:
    var(--store-blue);

  font-size:
    12px;

  font-weight:
    550;

  line-height:
    1.3;
}


.store-plan-link::after {
  content:
    "";

  position:
    absolute;

  right:
    0;

  bottom:
    0;

  left:
    0;

  height:
    1px;

  background:
    currentColor;

  transform:
    scaleX(
      .3
    );

  transform-origin:
    left;

  transition:
    transform
    180ms
    ease;
}


.store-plan-link:hover::after,
.store-plan-link:focus-visible::after {
  transform:
    scaleX(
      1
    );
}


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

.store-faq {
  padding:
    clamp(
      116px,
      10vw,
      168px
    )
    0
    clamp(
      126px,
      11vw,
      180px
    );

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


/* =========================================================
FAQ HEADING
========================================================= */

.store-faq-heading {
  text-align:
    center;
}


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

.store-faq-list {
  width:
    min(
      100%,
      920px
    );

  margin:
    clamp(
      50px,
      5.5vw,
      72px
    )
    auto
    0;

  display:
    grid;

  gap:
    6px;
}


/* =========================================================
FAQ ITEM

No border.

Hover and selected/open state become white.
========================================================= */

.store-faq-list details {
  overflow:
    hidden;

  border:
    0;

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

  background:
    transparent;

  transition:
    background-color
    160ms
    ease;
}


.store-faq-list details:hover,
.store-faq-list details[open] {
  background:
    var(--store-white);
}


/* =========================================================
FAQ SUMMARY
========================================================= */

.store-faq-list summary {
  min-height:
    68px;

  padding:
    20px
    22px
    20px
    24px;

  display:
    grid;

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

  gap:
    20px;

  align-items:
    center;

  list-style:
    none;

  cursor:
    pointer;
}


.store-faq-list summary::-webkit-details-marker {
  display:
    none;
}


.store-faq-list summary > span:first-child {
  color:
    var(--store-text);

  font-size:
    13px;

  font-weight:
    550;

  letter-spacing:
    -.01em;

  line-height:
    1.4;
}


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

.store-faq-icon {
  position:
    relative;

  width:
    20px;

  height:
    20px;

  justify-self:
    end;
}


.store-faq-icon::before,
.store-faq-icon::after {
  content:
    "";

  position:
    absolute;

  top:
    50%;

  left:
    50%;

  width:
    8px;

  height:
    1px;

  background:
    #555551;

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


.store-faq-icon::after {
  transform:
    translate(
      -50%,
      -50%
    )
    rotate(
      90deg
    );

  transition:
    opacity
    160ms
    ease,
    transform
    180ms
    ease;
}


.store-faq-list details[open]
.store-faq-icon::after {
  opacity:
    0;
}


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

.store-faq-answer {
  padding:
    0
    66px
    28px
    24px;
}


.store-faq-answer p {
  max-width:
    700px;

  margin:
    0;

  color:
    var(--store-muted);

  font-size:
    12px;

  font-weight:
    400;

  line-height:
    1.65;
}


/* =========================================================
FAQ CONTACT
========================================================= */

.store-faq-contact {
  margin-top:
    50px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    6px;

  font-size:
    12px;
}


.store-faq-contact span {
  color:
    var(--store-muted);
}


.store-faq-contact a {
  position:
    relative;

  color:
    var(--store-blue);

  font-weight:
    550;
}


.store-faq-contact 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;
} 


.store-faq-contact a:hover::after,
.store-faq-contact a:focus-visible::after {
  transform:
    scaleX(
      1
    );
}


/* =========================================================
QUIET 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 — 1180
========================================================= */

@media (max-width: 1180px) {


  .store-overview-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .store-plan-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


}


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

@media (max-width: 980px) {


  .store-local-nav-inner {
    grid-template-columns:
      minmax(
        0,
        1fr
      )
      auto;

    gap:
      12px
      20px;

    padding:
      11px
      0
      10px;
  }


  .store-local-nav-links {
    grid-column:
      1
      /
      -1;

    order:
      3;

    justify-content:
      flex-start;

    overflow-x:
      auto;

    padding-bottom:
      2px;

    scrollbar-width:
      none;
  }


  .store-local-nav-links::-webkit-scrollbar {
    display:
      none;
  }


  .store-local-nav-actions {
    justify-self:
      end;
  }


}


/* =========================================================
RESPONSIVE — 820
========================================================= */

@media (max-width: 820px) {


  .store-hero {
    height:
      155vh;

    height:
      155svh;
  }


  .store-hero-frame {
    min-height:
      560px;
  }


  .store-hero h1 {
    font-size:
      clamp(
        76px,
        18vw,
        124px
      );
  }


  .store-hero-device {
    width:
      min(
        115vw,
        920px
      );

    bottom:
      -72px;
  }


  .store-gallery-stage {
    min-height:
      570px;

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

    gap:
      6px;
  }


  .store-gallery-viewport,
  .store-gallery-slide {
    min-height:
      570px;
  }


  .store-gallery-arrow {
    width:
      40px;

    height:
      40px;
  }


  .store-box-grid {
    grid-template-columns:
      1fr;
  }


  .store-box-item {
    width:
      min(
        100%,
        540px
      );

    margin-inline:
      auto;
  }


}


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

@media (max-width: 680px) {


  /* A compact, self-contained product stage for phones. */
  .store-hero {
    height:
      480px;
  }


  .store-hero-frame {
    height:
      min(
        400px,
        calc(
          100svh
          -
          var(--store-header-h)
        )
      );

    min-height:
      0;

    clip-path:
      inset(0);
  }


  .store-hero-heading {
    top:
      28px;
  }


  .store-hero-name {
    font-size:
      21px;
  }


  .store-hero h1 {
    margin-top:
      7px;

    font-size:
      clamp(
        68px,
        20vw,
        104px
      );
  }


  .store-hero-visual {
    top:
      116px;

    bottom:
      auto;

    height:
      235px;
  }


  .store-hero-device {
    width:
      100vw;

    top:
      -28px;

    bottom:
      auto;
  }


  .store-hero-device img {
    max-height:
      none;
  }


  /* Keep the opening product render completely still and singular. */
  .store-hero:not(.is-transitioning)
  .store-hero-device--first {
    opacity:
      1 !important;

    transform:
      translate3d(50%, 0, 0)
      scale(1) !important;
  }


  .store-hero:not(.is-transitioning)
  .store-hero-device--second {
    opacity:
      0 !important;
  }


  .store-hero-lower {
    bottom:
      24px;
  }


  .store-hero-description {
    max-width:
      330px;

    font-size:
      13px;
  }


  .store-hero-price {
    font-size:
      13px;
  }


  .store-overview-grid {
    grid-template-columns:
      1fr;
  }


  .store-overview-card {
    min-height:
      245px;
  }


  .store-gallery-stage {
    min-height:
      460px;

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

    gap:
      0;
  }


  .store-gallery-viewport,
  .store-gallery-slide {
    min-height:
      460px;
  }


  .store-gallery-slide {
    padding:
      18px;
  }


  .store-gallery-slide img {
    height:
      min(
        58vh,
        420px
      );
  }


  .store-gallery-arrow {
    width:
      36px;

    height:
      36px;
  }


  .store-plan-grid {
    grid-template-columns:
      1fr;
  }


}


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

@media (max-width: 520px) {


  .store-local-nav-inner {
    row-gap:
      22px;

    padding:
      15px
      0
      20px;
  }


  .store-local-nav-links {
    justify-content:
      center;

    gap:
      14px;

    margin-top:
      4px;

    overflow-x:
      visible;
  }


  .store-hero-heading {
    top:
      50px;
  }


  .store-hero-name {
    font-size:
      28px !important;
  }


  .store-hero h1 {
    font-size:
      clamp(
        94px,
        28.5vw,
        114px
      ) !important;

    letter-spacing:
      -.055em;

    white-space:
      nowrap;
  }


  .store-hero-visual {
    top:
      188px;
  }


  .store-local-nav-product strong {
    font-size:
      13px;
  }


  .store-local-nav-product span {
    font-size:
      10px;
  }


  .store-local-nav-explore,
  .store-local-nav-buy {
    min-height:
      34px;

    padding-inline:
      11px;

    font-size:
      10px;
  }


  .store-local-nav-links {
    gap:
      18px;
  }


  .store-local-nav-links a {
    font-size:
      10px;
  }


  .store-section-heading h2,
  .store-gallery-heading h2,
  .store-box-heading h2,
  .store-faq-heading h2 {
    font-size:
      clamp(
        34px,
        10vw,
        46px
      );
  }


  .store-gallery-stage {
    min-height:
      390px;

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


  .store-gallery-viewport,
  .store-gallery-slide {
    min-height:
      390px;
  }


  .store-gallery-arrow {
    width:
      32px;

    height:
      32px;

    background:
      var(--store-surface-2);
  }


  .store-gallery-arrow span {
    width:
      9px;

    height:
      9px;
  }


  .store-plan {
    min-height:
      210px;
  }


  .store-faq-list summary {
    padding:
      19px
      18px;
  }


  .store-faq-answer {
    padding:
      0
      48px
      24px
      18px;
  }


  .store-faq-contact {
    flex-direction:
      column;

    gap:
      5px;
  }


}


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

@media (hover: none) {


  .store-plan:hover {
    background:
      var(--store-white);

    transform:
      none;
  }


  .store-plan--custom:hover {
    background:
      var(--store-black);
  }


}


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

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


  .store-gallery-track,
  .store-product-dot,
  .store-gallery-arrow,
  .store-local-nav-links a,
  .store-local-nav-links a::after,
  .store-local-nav-explore,
  .store-local-nav-buy,
  .store-hero-buy,
  .store-plan,
  .store-plan-link::after,
  .store-faq-icon::after,
  .store-faq-contact a::after,
  .store-reveal {
    transition:
      none;
  }


  .store-reveal {
    opacity:
      1;

    transform:
      none;
  }


  .store-hero-device--first {
    opacity:
      1;

    transform:
      translate3d(
        50%,
        0,
        0
      );
  }


  .store-hero-device--second {
    opacity:
      0;

    transform:
      translate3d(
        50%,
        0,
        0
      );
  }


}