/* ===========================================================================
   Palkia — pearlescent theme for pokelaris
   ---------------------------------------------------------------------------
   Goes in the `generic.css` asset slot. Exo loads it only when no custom
   theme CSS is set in the panel, after shared.css. It re-skins Exo purely
   through Exo's own custom-property contract plus targeted overrides.

   DO NOT edit shared.css or main.js — the basket depends on them.
   =========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Sora:wght@400;600;700&display=swap");

/* ---------------------------------------------------------------- palette */

:root {
  /* Palkia: pearl-white body, magenta stripes, violet membranes, deep space */
  --pk-void:        #07061a;
  --pk-surface:     #15123a;
  --pk-pearl:       #f6f3ff;
  --pk-pearl-dim:   #cfc8ec;
  --pk-pearl-mute:  #9a92c4;
  --pk-magenta:     #ff4fa3;
  --pk-magenta-lo:  #ff8ac4;
  --pk-violet:      #8b5cf6;
  --pk-violet-lo:   #b794ff;
  --pk-aqua:        #67e8f9;
  --pk-line:        rgb(183 148 255 / 18%);
  --pk-line-strong: rgb(183 148 255 / 34%);

  /* the pearlescent sheen, reused everywhere */
  --pk-iridescent: linear-gradient(
    110deg,
    var(--pk-pearl)    0%,
    var(--pk-magenta-lo) 22%,
    var(--pk-violet-lo) 44%,
    var(--pk-aqua)      62%,
    var(--pk-pearl)     82%,
    var(--pk-magenta-lo) 100%
  );
  --pk-glow-magenta: 0 0 28px rgb(255 79 163 / 35%);
  --pk-glow-violet:  0 0 32px rgb(139 92 246 / 32%);

  /* ---- Exo contract ---- */
  --color-bg:            var(--pk-void);
  --color-brighter-bg:   var(--pk-surface);
  --color-text:          var(--pk-pearl);
  --color-text-darker:   var(--pk-pearl-dim);
  --color-text-secondary: var(--pk-pearl-mute);
  --color-text-dark:     #120a22;

  --color-primary:            var(--pk-magenta);
  --color-primary-hover:      var(--pk-violet);
  --color-primary-text:       #140a24;
  --color-primary-text-hover: var(--pk-pearl);

  --color-secondary:            rgb(183 148 255 / 14%);
  --color-secondary-hover:      rgb(183 148 255 / 26%);
  --color-secondary-text:       var(--pk-pearl);
  --color-secondary-text-hover: var(--pk-pearl);

  --color-tertiary:            transparent;
  --color-tertiary-hover:      rgb(183 148 255 / 16%);
  --color-tertiary-text:       var(--pk-pearl-dim);
  --color-tertiary-text-hover: var(--pk-pearl);

  --color-removed:          #ff5f7a;
  --color-sale-banner-bg:   var(--pk-magenta);
  --color-sale-banner-text: #140a24;

  --border-color: var(--pk-line);

  /* legal footer (cannot be hidden — only restyled) */
  --tebex-legal-footer-background-color: #050414;
  --tebex-legal-footer-text-color:       var(--pk-pearl-mute);
  --tebex-legal-footer-border-color:     var(--pk-line);
  --tebex-legal-footer-logo-color:       var(--pk-pearl-mute);

  --widget-padding: 24px;
  --radius:    16px;
  --radius-sm: 10px;
  --radius-pill: 999px;
}

/* ------------------------------------------------------------- foundation */

body {
  font-family: Outfit, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  letter-spacing: 0.1px;
  background: var(--pk-void);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5,
.product-title,
.site-header-inner .info .name {
  font-family: Sora, Outfit, sans-serif;
  letter-spacing: -0.015em;
}

/* The spatial backdrop: two Palkia-coloured nebulae over the void. Exo's
   generic theme puts a photo here; we keep it pure CSS so there is no asset
   to upload and nothing to go stale. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(90ch 60ch at 18% -8%,  rgb(255 79 163 / 20%), transparent 62%),
    radial-gradient(80ch 58ch at 86% 4%,   rgb(139 92 246 / 26%), transparent 60%),
    radial-gradient(70ch 50ch at 50% 108%, rgb(103 232 249 / 10%), transparent 62%),
    var(--pk-void);
}

/* faint pearl grain so the large flat areas are not dead */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  background-image: radial-gradient(rgb(246 243 255 / 9%) 0.5px, transparent 0.5px);
  background-size: 3px 3px;
}

::selection {
  background: var(--pk-magenta);
  color: #140a24;
}

:focus-visible {
  outline: 2px solid var(--pk-aqua);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------- surfaces */

/* One pearlescent card treatment, shared by every panel Exo renders. */
.site-header-inner,
.store-product,
.site-widget,
.site-home-categories .category,
.store-text,
.basket-items,
.store-product-options {
  position: relative;
  border-radius: var(--radius);
  border: 1px solid var(--pk-line);
  background:
    linear-gradient(165deg, rgb(246 243 255 / 7%), rgb(246 243 255 / 2%)) ,
    var(--pk-surface);
  box-shadow:
    0 1px 0 rgb(246 243 255 / 10%) inset,
    0 18px 40px -24px rgb(7 6 26 / 90%);
}

/* the sheen line along the top edge — the "pearl" tell */
.site-header-inner::before,
.store-product::before,
.site-widget::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--pk-iridescent);
  opacity: 0.55;
  pointer-events: none;
}

/* ----------------------------------------------------------------- header */

.site-header-inner {
  padding: 20px var(--widget-padding);
  overflow: hidden;
}

.site-header-inner .info .image {
  border-radius: var(--radius-sm);
  box-shadow: var(--pk-glow-violet);
}

.site-header-inner .info .name {
  font-weight: 700;
  font-size: 1.5rem;
  background: var(--pk-iridescent);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ------------------------------------------------------------- navigation */

.site-navigation a,
.site-navigation .link {
  border-radius: var(--radius-pill);
  color: var(--pk-pearl-dim);
  transition: color 0.16s ease, background-color 0.16s ease;
}

.site-navigation a:hover,
.site-navigation .link:hover {
  color: var(--pk-pearl);
  background: rgb(183 148 255 / 14%);
}

.site-navigation a.active,
.site-navigation .link.active {
  color: #140a24;
  background: var(--pk-iridescent);
  background-size: 200% 100%;
  font-weight: 600;
}

/* ---------------------------------------------------------------- buttons */

.btn-primary,
.btn-secondary,
.btn-tertiary {
  border-radius: var(--radius-pill);
  font-family: Outfit, sans-serif;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform 0.14s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.btn-primary {
  background: linear-gradient(100deg, var(--pk-magenta), var(--pk-violet));
  color: #140a24;
  border: 0;
  box-shadow: 0 8px 22px -12px rgb(255 79 163 / 70%);
}

.btn-primary:hover,
.btn-primary:focus {
  transform: translateY(-1px);
  box-shadow: var(--pk-glow-magenta), 0 10px 26px -12px rgb(139 92 246 / 75%);
}

.btn-secondary {
  border: 1px solid var(--pk-line-strong);
  backdrop-filter: blur(6px);
}

.btn-secondary:hover,
.btn-secondary:focus {
  transform: translateY(-1px);
  box-shadow: var(--pk-glow-violet);
}

.btn-primary[disabled],
.btn-secondary[disabled] {
  opacity: 0.45;
  transform: none;
  box-shadow: none;
  cursor: not-allowed;
}

.quantity-field {
  border-radius: var(--radius-pill);
  border: 1px solid var(--pk-line-strong);
  background: rgb(7 6 26 / 55%);
}

/* ----------------------------------------------------- product card shell */

.store-product {
  padding: 18px;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.22s ease, border-color 0.18s ease;
}

.store-product:hover {
  transform: translateY(-3px);
  border-color: var(--pk-line-strong);
  box-shadow:
    0 1px 0 rgb(246 243 255 / 14%) inset,
    0 26px 54px -26px rgb(7 6 26 / 95%),
    var(--pk-glow-violet);
}

.store-product .image,
.store-product .image-default {
  border-radius: var(--radius-sm);
  background: radial-gradient(120% 120% at 30% 10%, rgb(183 148 255 / 22%), transparent 70%);
}

.store-product .product-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-block: 12px 6px;
}

.store-product .product-title a { color: var(--pk-pearl); }
.store-product .product-title a:hover { color: var(--pk-magenta-lo); }

.store-product .price strong {
  font-family: Sora, sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--pk-pearl);
}

.store-product .price .discount,
.store-product del.discount {
  color: var(--pk-pearl-mute);
  font-size: 0.9rem;
}

.countdown {
  border-radius: var(--radius-pill);
  background: rgb(255 79 163 / 18%);
  color: var(--pk-magenta-lo);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ------------------------------------------------- pearls & subscriptions
   Markup for these comes from pearl-entry.twig and sub-entry.twig. They wrap
   Exo's package-actions.twig untouched, so the basket keeps working. */

/* the pearl orb.
   display:block is load-bearing: a <span> is inline, and width/height are
   ignored on inline boxes — without it the orb renders at zero size. */
.pk-orb {
  display: block;
  width: 76px;
  height: 76px;
  margin: 2px auto 14px;
  border-radius: 50%;
  position: relative;
  background:
    radial-gradient(circle at 32% 26%, var(--pk-pearl) 0 12%, transparent 42%),
    conic-gradient(from 210deg,
      var(--pk-pearl-dim), var(--pk-magenta-lo), var(--pk-violet-lo),
      var(--pk-aqua), var(--pk-pearl-dim));
  box-shadow:
    0 0 0 1px rgb(246 243 255 / 24%) inset,
    0 10px 26px -12px rgb(255 79 163 / 65%),
    var(--pk-glow-violet);
}

.pk-orb::after {
  content: "";
  position: absolute;
  inset: 16% 52% 58% 18%;
  border-radius: 50%;
  background: rgb(255 255 255 / 72%);
  filter: blur(2px);
}

.pk-orb.is-lg { width: 96px; height: 96px; }

/* the headline pearl amount */
.pk-amount {
  font-family: Sora, sans-serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.05;
  text-align: center;
  background: var(--pk-iridescent);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pk-amount .pk-unit {
  display: block;
  font-family: Outfit, sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pk-pearl-mute);
  background: none;
  -webkit-text-fill-color: var(--pk-pearl-mute);
}

/* badges: +10% BONUS, BEST VALUE, MOST POPULAR */
.pk-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  border-radius: var(--radius-pill);
  padding: 4px 11px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #140a24;
  background: var(--pk-iridescent);
  background-size: 200% 100%;
  box-shadow: 0 6px 18px -10px rgb(255 79 163 / 80%);
}

.pk-badge.is-bonus {
  background: linear-gradient(100deg, var(--pk-aqua), var(--pk-pearl), var(--pk-magenta-lo));
}

/* the featured tier gets a brighter rim */
.store-product.is-featured {
  border-color: rgb(255 79 163 / 48%);
  box-shadow:
    0 1px 0 rgb(246 243 255 / 16%) inset,
    0 24px 50px -26px rgb(7 6 26 / 95%),
    var(--pk-glow-magenta);
}

.store-product.is-featured::before { opacity: 1; }

/* per-dollar rate line */
.pk-rate {
  text-align: center;
  font-size: 0.8rem;
  color: var(--pk-pearl-mute);
  margin-block: 2px 12px;
}

/* subscription savings callout */
.pk-save {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-block: 10px 4px;
  border-radius: var(--radius-sm);
  border: 1px solid rgb(103 232 249 / 30%);
  background: rgb(103 232 249 / 10%);
  padding: 9px 12px;
  text-align: center;
}

.pk-save .pk-save-amount {
  font-family: Sora, sans-serif;
  font-weight: 700;
  color: var(--pk-aqua);
}

.pk-save .pk-save-note {
  font-size: 0.78rem;
  color: var(--pk-pearl-dim);
}

.pk-save del {
  color: var(--pk-pearl-mute);
}

/* perks list on subscription cards */
.pk-perks {
  list-style: none;
  margin: 12px 0 14px;
  padding: 0;
  display: grid;
  gap: 7px;
  text-align: left;
}

.pk-perks li {
  position: relative;
  padding-left: 22px;
  font-size: 0.9rem;
  color: var(--pk-pearl-dim);
}

.pk-perks li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.44em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: conic-gradient(from 210deg, var(--pk-pearl-dim), var(--pk-magenta-lo), var(--pk-aqua), var(--pk-pearl-dim));
  box-shadow: 0 0 8px rgb(255 79 163 / 60%);
}

.pk-billing {
  text-align: center;
  font-size: 0.78rem;
  color: var(--pk-pearl-mute);
  margin-top: 2px;
}

/* -------------------------------------------------------------- hero area */

.pk-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--pk-line);
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 48px);
  margin-bottom: 22px;
  text-align: center;
  background:
    radial-gradient(70ch 40ch at 50% -20%, rgb(255 79 163 / 26%), transparent 65%),
    linear-gradient(165deg, rgb(246 243 255 / 8%), rgb(246 243 255 / 2%)),
    var(--pk-surface);
  box-shadow: 0 1px 0 rgb(246 243 255 / 12%) inset;
}

.pk-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--pk-iridescent);
  opacity: 0.8;
}

.pk-hero h1,
.pk-hero h2 {
  font-size: clamp(1.8rem, 4.2vw, 3rem);
  font-weight: 800;
  line-height: 1.08;
  margin: 0 0 12px;
  background: var(--pk-iridescent);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pk-hero p {
  max-width: 62ch;
  margin: 0 auto;
  color: var(--pk-pearl-dim);
  font-size: clamp(0.98rem, 1.6vw, 1.12rem);
  line-height: 1.6;
}

.pk-eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--pk-line-strong);
  background: rgb(183 148 255 / 12%);
  padding: 5px 14px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pk-pearl-dim);
}

/* section heading used above each package grid */
.pk-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 30px 0 16px;
}

.pk-section-head h2 {
  margin: 0;
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  font-weight: 700;
  color: var(--pk-pearl);
}

.pk-section-head p {
  margin: 0;
  color: var(--pk-pearl-mute);
  font-size: 0.92rem;
}

/* ------------------------------------------------------- category tiles */

.site-home-categories .category {
  padding: 20px var(--widget-padding);
  transition: transform 0.18s ease, color 0.16s ease, box-shadow 0.22s ease;
}

.site-home-categories .category:hover {
  transform: translateY(-3px);
  color: var(--pk-magenta-lo);
  box-shadow: var(--pk-glow-violet);
}

/* --------------------------------------------------------------- widgets */

.site-widget {
  padding: 18px var(--widget-padding);
  overflow: hidden;
}

.site-widget .title,
.site-widget h3 {
  font-family: Sora, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pk-pearl-mute);
}

.site-sale-banner {
  border-radius: var(--radius-pill);
  font-weight: 700;
  box-shadow: var(--pk-glow-magenta);
}

/* ---------------------------------------------------------- forms & misc */

input[type="text"],
input[type="number"],
input[type="email"],
select,
textarea {
  border-radius: var(--radius-sm);
  border: 1px solid var(--pk-line-strong);
  background: rgb(7 6 26 / 60%);
  color: var(--pk-pearl);
}

input::placeholder, textarea::placeholder { color: var(--pk-pearl-mute); }

a { color: var(--pk-magenta-lo); }
a:hover { color: var(--pk-pearl); }

hr { border-color: var(--pk-line); }

.store-text,
.text-content {
  padding: clamp(18px, 3vw, 28px);
  line-height: 1.65;
  color: var(--pk-pearl-dim);
}

.store-text h1, .store-text h2, .store-text h3,
.text-content h1, .text-content h2, .text-content h3 { color: var(--pk-pearl); }

/* ----------------------------------------------------------- scrollbars */

* {
  scrollbar-color: var(--pk-violet) transparent;
  scrollbar-width: thin;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb {
  border-radius: var(--radius-pill);
  background: linear-gradient(var(--pk-magenta), var(--pk-violet));
  border: 2px solid var(--pk-void);
}

/* ------------------------------------------------------------- motion */

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

  .store-product:hover,
  .btn-primary:hover,
  .site-home-categories .category:hover { transform: none; }
}

/* --------------------------------------------------------------- mobile */

@media (max-width: 720px) {
  :root { --widget-padding: 16px; }

  .pk-amount { font-size: 1.7rem; }
  .pk-orb { width: 64px; height: 64px; }
  .pk-orb.is-lg { width: 76px; height: 76px; }
  .pk-section-head { margin: 22px 0 12px; }
}

/* ------------------------------------------------- grids & page furniture
   Own grid class rather than Exo's .store-products-: the
   Headless API reports display_type "grid", but shared.css only ships
   .store-products-list and .store-products-images. Depending on that value
   would risk an unstyled grid. */

.pk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
  gap: 22px;
  align-items: stretch;
}

.pk-grid-subs {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  max-width: 760px;
  margin-inline: auto;
  gap: 24px;
}

/* pearl + rank cards are centred compositions */
.pk-grid .store-product {
  display: flex;
  flex-direction: column;
  text-align: center;
  padding-top: 26px;
}

.pk-grid .store-product .product-title { margin-block: 4px 2px; }

/* push the actions to the bottom so cards of unequal height stay aligned */
.pk-grid .store-product .product-actions {
  margin-top: auto;
  display: grid;
  gap: 8px;
}

.pk-grid-subs .store-product .pk-perks { text-align: left; }

.pk-orb-link {
  display: block;
  line-height: 0;
}

.pk-hero-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}

.pk-hero-actions .btn-primary,
.pk-hero-actions .btn-secondary {
  min-width: 170px;
  height: var(--btn-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 22px;
}

.pk-trust {
  display: flex;
  justify-content: center;
  gap: 10px 26px;
  flex-wrap: wrap;
  margin-bottom: 26px;
  font-size: 0.82rem;
  color: var(--pk-pearl-mute);
}

.pk-trust span {
  position: relative;
  padding-left: 18px;
}

.pk-trust span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: conic-gradient(from 210deg, var(--pk-pearl-dim), var(--pk-magenta-lo), var(--pk-aqua), var(--pk-pearl-dim));
}

.pk-fineprint {
  margin: 20px 0 0;
  text-align: center;
  font-size: 0.8rem;
  color: var(--pk-pearl-mute);
}

.no-products {
  padding: 36px var(--widget-padding);
  text-align: center;
  color: var(--pk-pearl-mute);
}

.category-description {
  margin-bottom: 18px;
}

@media (max-width: 720px) {
  .pk-grid { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 14px; }
  .pk-grid .store-product { padding: 18px 12px; }
  .pk-grid-subs { grid-template-columns: 1fr; }
}

/* --------------------------------------------------- specificity patches
   `.store-product .product-title` is 0-2-0 and would beat a bare `.pk-amount`
   (0-1-0), shrinking the pearl figure back to the generic card-title size.
   And the gradient lives on the heading while the text sits in the `a` inside
   it, so the anchor's own colour would paint over the clipped background.
   Both are fixed here, after the rules they override. */

.store-product .product-title.pk-amount {
  font-size: 2rem;
  line-height: 1.05;
  margin-block: 4px 2px;
}

.store-product .product-title.pk-amount a,
.store-product .product-title.pk-amount a:hover {
  background: var(--pk-iridescent);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

@media (max-width: 720px) {
  .store-product .product-title.pk-amount { font-size: 1.7rem; }
}

/* one-time bundle note under the rate line */
.pk-once {
  display: block;
  margin-top: 3px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pk-aqua);
}

/* ---------------------------------------------------------- content column
   .site-content-widgets is `grid-template-columns: 1fr var(--sidebar-width)`.
   A grid item defaults to min-width:auto, so a wide product grid inside it
   refuses to shrink and overflows the viewport. min-width:0 lets it fit. */

.pk-main {
  min-width: 0;
}

/* Heading and its one-line description stack at the left of the column.
   The earlier space-between pushed the description to the far right and left
   a dead gap across the middle. */
.pk-section-head {
  display: block;
  margin: 0 0 18px;
}

.pk-section-head h2 {
  margin: 0 0 6px;
}

.pk-section-head p {
  margin: 0;
  max-width: 62ch;
}

/* ===========================================================================
   Pearl tiers as horizontal rows
   ---------------------------------------------------------------------------
   A wrapping 3-column grid left an orphan card on its own row, which read as
   broken. One tier per full-width row removes that entirely and lets the
   price ladder be compared top to bottom.
   =========================================================================== */

.pk-grid:not(.pk-grid-subs) {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.store-product.pk-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 20px;
  padding: 16px 22px;
  text-align: left;
}

.pk-row-orb {
  display: block;
  line-height: 0;
}

/* The sprite is a 16x16 pixel-art icon. Nearest-neighbour upscaling keeps it
   crisp instead of smearing it, and matches the game it comes from. */
.pk-orb-img {
  display: block;
  width: 56px;
  height: 56px;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 14px rgb(255 79 163 / 55%))
          drop-shadow(0 0 26px rgb(139 92 246 / 40%));
  transition: transform 0.18s ease;
}

.store-product:hover .pk-orb-img {
  transform: scale(1.07) rotate(-4deg);
}

.pk-orb-img.is-lg {
  width: 84px;
  height: 84px;
  margin: 2px auto 14px;
}

.pk-row-main {
  min-width: 0;
}

/* In a row the figure and its unit sit side by side on one baseline. */
.store-product.pk-row .product-title.pk-amount {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  font-size: 1.7rem;
  text-align: left;
}

.store-product.pk-row .pk-amount .pk-unit {
  display: inline;
  font-size: 0.72rem;
}

.store-product.pk-row .pk-rate {
  margin: 2px 0 0;
  text-align: left;
}

.store-product.pk-row .pk-once {
  display: inline;
  margin-left: 8px;
}

.pk-row-badge {
  display: flex;
  justify-content: flex-end;
}

/* Inside a row the badge is a normal inline chip, not pinned to the corner. */
.store-product.pk-row .pk-badge {
  position: static;
  white-space: nowrap;
}

/* Price and buttons sit together at the right end of the row. */
.pk-grid:not(.pk-grid-subs) .store-product .product-actions {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: flex-end;
}

.pk-grid:not(.pk-grid-subs) .store-product .price {
  margin: 0;
  white-space: nowrap;
}

.pk-grid:not(.pk-grid-subs) .store-product .product-actions .wide {
  width: auto;
  min-width: 150px;
}

/* ------------------------------------------------------------ row, mobile */

@media (max-width: 760px) {
  .store-product.pk-row {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "orb main"
      "badge badge"
      "actions actions";
    gap: 10px 14px;
    padding: 14px 16px;
  }

  .pk-row-orb     { grid-area: orb; }
  .pk-row-main    { grid-area: main; }
  .pk-row-badge   { grid-area: badge; justify-content: flex-start; }

  .pk-grid:not(.pk-grid-subs) .store-product .product-actions {
    grid-area: actions;
    justify-content: space-between;
    width: 100%;
  }

  .pk-orb-img { width: 44px; height: 44px; }

  .store-product.pk-row .product-title.pk-amount { font-size: 1.4rem; }
}

/* ------------------------------------------------- row column alignment
   The badge column was `auto`, so its width changed with the badge text
   ("+4% Bonus" vs none) and shoved the price/button column left and right
   from row to row. Fixed tracks keep every row's price on the same x. */

.store-product.pk-row {
  grid-template-columns: auto minmax(0, 1fr) 120px 280px;
}

.pk-grid:not(.pk-grid-subs) .store-product .product-actions {
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 16px;
}

.pk-grid:not(.pk-grid-subs) .store-product .price {
  flex: 0 0 auto;
  font-size: 1rem;
}

.pk-grid:not(.pk-grid-subs) .store-product .product-actions .wide,
.pk-grid:not(.pk-grid-subs) .store-product .product-actions .half {
  flex: 0 0 auto;
  width: auto;
  min-width: 148px;
  height: var(--btn-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 1100px) {
  .store-product.pk-row {
    grid-template-columns: auto minmax(0, 1fr) 110px auto;
  }
  .pk-grid:not(.pk-grid-subs) .store-product .product-actions .wide {
    min-width: 128px;
  }
}

/* ===========================================================================
   FIX: never let author `display` resurrect a [hidden] element.
   ---------------------------------------------------------------------------
   Exo's package-actions.twig hides the quantity stepper and the "Added to
   Basket" button with the HTML `hidden` attribute, which relies on the UA
   stylesheet's `display: none`. Any author rule that sets `display` on those
   same elements wins over it and makes them appear. Setting display on
   `.wide` did exactly that: the stepper showed up, the row overflowed, and
   the price and button were clipped.

   This guard must stay. main.js toggles `hidden` at runtime to show the
   stepper once an item is in the basket, so the behaviour depends on it.
   =========================================================================== */

[hidden] {
  display: none !important;
}

/* Let the actions column size to its content again — the fixed 280px track
   could not hold price + button once the stepper was (wrongly) visible, and
   is unnecessary now that only the badge track needs pinning for alignment. */
.store-product.pk-row {
  grid-template-columns: auto minmax(0, 1fr) 120px auto;
}

.pk-grid:not(.pk-grid-subs) .store-product .product-actions .wide,
.pk-grid:not(.pk-grid-subs) .store-product .product-actions .half {
  min-width: 150px;
  padding-inline: 20px;
}

/* FIX: the price element inherits a full-width box from shared.css. Inside a
   right-aligned flex row that box (234px) plus the button (150px) exceeded the
   track, so the overflow spilled left of the container and was clipped by
   overflow:hidden — the price simply vanished. Let it size to its text. */

.pk-grid:not(.pk-grid-subs) .store-product .price {
  width: auto;
  max-width: none;
  flex: 0 0 auto;
  margin: 0;
  font-size: 1.05rem;
}

.store-product.pk-row {
  grid-template-columns: auto minmax(0, 1fr) 120px minmax(240px, auto);
}

/* Rank cards are centred compositions; the Subscribe button should sit on the
   same axis as the price above it rather than hugging the left edge. */

.pk-grid-subs .store-product .product-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.pk-grid-subs .store-product .product-actions .wide,
.pk-grid-subs .store-product .product-actions .half {
  min-width: 180px;
  height: var(--btn-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* keep the [hidden] guard winning over the rule above */
.pk-grid-subs .store-product .product-actions [hidden] {
  display: none !important;
}

/* ===========================================================================
   Pearl tiers side by side on ONE horizontal row
   ---------------------------------------------------------------------------
   Replaces the stacked-rows layout. Seven compact cards share the full content
   width (the Pearls page drops the sidebar to get it). Below ~1150px the strip
   scrolls horizontally rather than squeezing the cards past readability.
   Rules here come after the .pk-row block and override it.
   =========================================================================== */

.pk-grid:not(.pk-grid-subs) {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 12px;
  overflow-x: auto;
  overflow-y: visible;
  padding-bottom: 6px;
  scrollbar-width: thin;
}

.store-product.pk-tier {
  flex: 1 1 0;
  min-width: 148px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
  padding: 18px 10px 14px;
  position: relative;
  overflow: visible;
}

.store-product.pk-tier .pk-orb-link {
  display: block;
  line-height: 0;
  margin-bottom: 6px;
}

.store-product.pk-tier .pk-orb-img {
  width: 42px;
  height: 42px;
}

.store-product.pk-tier .product-title.pk-amount {
  display: block;
  margin: 0;
  font-size: 1.28rem;
  line-height: 1.1;
  text-align: center;
}

.store-product.pk-tier .pk-amount .pk-unit {
  display: block;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
}

.store-product.pk-tier .pk-rate {
  margin: 4px 0 10px;
  font-size: 0.72rem;
  text-align: center;
}

.store-product.pk-tier .pk-once {
  display: block;
  margin: 2px 0 0;
  font-size: 0.6rem;
}

/* badge back in the corner, compact */
.store-product.pk-tier .pk-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 3px 7px;
  font-size: 0.6rem;
  letter-spacing: 0.04em;
}

/* price above a full-width button, pinned to the card's bottom */
.pk-grid:not(.pk-grid-subs) .store-product.pk-tier .product-actions {
  margin-top: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  flex-wrap: nowrap;
}

.pk-grid:not(.pk-grid-subs) .store-product.pk-tier .price {
  width: 100%;
  margin: 0;
  text-align: center;
  font-size: 1rem;
}

.pk-grid:not(.pk-grid-subs) .store-product.pk-tier .product-actions .wide,
.pk-grid:not(.pk-grid-subs) .store-product.pk-tier .product-actions .half {
  width: 100%;
  min-width: 0;
  padding-inline: 8px;
  font-size: 0.82rem;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* the [hidden] guard must keep beating the display rules above */
.pk-grid .store-product [hidden] {
  display: none !important;
}

@media (max-width: 1150px) {
  .store-product.pk-tier { flex: 0 0 150px; }
}

@media (max-width: 760px) {
  .store-product.pk-tier { flex: 0 0 136px; padding: 14px 8px 12px; }
  .store-product.pk-tier .product-title.pk-amount { font-size: 1.1rem; }
}

/* ===========================================================================
   Home activity band — goal progress, top donator, recent payments
   ---------------------------------------------------------------------------
   Exo's sidebar modules rendered horizontally on the landing page. Which ones
   appear, and in what order, is set at creator.tebex.io/sidebar; the template
   only receives them as one pre-rendered blob.
   =========================================================================== */

.pk-modules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin: 0 auto 26px;
  padding: 0 var(--content-padding);
  width: 100%;
  max-width: var(--content-width);
}

/* shared.css stacks widgets with a top margin; in a grid that just dents the
   alignment, so it is cleared here. */
.pk-modules .widget,
.pk-modules .widget + .widget {
  margin: 0;
  position: relative;
  border-radius: var(--radius);
  border: 1px solid var(--pk-line);
  background:
    linear-gradient(165deg, rgb(246 243 255 / 7%), rgb(246 243 255 / 2%)),
    var(--pk-surface);
  box-shadow:
    0 1px 0 rgb(246 243 255 / 10%) inset,
    0 18px 40px -24px rgb(7 6 26 / 90%);
  padding: 18px var(--widget-padding);
  overflow: hidden;
}

.pk-modules .widget::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: var(--pk-iridescent);
  opacity: 0.55;
  pointer-events: none;
}

.pk-modules .widget-title {
  font-family: Sora, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pk-pearl-mute);
  margin-bottom: 12px;
}

/* --- goal progress ------------------------------------------------------- */

.pk-modules .widget-goal .widget-content,
.pk-modules .widget-community-goal .widget-content {
  color: var(--pk-pearl-dim);
}

.pk-modules .progress {
  height: 10px;
  border-radius: var(--radius-pill);
  background: rgb(7 6 26 / 70%);
  border: 1px solid var(--pk-line);
  overflow: hidden;
  margin: 10px 0 8px;
}

.pk-modules .progress-bar {
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(100deg, var(--pk-magenta), var(--pk-violet), var(--pk-aqua));
  background-size: 220% 100%;
  box-shadow: 0 0 16px rgb(255 79 163 / 55%);
  transition: width 0.4s ease;
}

/* the raised / target figures are the point of the module — make them read */
.pk-modules .widget-goal .widget-content p,
.pk-modules .widget-community-goal .widget-content p {
  margin: 0;
  font-family: Sora, sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--pk-pearl);
}

/* --- top donator --------------------------------------------------------- */

.pk-modules .widget-top-donator .widget-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pk-modules .widget-top-donator .avatar {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-sm);
  image-rendering: pixelated;
  box-shadow: var(--pk-glow-violet);
  flex: 0 0 auto;
}

.pk-modules .widget-top-donator .username {
  font-family: Sora, sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--pk-pearl);
}

.pk-modules .widget-top-donator .empty,
.pk-modules .widget-recent .empty {
  color: var(--pk-pearl-mute);
  font-size: 0.88rem;
}

/* --- recent payments ----------------------------------------------------- */

.pk-modules .widget-recent .purchase {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--pk-line);
}

.pk-modules .widget-recent .purchase:last-child {
  border-bottom: 0;
}

.pk-modules .widget-recent .avatar {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  image-rendering: pixelated;
  flex: 0 0 auto;
}

.pk-modules .widget-recent .username {
  font-weight: 600;
  color: var(--pk-pearl);
}

.pk-modules .widget-recent .price {
  color: var(--pk-aqua);
  font-weight: 700;
}

.pk-modules .widget-recent time,
.pk-modules .widget-recent .sep {
  color: var(--pk-pearl-mute);
  font-size: 0.8rem;
}

@media (max-width: 760px) {
  .pk-modules { grid-template-columns: 1fr; gap: 12px; }
}

/* Category tiles: Exo reserves a 130px square for a default package icon, which
   reads as a large empty box when a category has no image of its own. These
   tiles only need to be a signpost, so the placeholder is scaled right down and
   the name carries the tile. A real uploaded category image still fills it. */

.site-home-categories {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-bottom: 26px;
}

.site-home-categories .category {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 190px;
  padding: 18px 26px;
  font-family: Sora, sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--pk-pearl);
}

.site-home-categories .category .image-default {
  width: 44px;
  aspect-ratio: 1;
  opacity: 0.6;
}

.site-home-categories .category .image-default::before {
  width: 40px;
  height: 40px;
}

.site-home-categories .category .image {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

/* Each module sizes to its own content instead of stretching to match the
   tallest card in the row, which left Goal and Top Donator with dead space. */
.pk-modules {
  align-items: start;
}

/* Exo gives each home category tile `flex: 0 1 100%`, so they stack full width
   however the container is laid out. Size them to content instead. */
.site-home-categories .category {
  flex: 0 1 auto;
}

/* FIX: the sheen line is 1px tall, so border-radius cannot curve it — it ran
   straight across the full width while the card body curved away beneath,
   reading as a detached bar floating above each card. Inset it past the corner
   radius and fade both ends so it sits on the card instead of above it. */

.site-header-inner::before,
.store-product::before,
.site-widget::before,
.pk-modules .widget::before {
  left: 18px;
  right: 18px;
  width: auto;
  border-radius: 0;
  background: linear-gradient(90deg,
    transparent,
    var(--pk-magenta-lo) 22%,
    var(--pk-aqua) 50%,
    var(--pk-violet-lo) 78%,
    transparent);
  opacity: 0.75;
}