/* ==========================================================================
   CATBYTE Software Store (store.html)
   Builds on style.css (tokens, nav, buttons) and home.css (section system,
   trust strip). Product data: assets/js/data/products.js
   ========================================================================== */

/* ---------- hero + banner ---------- */
.store-hero{
  position:relative;
  padding:clamp(110px, 14vw, 150px) 0 clamp(56px, 8vw, 96px);
  background:
    radial-gradient(60% 50% at 80% 30%, rgba(37,99,235,.16), transparent 70%),
    radial-gradient(40% 40% at 10% 90%, rgba(6,182,212,.08), transparent 70%);
}
.store-hero__inner{ display:grid; gap:clamp(2rem, 5vw, 4rem); align-items:center; }
@media (min-width:1024px){ .store-hero__inner{ grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); } }
.store-hero__eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:'JetBrains Mono', monospace; font-size:.72rem; font-weight:700; letter-spacing:.26em;
  color:var(--accent);
}
.store-hero__title{
  margin-top:1.1rem;
  font-family:'Inter', sans-serif; font-weight:700;
  font-size:clamp(2.4rem, 6vw, 4.6rem);
  line-height:1; letter-spacing:-.045em;
  color:var(--text);
}
.store-hero__title em{ font-style:normal; color:var(--text-secondary); }
.store-hero__lead{ margin-top:1.4rem; max-width:34rem; font-size:1.1rem; line-height:1.65; color:var(--text-secondary); }
.store-hero__th{ margin-top:.8rem; max-width:34rem; font-size:.92rem; line-height:1.75; color:var(--text-muted); }
.store-hero__cta{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem; }
.store-banner{
  justify-self:center;
  width:100%; max-width:560px;
  border:1px solid var(--border); border-radius:18px;
  overflow:hidden;
  background:#020617;
  box-shadow:0 40px 80px -40px rgba(2,6,23,.9);
}
.store-banner img{ display:block; width:100%; height:auto; aspect-ratio:960 / 804; }

/* ---------- sections ---------- */
.store-sec{ padding:clamp(64px, 9vw, 120px) 0; }
.store-sec__title{ font-size:clamp(2.2rem, 5.6vw, 4.2rem); }
.store-note{ margin-top:1.75rem; font-size:.8rem; color:var(--text-muted); }

/* filter chips */
.store-filter{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chip{
  height:36px; padding:0 .95rem;
  border:1px solid var(--border); border-radius:999px;
  font-size:.82rem; font-weight:500; color:var(--text-secondary);
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.chip:hover{ color:var(--text); background:var(--hover-tint-strong); }
.chip.is-active{ color:var(--bg); background:var(--text); border-color:var(--text); }

/* ---------- product cards ---------- */
.products{ display:grid; gap:1.25rem; }
@media (min-width:640px){ .products{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:1280px){ .products{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
.product{
  display:flex; flex-direction:column;
  border:1px solid var(--border); border-radius:16px;
  background:var(--surface-card-2);
  overflow:hidden;
  transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.product:hover{ border-color:rgba(6,182,212,.4); transform:translateY(-3px); box-shadow:0 26px 50px -30px rgba(6,182,212,.35); }
.product__media{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:100%; height:clamp(220px, 62vw, 270px);
  padding:1rem;
  background:radial-gradient(70% 70% at 50% 40%, #0d1b3d, #040817);
  border-bottom:1px solid var(--border);
  cursor:pointer;
}
.product__media img{ width:auto; height:100%; max-height:100%; max-width:100%; object-fit:contain; border-radius:10px; transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.product:hover .product__media img{ transform:scale(1.04); }
.product__media:focus-visible{ outline:2px solid var(--accent); outline-offset:-4px; }
.product__body{ display:flex; flex-direction:column; flex:1; padding:1.2rem 1.25rem 1.3rem; }
.product__top{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.product__cat{ font-family:'JetBrains Mono', monospace; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-muted); }
.product__name{ margin-top:.7rem; font-family:'Inter', sans-serif; font-weight:700; font-size:1.2rem; letter-spacing:-.02em; color:var(--text); }
.product__lic{ margin-top:.3rem; font-family:'JetBrains Mono', monospace; font-size:.74rem; color:var(--accent); }
.product__desc{ flex:1; margin-top:.75rem; font-size:.86rem; line-height:1.65; color:var(--text-muted); }
.product__price{ margin-top:1rem; font-family:'Inter', sans-serif; font-weight:800; font-size:1.65rem; letter-spacing:-.03em; color:var(--text); }
.product__actions{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin-top:1rem; }
.product__actions .cb-btn{ justify-content:center; min-height:44px; }

.pill{ display:inline-flex; align-items:center; gap:.4rem; padding:.2rem .55rem; border-radius:999px; font-size:.68rem; font-weight:600; }
.pill .status-dot{ width:6px; height:6px; }
.pill--ok{ color:var(--success); background:rgba(34,197,94,.1); }
.pill--off{ color:var(--text-muted); background:var(--hover-tint-strong); }
.cb-btn.is-disabled{ opacity:.5; pointer-events:none; border:1px solid var(--border); color:var(--text-muted); }

/* image fallback (store.js) */
.img-failed{ display:flex; align-items:center; justify-content:center; }
.img-fallback{ display:grid; justify-items:center; gap:.3rem; color:var(--text-muted); font-family:'JetBrains Mono', monospace; font-size:.7rem; letter-spacing:.3em; }
.img-fallback strong{ font-family:'Inter', sans-serif; font-size:1.1rem; letter-spacing:.16em; color:#e2e8f0; }

/* ---------- license info ---------- */
.license{ display:grid; gap:2rem; }
@media (min-width:1024px){ .license{ grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:4rem; align-items:start; } }
.license__badge{
  display:inline-block; padding:.3rem .7rem; border-radius:8px;
  border:1px solid rgba(6,182,212,.35);
  font-family:'JetBrains Mono', monospace; font-size:.74rem; font-weight:700; letter-spacing:.06em; color:var(--accent);
}
.license__title{ margin-top:1rem; font-family:'Inter', sans-serif; font-weight:700; font-size:clamp(1.8rem, 4vw, 2.8rem); letter-spacing:-.04em; line-height:1.1; color:var(--text); }
.license__text{ margin-top:1.1rem; max-width:40rem; font-size:1rem; line-height:1.75; color:var(--text-secondary); }
.license__text--th{ font-size:.92rem; color:var(--text-muted); }
.license__applies{ margin-top:1.2rem; font-family:'JetBrains Mono', monospace; font-size:.74rem; color:var(--text-muted); }
.license__side{ padding:clamp(1.25rem, 3vw, 1.75rem); border:1px solid var(--border); border-radius:16px; background:var(--bg); }
.license__side h3{ font-size:.95rem; font-weight:600; color:var(--text); }
.license__side h3 + ul{ margin-top:.8rem; }
.license__side ul + h3{ margin-top:1.5rem; }
.license__pending{ grid-column:1 / -1; display:flex; gap:.6rem; align-items:baseline; padding:1rem 1.2rem; border:1px dashed var(--border); border-radius:12px; font-size:.88rem; color:var(--text-muted); }
.license__pending i{ color:var(--warning); }
.checklist{ display:grid; gap:.55rem; }
.checklist li{ display:flex; gap:.65rem; align-items:baseline; font-size:.9rem; line-height:1.55; color:var(--text-secondary); }
.checklist i{ color:var(--success); font-size:.8rem; }
.notelist{ display:grid; gap:.5rem; padding-left:1.1rem; list-style:disc; }
.notelist li{ font-size:.86rem; line-height:1.6; color:var(--text-muted); }
.notelist li::marker{ color:var(--accent); }

/* ---------- how to buy ---------- */
.steps{ display:grid; gap:1px; border:1px solid var(--border); border-radius:16px; overflow:hidden; background:var(--border); }
@media (min-width:768px){ .steps{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
.step{ padding:clamp(1.4rem, 3vw, 2rem); background:var(--bg); }
.step__num{ font-family:'JetBrains Mono', monospace; font-size:.74rem; font-weight:700; color:var(--accent); }
.step h3{ margin-top:.9rem; font-family:'Inter', sans-serif; font-weight:700; font-size:1.2rem; letter-spacing:-.02em; color:var(--text); }
.step p{ margin-top:.55rem; font-size:.9rem; line-height:1.7; color:var(--text-muted); }
.step strong{ color:var(--text); }

/* ---------- support ---------- */
.trust--flush{ margin-top:0; }
.store-support__cta{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem; }
.store-legal{ margin-top:2.5rem; max-width:52rem; font-size:.74rem; line-height:1.6; color:var(--text-muted); }

/* ---------- product detail modal ---------- */
html.modal-open, html.order-open{ overflow:hidden; }
.pmodal{
  width:min(980px, calc(100vw - 24px));
  max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px);
  margin:auto; padding:0;
  border:1px solid var(--border); border-radius:20px;
  background:var(--bg); color:var(--text);
  box-shadow:0 40px 120px -30px rgba(0,0,0,.8);
}
.pmodal::backdrop{ background:rgba(2,6,23,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.pmodal[open]{ animation:pmodalIn .3s cubic-bezier(.2,.7,.2,1); }
@keyframes pmodalIn{ from{ opacity:0; transform:translateY(16px) scale(.98); } to{ opacity:1; transform:none; } }
.pmodal__inner{ position:relative; }
.pmodal__close{
  position:absolute; top:12px; right:12px; z-index:2;
  width:40px; height:40px; border-radius:11px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border); background:var(--surface-glass); color:var(--text);
}
.pmodal__close:hover{ background:var(--hover-tint-strong); }
.pmodal__grid{ display:grid; }
@media (min-width:768px){ .pmodal__grid{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); } }
.pmodal__media{
  display:flex; align-items:center; justify-content:center;
  padding:1.5rem;
  min-height:220px;
  background:radial-gradient(70% 70% at 50% 40%, #0d1b3d, #040817);
}
.pmodal__media img{ width:auto; max-width:100%; max-height:260px; object-fit:contain; border-radius:10px; }
@media (min-width:768px){
  /* image stays in view while the details scroll (the dialog is the scroller) */
  .pmodal__grid{ align-items:start; }
  .pmodal__media{ position:sticky; top:0; min-height:0; padding:3rem 1.5rem 2.5rem; border-bottom-right-radius:20px; }
  .pmodal__media img{ max-height:380px; }
}
.pmodal__content > .product__top{ padding-right:3rem; }
.pmodal__content{ padding:clamp(1.3rem, 3.5vw, 2.2rem); }
.pmodal__title{ margin-top:.7rem; padding-right:2.5rem; font-family:'Inter', sans-serif; font-weight:700; font-size:clamp(1.6rem, 3.6vw, 2.2rem); letter-spacing:-.035em; line-height:1.1; }
.pmodal__price{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem 1rem; margin-top:.8rem; font-family:'Inter', sans-serif; font-weight:800; font-size:1.9rem; letter-spacing:-.03em; }
.pmodal__price span{ font-family:'JetBrains Mono', monospace; font-weight:500; font-size:.78rem; letter-spacing:0; color:var(--accent); }
.pmodal__desc{ margin-top:.9rem; font-size:.92rem; line-height:1.75; color:var(--text-secondary); }
.pmodal__h{ margin:1.6rem 0 .7rem; font-family:'JetBrains Mono', monospace; font-size:.7rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--text-muted); }
.spec{ border-top:1px solid var(--border); }
.spec > div{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr); gap:1rem; padding:.7rem 0; border-bottom:1px solid var(--border); }
.spec dt{ font-size:.82rem; color:var(--text-muted); }
.spec dd{ font-size:.86rem; line-height:1.55; color:var(--text); }
.spec dd.is-tbs{ color:var(--warning); }
.pmodal__oem{ margin-top:.9rem; padding:.8rem 1rem; border-left:2px solid var(--accent); font-size:.84rem; line-height:1.65; color:var(--text-secondary); background:var(--hover-tint); }
.pmodal__support{ font-size:.88rem; line-height:1.7; color:var(--text-secondary); }
.pmodal__buy{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.6rem; }
.pmodal__buy .cb-btn{ flex:1 1 180px; justify-content:center; min-height:46px; }
.pmodal__hint{ margin-top:.9rem; font-size:.76rem; line-height:1.6; color:var(--text-muted); }
.pmodal__hint code{ font-family:'JetBrains Mono', monospace; font-size:.72rem; color:var(--text-secondary); }
.pmodal__hint a{ color:var(--accent); text-decoration:underline; }

@media (prefers-reduced-motion: reduce){
  .pmodal[open]{ animation:none; }
  .product:hover, .product:hover .product__media img{ transform:none; }
}

/* ---------- Buy Now window — LINE QR (store-core.js) ---------- */
.order-dlg{
  width:min(420px, calc(100vw - 24px));
  max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px);
  margin:auto; padding:clamp(1.25rem, 4vw, 1.75rem);
  border:1px solid var(--border); border-radius:20px;
  background:var(--bg); color:var(--text);
  box-shadow:0 40px 120px -30px rgba(0,0,0,.8);
}
.order-dlg::backdrop{ background:rgba(2,6,23,.75); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.order-dlg[open]{ animation:pmodalIn .3s cubic-bezier(.2,.7,.2,1); }
.order-dlg__close{
  position:absolute; top:12px; right:12px;
  width:38px; height:38px; border-radius:11px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border); color:var(--text);
}
.order-dlg__close:hover{ background:var(--hover-tint-strong); }
.order-dlg__eyebrow{ font-family:'JetBrains Mono', monospace; font-size:.68rem; font-weight:700; letter-spacing:.2em; color:#06c755; }
.order-dlg__title{ margin-top:.5rem; padding-right:2.5rem; font-family:'Inter', sans-serif; font-weight:700; font-size:1.4rem; letter-spacing:-.03em; line-height:1.15; }
.order-dlg__price{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem .8rem; margin-top:.35rem; font-family:'Inter', sans-serif; font-weight:800; font-size:1.5rem; }
.order-dlg__price span{ font-family:'JetBrains Mono', monospace; font-weight:500; font-size:.72rem; color:var(--accent); }
.order-dlg__qr{ margin:1.1rem auto 0; width:min(240px, 70vw); padding:10px; border-radius:14px; background:#fff; }
.order-dlg__qr img{ display:block; width:100%; height:auto; }
.order-dlg__steps{ margin-top:1.1rem; display:grid; gap:.4rem; padding-left:1.2rem; list-style:decimal; font-size:.84rem; line-height:1.55; color:var(--text-secondary); }
.order-dlg__steps li::marker{ color:var(--accent); font-family:'JetBrains Mono', monospace; font-size:.75rem; }
.order-dlg__steps strong{ color:var(--text); }
.order-dlg__msg{
  margin-top:.9rem; padding:.75rem .9rem;
  border:1px solid var(--border); border-radius:10px; background:var(--hover-tint);
  font-family:'JetBrains Mono', monospace; font-size:.76rem; line-height:1.6; white-space:pre-wrap; color:var(--text-secondary);
}
.order-dlg__actions{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin-top:1rem; }
.order-dlg__actions .cb-btn{ justify-content:center; min-height:46px; }
.order-dlg__actions .cb-btn--primary{ background:#06c755; color:#fff; border-color:#06c755; }
@media (prefers-reduced-motion: reduce){ .order-dlg[open]{ animation:none; } }

.order-dlg__pay{ margin-top:1rem; padding:1rem; border:1px solid var(--border); border-radius:12px; text-align:center; }
.order-dlg__pay-head{ display:flex; justify-content:center; gap:.6rem; align-items:baseline; font-size:.85rem; color:var(--text-secondary); }
.order-dlg__pay-head span{ font-family:'JetBrains Mono', monospace; font-weight:700; letter-spacing:.12em; color:var(--accent); }
.order-dlg__pay img{ display:block; width:min(230px, 64vw); height:auto; margin:.75rem auto 0; border-radius:14px; }
.order-dlg__pay p{ margin-top:.6rem; font-size:.78rem; line-height:1.55; color:var(--text-muted); }
.order-dlg__terms{ margin-top:.8rem; text-align:center; font-size:.74rem; color:var(--text-muted); }
.order-dlg__terms a{ color:var(--accent); text-decoration:underline; }

/* ---------- FAQ ---------- */
.store-faq{ max-width:860px; }
.store-faq .faq-answer p{ font-size:.92rem; line-height:1.8; }
.store-faq .faq-answer a{ color:var(--accent); text-decoration:underline; }
.store-faq .faq-answer code{ padding:.05rem .35rem; border-radius:5px; background:var(--hover-tint-strong); font-family:'JetBrains Mono', monospace; font-size:.85em; }

/* Buy Now: two steps */
.order-step{ margin-top:1.1rem; padding-top:1rem; border-top:1px solid var(--border); }
.order-step__title{ display:flex; align-items:center; gap:.6rem; font-size:.95rem; font-weight:600; color:var(--text); }
.order-step__title span{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background:var(--hover-tint-strong); border:1px solid var(--border); font-family:'JetBrains Mono', monospace; font-size:.75rem; color:var(--accent); flex:none; }
.order-step__note{ margin-top:.6rem; font-size:.8rem; line-height:1.6; color:var(--text-muted); }
.order-step .order-dlg__msg{ margin-top:.75rem; }
.order-step .order-dlg__qr{ margin:1rem auto 0; width:min(200px, 60vw); }
.order-step .order-dlg__qr figcaption{ margin:-.2rem 0 .5rem; text-align:center; font-size:.75rem; color:#475569; }
.order-fold{ margin-top:.8rem; border:1px solid var(--border); border-radius:12px; }
.order-fold > summary{ cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.75rem .9rem; font-size:.85rem; font-weight:500; color:var(--text-secondary); }
.order-fold > summary::-webkit-details-marker{ display:none; }
.order-fold > summary::after{ content:"\f078"; font-family:'Font Awesome 6 Free'; font-weight:900; font-size:.7rem; color:var(--text-muted); transition:transform .25s ease; }
.order-fold[open] > summary::after{ transform:rotate(180deg); }
.order-fold > summary:hover{ color:var(--text); }
.order-fold .order-dlg__pay{ margin:0 .9rem .9rem; }
.order-fold .order-dlg__qr{ margin:0 auto .9rem; }
.order-fold .order-dlg__pay{ border:0; padding:0; }
.order-fold--pay > summary{ color:var(--text); }

/* ---------- Phones: compact product cards (image left, details + buttons right) ---------- */
@media (max-width:640px){
  .products{ gap:.75rem; }
  .product{ display:grid; grid-template-columns:96px minmax(0,1fr); }
  .product__media{ height:auto; min-height:100%; padding:.5rem; border-bottom:0; border-right:1px solid var(--border); }
  .product__body{ padding:.75rem .85rem .85rem; }
  .product__top{ gap:.4rem; }
  .product__cat{ font-size:.72rem; letter-spacing:.1em; }
  .pill{ font-size:.72rem; }
  .product__name{ margin-top:.3rem; font-size:1rem; }
  .product__lic{ margin-top:.15rem; }
  .product__desc{ margin-top:.35rem; font-size:.8rem; line-height:1.5; flex:none; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .product__price{ margin-top:.45rem; font-size:1.3rem; }
  .product__actions{ margin-top:.6rem; gap:.4rem; }
  .product__actions .cb-btn{ min-height:42px; height:42px; padding:0 .5rem; font-size:.8rem; }
}

/* Buy Now window: buttons never push the dialog wider than the screen */
.order-dlg{ overflow-x:hidden; }
.order-dlg__actions .cb-btn{ min-width:0; padding:0 .6rem; white-space:nowrap; }
@media (max-width:400px){ .order-dlg__actions .cb-btn{ font-size:.82rem; gap:.35rem; } }