/* ============================================================
   PITAGORA STORE — Tebex Theme (CSS)
   Paste into: Webstore > Appearance > Themes > Create Theme
   Remember to ACTIVATE the theme after creating it.
   Pairs with the Pitagora template files.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Barlow+Condensed:wght@500;600;700&family=Barlow:wght@400;500;600&display=swap');

:root {
  --pg-bg:        #0B0A0F;
  --pg-panel:     #14121B;
  --pg-panel-2:   #191527;
  --pg-line:      #2A2436;
  --pg-line-2:    #3A3149;
  --pg-text:      #F2EEF7;
  --pg-muted:     #A79FBA;
  --pg-dim:       #7A7290;
  --pg-faint:     #4E4860;
  --pg-purple:    #7B3FE4;
  --pg-purple-2:  #9B5CFF;
  --pg-purple-3:  #C4A6FF;
  --pg-orange:    #FF6A1A;
  --pg-orange-2:  #FF8A48;
  --pg-pink:      #FF2E88;
  --pg-ink:       #140A02;
  --pg-max:       1360px;
  --pg-display:   'Archivo Black', 'Arial Black', sans-serif;
  --pg-cond:      'Barlow Condensed', 'Arial Narrow', sans-serif;
  --pg-body:      'Barlow', system-ui, sans-serif;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--pg-bg);
  background-image:
    radial-gradient(900px 480px at 12% -8%, rgba(123,63,228,.32), transparent 65%),
    radial-gradient(760px 420px at 92% 4%, rgba(255,106,26,.20), transparent 62%);
  background-attachment: fixed;
  color: var(--pg-text);
  font-family: var(--pg-body);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--pg-orange); text-decoration: none; }
a:hover { color: var(--pg-orange-2); }
img { max-width: 100%; display: block; }
::selection { background: var(--pg-purple); color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--pg-bg); }
::-webkit-scrollbar-thumb { background: var(--pg-line); border: 2px solid var(--pg-bg); }

.pg-wrap { max-width: var(--pg-max); margin: 0 auto; padding: 0 28px; }

/* ---------- buttons ---------- */
.pg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; cursor: pointer; text-align: center;
  font-family: var(--pg-cond); font-weight: 700; font-size: 15px;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 12px 20px; transition: background .15s, color .15s, border-color .15s;
}
.pg-btn--primary { background: var(--pg-orange); color: var(--pg-ink); }
.pg-btn--primary:hover { background: var(--pg-orange-2); color: var(--pg-ink); }
.pg-btn--purple { background: var(--pg-purple); color: #fff; }
.pg-btn--purple:hover { background: #8F55F5; color: #fff; }
.pg-btn--ghost { background: transparent; border: 1px solid var(--pg-line-2); color: var(--pg-text); }
.pg-btn--ghost:hover { border-color: var(--pg-orange); color: var(--pg-orange); }
.pg-btn--lg { padding: 16px 26px; font-size: 17px; letter-spacing: .16em; }
.pg-btn--block { width: 100%; }

/* ---------- ticker ---------- */
.pg-ticker { display: flex; overflow: hidden; background: var(--pg-orange); color: var(--pg-ink); border-bottom: 2px solid var(--pg-bg); }
.pg-ticker__run {
  display: flex; flex: none; gap: 40px; padding: 7px 20px; white-space: nowrap;
  font-family: var(--pg-cond); font-weight: 700; font-size: 14px;
  letter-spacing: .16em; text-transform: uppercase;
  animation: pgTicker 26s linear infinite;
}
@keyframes pgTicker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes pgPulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

/* ---------- header ---------- */
.pg-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(11,10,15,.86); backdrop-filter: blur(14px);
  border-bottom: 1px solid #241E31;
}
.pg-header__inner {
  max-width: var(--pg-max); margin: 0 auto; padding: 12px 28px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px;
}
.pg-brand { display: flex; align-items: center; gap: 12px; flex: none; }
.pg-brand img { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 0 12px rgba(255,46,136,.45)); }
.pg-brand__txt { display: flex; flex-direction: column; line-height: 1; }
.pg-brand__name { font-family: var(--pg-display); font-size: 18px; letter-spacing: -.01em; color: var(--pg-text); }
.pg-brand__sub { font-family: var(--pg-cond); font-size: 12px; letter-spacing: .34em; color: var(--pg-orange); font-weight: 700; }

.pg-nav { display: flex; flex-wrap: wrap; gap: 2px; flex: 1 1 260px; }
.pg-nav a {
  padding: 10px 13px; font-family: var(--pg-cond); font-weight: 700; font-size: 15px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--pg-muted);
  border-bottom: 2px solid transparent;
}
.pg-nav a:hover { color: #fff; }
.pg-nav a.is-active { color: var(--pg-orange); border-bottom-color: var(--pg-orange); }

.pg-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; flex: 0 1 auto; }
.pg-search { display: flex; align-items: center; gap: 8px; background: var(--pg-panel); border: 1px solid var(--pg-line); padding: 8px 12px; width: 210px; }
.pg-search:focus-within { border-color: var(--pg-purple); }
.pg-search input { background: transparent; border: 0; outline: none; color: var(--pg-text); font-family: var(--pg-body); font-size: 14px; width: 100%; }
.pg-search span { color: #6E6680; font-size: 14px; }

.pg-live { width: 7px; height: 7px; background: #3BE07A; border-radius: 50%; animation: pgPulse 1.6s ease-in-out infinite; }
.pg-count { background: var(--pg-orange); color: var(--pg-ink); min-width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; padding: 0 5px; }

/* ---------- hero ---------- */
.pg-hero { position: relative; max-width: var(--pg-max); margin: 0 auto; padding: 64px 28px 40px; }
.pg-hero::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, rgba(255,106,26,.055) 0 22px, transparent 22px 44px); pointer-events: none; }
.pg-hero__grid { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; }
.pg-flag { display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--pg-purple); padding: 6px 12px; font-family: var(--pg-cond); font-weight: 700; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--pg-purple-3); margin-bottom: 22px; }
.pg-flag i { width: 7px; height: 7px; background: var(--pg-orange); animation: pgPulse 1.6s ease-in-out infinite; }
.pg-hero h1 { font-family: var(--pg-display); font-size: 76px; line-height: .92; letter-spacing: -.025em; margin: 0 0 20px; text-transform: uppercase; }
.pg-hero h1 .o { color: var(--pg-orange); }
.pg-hero h1 .p { color: var(--pg-purple-2); }
.pg-hero p { font-size: 18px; line-height: 1.55; color: var(--pg-muted); max-width: 480px; margin: 0 0 30px; text-wrap: pretty; }
.pg-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.pg-stats { display: flex; flex-wrap: wrap; gap: 34px; margin-top: 38px; padding-top: 26px; border-top: 1px solid #241E31; }
.pg-stat b { display: block; font-family: var(--pg-display); font-size: 26px; font-weight: 400; }
.pg-stat span { font-family: var(--pg-cond); font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--pg-dim); }
.pg-hero__art { position: relative; aspect-ratio: 16 / 9; background: var(--pg-panel); border: 1px solid var(--pg-line); overflow: hidden; }
.pg-hero__art img { width: 100%; height: 100%; object-fit: cover; }
.pg-hero__tag { position: absolute; left: 0; bottom: 0; background: var(--pg-purple); padding: 9px 16px; font-family: var(--pg-cond); font-weight: 700; font-size: 14px; letter-spacing: .16em; text-transform: uppercase; }

/* ---------- section headings ---------- */
.pg-section { max-width: var(--pg-max); margin: 0 auto; padding: 44px 28px 0; }
.pg-h2 { font-family: var(--pg-display); font-size: 32px; text-transform: uppercase; margin: 0; letter-spacing: -.015em; }
.pg-h2row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.pg-h2row:has(> .pg-kicker:only-child) { margin-bottom: 12px; }
.pg-kicker { font-family: var(--pg-cond); font-size: 15px; letter-spacing: .18em; text-transform: uppercase; color: var(--pg-orange); }

/* ---------- category tiles ---------- */
.pg-tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.pg-tile { position: relative; background: var(--pg-panel); border: 1px solid var(--pg-line); padding: 22px 14px 18px; overflow: hidden; display: block; }
.pg-tile:hover { border-color: var(--pg-purple); background: var(--pg-panel-2); }
.pg-tile::after { content: ''; position: absolute; right: -14px; top: -14px; width: 54px; height: 54px; background: rgba(123,63,228,.30); transform: rotate(45deg); }
.pg-tile b { position: relative; font-family: var(--pg-display); font-size: 17px; font-weight: 400; text-transform: uppercase; color: var(--pg-text); }
.pg-tile span { display: block; font-family: var(--pg-cond); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--pg-dim); margin-top: 5px; }

/* ---------- product grid ---------- */
.pg-grid { display: grid; gap: 16px; grid-template-columns: repeat(4, 1fr); }
.pg-grid--3 { grid-template-columns: repeat(3, 1fr); }
.pg-card { display: flex; flex-direction: column; background: var(--pg-panel); border: 1px solid var(--pg-line); }
.pg-card:hover { border-color: var(--pg-purple); }
.pg-card__media { position: relative; aspect-ratio: 16 / 9; background: repeating-linear-gradient(-45deg, var(--pg-panel-2) 0 20px, var(--pg-panel) 20px 40px); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pg-card__media img { width: 100%; height: 100%; object-fit: cover; }
.pg-card__media .pg-ph { font-family: var(--pg-cond); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--pg-faint); }
.pg-badge { position: absolute; left: 12px; top: 12px; background: var(--pg-pink); color: #150009; padding: 5px 10px; font-family: var(--pg-cond); font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.pg-card__body { display: flex; flex-direction: column; gap: 10px; padding: 14px 15px 15px; flex: 1; }
.pg-card__cat { font-family: var(--pg-cond); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--pg-purple-2); }
.pg-card__name { font-family: var(--pg-display); font-size: 16px; text-transform: uppercase; color: var(--pg-text); flex: 1; }
.pg-card__name:hover { color: var(--pg-orange); }
.pg-card__foot { display: flex; align-items: center; gap: 10px; }
.pg-price { font-family: var(--pg-display); font-size: 19px; color: var(--pg-orange); flex: 1; }
.pg-was { font-size: 15px; color: #5D5670; text-decoration: line-through; }
.pg-card .pg-btn { padding: 9px 14px; font-size: 13px; }
.pg-card .pg-btn--purple:hover { background: var(--pg-orange); color: var(--pg-ink); }

/* ---------- category page ---------- */
.pg-crumb { font-family: var(--pg-cond); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--pg-dim); margin-bottom: 10px; }
.pg-pagehead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; border-bottom: 3px solid var(--pg-orange); padding-bottom: 16px; }
.pg-pagehead h1 { font-family: var(--pg-display); font-size: 52px; text-transform: uppercase; margin: 0; letter-spacing: -.02em; }
.pg-pagehead span { font-family: var(--pg-cond); font-size: 15px; letter-spacing: .16em; text-transform: uppercase; color: var(--pg-muted); padding-bottom: 8px; }

.pg-layout { max-width: var(--pg-max); margin: 0 auto; padding: 26px 28px 0; display: grid; grid-template-columns: 240px 1fr; gap: 28px; align-items: start; }
.pg-side { display: flex; flex-direction: column; gap: 22px; position: sticky; top: 92px; background: var(--pg-panel); border: 1px solid var(--pg-line); padding: 20px; }
.pg-side h3 { font-family: var(--pg-display); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--pg-orange); margin: 0 0 12px; }
.pg-side hr { border: 0; height: 1px; background: var(--pg-line); margin: 0; }
.pg-check { display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: 15px; color: var(--pg-muted); padding: 3px 0; }
.pg-check:hover { color: #fff; }
.pg-check input { accent-color: var(--pg-purple); width: 15px; height: 15px; }
.pg-check span { flex: 1; }
.pg-check em { font-style: normal; font-size: 13px; color: #5D5670; }
.pg-range { width: 100%; accent-color: var(--pg-orange); }
.pg-rangelbl { display: flex; justify-content: space-between; font-family: var(--pg-cond); font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--pg-muted); margin-top: 6px; }
.pg-rangelbl b { color: var(--pg-orange); font-weight: 700; }
.pg-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.pg-chip { background: transparent; border: 1px solid var(--pg-line-2); color: var(--pg-muted); padding: 6px 11px; cursor: pointer; font-family: var(--pg-cond); font-weight: 600; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.pg-chip:hover { border-color: var(--pg-purple); }
.pg-chip.is-on { background: var(--pg-purple); border-color: var(--pg-purple); color: #fff; }

.pg-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; background: var(--pg-panel); border: 1px solid var(--pg-line); padding: 12px 16px; margin-bottom: 16px; }
.pg-toolbar label { font-family: var(--pg-cond); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--pg-dim); }
.pg-toolbar select { background: var(--pg-bg); border: 1px solid var(--pg-line); color: var(--pg-text); padding: 8px 10px; font-family: var(--pg-body); font-size: 14px; cursor: pointer; }
.pg-empty { border: 1px dashed var(--pg-line-2); padding: 60px 20px; text-align: center; }
.pg-empty b { display: block; font-family: var(--pg-display); font-size: 20px; font-weight: 400; text-transform: uppercase; margin-bottom: 8px; }
.pg-empty p { color: var(--pg-dim); margin: 0 0 16px; }
.pg-more { display: flex; justify-content: center; padding: 30px 0 0; }

/* ---------- package page ---------- */
.pg-pkg { max-width: var(--pg-max); margin: 0 auto; padding: 30px 28px 0; }
.pg-pkg__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 34px; align-items: start; }
.pg-pkg__media { position: relative; aspect-ratio: 16 / 9; background: repeating-linear-gradient(-45deg, var(--pg-panel-2) 0 26px, var(--pg-panel) 26px 52px); border: 1px solid var(--pg-line); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pg-pkg__media img { width: 100%; height: 100%; object-fit: cover; }
.pg-pkg h1 { font-family: var(--pg-display); font-size: 44px; line-height: 1; text-transform: uppercase; margin: 8px 0 14px; letter-spacing: -.02em; }
.pg-pkg__desc { font-size: 17px; line-height: 1.6; color: var(--pg-muted); margin: 0 0 22px; text-wrap: pretty; }
.pg-pkg__desc img { margin: 14px 0; }
.pg-pkg__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin-bottom: 20px; }
.pg-pkg__price .pg-price { font-size: 44px; flex: none; }
.pg-save { background: var(--pg-pink); color: #150009; padding: 4px 9px; font-family: var(--pg-cond); font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.pg-pkg__buy { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.pg-pkg__buy .pg-btn { flex: 1; }
.pg-specs { border: 1px solid var(--pg-line); background: var(--pg-panel); }
.pg-specs div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #211B2D; font-size: 15px; }
.pg-specs div:last-child { border-bottom: 0; }
.pg-specs dt, .pg-specs span:first-child { font-family: var(--pg-cond); font-size: 14px; letter-spacing: .16em; text-transform: uppercase; color: var(--pg-dim); }
.pg-specs span:last-child { color: var(--pg-text); font-weight: 500; }
.pg-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 12px; }
.pg-thumbs > * { aspect-ratio: 16 / 9; background: repeating-linear-gradient(-45deg, var(--pg-panel-2) 0 16px, var(--pg-panel) 16px 32px); border: 1px solid var(--pg-line); overflow: hidden; }
.pg-thumbs > *:hover { border-color: var(--pg-purple); }

/* ---------- basket / checkout ---------- */
.pg-cart { max-width: 1100px; margin: 0 auto; padding: 40px 28px 0; }
.pg-cart h1 { font-family: var(--pg-display); font-size: 48px; text-transform: uppercase; margin: 0 0 6px; letter-spacing: -.02em; }
.pg-cart__sub { font-family: var(--pg-cond); font-size: 15px; letter-spacing: .18em; text-transform: uppercase; color: var(--pg-orange); margin-bottom: 26px; }
.pg-cart__grid { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
.pg-lines { display: flex; flex-direction: column; gap: 12px; }
.pg-line { display: grid; grid-template-columns: 116px 1fr auto; gap: 16px; align-items: center; background: var(--pg-panel); border: 1px solid var(--pg-line); padding: 14px; }
.pg-line__media { aspect-ratio: 16 / 9; background: repeating-linear-gradient(-45deg, var(--pg-panel-2) 0 16px, var(--pg-panel) 16px 32px); overflow: hidden; }
.pg-line__media img { width: 100%; height: 100%; object-fit: cover; }
.pg-line b { display: block; font-family: var(--pg-display); font-size: 18px; font-weight: 400; text-transform: uppercase; margin-top: 4px; }
.pg-line .pg-remove { display: inline-block; margin-top: 8px; font-family: var(--pg-cond); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--pg-dim); }
.pg-line .pg-remove:hover { color: var(--pg-pink); }
.pg-line__right { display: flex; align-items: center; gap: 14px; }
.pg-qty { display: flex; align-items: center; border: 1px solid var(--pg-line); }
.pg-qty a, .pg-qty button { background: var(--pg-bg); border: 0; width: 32px; height: 32px; cursor: pointer; color: var(--pg-text); font-size: 17px; display: flex; align-items: center; justify-content: center; }
.pg-qty a:hover, .pg-qty button:hover { background: var(--pg-purple); color: #fff; }
.pg-qty span { width: 34px; text-align: center; font-weight: 600; }

.pg-summary { background: var(--pg-panel); border: 1px solid var(--pg-line); padding: 20px; position: sticky; top: 92px; }
.pg-summary h3 { font-family: var(--pg-display); font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: var(--pg-orange); margin: 0 0 16px; }
.pg-summary__rows { display: flex; flex-direction: column; gap: 11px; font-size: 15px; color: var(--pg-muted); }
.pg-summary__rows div { display: flex; justify-content: space-between; }
.pg-summary__rows b { color: var(--pg-text); font-weight: 500; }
.pg-summary hr { border: 0; height: 1px; background: var(--pg-line); margin: 16px 0; }
.pg-total { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; }
.pg-total span { font-family: var(--pg-cond); font-size: 16px; letter-spacing: .18em; text-transform: uppercase; }
.pg-total b { font-family: var(--pg-display); font-size: 30px; color: var(--pg-orange); font-weight: 400; }
.pg-coupon { display: flex; gap: 8px; margin-bottom: 14px; }
.pg-coupon input { flex: 1; background: var(--pg-bg); border: 1px solid var(--pg-line); color: var(--pg-text); padding: 11px; font-family: var(--pg-body); font-size: 14px; outline: none; }
.pg-coupon button { background: #241E31; border: 0; padding: 11px 15px; cursor: pointer; font-family: var(--pg-cond); font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--pg-purple-3); }
.pg-coupon button:hover { background: var(--pg-purple); color: #fff; }
.pg-secure { text-align: center; font-family: var(--pg-cond); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #5D5670; margin-top: 12px; }

/* ---------- footer ---------- */
.pg-footer { max-width: var(--pg-max); margin: 64px auto 0; padding: 28px; border-top: 1px solid #241E31; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.pg-footer img { width: 34px; height: 34px; object-fit: contain; opacity: .9; }
.pg-footer__left { display: flex; align-items: center; gap: 12px; }
.pg-footer__left span { font-family: var(--pg-cond); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: #5D5670; }
.pg-footer__links { display: flex; flex-wrap: wrap; gap: 22px; font-family: var(--pg-cond); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; }
.pg-footer__links a { color: var(--pg-dim); }
.pg-footer__links a:hover { color: var(--pg-orange); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .pg-tiles { grid-template-columns: repeat(3, 1fr); }
  .pg-grid { grid-template-columns: repeat(3, 1fr); }
  .pg-layout { grid-template-columns: 1fr; }
  .pg-side { position: static; }
  .pg-cart__grid { grid-template-columns: 1fr; }
  .pg-summary { position: static; }
}
@media (max-width: 860px) {
  .pg-hero__grid, .pg-pkg__grid { grid-template-columns: 1fr; }
  .pg-hero h1 { font-size: 52px; }
  .pg-pagehead h1 { font-size: 36px; }
  .pg-grid, .pg-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .pg-search { width: 100%; }
}
@media (max-width: 560px) {
  .pg-tiles { grid-template-columns: repeat(2, 1fr); }
  .pg-grid, .pg-grid--3 { grid-template-columns: 1fr; }
  .pg-line { grid-template-columns: 80px 1fr; }
  .pg-line__right { grid-column: 1 / -1; justify-content: space-between; }
  .pg-hero h1 { font-size: 40px; }
  .pg-cart h1 { font-size: 34px; }
}

/* homepage WYSIWYG block + alerts */
.pg-wysiwyg { background: var(--pg-panel); border: 1px solid var(--pg-line); padding: 24px 26px; color: var(--pg-muted); line-height: 1.6; }
.pg-wysiwyg h1, .pg-wysiwyg h2, .pg-wysiwyg h3 { font-family: var(--pg-display); text-transform: uppercase; color: var(--pg-text); }
.pg-wysiwyg img { max-width: 100%; height: auto; margin: 14px 0; }
.pg-wysiwyg a { color: var(--pg-orange); }
.pg-alert { border: 1px solid var(--pg-line); background: var(--pg-panel); padding: 14px 18px; font-family: var(--pg-cond); letter-spacing: .12em; text-transform: uppercase; }
.pg-alert--success { border-color: var(--pg-purple); color: var(--pg-purple-3); }
.pg-alert--danger  { border-color: var(--pg-pink); color: var(--pg-pink); }

/* ---------- package media gallery (1920x1080 shots) ---------- */
.pg-pkg__media { overflow: hidden; }
.pg-shot { display: none; width: 100%; height: 100%; object-fit: cover; border: 0; }
.pg-shot.is-on { display: block; }
iframe.pg-shot.is-on { display: block; }

.pg-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 10px; }
.pg-thumb {
  position: relative; aspect-ratio: 16 / 9; padding: 0; cursor: pointer;
  background: repeating-linear-gradient(-45deg, var(--pg-panel-2) 0 14px, var(--pg-panel) 14px 28px);
  border: 1px solid var(--pg-line); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.pg-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pg-thumb:hover { border-color: var(--pg-purple); }
.pg-thumb.is-on { border-color: var(--pg-orange); }
.pg-thumb.is-on::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 2px var(--pg-orange); }
.pg-thumb__play { color: var(--pg-orange); font-size: 18px; }

@media (max-width: 560px) { .pg-thumbs { grid-template-columns: repeat(4, 1fr); } }

/* ---------- latest drops rail ---------- */
.pg-rail {
  display: flex; gap: 16px; overflow-x: auto; padding-bottom: 14px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.pg-rail__item { flex: 0 0 300px; scroll-snap-align: start; }
.pg-rail::-webkit-scrollbar { height: 8px; }
.pg-rail::-webkit-scrollbar-track { background: var(--pg-panel); }
.pg-rail::-webkit-scrollbar-thumb { background: var(--pg-line-2); }
.pg-rail::-webkit-scrollbar-thumb:hover { background: var(--pg-purple); }

/* ---------- hero featured package ---------- */
a.pg-hero__art { display: block; text-decoration: none; }
a.pg-hero__art:hover { border-color: var(--pg-orange); }
.pg-hero__meta {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 30px 18px 14px;
  background: linear-gradient(to top, rgba(11,10,15,.94), transparent);
}
.pg-hero__meta b {
  font-family: var(--pg-display); font-size: 20px; font-weight: 400;
  text-transform: uppercase; color: var(--pg-text);
}
.pg-hero__meta span { font-family: var(--pg-display); font-size: 20px; color: var(--pg-orange); white-space: nowrap; }
.pg-hero__tag { z-index: 2; left: auto; bottom: auto; right: 0; top: 0; }

@media (max-width: 560px) { .pg-rail__item { flex-basis: 260px; } }

/* ---------- Discord / FiveM buttons ---------- */
.pg-btn--discord { background: #5865F2; color: #fff; }
.pg-btn--discord:hover { background: #6D78F5; color: #fff; }
.pg-btn--fivem { background: #F40552; color: #fff; }
.pg-btn--fivem:hover { background: #FF2E70; color: #fff; }
.pg-btn--fivem img { width: 24px; height: 24px; object-fit: contain; }
.pg-btn--discord svg, .pg-btn--fivem svg { flex: none; }
.pg-btn--icon { padding: 0; width: 44px; height: 44px; flex: none; }

/* ---------- Tebex modules block (recent payments etc.) ---------- */
.pg-modules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.pg-modules .module,
.pg-modules > div {
  background: var(--pg-panel); border: 1px solid var(--pg-line); padding: 18px 20px;
}
.pg-modules h1, .pg-modules h2, .pg-modules h3,
.pg-modules h4, .pg-modules h5, .pg-modules h6 {
  font-family: var(--pg-cond); font-weight: 700; font-size: 14px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--pg-orange);
  margin: 0 0 14px;
}
.pg-modules ul, .pg-modules ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pg-modules li { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pg-modules li h1, .pg-modules li h2, .pg-modules li h3,
.pg-modules li h4, .pg-modules li h5, .pg-modules li h6 {
  font-family: var(--pg-body); font-size: 14px; font-weight: 500;
  letter-spacing: 0; text-transform: none; color: var(--pg-text); margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pg-modules img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; }
.pg-modules p { color: var(--pg-muted); font-size: 14px; margin: 0 0 8px; }
.pg-modules strong, .pg-modules b { color: var(--pg-text); }
.pg-modules a { color: var(--pg-orange); }
.pg-modules a.btn, .pg-modules .btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--pg-orange); color: var(--pg-ink); border: 0; padding: 11px 18px;
  font-family: var(--pg-cond); font-weight: 700; font-size: 14px;
  letter-spacing: .14em; text-transform: uppercase; margin-top: 10px;
}
.pg-modules a.btn:hover, .pg-modules .btn:hover { background: var(--pg-orange-2); color: var(--pg-ink); }
.pg-modules .package-image img,
.pg-modules > div > a > img { width: 100%; height: auto; border-radius: 0; }
/* ---------- recent-payments marquee ---------- */
.pg-modules .pg-mod--recent {
  grid-column: 1 / -1;
  background: transparent;
  border: 0;
  padding: 0;
}
.pg-marquee { overflow: hidden; position: relative; }
.pg-marquee::before, .pg-marquee::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none;
}
.pg-marquee::before { left: 0; background: linear-gradient(90deg, var(--pg-bg) 15%, transparent); }
.pg-marquee::after { right: 0; background: linear-gradient(270deg, var(--pg-bg) 15%, transparent); }
.pg-marquee__track {
  display: flex; width: max-content; gap: 10px; padding: 4px 0;
  animation: pgMarquee 40s linear infinite;
}
.pg-marquee:hover .pg-marquee__track { animation-play-state: paused; }
@keyframes pgMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.pg-marquee__item {
  display: flex; align-items: center; gap: 11px; flex: none;
  background: linear-gradient(180deg, rgba(123,63,228,.10), rgba(20,18,27,.9));
  border: 1px solid #2E2640; border-radius: 999px;
  padding: 8px 18px 8px 8px;
  transition: border-color .18s, transform .18s;
}
.pg-marquee__item:hover { border-color: var(--pg-purple); transform: translateY(-2px); }
.pg-marquee__item img {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none;
  box-shadow: 0 0 0 2px var(--pg-bg), 0 0 0 3px rgba(123,63,228,.55);
}
.pg-marquee__item i {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 40% 35%, #3BE07A, #17663B);
  box-shadow: 0 0 0 2px var(--pg-bg), 0 0 0 3px rgba(59,224,122,.4);
}
.pg-marquee__item span { display: flex; flex-direction: column; line-height: 1.2; white-space: nowrap; }
.pg-marquee__item b {
  font-family: var(--pg-cond); font-weight: 700; font-size: 14px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--pg-text);
}
.pg-marquee__item em {
  font-style: normal; font-size: 13px; color: var(--pg-purple-3);
  max-width: 220px; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- login / auth card (built by pitagora.js) ---------- */
.pg-authwrap {
  min-height: 56vh; display: flex; align-items: center; justify-content: center;
  padding: 60px 24px;
}
.pg-authcard {
  width: 100%; max-width: 480px;
  background: var(--pg-panel); border: 1px solid var(--pg-line);
  padding: 36px 32px; text-align: center;
  display: flex; flex-direction: column; gap: 14px;
}
.pg-authcard h1, .pg-authcard h2, .pg-authcard h3 {
  font-family: var(--pg-display); font-size: 26px; line-height: 1.05;
  text-transform: uppercase; letter-spacing: -.015em; margin: 0; color: var(--pg-text);
}
.pg-authcard p {
  color: var(--pg-muted); font-size: 15px; line-height: 1.5; margin: 0; text-wrap: pretty;
}
.pg-authcard form { display: flex; flex-direction: column; gap: 12px; text-align: left; margin: 0; }
.pg-authcard input[type="text"], .pg-authcard input:not([type]) {
  width: 100%; background: var(--pg-bg); border: 1px solid var(--pg-line); color: var(--pg-text);
  padding: 13px 14px; font-family: var(--pg-body); font-size: 15px; outline: none;
}
.pg-authcard input:focus { border-color: var(--pg-purple); }
.pg-authcard input[readonly], .pg-authcard input[disabled] {
  color: var(--pg-dim); font-family: var(--pg-cond); letter-spacing: .1em; text-transform: uppercase;
  font-size: 13px; text-align: center;
}

/* buttons inside the card — variants assigned by pitagora.js */
.pg-authcard .pg-abtn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; box-sizing: border-box; border: 1px solid transparent; cursor: pointer;
  padding: 14px; text-align: center; text-decoration: none;
  font-family: var(--pg-cond); font-weight: 700; font-size: 15px;
  letter-spacing: .16em; text-transform: uppercase;
  transition: background .15s, border-color .15s, color .15s;
}
.pg-authcard .pg-abtn--primary { background: var(--pg-orange); color: var(--pg-ink) !important; }
.pg-authcard .pg-abtn--primary:hover { background: var(--pg-orange-2); }
.pg-authcard .pg-abtn--discord { background: #5865F2; color: #fff !important; }
.pg-authcard .pg-abtn--discord:hover { background: #6D78F5; }
.pg-authcard .pg-abtn--ghost {
  background: transparent; border-color: var(--pg-line-2); color: var(--pg-muted) !important;
}
.pg-authcard .pg-abtn--ghost:hover { border-color: var(--pg-orange); color: var(--pg-orange) !important; }
.pg-authcard .pg-authrow { display: flex; gap: 10px; }
.pg-authcard .pg-authrow .pg-abtn { flex: 1; }
.pg-authcard p a { color: var(--pg-orange); text-decoration: underline; }

/* the login/auth card, wherever Tebex renders it (/login, /auth, or inline
   "log in with FiveM" prompts on other pages) */
.pg-main form[action*="login"],
.pg-main form[action*="auth"],
.pg-main .login,
.pg-main #login {
  max-width: 480px;
  margin: 40px auto;
  background: var(--pg-panel);
  border: 1px solid var(--pg-line);
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* modules belong to the homepage only — hide any leftover Night sidebar/module
   markup on cart, category and package pages */
body:not(.pg-p-home) .pg-modules,
body:not(.pg-p-home) .sidebar,
body:not(.pg-p-home) #sidebar,
body:not(.pg-p-home) .module,
body:not(.pg-p-home) .sidebar-module,
body:not(.pg-p-home) .panel-recent-payments,
body:not(.pg-p-home) .recent-payments,
body:not(.pg-p-home) .top-customer,
body:not(.pg-p-home) .featured-package { display: none !important; }

@media (max-width: 1100px) { .pg-modules { grid-template-columns: 1fr; } }

/* /login page uses the same centered auth card */
body.pg-p-login .pg-main { min-height: 58vh; }

/* ---------- auth / Discord-login page (centered card) ----------
   The page class is added by pitagora.js from the URL. */
body.pg-p-auth .pg-main,
body.pg-p-login .pg-main {
  min-height: 58vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 24px;
}
body.pg-p-auth .pg-main > *,
body.pg-p-login .pg-main > * {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  background: var(--pg-panel);
  border: 1px solid var(--pg-line);
  padding: 34px 30px;
  text-align: center;
}
body.pg-p-auth .pg-main h1,
body.pg-p-auth .pg-main h2,
body.pg-p-login .pg-main h1,
body.pg-p-login .pg-main h2 {
  font-family: var(--pg-display);
  font-size: 28px;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -.015em;
  margin: 0 0 12px;
}
body.pg-p-auth .pg-main p,
body.pg-p-login .pg-main p {
  color: var(--pg-muted);
  font-size: 16px;
  line-height: 1.55;
  margin: 0 0 20px;
  text-wrap: pretty;
}
body.pg-p-auth .pg-main form,
body.pg-p-login .pg-main form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}
body.pg-p-auth .pg-main label,
body.pg-p-login .pg-main label {
  font-family: var(--pg-cond);
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pg-dim);
}
body.pg-p-auth .pg-main input[type="text"],
body.pg-p-auth .pg-main input[type="email"],
body.pg-p-auth .pg-main input:not([type]),
body.pg-p-auth .pg-main select,
body.pg-p-login .pg-main input[type="text"],
body.pg-p-login .pg-main input:not([type]),
body.pg-p-login .pg-main select {
  width: 100%;
  background: var(--pg-bg);
  border: 1px solid var(--pg-line);
  color: var(--pg-text);
  padding: 13px 14px;
  font-family: var(--pg-body);
  font-size: 15px;
  outline: none;
}
body.pg-p-auth .pg-main input:focus,
body.pg-p-login .pg-main input:focus { border-color: var(--pg-purple); }
body.pg-p-auth .pg-main button,
body.pg-p-auth .pg-main input[type="submit"],
body.pg-p-auth .pg-main .btn,
body.pg-p-login .pg-main button,
body.pg-p-login .pg-main input[type="submit"],
body.pg-p-login .pg-main .btn {
  width: 100%;
  background: var(--pg-orange);
  color: var(--pg-ink);
  border: 0;
  cursor: pointer;
  padding: 15px;
  font-family: var(--pg-cond);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
body.pg-p-auth .pg-main button:hover,
body.pg-p-login .pg-main button:hover { background: var(--pg-orange-2); }
body.pg-p-auth .pg-main img,
body.pg-p-login .pg-main img { margin: 0 auto 16px; max-height: 64px; width: auto; }

/* ---------- recent purchases ---------- */
.pg-recent { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.pg-recent__row {
  display: flex; align-items: center; gap: 12px;
  background: var(--pg-panel); border: 1px solid var(--pg-line); padding: 12px 14px;
}
.pg-recent__row i {
  flex: none; width: 8px; height: 8px; background: #3BE07A; border-radius: 50%;
  animation: pgPulse 1.6s ease-in-out infinite;
}
.pg-recent__txt { min-width: 0; }
.pg-recent__who {
  font-family: var(--pg-cond); font-weight: 700; font-size: 14px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--pg-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pg-recent__what {
  font-size: 13px; color: var(--pg-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 1100px) { .pg-recent { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pg-recent { grid-template-columns: 1fr; } }

.pg-trusted {
  font-family: var(--pg-cond);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pg-muted);
}

/* ---------- zoom button + lightbox ---------- */
.pg-zoom {
  position: absolute; right: 12px; top: 12px; z-index: 3;
  background: rgba(11,10,15,.78); border: 1px solid var(--pg-line-2); color: var(--pg-text);
  padding: 8px 13px; cursor: pointer;
  font-family: var(--pg-cond); font-weight: 700; font-size: 13px;
  letter-spacing: .14em; text-transform: uppercase;
  backdrop-filter: blur(6px);
}
.pg-zoom:hover { border-color: var(--pg-orange); color: var(--pg-orange); }

.pg-lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(6,5,9,.94);
  display: flex; align-items: center; justify-content: center;
  padding: 40px 70px;
}
.pg-lightbox[hidden] { display: none; }
.pg-lightbox__img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  cursor: zoom-in; transition: transform .2s ease;
}
.pg-lightbox__img.is-zoomed { transform: scale(1.9); cursor: zoom-out; }
.pg-lightbox__close, .pg-lightbox__nav {
  position: absolute; background: transparent; border: 1px solid var(--pg-line-2);
  color: var(--pg-text); cursor: pointer; line-height: 1;
}
.pg-lightbox__close { top: 20px; right: 22px; width: 42px; height: 42px; font-size: 24px; }
.pg-lightbox__nav { top: 50%; transform: translateY(-50%); width: 46px; height: 66px; font-size: 30px; }
.pg-lightbox__nav--prev { left: 14px; }
.pg-lightbox__nav--next { right: 14px; }
.pg-lightbox__close:hover, .pg-lightbox__nav:hover { border-color: var(--pg-orange); color: var(--pg-orange); }
.pg-lightbox__hint {
  position: absolute; bottom: 16px; left: 0; right: 0; text-align: center;
  font-family: var(--pg-cond); font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; color: #5D5670;
}
@media (max-width: 700px) {
  .pg-lightbox { padding: 60px 12px; }
  .pg-lightbox__nav { width: 38px; height: 54px; font-size: 24px; }
}