/*
 * Waffle App Store — premium Neumorphic component layer
 *
 * Inspired by the component language of Neumorphism UI Pro while
 * remaining original WBS code.
 *
 * WBS standing rule:
 *   maximum radius = 4px
 *
 * Components represented here:
 *   raised surfaces
 *   inset surfaces
 *   product/app cards
 *   icon boxes
 *   segmented nav/tabs
 *   search/form control
 *   filter buttons
 *   semantic badges
 *   accordions/disclosures
 *   modal
 *   toasts
 *   progress indicator
 *   empty-state widget
 *   accessible focus
 */

.app-store.app-store--neumorphic {
  --as-bg: #e7ebf0;
  --as-bg-strong: #edf1f5;
  --as-text: #31344b;
  --as-muted: #667085;
  --as-line: rgba(99, 112, 132, .18);

  --as-light:
    rgba(255, 255, 255, .96);

  --as-dark:
    rgba(163, 177, 198, .50);

  --as-raised:
    7px 7px 15px var(--as-dark),
    -7px -7px 15px var(--as-light);

  --as-raised-soft:
    4px 4px 9px rgba(163, 177, 198, .38),
    -4px -4px 9px rgba(255, 255, 255, .86);

  --as-inset:
    inset 3px 3px 7px rgba(163, 177, 198, .45),
    inset -3px -3px 7px rgba(255, 255, 255, .90);

  --as-blue: #2453b8;
  --as-green: #18634b;
  --as-amber: #9b6c00;
  --as-red: #a91e2c;

  color:
    var(--as-text);

  display:
    grid;

  gap:
    20px;

  padding:
    8px 4px 22px;
}


/* ---------------------------------------------------------
   HERO / JUMBOTRON / STATUS WIDGETS
   --------------------------------------------------------- */

.app-store--neumorphic
.app-store-hero {
  position:
    relative;

  overflow:
    hidden;

  display:
    grid;

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

  align-items:
    center;

  gap:
    24px;

  padding:
    26px;

  border:
    1px solid var(--as-line);

  border-radius:
    4px;

  background:
    linear-gradient(
      145deg,
      rgba(245, 248, 251, .97),
      rgba(225, 231, 238, .98)
    );

  box-shadow:
    var(--as-raised);
}


.app-store--neumorphic
.app-store-hero::after {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;

  background:
    linear-gradient(
      115deg,
      rgba(255,255,255,.32),
      transparent 44%
    );
}


.app-store--neumorphic
.app-store-hero > * {
  position:
    relative;

  z-index:
    1;
}


.app-store--neumorphic
.app-store-kicker {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    8px;

  margin-bottom:
    5px;

  font-size:
    .70rem;

  font-weight:
    800;

  letter-spacing:
    .17em;

  color:
    #59627a;
}


.app-store--neumorphic
.app-store-kicker::before {
  content:
    "W";

  display:
    grid;

  place-items:
    center;

  width:
    25px;

  height:
    25px;

  border:
    1px solid var(--as-line);

  border-radius:
    4px;

  box-shadow:
    var(--as-raised-soft);

  font-size:
    .75rem;

  letter-spacing:
    0;

  color:
    var(--as-blue);
}


.app-store--neumorphic
.app-store-hero h2 {
  margin:
    5px 0 7px;

  font-size:
    clamp(1.7rem, 3.1vw, 2.75rem);

  letter-spacing:
    -.035em;
}


.app-store--neumorphic
.app-store-hero p {
  max-width:
    720px;

  margin:
    0;

  color:
    var(--as-muted);

  line-height:
    1.62;
}


.app-store-hero-note {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    8px;

  margin-top:
    15px;
}


.app-store-hero-note span {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;

  min-height:
    28px;

  padding:
    4px 9px;

  border:
    1px solid var(--as-line);

  border-radius:
    4px;

  background:
    rgba(236, 240, 245, .82);

  box-shadow:
    var(--as-raised-soft);

  color:
    #4e5870;

  font-size:
    .72rem;

  font-weight:
    700;
}


.app-store-hero-note span::before {
  content:
    "✓";

  color:
    var(--as-green);
}


.app-store--neumorphic
.app-store-stats {
  display:
    grid;

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

  gap:
    10px;
}


.app-store--neumorphic
.app-store-stats div {
  min-width:
    102px;

  min-height:
    82px;

  display:
    grid;

  place-items:
    center;

  align-content:
    center;

  padding:
    11px;

  border:
    1px solid var(--as-line);

  border-radius:
    4px;

  background:
    rgba(229, 234, 241, .86);

  box-shadow:
    var(--as-inset);
}


.app-store--neumorphic
.app-store-stats strong {
  font-size:
    1.6rem;

  line-height:
    1.1;
}


.app-store--neumorphic
.app-store-stats span {
  margin-top:
    4px;

  font-size:
    .68rem;

  font-weight:
    700;

  color:
    var(--as-muted);

  text-transform:
    uppercase;

  letter-spacing:
    .08em;
}


/* ---------------------------------------------------------
   TOOLBAR / NAV / SEARCH / FILTERS
   --------------------------------------------------------- */

.app-store--neumorphic
.app-store-toolbar {
  display:
    grid;

  gap:
    13px;

  padding:
    15px;

  border:
    1px solid var(--as-line);

  border-radius:
    4px;

  background:
    rgba(232, 237, 242, .95);

  box-shadow:
    var(--as-raised-soft);
}


.app-store--neumorphic
.app-store-toolbar
.app-store-filters:first-child {
  width:
    fit-content;

  padding:
    4px;

  border:
    1px solid var(--as-line);

  border-radius:
    4px;

  background:
    rgba(227, 232, 238, .92);

  box-shadow:
    var(--as-inset);
}


.app-store--neumorphic
.app-store-search {
  position:
    relative;

  display:
    grid;

  grid-template-columns:
    auto 1fr;

  align-items:
    center;

  gap:
    10px;

  min-height:
    48px;

  padding:
    0 14px;

  margin:
    0;

  border:
    1px solid var(--as-line);

  border-radius:
    4px;

  background:
    rgba(227, 232, 238, .92);

  box-shadow:
    var(--as-inset);
}


.app-store--neumorphic
.app-store-search > span {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    7px;

  margin:
    0;

  color:
    #5b6579;

  font-size:
    .72rem;

  font-weight:
    800;

  text-transform:
    uppercase;

  letter-spacing:
    .08em;
}


.app-store--neumorphic
.app-store-search > span::before {
  content:
    "⌕";

  font-size:
    1.05rem;

  color:
    var(--as-blue);
}


.app-store--neumorphic
.app-store-search input {
  width:
    100%;

  min-height:
    44px;

  padding:
    0;

  border:
    0;

  outline:
    0;

  background:
    transparent;

  color:
    var(--as-text);

  font-size:
    .95rem;

  box-shadow:
    none;
}


.app-store--neumorphic
.app-store-search input::placeholder {
  color:
    #858da0;
}


.app-store--neumorphic
.app-store-filters {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    7px;
}


.app-store--neumorphic
.app-store-filter {
  min-height:
    36px;

  padding:
    6px 11px;

  border:
    1px solid var(--as-line);

  border-radius:
    4px;

  background:
    linear-gradient(
      145deg,
      #edf1f5,
      #dfe5eb
    );

  color:
    #49546a;

  box-shadow:
    var(--as-raised-soft);

  cursor:
    pointer;

  font-weight:
    700;

  transition:
    transform .16s ease,
    box-shadow .16s ease,
    color .16s ease;
}


.app-store--neumorphic
.app-store-filter:hover {
  transform:
    translateY(-1px);

  color:
    var(--as-blue);
}


.app-store--neumorphic
.app-store-filter.active {
  color:
    var(--as-blue);

  background:
    rgba(225, 231, 238, .95);

  box-shadow:
    var(--as-inset);

  transform:
    translateY(0);
}


/* ---------------------------------------------------------
   SECTION HEADING
   --------------------------------------------------------- */

.app-store--neumorphic
.app-store-section {
  display:
    grid;

  gap:
    15px;
}


.app-store--neumorphic
.app-store-section-heading {
  display:
    flex;

  justify-content:
    space-between;

  align-items:
    end;

  gap:
    18px;

  padding:
    2px 4px;
}


.app-store--neumorphic
.app-store-section-heading span {
  font-size:
    .66rem;

  font-weight:
    800;

  letter-spacing:
    .15em;

  color:
    #6d7588;
}


.app-store--neumorphic
.app-store-section-heading h3 {
  margin:
    3px 0 0;

  font-size:
    1.30rem;
}


.app-store--neumorphic
.app-store-section-heading p {
  max-width:
    550px;

  margin:
    0;

  color:
    var(--as-muted);

  font-size:
    .82rem;

  line-height:
    1.5;

  text-align:
    right;
}


/* ---------------------------------------------------------
   PRODUCT / APP CARDS
   --------------------------------------------------------- */

.app-store--neumorphic
.app-store-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      auto-fill,
      minmax(275px, 1fr)
    );

  gap:
    18px;
}


.app-store--neumorphic
.app-store-card {
  position:
    relative;

  display:
    flex;

  flex-direction:
    column;

  gap:
    13px;

  min-height:
    270px;

  padding:
    18px;

  border:
    1px solid var(--as-line);

  border-radius:
    4px;

  background:
    linear-gradient(
      145deg,
      rgba(241, 245, 248, .98),
      rgba(224, 230, 237, .98)
    );

  box-shadow:
    var(--as-raised);

  overflow:
    hidden;

  transition:
    transform .18s ease,
    box-shadow .18s ease;
}


.app-store--neumorphic
.app-store-card:hover {
  transform:
    translateY(-2px);

  box-shadow:
    9px 9px 20px rgba(163,177,198,.55),
    -9px -9px 20px rgba(255,255,255,.96);
}


.app-store--neumorphic
.app-store-card[hidden] {
  display:
    none;
}


.app-store--neumorphic
.app-store-card::before {
  content:
    "";

  position:
    absolute;

  inset:
    0 auto auto 0;

  width:
    100%;

  height:
    3px;

  background:
    var(--as-blue);

  opacity:
    .20;
}


.app-store--neumorphic
.app-store-card[data-state="installed"]::before,
.app-store--neumorphic
.app-store-card[data-state="included"]::before {
  background:
    var(--as-green);

  opacity:
    .65;
}


.app-store--neumorphic
.app-store-card[data-state="licence-required"]::before {
  background:
    var(--as-amber);

  opacity:
    .70;
}


.app-store--neumorphic
.app-store-card[data-state="coming-soon"]::before {
  background:
    #7b8191;

  opacity:
    .55;
}


.app-store--neumorphic
.app-store-card-top {
  display:
    flex;

  gap:
    13px;

  align-items:
    flex-start;
}


.app-store--neumorphic
.app-store-icon {
  width:
    56px;

  height:
    56px;

  flex:
    0 0 56px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid var(--as-line);

  border-radius:
    4px;

  background:
    rgba(229, 234, 241, .90);

  box-shadow:
    var(--as-inset);

  color:
    var(--as-blue);

  font-size:
    1.55rem;

  font-weight:
    800;
}


.app-store--neumorphic
.app-store-title-block {
  min-width:
    0;

  flex:
    1;
}


.app-store--neumorphic
.app-store-title-block h3 {
  margin:
    7px 0 3px;

  font-size:
    1.03rem;

  letter-spacing:
    -.012em;
}


.app-store--neumorphic
.app-store-publisher {
  color:
    var(--as-muted);

  font-size:
    .73rem;
}


.app-store--neumorphic
.app-store-card-badges {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    5px;
}


.app-store--neumorphic
.app-store-badge {
  display:
    inline-flex;

  align-items:
    center;

  min-height:
    23px;

  padding:
    3px 7px;

  border:
    1px solid rgba(90, 102, 120, .17);

  border-radius:
    4px;

  background:
    rgba(232, 237, 242, .85);

  color:
    #596276;

  box-shadow:
    var(--as-raised-soft);

  font-size:
    .62rem;

  font-weight:
    800;

  letter-spacing:
    .04em;

  text-transform:
    uppercase;
}


.app-store--neumorphic
.app-store-badge.state-included,
.app-store--neumorphic
.app-store-badge.state-installed {
  color:
    var(--as-green);
}


.app-store--neumorphic
.app-store-badge.state-licence-required {
  color:
    var(--as-amber);
}


.app-store--neumorphic
.app-store-badge.state-coming-soon {
  color:
    #686f7f;
}


.app-store--neumorphic
.app-store-summary {
  margin:
    0;

  color:
    #596276;

  font-size:
    .82rem;

  line-height:
    1.58;
}


/* ---------------------------------------------------------
   ACCORDION / DISCLOSURE
   --------------------------------------------------------- */

.app-store-disclosure {
  border:
    1px solid var(--as-line);

  border-radius:
    4px;

  background:
    rgba(229, 234, 240, .80);

  box-shadow:
    var(--as-inset);
}


.app-store-disclosure > summary {
  list-style:
    none;

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;

  min-height:
    40px;

  padding:
    8px 11px;

  cursor:
    pointer;

  color:
    #4f596d;

  font-size:
    .73rem;

  font-weight:
    800;
}


.app-store-disclosure > summary::-webkit-details-marker {
  display:
    none;
}


.app-store-disclosure > summary::after {
  content:
    "+";

  width:
    22px;

  height:
    22px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    4px;

  box-shadow:
    var(--as-raised-soft);

  color:
    var(--as-blue);
}


.app-store-disclosure[open] > summary::after {
  content:
    "−";

  box-shadow:
    var(--as-inset);
}


.app-store-disclosure-panel {
  display:
    grid;

  gap:
    10px;

  padding:
    0 11px 12px;
}


.app-store--neumorphic
.app-store-features {
  display:
    grid;

  gap:
    6px;

  margin:
    0;

  padding:
    2px 0 0 18px;

  color:
    #596276;

  font-size:
    .74rem;

  line-height:
    1.45;
}


.app-store--neumorphic
.app-store-licence {
  display:
    grid;

  gap:
    3px;

  padding:
    9px;

  border:
    1px solid rgba(90,102,120,.12);

  border-radius:
    4px;

  background:
    rgba(239, 242, 246, .72);

  box-shadow:
    var(--as-raised-soft);
}


.app-store--neumorphic
.app-store-licence strong {
  font-size:
    .69rem;
}


.app-store--neumorphic
.app-store-licence span {
  color:
    var(--as-muted);

  font-size:
    .70rem;

  line-height:
    1.42;
}


/* ---------------------------------------------------------
   CARD FOOTER / BUTTONS
   --------------------------------------------------------- */

.app-store--neumorphic
.app-store-card-footer {
  margin-top:
    auto;

  display:
    grid;

  grid-template-columns:
    1fr auto auto;

  align-items:
    center;

  gap:
    8px;

  padding-top:
    3px;
}


.app-store--neumorphic
.app-store-category {
  color:
    #737b8e;

  font-size:
    .69rem;

  font-weight:
    700;
}


.app-store--neumorphic
.app-store-action,
.app-store-details-action {
  min-height:
    36px;

  padding:
    6px 11px;

  border:
    1px solid var(--as-line);

  border-radius:
    4px;

  background:
    linear-gradient(
      145deg,
      #edf1f5,
      #dfe5eb
    );

  color:
    #4c566b;

  box-shadow:
    var(--as-raised-soft);

  font-weight:
    800;

  cursor:
    pointer;

  transition:
    transform .15s ease,
    box-shadow .15s ease;
}


.app-store--neumorphic
.app-store-action:not(:disabled):hover,
.app-store-details-action:hover {
  transform:
    translateY(-1px);

  color:
    var(--as-blue);
}


.app-store--neumorphic
.app-store-action.primary {
  color:
    #ecf2ff;

  background:
    linear-gradient(
      145deg,
      #315ec2,
      #214aa8
    );

  border-color:
    rgba(29, 69, 160, .45);

  box-shadow:
    4px 4px 9px rgba(118,132,156,.48),
    -4px -4px 9px rgba(255,255,255,.72);
}


.app-store--neumorphic
.app-store-action:disabled {
  cursor:
    default;

  opacity:
    .63;

  box-shadow:
    var(--as-inset);
}


/* ---------------------------------------------------------
   MODAL
   --------------------------------------------------------- */

.app-store-modal {
  position:
    fixed;

  inset:
    0;

  z-index:
    10050;

  display:
    none;

  align-items:
    center;

  justify-content:
    center;

  padding:
    20px;

  background:
    rgba(32, 39, 52, .38);

  backdrop-filter:
    blur(8px);
}


.app-store-modal.open {
  display:
    flex;
}


.app-store-modal-dialog {
  width:
    min(660px, 100%);

  max-height:
    min(760px, calc(100vh - 40px));

  overflow:
    auto;

  border:
    1px solid var(--as-line, rgba(99,112,132,.18));

  border-radius:
    4px;

  background:
    #e8edf2;

  box-shadow:
    14px 14px 32px rgba(30,40,56,.30),
    -8px -8px 24px rgba(255,255,255,.92);
}


.app-store-modal-header,
.app-store-modal-body {
  padding:
    18px;
}


.app-store-modal-header {
  position:
    sticky;

  top:
    0;

  z-index:
    2;

  display:
    flex;

  justify-content:
    space-between;

  gap:
    14px;

  align-items:
    center;

  border-bottom:
    1px solid rgba(99,112,132,.14);

  background:
    rgba(232,237,242,.97);
}


.app-store-modal-header h3 {
  margin:
    0;

  font-size:
    1.15rem;
}


.app-store-modal-close {
  width:
    36px;

  height:
    36px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid rgba(99,112,132,.16);

  border-radius:
    4px;

  background:
    #e8edf2;

  box-shadow:
    4px 4px 8px rgba(163,177,198,.45),
    -4px -4px 8px rgba(255,255,255,.90);

  cursor:
    pointer;
}


.app-store-modal-body {
  display:
    grid;

  gap:
    14px;
}


.app-store-modal-meta {
  display:
    grid;

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

  gap:
    9px;
}


.app-store-modal-meta div {
  padding:
    10px;

  border:
    1px solid rgba(99,112,132,.14);

  border-radius:
    4px;

  background:
    rgba(226,232,238,.92);

  box-shadow:
    inset 2px 2px 5px rgba(163,177,198,.42),
    inset -2px -2px 5px rgba(255,255,255,.88);
}


.app-store-modal-meta span {
  display:
    block;

  margin-bottom:
    3px;

  color:
    #727b8c;

  font-size:
    .65rem;

  font-weight:
    800;

  text-transform:
    uppercase;

  letter-spacing:
    .07em;
}


.app-store-modal-list {
  margin:
    0;

  padding-left:
    18px;

  color:
    #586176;

  line-height:
    1.55;
}


/* ---------------------------------------------------------
   TOAST / PROGRESS
   --------------------------------------------------------- */

.app-store-toast-region {
  position:
    fixed;

  top:
    18px;

  right:
    18px;

  z-index:
    10100;

  display:
    grid;

  gap:
    8px;

  width:
    min(360px, calc(100vw - 36px));

  pointer-events:
    none;
}


.app-store-toast {
  padding:
    12px 14px;

  border:
    1px solid rgba(99,112,132,.18);

  border-radius:
    4px;

  background:
    #e8edf2;

  color:
    #414b60;

  box-shadow:
    7px 7px 15px rgba(163,177,198,.55),
    -7px -7px 15px rgba(255,255,255,.95);

  font-size:
    .82rem;

  line-height:
    1.45;

  pointer-events:
    auto;
}


.app-store-toast.success {
  border-left:
    3px solid #18634b;
}


.app-store-toast.error {
  border-left:
    3px solid #a91e2c;
}


.app-store-progress {
  position:
    fixed;

  top:
    0;

  left:
    0;

  right:
    0;

  z-index:
    10150;

  height:
    3px;

  opacity:
    0;

  pointer-events:
    none;

  background:
    transparent;

  transition:
    opacity .15s ease;
}


.app-store-progress.active {
  opacity:
    1;
}


.app-store-progress::before {
  content:
    "";

  display:
    block;

  width:
    38%;

  height:
    100%;

  background:
    #2453b8;

  animation:
    app-store-progress-slide 1.05s ease-in-out infinite;
}


@keyframes app-store-progress-slide {
  0% {
    transform:
      translateX(-105%);
  }

  100% {
    transform:
      translateX(365%);
  }
}


/* ---------------------------------------------------------
   EMPTY STATE / ICON BOX
   --------------------------------------------------------- */

.app-store-empty {
  grid-column:
    1 / -1;

  display:
    grid;

  place-items:
    center;

  min-height:
    220px;

  padding:
    30px;

  border:
    1px solid var(--as-line);

  border-radius:
    4px;

  background:
    rgba(230,235,241,.85);

  box-shadow:
    var(--as-inset);

  text-align:
    center;
}


.app-store-empty[hidden] {
  display:
    none;
}


.app-store-empty-icon {
  width:
    54px;

  height:
    54px;

  display:
    grid;

  place-items:
    center;

  margin-bottom:
    12px;

  border:
    1px solid var(--as-line);

  border-radius:
    4px;

  box-shadow:
    var(--as-raised-soft);

  color:
    var(--as-blue);

  font-size:
    1.4rem;
}


.app-store-empty strong {
  display:
    block;

  margin-bottom:
    5px;
}


.app-store-empty span {
  color:
    var(--as-muted);

  font-size:
    .80rem;
}


/* ---------------------------------------------------------
   FOCUS / ACCESSIBILITY
   --------------------------------------------------------- */

.app-store--neumorphic
button:focus-visible,
.app-store--neumorphic
input:focus-visible,
.app-store-modal
button:focus-visible,
.app-store-disclosure
summary:focus-visible {
  outline:
    3px solid rgba(36, 83, 184, .30);

  outline-offset:
    2px;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 850px) {

  .app-store--neumorphic
  .app-store-hero {
    grid-template-columns:
      1fr;
  }


  .app-store--neumorphic
  .app-store-stats {
    grid-template-columns:
      repeat(4, minmax(0, 1fr));
  }


  .app-store--neumorphic
  .app-store-stats div {
    min-width:
      0;
  }
}


@media (max-width: 680px) {

  .app-store.app-store--neumorphic {
    gap:
      14px;
  }


  .app-store--neumorphic
  .app-store-hero {
    padding:
      18px;
  }


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


  .app-store--neumorphic
  .app-store-section-heading {
    display:
      grid;

    align-items:
      start;
  }


  .app-store--neumorphic
  .app-store-section-heading p {
    text-align:
      left;
  }


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


  .app-store--neumorphic
  .app-store-card-footer {
    grid-template-columns:
      1fr 1fr;
  }


  .app-store--neumorphic
  .app-store-category {
    grid-column:
      1 / -1;
  }


  .app-store-modal-meta {
    grid-template-columns:
      1fr;
  }
}


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

  .app-store--neumorphic *,
  .app-store-modal *,
  .app-store-progress::before {
    animation:
      none !important;

    transition:
      none !important;

    scroll-behavior:
      auto !important;
  }
}


/* ---------------------------------------------------------
   GEL / CONNECTED-TV QUALITY PASS

   This layer deliberately sits after the existing component implementation.
   It preserves its raised/inset vocabulary, but gives every App Store surface
   one typographic, spacing and elevation contract.
   --------------------------------------------------------- */

.app-store.app-store--neumorphic {
  --gel-unit: 8px;
  --gel-unit-alt: 12px;
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --page-gutter: clamp(16px, 3vw, 32px);
  --grid-gap: var(--space-lg);
  --section-gap: var(--space-xl);
  --card-padding: var(--space-lg);
  --control-gap: var(--space-sm);
  --control-height: 44px;
  --control-height-compact: 40px;
  --app-icon-size: 56px;
  --type-display: clamp(2rem, 2.25vw + 1rem, 2.5rem);
  --type-page-title: clamp(1.875rem, 1.7vw + 1rem, 2.25rem);
  --type-section-title: clamp(1.5rem, 1vw + 1.1rem, 1.75rem);
  --type-card-title: 1.25rem;
  --type-body: 1rem;
  --type-support: .9375rem;
  --type-meta: .875rem;
  --type-label: .8125rem;
  --line-display: 1.15;
  --line-heading: 1.2;
  --line-card: 1.25;
  --line-body: 1.55;
  --line-meta: 1.4;
  --neu-shadow-low: 4px 4px 9px rgba(163, 177, 198, .38), -4px -4px 9px rgba(255, 255, 255, .86);
  --neu-shadow-standard: 7px 7px 15px rgba(163, 177, 198, .50), -7px -7px 15px rgba(255, 255, 255, .96);
  --neu-shadow-high: 14px 14px 32px rgba(30, 40, 56, .30), -8px -8px 24px rgba(255, 255, 255, .92);
  --neu-shadow-inset: inset 3px 3px 7px rgba(163, 177, 198, .45), inset -3px -3px 7px rgba(255, 255, 255, .90);
  --neu-shadow-focus: 0 0 0 3px rgba(36, 83, 184, .78), 7px 7px 15px rgba(163, 177, 198, .50), -7px -7px 15px rgba(255, 255, 255, .96);
  width: min(100%, 1600px);
  margin-inline: auto;
  gap: var(--section-gap);
  padding: var(--space-xs) var(--page-gutter) var(--space-2xl);
  font-size: var(--type-body);
}

.app-store--neumorphic .app-store-hero,
.app-store--neumorphic .app-store-toolbar,
.app-store--neumorphic .app-store-card {
  border-radius: 4px;
}

.app-store--neumorphic .app-store-hero {
  gap: var(--space-xl);
  padding: var(--space-xl);
  box-shadow: var(--neu-shadow-standard);
}

.app-store--neumorphic .app-store-kicker,
.app-store--neumorphic .app-store-section-heading span {
  font-size: var(--type-label);
  line-height: var(--line-meta);
  font-weight: 700;
}

.app-store--neumorphic .app-store-hero h2 {
  margin: var(--space-xs) 0 var(--space-sm);
  font-size: var(--type-page-title);
  line-height: var(--line-display);
  font-weight: 700;
  letter-spacing: -.025em;
}

/* The WBS window title is the document H1. Keep it above this page's hero
 * H2 without altering the shared shell on other routes. */
body:has(.app-store--neumorphic) #pageTitle {
  font-size: clamp(2rem, 1.6vw + 1.5rem, 2.375rem);
  font-weight: var(--weight-strong);
  line-height: var(--line-display);
  letter-spacing: -0.012em;
}

.app-store--neumorphic .app-store-hero p {
  max-width: 65ch;
  font-size: var(--type-body);
  line-height: var(--line-body);
  font-weight: 400;
}

.app-store--neumorphic .app-store-hero-note {
  gap: var(--space-xs);
  margin-top: var(--space-md);
}

.app-store--neumorphic .app-store-hero-note span {
  min-height: var(--control-height-compact);
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--type-meta);
  line-height: var(--line-meta);
  font-weight: 600;
  box-shadow: var(--neu-shadow-low);
}

.app-store--neumorphic .app-store-stats {
  gap: var(--space-sm);
}

.app-store--neumorphic .app-store-stats div {
  min-width: 112px;
  min-height: 96px;
  padding: var(--space-sm);
  box-shadow: var(--neu-shadow-inset);
}

.app-store--neumorphic .app-store-stats strong {
  font-size: 1.75rem;
  font-weight: 700;
}

.app-store--neumorphic .app-store-stats span {
  font-size: var(--type-label);
  line-height: var(--line-meta);
  font-weight: 700;
}

.app-store--neumorphic .app-store-toolbar {
  gap: var(--space-md);
  padding: var(--space-md);
  box-shadow: var(--neu-shadow-low);
}

.app-store--neumorphic .app-store-search {
  min-height: var(--control-height);
  gap: var(--space-sm);
  padding-inline: var(--space-md);
  box-shadow: var(--neu-shadow-inset);
}

.app-store--neumorphic .app-store-search > span,
.app-store--neumorphic .app-store-search input,
.app-store--neumorphic .app-store-filter,
.app-store--neumorphic .app-store-action,
.app-store--neumorphic .app-store-details-action {
  font-size: var(--type-support);
}

.app-store--neumorphic .app-store-search > span {
  font-weight: 700;
}

.app-store--neumorphic .app-store-search input {
  min-height: var(--control-height);
  line-height: var(--line-body);
}

.app-store--neumorphic .app-store-filters {
  gap: var(--space-xs);
}

.app-store--neumorphic .app-store-filter {
  min-height: var(--control-height);
  padding: var(--space-xs) var(--space-md);
  font-weight: 600;
  box-shadow: var(--neu-shadow-low);
}

.app-store--neumorphic .app-store-filter.active {
  box-shadow: var(--neu-shadow-inset);
}

.app-store--neumorphic .app-store-section {
  gap: var(--space-lg);
}

.app-store--neumorphic .app-store-section-heading {
  align-items: end;
  gap: var(--space-xl);
  padding: 0 var(--space-2xs);
}

.app-store--neumorphic .app-store-section-heading h3 {
  margin: var(--space-2xs) 0 0;
  font-size: var(--type-section-title);
  line-height: var(--line-heading);
  font-weight: 700;
  letter-spacing: -.018em;
}

.app-store--neumorphic .app-store-section-heading p {
  max-width: 58ch;
  font-size: var(--type-support);
  line-height: var(--line-body);
}

.app-store--neumorphic .app-store-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--grid-gap);
}

.app-store--neumorphic .app-store-card {
  gap: var(--space-md);
  min-height: 320px;
  padding: var(--card-padding);
  box-shadow: var(--neu-shadow-standard);
}

.app-store--neumorphic .app-store-card:hover {
  box-shadow: var(--neu-shadow-standard);
}

.app-store--neumorphic .app-store-card-top {
  gap: var(--space-md);
}

.app-store--neumorphic .app-store-icon {
  width: var(--app-icon-size);
  height: var(--app-icon-size);
  flex-basis: var(--app-icon-size);
  font-size: 1.5rem;
  box-shadow: var(--neu-shadow-inset);
}

.app-store--neumorphic .app-store-title-block h3 {
  margin: var(--space-xs) 0 var(--space-2xs);
  font-size: var(--type-card-title);
  line-height: var(--line-card);
  font-weight: 600;
  letter-spacing: -.01em;
}

.app-store--neumorphic .app-store-publisher,
.app-store--neumorphic .app-store-category {
  font-size: var(--type-meta);
  line-height: var(--line-meta);
  font-weight: 500;
}

.app-store--neumorphic .app-store-card-badges {
  gap: var(--space-xs);
}

.app-store--neumorphic .app-store-badge {
  min-height: 24px;
  padding: var(--space-2xs) var(--space-xs);
  font-size: var(--type-label);
  line-height: var(--line-meta);
  font-weight: 700;
  box-shadow: var(--neu-shadow-low);
}

.app-store--neumorphic .app-store-summary {
  max-width: 62ch;
  font-size: var(--type-body);
  line-height: var(--line-body);
  font-weight: 400;
}

.app-store--neumorphic .app-store-disclosure > summary {
  min-height: var(--control-height);
  padding: var(--space-xs) var(--space-md);
  font-size: var(--type-meta);
  line-height: var(--line-meta);
  font-weight: 600;
}

.app-store--neumorphic .app-store-features,
.app-store--neumorphic .app-store-licence span {
  font-size: var(--type-support);
  line-height: var(--line-body);
}

.app-store--neumorphic .app-store-licence {
  gap: var(--space-2xs);
  padding: var(--space-sm);
  box-shadow: var(--neu-shadow-low);
}

.app-store--neumorphic .app-store-licence strong {
  font-size: var(--type-meta);
  line-height: var(--line-meta);
}

.app-store--neumorphic .app-store-card-footer {
  gap: var(--space-sm);
  padding-top: var(--space-xs);
}

.app-store--neumorphic .app-store-action,
.app-store--neumorphic .app-store-details-action {
  min-height: var(--control-height);
  padding: var(--space-xs) var(--space-md);
  font-weight: 600;
  box-shadow: var(--neu-shadow-low);
}

.app-store--neumorphic .app-store-action.primary {
  font-weight: 700;
}

.app-store--neumorphic .app-store-action:disabled {
  box-shadow: var(--neu-shadow-inset);
}

.app-store--neumorphic button:focus-visible,
.app-store--neumorphic input:focus-visible,
.app-store-modal button:focus-visible,
.app-store-disclosure summary:focus-visible {
  outline: 3px solid #2453b8;
  outline-offset: 3px;
  box-shadow: var(--neu-shadow-focus);
}

@media (min-width: 1600px) {
  .app-store.app-store--neumorphic {
    --page-gutter: clamp(40px, 5vw, 96px);
    --section-gap: 48px;
    --grid-gap: 32px;
    --card-padding: 32px;
    --control-height: 56px;
    --control-height-compact: 48px;
    --app-icon-size: 72px;
    --type-page-title: clamp(2.5rem, 2.1vw + 1rem, 3.5rem);
    --type-section-title: clamp(2rem, 1vw + 1.5rem, 2.5rem);
    --type-card-title: 1.5rem;
    --type-body: 1.5rem;
    --type-support: 1.125rem;
    --type-meta: 1rem;
    --type-label: .9375rem;
  }

  body:has(.app-store--neumorphic) #pageTitle {
    font-size: clamp(3.25rem, 3.4vw, 4.25rem);
  }

  .app-store.app-store--neumorphic {
    width: min(90vw, 2200px);
  }

  .app-store--neumorphic .app-store-hero,
  .app-store--neumorphic .app-store-toolbar {
    padding: 40px;
  }

  .app-store--neumorphic .app-store-grid {
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  }

  .app-store--neumorphic .app-store-card {
    min-height: 430px;
  }
}

@media (max-width: 1008px) {
  .app-store.app-store--neumorphic {
    --page-gutter: 16px;
  }

  .app-store--neumorphic .app-store-hero {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .app-store.app-store--neumorphic {
    --section-gap: 24px;
    --card-padding: 16px;
    --grid-gap: 16px;
    padding-inline: 0;
  }

  .app-store--neumorphic .app-store-hero,
  .app-store--neumorphic .app-store-toolbar {
    padding: 16px;
  }

  .app-store--neumorphic .app-store-hero-note,
  .app-store--neumorphic .app-store-stats,
  .app-store--neumorphic .app-store-card-footer {
    width: 100%;
  }

  .app-store--neumorphic .app-store-card-footer {
    grid-template-columns: 1fr 1fr;
  }

  .app-store--neumorphic .app-store-category {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-store--neumorphic *,
  .app-store-modal *,
  .app-store-progress::before {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}