/* === style.css (refactored) === */
:root{
  --page-max: 100%;
  --page-pad-x: clamp(12px, 1.6vw, 22px);

  /* Global UI scale (set by script.js) */
  --ui-scale: 1;

  /* =========================================================212121f0
     THEME TOKENS (edit THESE to recolor the whole site)111a21
     ========================================================= */
  --t-bg: #15232b;        /* page background */
  --t-surface: #233c4a;   /* cards / panels */
  --t-surface-2: #233c4a; /* header / inputs / deeper surfaces */
  --t-accent: #266d96;    /* warm accent (buttons, highlights) */

  --t-ink: #f6f6f4;       /* text (near-white) */
  --t-ink-dim: rgba(246,246,244,0.78);
  --t-ink-dimmer: rgba(246,246,244,0.58);

  --t-border: rgba(246,246,244,0.18);
  --t-border-strong: rgba(246,246,244,0.26);

  --t-shadow: rgba(0,0,0,0.55);
  --t-shadow-soft: rgba(0,0,0,0.40);

  --t-hover: rgba(255,255,255,0.06);
  --t-hover-strong: rgba(255,255,255,0.09);

  --t-overlay: rgba(55,85,112,0.94);

  /* Derived (keep the rest stable) */
  --ink: var(--t-ink);
  --paper: var(--t-bg);
  --card: var(--t-surface);
  --card-2: var(--t-surface-2);

  --border: 2px solid var(--t-border);

  /* consistent rounding everywhere */
  --radius: 14px;

  --gap: 22px;
  --tile-pad: 16px;

  --shadow: 0 14px 34px var(--t-shadow);
  --shadow-soft: 0 10px 26px var(--t-shadow-soft);

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --header-h: 76px;

  /* consistent focus ring */
  --focus-ring: 3px solid rgba(246,246,244,0.92);
  --focus-offset: 3px;

  /* header visuals */
  --header-bg: rgba(26, 61, 82, 0.902); /*--------------------------------------------------------------*/
  --header-border: 2px solid rgba(246,246,244,0.38);

  /* primary buttons */
  --btn-primary-bg: var(--t-accent);
  --btn-primary-border: 2px solid rgba(246,246,244,0.24);
}

*{ box-sizing: border-box; }
html, body{ height:100%; }
html{ -webkit-text-size-adjust: 100%; }
img{ display:block; }

button, input, select, textarea{ font: inherit; }

body{
  margin:0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);

  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  /* Keep proportions consistent across resolutions (Chrome/Edge support) */
  zoom: var(--ui-scale);
}

/* consistent focus ring (keyboard only) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible{
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* ---------- loading overlay ---------- */
.loading-overlay{
  position: fixed;
  inset: 0;
  background: var(--t-overlay);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 9999;
}
.loading-card{
  background: var(--card);
  border: var(--border);
  border-radius: calc(var(--radius) + 2px);
  padding: 18px 18px;
  display:flex;
  align-items:center;
  gap: 14px;
  box-shadow: var(--shadow-soft);
}
.loading-spinner{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 3px solid rgba(246,246,244,0.22);
  border-top-color: rgba(246,246,244,0.78);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text{ font-weight: 900; color: var(--ink); }

/* ---------- shared ---------- */
.page{ width: 100%; }
.page-inner{
  max-width: var(--page-max);
  margin: 0 auto;

  /* header is FIXED now, so reserve space */
  padding: calc(16px + var(--header-h)) var(--page-pad-x) 70px;
}

.btn{
  appearance: none;
  border: var(--border);
  background: var(--card);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 900;
  cursor: pointer;

  border-radius: var(--radius);

  transition: transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease, background 120ms ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(255,255,255,0.06);
}
.btn:hover{
  box-shadow: var(--shadow-soft);
}
.btn:active{
  transform: translateY(1px);
}
.btn:disabled{
  opacity: 0.62;
  cursor: default;
  transform: none;
}

/* legacy class name, now consistent rounded-box */
.pill-btn{
  border-radius: var(--radius);
  padding: 12px 18px;
  font-size: 20px;
  line-height: 1;
}

.pill-btn-wide{
  width: 100%;
  font-size: 42px;
  padding: 18px 18px;
  border-radius: var(--radius);
}

/* inputs get a consistent caret + disabled look */
.search-pill,
.email-input{
  caret-color: var(--ink);
  color: var(--ink);
}
.search-pill::placeholder,
.email-input::placeholder{
  color: var(--t-ink-dimmer);
}
input:disabled{
  opacity: 0.68;
  cursor: not-allowed;
}

/* ---------- unified arrow icons ---------- */
.arrow-icon{
  width: 20px;
  height: 20px;
  display:inline-block;
  position: relative;
}
.arrow-icon::before{
  content:"";
  position:absolute;
  left: 2px;
  top: 50%;
  width: 16px;
  height: 4px;
  background: var(--ink);
  transform: translateY(-50%);
  border-radius: 3px;
}
.arrow-icon::after{
  content:"";
  position:absolute;
  width: 11px;
  height: 11px;
  border-right: 4px solid var(--ink);
  border-bottom: 4px solid var(--ink);
  top: 50%;
  transform-origin: center;
  border-radius: 2px;
}

/* left arrow */
.arrow-left::after{
  left: 1px;
  transform: translateY(-50%) rotate(135deg);
}

/* down arrow (rotate whole system) */
.arrow-down::before{
  left: 50%;
  top: 2px;
  width: 4px;
  height: 16px;
  transform: translateX(-50%);
}
.arrow-down::after{
  left: 50%;
  top: 9px;
  transform: translateX(-50%) rotate(45deg);
}

/* ---------- header ---------- */
.site-header{
  position: fixed; /* was sticky */
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;

  background: var(--header-bg);
  border-bottom: var(--header-border);

  /* performance: blur tends to make mobile scroll jittery */
  backdrop-filter: none;
}
.header-inner{
  height: var(--header-h);
  display:flex;
  align-items:center;
  gap: 16px;
  padding: 10px var(--page-pad-x);
}

/* left cluster: Logo + Back */
.header-left{
  display:flex;
  align-items:center;
  gap: 12px;
  flex: 0 0 auto;
}

.site-logo{
  text-decoration:none;
  display:flex;
  align-items:center;
  padding: 0;
}

/* LOGO FIX:
   - do NOT assume square
   - fill most of the header height
   - keep aspect ratio (wide PNG stays wide)
*/
.logo-img{
  height: calc(var(--header-h) - 22px); /* fills most of bar */
  width: auto;                          /* keep real aspect ratio */
  max-width: min(360px, 32vw);          /* prevent taking over the header */
  object-fit: contain;
  display:block;
}

/* Back */
.header-back-btn{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 14px;

  border-radius: var(--radius);
  border: var(--border);
  background: var(--card-2);
  box-shadow: var(--shadow-soft);
}
.header-back-btn:hover{ box-shadow: var(--shadow); }
.back-label{ font-size: 18px; }
.header-back-btn[hidden]{
  display: none !important;
}

.header-search{
  flex: 1 1 auto;
  position: relative;
  display:flex;
  justify-content:center;
}

/* wrapper so the X can align to the input edge */
.search-wrap{
  width: min(980px, 100%);
  position: relative;
}

.search-pill{
  width: 100%;
  height: 54px;
  border: var(--border);
  border-radius: var(--radius);
  padding: 0 52px 0 20px; /* room for the X */
  font-size: 20px;
  outline: none;
  background: var(--card-2);
  box-shadow: var(--shadow-soft);
}
.search-pill:focus-visible{
  box-shadow: var(--shadow);
}

/* Clear (X) button inside the search pill */
.search-clear-btn{
  position:absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  border-radius: 999px;
  font-size: 28px;
  font-weight: 1000;
  line-height: 1;
  cursor: pointer;
  opacity: 0.65;
  display:flex;
  align-items:center;
  justify-content:center;

  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(255,255,255,0.06);
}
.search-clear-btn:hover,
.search-clear-btn:focus-visible{
  opacity: 0.98;
  background: var(--t-hover);
}
.search-clear-btn[hidden]{
  display:none !important;
  pointer-events:none !important;
}

.search-dropdown{
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: 100%;
  background: var(--card);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:auto;
  max-height: min(420px, 60vh);
}
.search-dd-item{
  padding: 12px 14px;
  display:flex;
  gap: 12px;
  align-items:center;
  cursor: pointer;
}
.search-dd-item:hover,
.search-dd-item:focus-visible{
  background: var(--t-hover);
}
.search-dd-item[aria-selected="true"]{
  background: var(--t-hover-strong);
}
.search-dd-title{
  font-weight: 950;
}
.search-dd-sub{
  opacity: 0.78;
  font-weight: 800;
  font-size: 13px;
}

.header-actions{
  display:flex;
  align-items:center;
  gap: 12px;
}

.donate-btn{
  border-radius: var(--radius);
  padding: 12px 16px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  background: var(--card-2);
  box-shadow: var(--shadow-soft);
}
.donate-btn:hover{ box-shadow: var(--shadow); }

/* Header buy button (only when needed) */
.header-buy-btn{
  border-radius: var(--radius);
  padding: 12px 16px;
  box-shadow: var(--shadow-soft);

  background: var(--btn-primary-bg);
  color: var(--ink);
  border: var(--btn-primary-border);
}
.header-buy-btn:hover{ box-shadow: var(--shadow); }

/* ---------- browse grid ---------- */
.browse-grid{
  display: grid;
  align-items: stretch;
  min-width: 0;

  /* 3 products wide */
  grid-template-columns: repeat(3, minmax(0, 1fr));

  column-gap: var(--gap);
  row-gap: calc(var(--gap) + 30px);
}
@media (max-width: 1220px){
  .browse-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px){
  .browse-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .browse-grid{ grid-template-columns: 1fr; }
}

/* Tiles (default bubble style used by donate/count tiles) */
.tile{
  text-decoration: none;
  color: var(--ink);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;

  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-soft);
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.tile:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

/* Product tiles on main page: thumbnail is the “bubble”, text sits on page background */
.tile-product{
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
  transition: none;
}
.tile-product:hover{
  transform: none;
  box-shadow: none;
}
.tile-product .tile-thumb16{
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.tile-product:hover .tile-thumb16{
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.tile-product:focus-visible{
  outline: none;
}
.tile-product:focus-visible .tile-thumb16{
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  outline: var(--focus-ring);
  outline-offset: 4px;
}

.tile-product .tile-info{
  margin-top: 14px;
  padding: 0 10px 0;
  justify-content: flex-start;
  gap: 8px;
}
.tile-product .tile-info-icon{
  margin-top: -8px;
}
.tile-product .tile-info-price{
  margin-left: auto;
}
.tile-product .tile-info:not(.tile-info-ghost) .tile-info-name,
.tile-product .tile-info:not(.tile-info-ghost) .tile-info-price{
  margin-top: 9px;
}

.tile-thumb16{
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--card-2);
  position: relative;
}
.tile-thumb16 img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* donate bg image sits behind overlay */
.thumb-bg{
  position:absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

/* center overlay (donate/appcount) */
.tile-thumb16-center{
  width: 100%;
  height: 100%;
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  text-align: center;
  padding: 18px;
  gap: 12px;

  position:absolute;
  inset: 0;
}

/* Main-page info row: icon + name left, price right */
.tile-info{
  padding: 14px 14px 16px;
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
}

.tile-info-icon{
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  object-fit: cover;
  display:block;
  flex: 0 0 auto;
  border-radius: 0;
  margin-top: 0px;
}

.tile-info-name{
  min-width: 0;
  flex: 1 1 auto;
  font-weight: 1000;
  font-size: 22px;
  line-height: 1.22;
  padding-bottom: 0.12em;

  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.tile-info-price{
  font-weight: 1000;
  font-size: 22px;
  white-space: nowrap;
  flex: 0 0 auto;
  margin-top: 0;
}

/* Ghost info row (reserves space but is invisible) */
.tile-info-ghost{
  visibility: hidden;
  pointer-events: none;
}

/* donate/appcount text */
.tile-donate .donate-top{
  font-weight: 1000;
  font-size: 42px;
  line-height: 1.05;

  color: var(--ink);
  text-shadow:
    0 2px 10px rgba(0,0,0,0.65),
    0 0 2px rgba(0,0,0,0.85);
}
.tile-comingsoon .coming-top{
  font-weight: 1000;
  font-size: 30px;
  line-height: 1.1;
}
.tile-comingsoon .coming-bot{
  font-weight: 900;
  font-size: 22px;
  opacity: 0.9;
  line-height: 1.1;
}

/* skeleton tiles while loading */
.tile-skeleton .tile-thumb16{
  background: linear-gradient(90deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04), rgba(255,255,255,0.08));
  background-size: 220% 100%;
  animation: shimmer 1.1s ease-in-out infinite;
}
.tile-skeleton .tile-info-name,
.tile-skeleton .tile-info-price{
  height: 18px;
  border-radius: 10px;
  background: rgba(255,255,255,0.10);
  color: transparent;
}
@keyframes shimmer{
  0%{ background-position: 0% 0%; }
  100%{ background-position: 100% 0%; }
}

/* mobile list hidden on desktop */
.mobile-list{ display:none; margin-top: 18px; }
.mobile-card{
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-soft);
  overflow:hidden;
  text-decoration:none;
  color: var(--ink);
  display:flex;
  flex-direction: column;
  margin-bottom: 14px;

  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(255,255,255,0.06);
}
.mobile-card:focus-visible{
  outline: none;
}
.mobile-card:focus-visible .tile-thumb16{
  outline: var(--focus-ring);
  outline-offset: 4px;
}

@media (max-width: 980px){
  .mobile-list{ display:block; }
  .browse-grid{ display:none; }

  .mobile-card{
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;

    /* 1.75x more breathing room between text and next thumbnail */
    margin-bottom: 52px; /* was 30px */
  }

  .mobile-card .tile-thumb16{
    border-radius: 0;

    /* REQUESTED: slight shadow under thumbnails on thin view */
    box-shadow: var(--shadow-soft);

    width: calc(100% + (2 * var(--page-pad-x)));
    margin-left: calc(-1 * var(--page-pad-x));
    margin-right: calc(-1 * var(--page-pad-x));
  }

  .mobile-card .tile-thumb16 img{
    border-radius: 0;
  }

  .mobile-card .tile-info{
    margin-top: 14px;
    padding: 0 var(--page-pad-x) 0;
    justify-content: flex-start;
    gap: 8px;
  }

  .mobile-card .tile-info-icon{
    margin-top: -8px;
  }

  .mobile-card .tile-info-price{
    margin-left: auto;
  }

  .mobile-card .tile-info:not(.tile-info-ghost) .tile-info-name,
  .mobile-card .tile-info:not(.tile-info-ghost) .tile-info-price{
    margin-top: 9px;
  }

  /* mobile performance: keep header solid */
  .site-header{
    backdrop-filter: none;
  }
}

/* ---------- product page ---------- */
.product-fold{
  min-height: 0;
  display: block;
}

.product-header{
  margin-top: 6px;
  display:flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.product-header-left{ min-width: 0; }

.hero-title{
  font-weight: 1000;
  font-size: 44px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.hero-sub{
  margin-top: 4px;
  font-weight: 900;
  font-size: 26px;
}

.product-top{
  margin-top: 8px;
  margin-bottom: 12px;
  display:grid;
  grid-template-columns: 1.40fr 1fr;
  gap: 22px;
  align-items:start;
}
.product-left,
.product-right{ min-width: 0; }

.video-box{
  border: var(--border);
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  display:block;
  position: relative;
  text-decoration:none;
  color: var(--ink);
  background: var(--card);
  overflow:hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.video-box iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* NEW: in-video overlay (loading / coming soon) */
.video-overlay,
.video-comingsoon{
  position:absolute;
  inset: 0;
  z-index: 2;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 18px;
  pointer-events: none;
}
.video-overlay[hidden],
.video-comingsoon[hidden]{
  display:none !important;
}

.video-overlay{
  background: rgba(0,0,0,0.18);
}
.video-overlay-card{
  border: var(--border);
  border-radius: var(--radius);
  background: rgba(0,0,0,0.24);
  box-shadow: var(--shadow-soft);
  padding: 14px 16px;
  display:flex;
  align-items:center;
  gap: 12px;
}
.video-spinner{
  width: 28px;
  height: 28px;
}
.video-overlay-text{
  font-weight: 900;
  font-size: 18px;
  color: var(--ink);
}

.video-comingsoon{
  background: rgba(0,0,0,0.14);
}
.video-comingsoon{
  font-weight: 900;
  font-size: 20px;
  color: var(--ink);
  text-shadow: 0 2px 10px rgba(0,0,0,0.55);
}

/* meta line centered under video */
.meta-line{
  margin-top: 10px;
  text-align:center;
  font-weight: 900;
  font-size: 18px;
  opacity: 0.92;
  color: var(--t-ink-dim);
}

.product-right{
  display:flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 0;
}

.buy-panel{
  border: var(--border);
  border-radius: var(--radius);
  padding: 14px 14px 14px;
  background: var(--card);
  display:flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow-soft);
}

.buy-panel-inner{
  display:flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.buy-panel-left{
  display:flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}

.buy-panel-right{
  flex: 0 0 auto;
  width: clamp(96px, 28%, 150px);
  aspect-ratio: 1 / 1;
  display:flex;
  align-items:center;
  justify-content:center;
}

.buy-panel-logo{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display:block;
}

.buy-panel-price{
  font-weight: 1000;
  font-size: clamp(58px, 4.2vw, 88px);
  line-height: 1;
  text-align:left;
}

/* make buy button a natural size (not full width) */
.buy-panel-actions{
  display:flex;
  justify-content: flex-start;
}
.buy-btn-big{
  width: auto;
  min-width: 220px;
  max-width: 380px;
  border-radius: var(--radius);
  font-size: clamp(28px, 2.1vw, 40px);
  padding: 12px 22px;

  background: var(--btn-primary-bg);
  color: var(--ink);
  border: var(--btn-primary-border);
}

.product-summary{ padding-top: 0; }
.summary-title{
  display:flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
}
.name-big{
  font-weight: 1000;
  font-size: 52px;
  line-height: 1;
}
.name-tail{
  font-weight: 850;
  font-size: 20px;
  opacity: 0.85;
  color: var(--t-ink-dim);
}

/* bigger description text */
.feature-list{
  margin: 14px 0 0;
  padding-left: 0;
  list-style: none;
  font-weight: 900;
  font-size: 26px;
  line-height: 1.22;
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.feature-list .feature-spacer{
  display: block;
  height: 0.8em;
  padding: 0;
  margin: 0;
  pointer-events: none;
}

/* specs button */
.specs-jump-row{
  margin-top: 14px;
  padding-top: 0;
  display:flex;
  justify-content:center;
}
.specs-jump{
  text-decoration:none;
  color: var(--ink);
  font-weight: 900;
  font-size: 20px;
  display:inline-flex;
  gap: 10px;
  align-items:center;
  background: var(--card);
  border: var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  box-shadow: var(--shadow-soft);

  transition: transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(255,255,255,0.06);
}
.specs-jump:hover{ box-shadow: var(--shadow); }
.specs-jump:active{ transform: translateY(1px); }

.divider{
  border: none;
  border-top: 2px solid rgba(0,0,0,0.35);
  margin: 14px 0 0;
}

/* specs */
.specs{
  padding-top: 12px;
  scroll-margin-top: calc(var(--header-h) + 16px);
}

/* bigger specs text */
.spec-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px 34px;
  padding-top: 14px;
  padding-left: 26px;
}
.spec-title{
  font-weight: 1000;
  font-size: 38px;
  line-height: 1.05;
  text-align:left;
}
.spec-value{
  margin-top: 10px;
  font-weight: 900;
  font-size: 22px;
  opacity: 0.95;
  text-align:left;
  color: var(--t-ink-dim);
}

/* ---------- purchase page ---------- */
.purchase-layout{
  margin-top: 18px;
  display:grid;
  grid-template-columns: 1.2fr 1.3fr 1.2fr;
  gap: 26px;
  align-items: start;
  min-height: 0;
}

.buy-title{
  font-weight: 1000;
  font-size: 72px;
  line-height: 0.95;
  white-space: pre-line;
}

.buy-logo-box{
  margin-top: 14px;
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;

  border: none;
  border-radius: 0;

  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;

  box-shadow: none;
  background: transparent;
}
.buy-logo-box img{
  width:100%;
  height:100%;
  object-fit: contain;
  display:block;
  border-radius: 0;
}

.purchase-middle{ display:flex; align-items:flex-start; }
.stripe-box{
  border: var(--border);
  border-radius: var(--radius);
  flex: 1 1 auto;
  min-height: clamp(320px, 38vh, 520px);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  font-size: 24px;
  background: var(--card);
  box-shadow: var(--shadow-soft);
}

.purchase-right{
  display:flex;
  flex-direction: column;
  gap: 14px;
}

.info-card,
.email-card{
  background: var(--card);
  border: var(--border);
  border-radius: var(--radius);
  padding: 14px 14px;
  box-shadow: var(--shadow-soft);
}

.info-title{
  font-weight: 1000;
  font-size: 22px;
  margin-bottom: 10px;
}
.info-list{
  margin: 0;
  padding-left: 18px;
  font-weight: 900;
  font-size: 16px;
  display:flex;
  flex-direction: column;
  gap: 8px;
  color: var(--t-ink-dim);
}

.email-title{
  font-weight: 1000;
  font-size: 20px;
}
.email-bullets{
  margin: 10px 0 14px;
  padding-left: 18px;
  font-weight: 850;
  font-size: 16px;
  opacity: 0.95;
  color: var(--t-ink-dim);
}
.checkbox-row{
  display:flex;
  gap: 10px;
  align-items:center;
  font-weight: 900;
  margin: 10px 0 14px;
  border: var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  background: var(--card-2);
}
.email-input{
  width: 100%;
  border: var(--border);
  border-radius: var(--radius);
  height: 54px;
  padding: 0 14px;
  font-size: 18px;
  outline:none;
  background: var(--card-2);
  margin-bottom: 14px;
}

.pill-btn-wide{
  font-size: 44px;
  padding: 18px 16px;
  background: var(--btn-primary-bg);
  color: var(--ink);
  border: var(--btn-primary-border);
}

/* buy button narrower than email/checkbox */
#buyNowBtn{
  width: 76%;
  margin: 0 auto;
  display:block;
}

/* notes bigger + confident */
.buy-notes{
  margin: 6px 0 0;
  padding-left: 18px;
  font-weight: 1000;
  font-size: 20px;
  line-height: 1.25;
  opacity: 0.98;
  color: var(--t-ink-dim);
}

/* ---------- donate page ---------- */
.donate-center{
  margin-top: 0;
  display:flex;
  flex-direction: column;
  align-items: center;

  /* fill the viewport under the fixed header */
  min-height: calc(100vh - var(--header-h) - 86px);

  gap: 14px;
}
.donate-big{
  font-weight: 1000;
  font-size: 100px;
  margin-top: 18px;
}

/* donation stripe area: large + centered */
.stripe-box-donate{
  width: min(820px, 96vw);
  height: clamp(420px, 52vh, 600px);
  max-width: 100%;
  border-radius: var(--radius);

  /* REQUESTED: ensure donate stripe box is centered (overrides stripe-box align-self:flex-start hotfix) */
  align-self: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: auto;
}

/* donate button pinned near bottom center */
.donate-action-row{
  width: 100%;
  margin-top: auto;
  display:flex;
  justify-content:center;

  /* keep it close to the embed and near page bottom */
  padding-top: 10px;
  padding-bottom: 10px;
}
.donate-submit-btn{
  width: clamp(140px, 10vw, 240px); /* “10% width” feel, but still usable on mobile */
  border-radius: var(--radius);
  padding: 14px 18px;
  font-size: 24px;

  background: var(--btn-primary-bg);
  color: var(--ink);
  border: var(--btn-primary-border);
}

/* ---------- responsive ---------- */
@media (max-width: 980px){
  /* product page vertical breathing room (mobile/slim) */
  .product-top{
    grid-template-columns: 1fr;
    gap: 32px; /* more space between meta-line and buy section */
  }
  .product-right{
    gap: 22px; /* more space between buy panel and title/description */
  }
  .specs-jump-row{
    margin-top: 34px; /* more space between description and Specs button */
  }

  .spec-grid{
    grid-template-columns: 1fr;
    gap: 44px;     /* more space between specification units */
    padding-left: 12px;
  }

  .purchase-layout{
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .buy-title{ font-size: 60px; }
  .stripe-box{ min-height: 360px; }

  #buyNowBtn{ width: 100%; }

  .donate-big{ font-size: 84px; }
  .donate-submit-btn{ width: clamp(160px, 40vw, 260px); }
}

@media (max-width: 720px){
  .header-inner{ gap: 12px; }

  /* keep wide logo wide (don’t force square) */
  .logo-img{
    height: calc(var(--header-h) - 24px);
    width: auto;
    max-width: min(320px, 48vw);
  }

  .header-back-btn .back-label{
    display:none;
  }

  .product-header{ gap: 12px; }
}

/* respectful motion defaults */
@media (prefers-reduced-motion: reduce){
  .loading-spinner{ animation: none; }
  .tile,
  .tile-product .tile-thumb16,
  .btn,
  .specs-jump{
    transition: none !important;
  }
  .tile-skeleton .tile-thumb16{ animation: none; }
}

/* =========================================================
   HOTFIX (1440p+ scaling polish)
   - Keep proportions
   - Keep search pill feeling "standard"
   ========================================================= */

/* --- Search bar slightly larger/thicker --- */
.search-pill{
  height: 58px;
  font-size: 21px;
  padding: 0 56px 0 22px;
  border-radius: var(--radius); /* ensure rounded box */
}
.search-clear-btn{
  width: 36px;
  height: 36px;
  font-size: 30px;
}

/* --- Purchase page: sane embed area --- */
.stripe-box{
  min-height: clamp(320px, 38vh, 520px);
  height: auto;
  align-self: flex-start;
}

/* =========================================================
   REQUESTED CHANGES
   - Reduce bolding in specific areas
   - Move/enlarge Donate + AppCount tile overlay text
   ========================================================= */

/* Main page: product name/price under thumbnails should be non-bold */
.tile-product .tile-info-name,
.tile-product .tile-info-price{
  font-weight: 500;
}

/* Mobile list: same (product name/price non-bold) */
.mobile-card .tile-info-name,
.mobile-card .tile-info-price{
  font-weight: 500;
}

/* Product page: "TG Photo Viewer" (hero-sub) non-bold */
.hero-sub{
  font-weight: 500;
}

/* Product page: quick info line under video non-bold */
.meta-line{
  font-weight: 500;
}

/* Product page: description list non-bold */
.feature-list{
  font-weight: 500;
}

/* Product page: specs button text non-bold */
.specs-jump{
  font-weight: 500;
}

/* Product page: spec body non-bold (title stays bold) */
.spec-value{
  font-weight: 500;
}

/* Purchase page: Information body non-bold (title stays bold) */
.info-list{
  font-weight: 500;
}

/* Purchase page: Email bullets non-bold (title stays bold) */
.email-bullets{
  font-weight: 500;
}

/* Purchase page: notes under buy button non-bold */
.buy-notes{
  font-weight: 500;
}

/* Donate tile: move "Donate!" to top-center + make bigger */
.tile-donate .tile-thumb16-center{
  justify-content: flex-start;
  padding-top: 22px;
}
.tile-donate .donate-top{
  font-size: clamp(56px, 4.4vw, 78px);
  line-height: 1.03;
}

/* App-count tile: center vertically */
.tile-comingsoon .tile-thumb16-center{
  justify-content: center;
  padding-top: 0;
  padding-bottom: 0;
}
.tile-comingsoon .coming-top{
  font-size: clamp(40px, 3.6vw, 60px);
  line-height: 1.05;
}

/* =========================================================
   MOBILE HEADER SIMPLIFICATION (thin/mobile bugfix)
   - Remove header actions (Donate + sticky Buy) on mobile
   - Crop logo to left portion on very thin widths
   - Reduce header control sizing so search stays usable
   ========================================================= */

@media (max-width: 980px){
  /* simplify top bar: only Logo + Back + Search */
  .header-actions{
    display:none !important;
  }

  /* search should just use the available width */
  .header-search{
    justify-content: flex-start;
  }
  .search-wrap{
    width: 100%;
  }
}

@media (max-width: 520px){
  /* tighter spacing so controls fit */
  .header-inner{
    gap: 8px;
    padding: 8px var(--page-pad-x);
  }
  .header-left{
    gap: 8px;
  }

  /* crop logo: only the left ~23% is visible */
  .site-logo{
    width: 40px;
    overflow:hidden;
  }
  .logo-img{
    max-width: none;
  }

  /* compact back button */
  .header-back-btn{
    padding: 8px 10px;
    gap: 8px;
  }

  /* compact search pill */
  .search-pill{
    height: 46px;
    font-size: 16px;
    padding: 0 44px 0 14px;
  }
  .search-clear-btn{
    right: 10px;
    width: 30px;
    height: 30px;
    font-size: 26px;
  }
}