/* ==========================================================================
   store.css - styles for store.html ONLY.
   Loaded after styles.css and by no other page. Nothing here may be reused
   by the eight pages that share styles.css; every selector is prefixed
   .store-page or .store-*.
   Palette is fixed: paper #050607, teal #36d0c2, emerald #0f5e59,
   amber #d89b52 (IN DEVELOPMENT badge only), ink #f7f4ec, muted #adbbbc,
   card body #12171a / #0b0e10.
   ========================================================================== */

.store-page {
  /* Content container. Mirrors the site's centred-column convention and the
     homepage's habit of widening on very large monitors (--raem-content),
     so the store does not read as a narrow strip on a 3440 display. */
  --store-content: min(100% - 40px, 1400px);
  --store-surface: #0b0e10;
  --store-surface-soft: #12171a;
  --store-edge: rgba(54, 208, 194, 0.18);
  --store-edge-quiet: rgba(255, 255, 255, 0.1);
  --store-teal: #36d0c2;
  --store-amber: #d89b52;
  --store-muted: #adbbbc;

  overflow-x: clip;
  background:
    radial-gradient(circle at 78% -6%, rgba(54, 208, 194, 0.1), transparent 32rem),
    radial-gradient(circle at 8% 34%, rgba(15, 94, 89, 0.14), transparent 30rem),
    #050607;
}

@media (min-width: 1900px) {
  .store-page {
    --store-content: min(100% - 200px, 1680px);
  }
}

@media (min-width: 2561px) {
  .store-page {
    --store-content: min(100% - 320px, 1980px);
  }
}

/* --------------------------------------------------------------------------
   Stacking: the procedural canvas (Task 3) sits behind everything, the page
   content and footer sit above it, the site header keeps its own z-index.
   -------------------------------------------------------------------------- */

#store-bg-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.store-page .store-main,
.store-page .site-footer {
  position: relative;
  z-index: 1;
}

.store-page .store-main {
  padding-top: clamp(104px, 9vw, 146px);
  padding-bottom: clamp(20px, 3vw, 40px);
}

/* --------------------------------------------------------------------------
   Title band
   -------------------------------------------------------------------------- */

.store-title {
  width: var(--store-content);
  margin-inline: auto;
  padding-block: clamp(34px, 5vw, 76px) clamp(30px, 4vw, 54px);
}

.store-title h1 {
  margin: 0;
  color: #f7f4ec;
  font-size: clamp(3rem, 5.2vw, 5.2rem);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.022em;
}

.store-lede {
  max-width: 48ch;
  margin: 16px 0 0;
  color: rgba(220, 232, 232, 0.7);
  font-size: clamp(16px, 1.15vw, 20px);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Category rail - the page's structural device. An uppercase letterspaced
   teal label followed by a hairline that runs to the container edge. It
   marks the three real categories and nothing else.
   -------------------------------------------------------------------------- */

.store-category {
  width: var(--store-content);
  margin-inline: auto;
  padding-bottom: clamp(38px, 4.4vw, 70px);
}

.store-rail {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: clamp(18px, 2vw, 28px);
}

.store-rail-label {
  margin: 0;
  color: var(--store-teal);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  white-space: nowrap;
}

.store-rail-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(54, 208, 194, 0.42), rgba(255, 255, 255, 0.06) 62%, transparent);
}

/* --------------------------------------------------------------------------
   Shared card surface
   -------------------------------------------------------------------------- */

.store-feature,
.store-card {
  position: relative;
  border: 1px solid var(--store-edge);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(54, 208, 194, 0.035), transparent 42%),
    var(--store-surface);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.42);
}

.store-feature h2,
.store-card h2 {
  margin: 0;
  color: #f7f4ec;
  font-weight: 800;
  letter-spacing: -0.012em;
  line-height: 1.1;
}

.store-line {
  margin: 0;
  color: var(--store-muted);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   Badges - small outline chips. Amber appears here and nowhere else.
   -------------------------------------------------------------------------- */

.store-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 5px 11px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.2em;
  line-height: 1;
  text-transform: uppercase;
}

.store-badge-live {
  color: var(--store-teal);
  background: rgba(54, 208, 194, 0.08);
}

.store-badge-dev {
  color: var(--store-amber);
  background: rgba(216, 155, 82, 0.07);
}

.store-badge-soon {
  color: var(--store-muted);
  background: rgba(173, 187, 188, 0.06);
}

/* --------------------------------------------------------------------------
   Price plate - the price is set as an instrument reading, not a sales
   sticker: tabular figures on a recessed plate with the term beside it.
   -------------------------------------------------------------------------- */

.store-price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  align-self: flex-start;
  padding: 12px 18px;
  border: 1px solid rgba(54, 208, 194, 0.22);
  border-radius: 10px;
  background: rgba(15, 94, 89, 0.12);
}

.store-price-amount {
  color: #f7f4ec;
  font-size: clamp(28px, 2.3vw, 34px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
  line-height: 1;
}

/* Rendered lowercase on purpose: the Truth Ledger requires "one-time" spelled
   out, and it is the one word on the page that has to read as plain English
   rather than as a label. */
.store-price-term {
  color: var(--store-muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.store-price-tk {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
}

.store-price-tk .store-price-amount {
  color: var(--store-muted);
  font-size: clamp(22px, 1.7vw, 26px);
}

/* --------------------------------------------------------------------------
   Buy controls. Both are real <button disabled> elements - the placeholder
   checkout is deliberately styled as a live control at reduced opacity so it
   reads as "built, not yet open" rather than "broken".
   -------------------------------------------------------------------------- */

.store-buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  align-self: flex-start;
  min-height: 50px;
  padding: 0 24px;
  border: 1px solid rgba(54, 208, 194, 0.55);
  border-radius: 9px;
  color: #041110;
  background: linear-gradient(135deg, #7ce7dc, #36d0c2 72%, #23b3a6);
  font-family: inherit;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  opacity: 0.72;
  cursor: not-allowed;
}

.store-buy-lock {
  flex: none;
}

.store-buy-off {
  min-height: 44px;
  padding: 0 18px;
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--store-muted);
  background: rgba(255, 255, 255, 0.03);
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Text links inside cards
   -------------------------------------------------------------------------- */

.store-alt {
  margin: 0;
  color: var(--store-muted);
  font-size: 14px;
}

.store-alt a {
  border-bottom: 1px solid rgba(54, 208, 194, 0.35);
  color: rgba(220, 232, 232, 0.86);
  transition: color 180ms ease, border-color 180ms ease;
}

.store-alt a:hover {
  border-bottom-color: var(--store-teal);
  color: #fff;
}

.store-more {
  align-self: flex-start;
  color: var(--store-teal);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.01em;
  transition: color 180ms ease, transform 180ms ease;
}

.store-more:hover {
  color: #7ce7dc;
}

.store-note {
  margin: 0;
  color: rgba(173, 187, 188, 0.72);
  font-size: 13px;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Featured card - FLOW Lite. Two columns at every layout width above the
   stacking breakpoint, with the image column held at 40% (spec cap: 45%).
   Reading order is name -> price -> buy -> image in both directions.
   -------------------------------------------------------------------------- */

.store-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 40%);
  align-items: center;
  gap: clamp(28px, 3.4vw, 60px);
  padding: clamp(28px, 2.6vw, 40px);
  margin-bottom: clamp(18px, 1.8vw, 24px);
  border-color: rgba(54, 208, 194, 0.28);
}

.store-feature-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  min-width: 0;
}

.store-feature-body h2 {
  font-size: clamp(30px, 2.7vw, 44px);
  font-weight: 900;
  letter-spacing: -0.024em;
}

.store-feature-body .store-line {
  max-width: 46ch;
  font-size: clamp(16px, 1.15vw, 18px);
}

.store-feature-shot {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(54, 208, 194, 0.24);
  border-radius: 10px;
  background: #05080a;
  box-shadow: inset 0 1px 0 rgba(54, 208, 194, 0.14), 0 18px 44px rgba(0, 0, 0, 0.42);
}

/* 36/25 is the screenshot's own ratio - the dashboard is shown whole, so no
   FLOW heading is cropped. */
.store-feature-shot img {
  width: 100%;
  height: auto;
  aspect-ratio: 36 / 25;
  object-fit: cover;
  object-position: center;
}

/* --------------------------------------------------------------------------
   Card rows. The shelf never carries three cards in one row - Apps holds the
   System card plus the empty slot, Kits holds one card - so the grid steps
   2 -> 1 rather than 3 -> 2 -> 1. The System and Kit cards share the same
   left column width so the two rows align down the page.
   -------------------------------------------------------------------------- */

.store-row {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(16px, 1.6vw, 24px);
  align-items: stretch;
}

.store-card {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2vw, 28px);
  padding: clamp(24px, 2.2vw, 34px);
}

.store-card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.store-card-body h2 {
  font-size: clamp(22px, 1.6vw, 27px);
}

.store-card-shot {
  overflow: hidden;
  border: 1px solid rgba(54, 208, 194, 0.16);
  border-radius: 9px;
  background: #05080a;
}

/* Every product card shares one anatomy - copy left, screen right - so the
   shelf reads as a single system rather than three unrelated card designs. */
.store-card-system {
  flex-direction: row;
  align-items: center;
  gap: clamp(22px, 2.2vw, 38px);
}

.store-card-system .store-card-body {
  flex: 1 1 46%;
  min-width: 0;
}

.store-card-system .store-card-shot {
  flex: 1 1 54%;
  min-width: 0;
}

/* 5/3 shows the Control Center down to the bottom of the figure row: the
   Daily / Weekly / Monthly Rhythm headings and the stat row are whole, and
   the crop stops before the next panel's headings. */
.store-card-shot img {
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 3;
  object-fit: cover;
  object-position: top center;
  opacity: 0.88;
}

/* Empty lab slot ------------------------------------------------------- */

.store-card-empty {
  align-items: center;
  justify-content: center;
  min-height: 200px;
  padding: clamp(28px, 3vw, 44px);
  border: 1px dashed rgba(255, 255, 255, 0.16);
  background: rgba(18, 23, 26, 0.34);
  box-shadow: none;
  text-align: center;
}

.store-card-empty p {
  max-width: 22ch;
  margin: 0;
  color: rgba(173, 187, 188, 0.66);
  font-size: 15px;
  line-height: 1.5;
}

/* Held card - the kit. Cover render sits beside the copy, dimmed as a whole
   because the product is not purchasable yet. Image is not recoloured. */

.store-card-held {
  flex-direction: row;
  align-items: center;
  gap: clamp(24px, 2.6vw, 40px);
  opacity: 0.6;
}

.store-card-held .store-card-body {
  flex: 1;
  min-width: 0;
}

.store-card-shot-cover {
  flex: none;
  width: clamp(140px, 30%, 230px);
}

.store-card-shot-cover img {
  aspect-ratio: 9 / 8;
  object-position: top center;
  opacity: 1;
}

/* Routing card - a service, not a product, so it takes a different shape:
   full width, copy left, the diagnostic route right. */

.store-card-route {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 3vw, 56px);
  padding: clamp(26px, 2.4vw, 38px);
}

.store-route-copy {
  min-width: 0;
}

.store-route-copy h2 {
  margin-bottom: 12px;
  font-size: clamp(22px, 1.6vw, 27px);
}

.store-route-copy .store-line {
  max-width: 52ch;
}

.store-route-action {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  max-width: 340px;
}

.store-route-cta {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid rgba(54, 208, 194, 0.42);
  border-radius: 9px;
  color: #e6fffb;
  background: rgba(54, 208, 194, 0.08);
  font-size: 14.5px;
  font-weight: 800;
  white-space: nowrap;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.store-route-cta:hover {
  border-color: rgba(54, 208, 194, 0.7);
  background: rgba(54, 208, 194, 0.14);
  color: #fff;
}

/* --------------------------------------------------------------------------
   Pre-footer strip
   -------------------------------------------------------------------------- */

.store-strip {
  width: var(--store-content);
  margin-inline: auto;
  padding-block: clamp(22px, 2.4vw, 32px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.store-strip p {
  margin: 0;
  color: rgba(173, 187, 188, 0.74);
  font-size: 13.5px;
}

.store-strip a {
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  transition: color 180ms ease, border-color 180ms ease;
}

.store-strip a:hover {
  border-bottom-color: var(--store-teal);
  color: #fff;
}

/* --------------------------------------------------------------------------
   Focus visibility - quality floor. Keyboard users get the same teal ring the
   rest of the site uses.
   -------------------------------------------------------------------------- */

.store-main a:focus-visible,
.store-main button:focus-visible {
  outline: 2px solid rgba(54, 208, 194, 0.75);
  outline-offset: 4px;
  border-radius: 6px;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

/* Big monitors: widen the screen column a little so the copy column does not
   open into a gulf. Still inside the 45% cap. This block must stay AFTER the
   base .store-feature rule - both have the same specificity, so source order
   decides. */
@media (min-width: 1900px) {
  .store-feature {
    grid-template-columns: minmax(0, 1fr) minmax(0, 43%);
  }
}

@media (max-width: 1040px) {
  .store-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .store-card-empty {
    min-height: 150px;
  }

  .store-card-system .store-card-body {
    flex-basis: 50%;
  }

  .store-card-system .store-card-shot {
    flex-basis: 50%;
  }
}

@media (max-width: 820px) {
  .store-card-route {
    flex-direction: column;
    align-items: flex-start;
  }

  .store-route-action {
    max-width: none;
  }
}

@media (max-width: 640px) {
  .store-page {
    --store-content: min(100% - 30px, 680px);
  }

  /* The featured card stacks; the screenshot moves below the buy control so
     the name -> price -> buy -> image priority survives the single column. */
  .store-feature {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    align-items: start;
  }

  .store-feature-shot {
    order: 2;
  }

  .store-card-held,
  .store-card-system {
    flex-direction: column;
    align-items: stretch;
  }

  .store-card-held {
    align-items: flex-start;
  }

  .store-card-shot-cover {
    width: min(100%, 220px);
  }

  /* The real Buy control takes the full column on a phone; the disabled
     "Not yet available" states stay small so they do not shout. */
  .store-buy:not(.store-buy-off) {
    width: 100%;
    padding-inline: 16px;
  }
}

@media (max-width: 760px) {
  /* Mirror the sub-page header treatment styles.css gives .about-page,
     .contact-page and .legal-page. .store-page is a new body class, so those
     rules do not reach it; these re-state them for this page only. */
  .store-page .site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    min-height: 68px;
    padding: 12px 18px;
    border-bottom: 1px solid rgba(54, 208, 194, 0.18);
    background:
      linear-gradient(180deg, rgba(5, 6, 7, 0.95), rgba(5, 6, 7, 0.78)),
      rgba(5, 6, 7, 0.9);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(18px);
  }

  .store-page .site-header .site-nav {
    display: none;
  }

  .store-page .brand {
    display: inline-flex;
    align-items: center;
    min-width: 0;
  }

  .store-page .brand img {
    width: 112px;
    max-width: 42vw;
    height: auto;
  }

  .store-page .home-mobile-header-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    margin-left: auto;
    padding-inline: 14px;
    border: 1px solid rgba(54, 208, 194, 0.42);
    border-radius: 8px;
    color: #e6fffb;
    background: rgba(54, 208, 194, 0.1);
    font-size: 11.5px;
    font-weight: 800;
    white-space: nowrap;
  }

  .store-page .store-main {
    padding-top: clamp(28px, 6vw, 48px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .store-alt a,
  .store-more,
  .store-route-cta,
  .store-strip a {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Card hover + keyboard focus - ruling R9. store-fx.js runs the lift as a
   GSAP tween on the element's own transform; these rules carry the other half
   of the affordance (teal edge brighten, soft teal glow) so the two land
   together on hover and on :focus-visible alike.

   transform is deliberately NOT in the transition list - GSAP writes the
   inline transform every frame, and a CSS transition on the same property
   would fight it.
   -------------------------------------------------------------------------- */

.store-feature,
.store-card {
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.store-card-hot {
  border-color: rgba(54, 208, 194, 0.45);
  box-shadow: 0 34px 84px rgba(0, 0, 0, 0.46), 0 0 34px rgba(54, 208, 194, 0.13);
}

/* Cards with no link or button of their own are made tabbable by store-fx.js.
   They are not covered by the .store-main a / button focus rule above, so they
   get the same teal ring here - the glow is the affordance, the ring is the
   accessibility floor. */
.store-card[tabindex="0"]:focus-visible,
.store-feature[tabindex="0"]:focus-visible {
  outline: 2px solid rgba(54, 208, 194, 0.75);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .store-feature,
  .store-card {
    transition: none;
  }
}

/* ==========================================================================
   store-thanks.html - the after-payment confirmation page.
   APPEND-ONLY BLOCK. Nothing above this line is modified by it; every
   selector here is new and prefixed .store-thanks-*, so it cannot reach
   store.html or the eight pages that share styles.css.
   The page reuses the store's own surface language (card edge, teal, muted
   ink) so it reads as part of the store family rather than a new design.
   ========================================================================== */

.store-thanks-main {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 62vh;
}

.store-thanks-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100% - 40px, 640px);
  margin-inline: auto;
  padding: clamp(32px, 3.4vw, 52px) clamp(24px, 3vw, 48px);
  border: 1px solid rgba(54, 208, 194, 0.28);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(54, 208, 194, 0.045), transparent 46%),
    var(--store-surface);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.42);
  text-align: center;
}

/* Confirmation motif: drawn in CSS/SVG, no new image asset. */
.store-thanks-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: clamp(18px, 2vw, 26px);
  color: var(--store-teal);
}

.store-thanks-card h1 {
  margin: 0;
  color: #f7f4ec;
  font-size: clamp(26px, 2.4vw, 38px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.12;
  text-wrap: balance;
}

.store-thanks-lede {
  max-width: 44ch;
  margin: 16px 0 0;
  color: rgba(220, 232, 232, 0.78);
  font-size: clamp(15.5px, 1.1vw, 18px);
  line-height: 1.55;
}

/* Steps are numbered and left-aligned inside the centred card - an instruction
   list has to be read in order, so it does not get centred text. */
.store-thanks-steps {
  width: 100%;
  max-width: 46ch;
  margin: clamp(24px, 2.6vw, 34px) 0 0;
  padding: clamp(20px, 2.2vw, 26px) clamp(18px, 2vw, 26px) clamp(20px, 2.2vw, 26px) clamp(38px, 4vw, 48px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
  background: var(--store-surface-soft);
  color: var(--store-muted);
  font-size: clamp(14.5px, 1vw, 16px);
  line-height: 1.6;
  text-align: left;
}

.store-thanks-steps li + li {
  margin-top: 12px;
}

.store-thanks-steps li::marker {
  color: var(--store-teal);
  font-weight: 800;
}

.store-thanks-steps a,
.store-thanks-help a {
  border-bottom: 1px solid rgba(54, 208, 194, 0.35);
  color: rgba(220, 232, 232, 0.9);
  transition: color 180ms ease, border-color 180ms ease;
}

.store-thanks-steps a:hover,
.store-thanks-help a:hover {
  border-bottom-color: var(--store-teal);
  color: #fff;
}

.store-thanks-help {
  margin: clamp(22px, 2.4vw, 30px) 0 0;
  color: rgba(173, 187, 188, 0.78);
  font-size: 14px;
  line-height: 1.5;
}

.store-thanks-back {
  margin-top: clamp(20px, 2.2vw, 28px);
  color: var(--store-teal);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.01em;
  transition: color 180ms ease;
}

.store-thanks-back:hover {
  color: #7ce7dc;
}

@media (max-width: 640px) {
  .store-thanks-main {
    min-height: 0;
    align-items: flex-start;
  }

  .store-thanks-card {
    width: min(100% - 30px, 680px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .store-thanks-steps a,
  .store-thanks-help a,
  .store-thanks-back {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Live Buy control (2026-08-14). The FLOW Lite checkout is open, so its
   control is now a real <a> to the Stripe payment link. Appended, not edited:
   .store-buy above keeps the reduced-opacity placeholder treatment for any
   control still waiting on a checkout, and .store-buy-off is untouched.
   Two classes, so this beats the base .store-buy opacity/cursor on source
   order AND specificity. The teal focus ring comes from
   .store-main a:focus-visible, which the anchor now matches.
   -------------------------------------------------------------------------- */

.store-buy.store-buy-live {
  opacity: 1;
  cursor: pointer;
  text-decoration: none;
  transition: filter 180ms ease, box-shadow 180ms ease;
}

.store-buy.store-buy-live:hover {
  filter: brightness(1.08);
  box-shadow: 0 0 26px rgba(54, 208, 194, 0.24);
}

@media (prefers-reduced-motion: reduce) {
  .store-buy.store-buy-live {
    transition: none;
  }
}