@charset "utf-8";
/*
Appyn — Modern UI Layer
A redesign pass on top of the original Appyn stylesheet.
Loaded after style.css / style.min.css so these rules win on equal specificity.
Everything below respects the theme's existing PHP class hooks —
no template markup changes required for this file to take effect.
-------------------------------------------------------------------
INDEX
1. Design tokens
2. Base + typography
3. Layout shell / container
4. Header & navigation
5. Mobile menu
6. Hero / subheader
7. Search
8. Category quick-links rail
9. Sections & section headers
10. App cards (grid + carousel)
11. Ratings & badges
12. Content rail (mixed apps + blog)
13. Blog cards
14. Buttons & misc UI
15. Sidebar & widgets
16. Footer
17. Single app page polish
18. Scrollbar, focus, motion
19. Responsive
------------------------------------------------------------------- */

/* ===== 1. DESIGN TOKENS =====
   Light is the default cascade (matches the theme's own default render).
   body.theme-dark (server-rendered by is_dark_theme_active()) swaps the palette —
   same mechanism the original theme already uses, so there's no flash of
   wrong theme and no extra JS is required for color correctness. */
:root{
  --pxm-accent: #1bbc9b;
  --pxm-accent-rgb: 27,188,155;
  --pxm-accent-2: #e69100;
  --pxm-accent-2-rgb: 230,145,0;
  --pxm-bg: #f3f4f8;
  --pxm-bg-soft: #ffffff;
  --pxm-surface: #ffffff;
  --pxm-surface-2: #f6f7fb;
  --pxm-border: rgba(15,19,32,.08);
  --pxm-border-strong: rgba(15,19,32,.14);
  --pxm-text: #181c2a;
  --pxm-text-dim: #5b6079;
  --pxm-text-faint: #8a8fa3;
  --pxm-radius-sm: 10px;
  --pxm-radius: 16px;
  --pxm-radius-lg: 22px;
  --pxm-shadow: 0 1px 2px rgba(20,22,40,.05), 0 8px 24px -10px rgba(20,22,40,.12);
  --pxm-shadow-lift: 0 16px 36px -12px rgba(20,22,40,.18);
  --pxm-maxw: 1240px;
  --pxm-header-h: 68px;
  --pxm-font: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

body.theme-dark{
  --pxm-accent-2: #ffb020;
  --pxm-accent-2-rgb: 255,176,32;
  --pxm-bg: #0f1320;
  --pxm-bg-soft: #151a2b;
  --pxm-surface: #1a2032;
  --pxm-surface-2: #212840;
  --pxm-border: rgba(255,255,255,.08);
  --pxm-border-strong: rgba(255,255,255,.14);
  --pxm-text: #eef0f7;
  --pxm-text-dim: #a6acc4;
  --pxm-text-faint: #717893;
  --pxm-shadow: 0 1px 2px rgba(0,0,0,.2), 0 8px 24px -8px rgba(0,0,0,.45);
  --pxm-shadow-lift: 0 12px 32px -8px rgba(0,0,0,.55);
}

/* ===== 2. BASE + TYPOGRAPHY ===== */
body{
  font-family: var(--pxm-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrapper-inside, body{
  background: var(--pxm-bg) !important;
  color: var(--pxm-text) !important;
}

.section .title-section,
h1.main-box-title,
.app-p .box h1.box-title,
.widget-title h2,
.widget .widget-title{
  font-weight: 800;
  letter-spacing: -.01em;
}

a{ color: var(--pxm-accent); }

/* ===== 3. LAYOUT SHELL ===== */
.container{ width: var(--pxm-maxw); max-width: 100%; padding: 0 20px; box-sizing: border-box; }
#header .container{ padding-left: 20px; padding-right: 20px; }

@media (min-width: 1300px){
  .container{ padding: 0 24px; }
}

/* ===== 4. HEADER & NAVIGATION ===== */
#header{
  background: rgba(15,19,32,.82) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid var(--pxm-border) !important;
  height: var(--pxm-header-h) !important;
  transition: background .25s ease, box-shadow .25s ease;
}
html.pxm-light #header{ background: rgba(255,255,255,.85) !important; }
body.fixed #header{ box-shadow: 0 4px 20px -8px rgba(0,0,0,.4); }

#header .container{ height: var(--pxm-header-h) !important; }

#header .logo a img{ max-height: 30px !important; height: 30px !important; }
#header .logo{ display:flex; align-items:center; gap:8px; }

#header nav .menu{ display:flex; align-items:center; gap:2px; float:none; }
#header nav ul li{ float:none; margin-right:0; }

#header nav a{
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .01em;
  padding: 0 14px;
  line-height: 38px;
  border-radius: 999px;
  color: var(--pxm-text) !important;
}

#header nav .menu>li>a::before{
  display:none;
}

#header nav .menu>li>a{
  position: relative;
  transition: background-color .18s ease, color .18s ease;
}
#header nav .menu>li:hover>a{
  background: rgba(255,255,255,.08);
}
html.pxm-light #header nav .menu>li:hover>a{
  background: rgba(15,19,32,.06);
}

#header nav ul li.current-menu-item a,
#header nav ul li.current-menu-item a:hover{
  background: var(--pxm-accent) !important;
  color: #06231d !important;
  border-radius: 999px;
}

#header nav .menu>li.menu-item-has-children>a::after{
  font-size: 11px;
  top: 0;
  line-height: 38px;
  right: 12px;
  position: relative;
  margin-left: 4px;
  color: inherit;
}
#header nav .menu li.menu-item-has-children a{ padding-right: 28px; }

#header nav .menu>li>.sub-menu{
  background: var(--pxm-surface) !important;
  border: 1px solid var(--pxm-border-strong);
  border-radius: var(--pxm-radius-sm) !important;
  box-shadow: var(--pxm-shadow-lift);
  margin-top: 8px;
  padding: 6px;
  overflow: hidden;
}
#header nav .menu .sub-menu li a{
  background: transparent !important;
  border-radius: 8px !important;
  color: var(--pxm-text) !important;
  font-weight: 600;
  padding: 9px 12px !important;
}
#header nav .menu .sub-menu li a:hover{
  background: rgba(var(--pxm-accent-rgb), .14) !important;
  color: var(--pxm-accent) !important;
}
#header nav .menu>li.menu-item-has-children>.sub-menu::before{ display: none; }

/* theme toggle button restyle */
#button_light_dark{
  width: 44px; height: 26px; margin-left: 10px; margin-top: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  border: 1px solid var(--pxm-border-strong);
}
html.pxm-light #button_light_dark{ background: rgba(15,19,32,.06); }
#button_light_dark i{
  width: 20px; height: 20px; line-height: 20px; font-size: 11px;
  top: 2px; left: 2px; border: none;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
#button_light_dark.active i{ transform: translate(18px,0); }

/* ===== 5. MOBILE MENU ===== */
#header nav .menu-open{
  width: 38px; height: 38px; line-height: 38px;
  border-radius: 10px;
  background: rgba(255,255,255,.08);
  font-size: 18px;
}
html.pxm-light #header nav .menu-open{ background: rgba(15,19,32,.06); }

#menu-mobile{
  background: var(--pxm-bg-soft) !important;
  border-right: 1px solid var(--pxm-border);
}
#menu-mobile ul li a{
  color: var(--pxm-text) !important;
  font-weight: 700;
  border-bottom: 1px solid var(--pxm-border) !important;
}

/* ===== 6. HERO / SUBHEADER ===== */
#subheader{
  background: linear-gradient(180deg, var(--pxm-bg) 0%, var(--pxm-bg-soft) 100%) !important;
  padding: calc(var(--pxm-header-h) + 56px) 0 64px !important;
  overflow: hidden;
  border-bottom: 1px solid var(--pxm-border);
}

#subheader::before{
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(560px 280px at 18% 0%, rgba(var(--pxm-accent-rgb),.20), transparent 60%),
    radial-gradient(480px 260px at 85% 10%, rgba(var(--pxm-accent-2-rgb),.14), transparent 60%);
  pointer-events:none;
}

#subheader .imgbg{ opacity: .22; mix-blend-mode: luminosity; }
#subheader .imgbg::after{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(15,19,32,.2) 0%, var(--pxm-bg) 92%);
}
#subheader .imgbg img{ opacity: 1 !important; }

#subheader .subcontainer{ width: 760px; position: relative; z-index: 2; }

#subheader .eyebrow{
  display:inline-flex; align-items:center; gap:7px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--pxm-accent);
  background: rgba(var(--pxm-accent-rgb), .12);
  border: 1px solid rgba(var(--pxm-accent-rgb), .3);
  padding: 6px 14px 6px 12px;
  border-radius: 999px;
  margin-bottom: 22px;
}
#subheader .eyebrow i{ font-size: 11px; }

#subheader h1{
  font-size: 46px !important;
  line-height: 1.12 !important;
  font-weight: 800 !important;
  letter-spacing: -.02em;
  color: var(--pxm-text) !important;
  padding-bottom: 16px !important;
}

#subheader h2{
  font-size: 16.5px !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
  color: var(--pxm-text-dim) !important;
  max-width: 560px;
  margin: 0 auto;
}

/* ===== 7. SEARCH ===== */
#subheader .subcontainer form,
#searchBox form{
  background: var(--pxm-surface);
  border: 1px solid var(--pxm-border-strong);
  border-radius: 999px;
  box-shadow: var(--pxm-shadow);
}

#subheader .subcontainer input[type="text"],
#subheader .subcontainer input.sb_search{
  background: transparent !important;
  color: var(--pxm-text) !important;
  font-size: 15px !important;
  height: 56px !important;
  padding: 0 22px !important;
}
#subheader .subcontainer input::placeholder{ color: var(--pxm-text-faint) !important; }

#subheader .subcontainer button[type="submit"],
#subheader .subcontainer .sb_submit{
  width: 56px !important; height: 56px !important;
  border-radius: 999px !important;
  margin: 2px;
  background: var(--pxm-accent) !important;
  color: #06231d !important;
  box-shadow: none !important;
}
#subheader .subcontainer button[type="submit"]:hover{ filter: brightness(1.08); }

#subheader .social{ margin-top: 28px !important; }
#subheader .social li a{
  background: var(--pxm-surface) !important;
  border: 1px solid var(--pxm-border-strong);
  opacity: 1 !important;
  width: 38px; line-height: 38px; font-size: 16px;
  color: var(--pxm-text) !important;
}
#subheader .social li a:hover{ transform: translateY(-2px); }

#subheader.np{
  background: var(--pxm-surface) !important;
  border-bottom: 1px solid var(--pxm-border) !important;
  box-shadow: none !important;
  padding: 20px 0 !important;
}
#subheader.np #searchBox{ max-width: 640px; margin: 0 auto; }
#subheader.np #searchBox input{
  background: var(--pxm-surface-2) !important;
  color: var(--pxm-text) !important;
  border-radius: 999px !important;
  height: 48px !important;
  padding: 0 20px !important;
}
#subheader.np .sb_submit{
  background: var(--pxm-accent) !important;
  border-radius: 999px !important;
  width: 48px !important; height: 48px !important;
  color: #06231d !important;
}
#subheader.np .social{ margin-top: 14px !important; }

/* ===== 8. CATEGORY QUICK-LINKS RAIL ===== */
.pxm-catrail-wrap{
  position: relative;
  border-bottom: 1px solid var(--pxm-border);
  background: var(--pxm-bg-soft);
}
.pxm-catrail{
  display:flex; gap:10px;
  padding: 16px 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.pxm-catrail::-webkit-scrollbar{ display:none; }

.pxm-catrail a{
  flex: none;
  display:flex; align-items:center; gap:8px;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--pxm-surface);
  border: 1px solid var(--pxm-border-strong);
  color: var(--pxm-text) !important;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.pxm-catrail a:hover{
  border-color: rgba(var(--pxm-accent-rgb),.5);
  background: rgba(var(--pxm-accent-rgb), .1);
  transform: translateY(-1px);
}
.pxm-catrail a i{ color: var(--pxm-accent); font-size: 13px; }
.pxm-catrail a.is-all{
  background: var(--pxm-accent);
  border-color: var(--pxm-accent);
  color: #06231d !important;
}
.pxm-catrail a.is-all i{ color: #06231d; }

/* ===== 9. SECTIONS ===== */
.sections{ padding-top: 8px; }

.section{
  margin-bottom: 44px !important;
}

.section .title-section{
  font-size: 21px !important;
  font-weight: 800 !important;
  letter-spacing: -.01em;
  color: var(--pxm-text) !important;
  border-bottom: 0 !important;
  margin: 0 0 18px !important;
  padding-bottom: 0 !important;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}
.section .title-section > span:first-child,
.section .title-section{
  position: relative;
}
.section .title-section::after{ content: none; }

.pxm-section-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
  margin: 0 0 18px;
}
.pxm-section-head .pxm-head-text h2{
  font-size: 21px; font-weight: 800; letter-spacing:-.01em; margin:0 0 4px; color: var(--pxm-text);
  display:flex; align-items:center; gap:10px;
}
.pxm-section-head .pxm-head-text h2 i{
  width: 34px; height: 34px; border-radius: 10px;
  display:inline-flex; align-items:center; justify-content:center;
  background: rgba(var(--pxm-accent-rgb), .14);
  color: var(--pxm-accent);
  font-size: 14px;
}
.pxm-section-head .pxm-head-text p{ margin:0; font-size: 13px; color: var(--pxm-text-faint); }
.pxm-section-head .pxm-more{
  flex: none;
  font-size: 13px; font-weight: 700;
  color: var(--pxm-text-dim) !important;
  display:flex; align-items:center; gap:6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--pxm-border-strong);
  white-space: nowrap;
  transition: all .15s ease;
}
.pxm-section-head .pxm-more:hover{
  color: var(--pxm-accent) !important;
  border-color: rgba(var(--pxm-accent-rgb),.5);
}

.section a.more{
  display:inline-flex; align-items:center; gap:6px;
  background: transparent !important;
  border: 1px solid var(--pxm-border-strong);
  color: var(--pxm-text-dim) !important;
  font-weight: 700;
  border-radius: 999px;
  padding: 9px 18px;
}
.section a.more:hover{
  color: var(--pxm-accent) !important;
  border-color: rgba(var(--pxm-accent-rgb),.5);
  background: rgba(var(--pxm-accent-rgb),.08) !important;
}

/* ===== 10. APP CARDS ===== */
.baps{ display:flex; flex-wrap:wrap; margin: 0 -8px; }
.baps .bav2{ padding: 8px !important; }

.bav2{
  height: 100%;
}
.bav2 a{
  display:flex; flex-direction:column; height:100%;
  background: var(--pxm-surface) !important;
  border: 1px solid var(--pxm-border) !important;
  border-radius: var(--pxm-radius) !important;
  overflow: hidden;
  box-shadow: var(--pxm-shadow) !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}
.bav2 a:hover{
  transform: translateY(-4px);
  box-shadow: var(--pxm-shadow-lift) !important;
  border-color: rgba(var(--pxm-accent-rgb),.4) !important;
}
.bav2 a::before{ content:none !important; }

.bav2 .bloque-imagen{
  border-radius: 0 !important;
  position: relative;
}
.bav2 .bloque-imagen::after{
  content:'';
  position:absolute; inset:0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  pointer-events:none;
}

.bav2 .bap-c{
  padding: 13px 14px 14px !important;
  display:flex; flex-direction:column; gap:4px;
  flex: 1;
}

.bav2 .title{
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: var(--pxm-text) !important;
  line-height: 1.3 !important;
  white-space: nowrap; overflow:hidden; text-overflow:ellipsis;
}

.bav2 .developer{
  font-size: 12px !important;
  color: var(--pxm-text-faint) !important;
  white-space: nowrap; overflow:hidden; text-overflow:ellipsis;
}

.bav2 .meta .version,
.bav2 .app-date{
  font-size: 11.5px !important;
  color: var(--pxm-text-faint) !important;
}

.bav2 .px-postmeta{ margin-top: auto !important; padding-top: 8px !important; }

/* bav1 (list-style) cards used in carousels */
.bav1 a{
  background: var(--pxm-surface) !important;
  border: 1px solid var(--pxm-border) !important;
  border-radius: var(--pxm-radius) !important;
  box-shadow: var(--pxm-shadow) !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}
.bav1 a:hover{
  transform: translateY(-3px);
  border-color: rgba(var(--pxm-accent-rgb),.4) !important;
  box-shadow: var(--pxm-shadow-lift) !important;
}
.bav1 a::after, .bav1 a::before{ content: none !important; }
.bav1 .title{
  font-weight: 700 !important;
  font-size: 14.5px !important;
  color: var(--pxm-text) !important;
}

/* image placeholder shimmer */
.bloque-imagen.bi_ll{
  background: linear-gradient(100deg, var(--pxm-surface) 30%, var(--pxm-surface-2) 50%, var(--pxm-surface) 70%) !important;
  background-size: 200% 100%;
  animation: pxm-shimmer 1.6s ease-in-out infinite;
}
@keyframes pxm-shimmer{
  0%{ background-position: 150% 0; }
  100%{ background-position: -50% 0; }
}

/* ===== 11. RATINGS & BADGES ===== */
.box-rating .rating{ background-color: rgba(255,176,32,.25) !important; }
.box-rating .rating, .rating .stars{ background-color: var(--pxm-accent-2) !important; }
.box-rating .ratings-click .rating-click.active{ background-color: var(--pxm-accent-2) !important; }

.bloque-status{
  top: 12px !important; left: -36px !important;
  width: 130px !important;
  padding: 4px 0 !important;
  text-align: center;
  font-size: 10px !important;
  font-weight: 800;
  letter-spacing: .04em;
  box-shadow: 0 3px 10px rgba(0,0,0,.3);
}
.bloque-status.bs-new{ background: linear-gradient(90deg,#ff5b5b,#d22222) !important; }
.bloque-status.bs-update{ background: linear-gradient(90deg,#2bd66b,#19b934) !important; }

.b-type{
  border-radius: 6px !important;
  font-weight: 700 !important;
  letter-spacing: .03em;
}

/* "featured" ribbon used by pxm spotlight cards */
.pxm-pill{
  display:inline-flex; align-items:center; gap:5px;
  font-size: 10.5px; font-weight: 800; letter-spacing:.04em; text-transform:uppercase;
  padding: 4px 9px; border-radius: 999px;
  background: rgba(255,176,32,.16);
  color: var(--pxm-accent-2);
  border: 1px solid rgba(255,176,32,.35);
}
.pxm-pill.pxm-pill-new{ background: rgba(255,91,91,.16); color:#ff8080; border-color: rgba(255,91,91,.35); }
.pxm-pill.pxm-pill-trend{ background: rgba(var(--pxm-accent-rgb),.16); color: var(--pxm-accent); border-color: rgba(var(--pxm-accent-rgb),.35); }

/* ===== 12. CONTENT RAIL (mixed apps + blog) ===== */
.pxm-mixed{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.pxm-mixed-card{
  background: var(--pxm-surface);
  border: 1px solid var(--pxm-border);
  border-radius: var(--pxm-radius);
  overflow: hidden;
  box-shadow: var(--pxm-shadow);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  display:flex; flex-direction:column;
}
.pxm-mixed-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--pxm-shadow-lift);
  border-color: rgba(var(--pxm-accent-rgb),.4);
}
.pxm-mixed-card a.pxm-mc-link{ display:flex; flex-direction:column; height:100%; color:inherit; }
.pxm-mc-media{
  position:relative; padding-bottom:56%;
  background-size: cover; background-position:center;
  background-color: var(--pxm-surface-2);
}
.pxm-mc-media .pxm-mc-kind{
  position:absolute; top:10px; left:10px;
}
.pxm-mc-body{ padding: 14px 15px 16px; display:flex; flex-direction:column; gap:6px; flex:1; }
.pxm-mc-body h3{
  font-size: 14.5px; font-weight: 700; line-height:1.35; margin:0;
  color: var(--pxm-text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden;
}
.pxm-mc-meta{
  margin-top:auto; padding-top:8px;
  font-size: 11.5px; color: var(--pxm-text-faint);
  display:flex; align-items:center; gap:6px;
}
.pxm-mc-meta i{ font-size: 10px; }

/* ===== 13. BLOG CARDS ===== */
.section.blog .bloques li,
.bloque-blog{
  background: var(--pxm-surface) !important;
  border: 1px solid var(--pxm-border) !important;
  border-radius: var(--pxm-radius) !important;
  box-shadow: var(--pxm-shadow) !important;
  transition: transform .2s ease, box-shadow .2s ease;
}
.section.blog .bloques li:hover,
.bloque-blog:hover{
  transform: translateY(-3px);
  box-shadow: var(--pxm-shadow-lift) !important;
}
.section.blog .bloques li a.title,
.bloque-blog a.title{
  color: var(--pxm-text) !important;
  font-weight: 700 !important;
}

/* ===== 14. BUTTONS & MISC UI ===== */
.buttond{
  border-radius: 999px !important;
  font-weight: 800 !important;
  letter-spacing: .02em;
}
#dasl{
  border-radius: 999px !important;
  font-weight: 800 !important;
  box-shadow: 0 10px 24px -10px rgba(var(--pxm-accent-rgb),.6) !important;
}

#backtotop{
  border-radius: 999px !important;
  box-shadow: var(--pxm-shadow-lift) !important;
}

.pagination .page-numbers,
.pagination .current{
  border-radius: 10px !important;
  background: var(--pxm-surface) !important;
  border: 1px solid var(--pxm-border) !important;
  color: var(--pxm-text) !important;
}
.pagination .current{
  background: var(--pxm-accent) !important;
  color: #06231d !important;
  border-color: var(--pxm-accent) !important;
}

/* ===== 15. SIDEBAR & WIDGETS ===== */
.widget{
  background: var(--pxm-surface) !important;
  border: 1px solid var(--pxm-border) !important;
  border-radius: var(--pxm-radius) !important;
  box-shadow: var(--pxm-shadow) !important;
  padding: 18px !important;
}
.widget .widget-title{
  font-size: 14px !important;
  font-weight: 800 !important;
  border-bottom: 1px solid var(--pxm-border) !important;
  padding-bottom: 12px !important;
  margin-bottom: 12px !important;
  color: var(--pxm-text) !important;
}

/* ===== 16. FOOTER ===== */
#footer{
  background: var(--pxm-bg-soft) !important;
  border-top: 1px solid var(--pxm-border) !important;
  margin-top: 24px;
}
#footer .widget-title h2,
#footer .widget_block h2{
  color: var(--pxm-text) !important;
  font-weight: 800 !important;
}
#footer .footer-bottom{
  border-top: 1px solid var(--pxm-border) !important;
}
#footer .copy{ color: var(--pxm-text-faint) !important; }

/* ===== 17. SINGLE APP PAGE ===== */
.app-s .box,
.app-p .box{
  background: var(--pxm-surface) !important;
  border: 1px solid var(--pxm-border) !important;
  border-radius: var(--pxm-radius) !important;
  box-shadow: var(--pxm-shadow) !important;
}
.app-s .box .box-title,
.app-p .box h1.box-title{
  font-weight: 800 !important;
}
.app-s .bx-download{
  border-radius: var(--pxm-radius) !important;
}
.app-s .da-s{
  border-radius: var(--pxm-radius-sm) !important;
}

/* ===== 18. SCROLLBAR, FOCUS, MOTION ===== */
::-webkit-scrollbar-thumb{ background: var(--pxm-accent) !important; border-radius: 999px; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
.bav2 a:focus-visible,
.bav1 a:focus-visible{
  outline: 2px solid var(--pxm-accent) !important;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* reveal-on-scroll (progressive enhancement, JS adds .is-visible) */
.pxm-reveal{ opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.pxm-reveal.is-visible{ opacity: 1; transform: translateY(0); }

/* generic section auto-reveal, applied by appyn-modern.js on scroll-into-view.
   Gated behind html.pxm-js (set immediately by an inline script in <head>)
   so content never disappears if JavaScript fails to load. */
html.pxm-js #main-site .section{ opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }
html.pxm-js #main-site .section.pxm-in{ opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
  html.pxm-js #main-site .section{ opacity: 1; transform: none; }
}

/* compact header state, toggled by appyn-modern.js after a small scroll */
#header.pxm-compact{ height: 58px !important; }
#header.pxm-compact .container{ height: 58px !important; }
#header.pxm-compact .logo a img{ max-height: 26px !important; height: 26px !important; }

/* ===== 19. HOMEPAGE: TRUST STRIP ===== */
.pxm-trust{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 44px;
}
.pxm-trust-item{
  display:flex; align-items:center; gap:14px;
  background: var(--pxm-surface);
  border: 1px solid var(--pxm-border);
  border-radius: var(--pxm-radius);
  box-shadow: var(--pxm-shadow);
  padding: 18px;
}
.pxm-trust-ic{
  flex: none;
  width: 46px; height: 46px;
  border-radius: 13px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(var(--pxm-accent-rgb), .14);
  color: var(--pxm-accent);
  font-size: 18px;
}
.pxm-trust-copy{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.pxm-trust-copy strong{
  font-size: 19px; font-weight: 800; color: var(--pxm-text); line-height:1.1;
}
.pxm-trust-copy span{
  font-size: 12px; color: var(--pxm-text-faint); line-height:1.3;
}

/* ===== 20. HOMEPAGE: SPOTLIGHT CATEGORY SECTIONS ===== */
.pxm-spotlight .pxm-head-text h2 i{
  background: rgba(var(--pxm-accent-rgb), .14);
  color: var(--pxm-accent);
}
.pxm-accent-green .pxm-head-text h2 i{ background: rgba(34,197,94,.15); color:#22c55e; }
.pxm-accent-blue .pxm-head-text h2 i{ background: rgba(59,130,246,.15); color:#3b82f6; }
.pxm-accent-gold .pxm-head-text h2 i{ background: rgba(230,145,0,.16); color: var(--pxm-accent-2); }
.pxm-accent-teal .pxm-head-text h2 i{ background: rgba(var(--pxm-accent-rgb), .14); color: var(--pxm-accent); }

/* ===== 21. HOMEPAGE: BROWSE-BY-CATEGORY GRID ===== */
.pxm-catgrid{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.pxm-catgrid-item{
  display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  background: var(--pxm-surface);
  border: 1px solid var(--pxm-border);
  border-radius: var(--pxm-radius);
  box-shadow: var(--pxm-shadow);
  padding: 18px 16px;
  color: var(--pxm-text) !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pxm-catgrid-item:hover{
  transform: translateY(-4px);
  box-shadow: var(--pxm-shadow-lift);
  border-color: rgba(var(--pxm-accent-rgb),.4);
}
.pxm-catgrid-ic{
  width: 40px; height: 40px;
  border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(var(--pxm-accent-rgb), .14);
  color: var(--pxm-accent);
  font-size: 16px;
}
.pxm-accent-green .pxm-catgrid-ic{ background: rgba(34,197,94,.15); color:#22c55e; }
.pxm-accent-blue .pxm-catgrid-ic{ background: rgba(59,130,246,.15); color:#3b82f6; }
.pxm-accent-gold .pxm-catgrid-ic{ background: rgba(230,145,0,.16); color: var(--pxm-accent-2); }
.pxm-catgrid-name{ font-size: 14px; font-weight: 700; line-height:1.25; }
.pxm-catgrid-count{ font-size: 11.5px; color: var(--pxm-text-faint); margin-top: -4px; }

/* ===== 22. RESPONSIVE ===== */
@media (max-width: 1300px){
  .pxm-mixed{ grid-template-columns: repeat(3, 1fr); }
  .pxm-catgrid{ grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 991px){
  #subheader h1{ font-size: 34px !important; line-height: 1.18 !important; }
  #subheader{ padding: calc(var(--pxm-header-h) + 30px) 0 40px !important; }
  .pxm-mixed{ grid-template-columns: repeat(2, 1fr); }
  .pxm-trust{ grid-template-columns: repeat(2, 1fr); }
  .pxm-catgrid{ grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 680px){
  .container{ padding: 0 14px; }
  #subheader .subcontainer{ width: 100%; }
  #subheader h1{ font-size: 27px !important; }
  #subheader h2{ font-size: 14.5px !important; }
  .section .title-section{ font-size: 18px !important; }
  .pxm-section-head{ flex-direction:column; align-items:flex-start; gap:10px; }
  .pxm-section-head .pxm-head-text h2{ font-size: 18px; }
  .pxm-mixed{ grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .pxm-mc-body{ padding: 10px 12px 12px; }
  .pxm-mc-body h3{ font-size: 13px; }
  .baps .bav2{ padding: 6px !important; }
  .pxm-trust{ grid-template-columns: 1fr; gap: 10px; }
  .pxm-trust-item{ padding: 14px; }
  .pxm-catgrid{ grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .pxm-catgrid-item{ padding: 14px 12px; }
}

@media (max-width: 480px){
  .pxm-mixed{ grid-template-columns: 1fr 1fr; }
  #subheader .subcontainer input[type="text"],
  #subheader .subcontainer input.sb_search{ height: 50px !important; font-size: 14px !important; }
  #subheader .subcontainer button[type="submit"],
  #subheader .subcontainer .sb_submit{ width: 50px !important; height: 50px !important; }
}