/* public/css/product-page.css -- shared styles for all six /products/<handle>/ pages.
   Generated and overwritten by tools/build_product_pages.py -- edit the copy embedded
   in that script (or this template, if you point the script at it), not this file
   directly, since a re-run replaces it verbatim.
   Palette and type match the homepage (public/index.html). */

:root{
  --navyDeep:#12153a;--ink:#0d0f24;--peri:#6b79d6;--periLight:#aab4f2;
  --magenta:#e33a8e;--pink:#ff7cbd;--cream:#f2ead8;
  --btnFill:#c01c6f;--btnFillHover:#a8175f;
  --display:'Anton','Haettenschweiler','Impact','Arial Narrow',sans-serif;
  --mono:'Courier Prime','Courier New',Courier,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;color:var(--cream);font-family:var(--mono);font-size:15px;line-height:1.5;
  background:var(--navyDeep);overflow-x:hidden;-webkit-tap-highlight-color:transparent;
  background-image:linear-gradient(rgba(13,15,36,.93),rgba(13,15,36,.93)),url(/assets/media/bg-texture.jpg);
  background-size:auto,560px 560px;
}
img{max-width:100%;display:block}
a{color:var(--periLight)}
a:hover{color:var(--cream)}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--cream);outline-offset:2px}

/* ---- header ---- */
.pp-hdr{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 20px;padding-top:calc(12px + env(safe-area-inset-top));
  padding-left:calc(20px + env(safe-area-inset-left));padding-right:calc(20px + env(safe-area-inset-right));
  background:rgba(11,13,34,.94);border-bottom:1.5px solid rgba(107,121,214,.25);
}
.pp-logo{display:inline-flex;align-items:center;min-height:44px}
.pp-logo img{height:34px;width:auto}
.pp-fulldrop{
  font-family:var(--mono);font-size:12px;letter-spacing:1.2px;text-decoration:none;
  border:1.5px solid var(--peri);color:var(--periLight);padding:0 14px;border-radius:2px;
  display:inline-flex;align-items:center;min-height:44px;white-space:nowrap;
}
.pp-fulldrop:hover{border-color:var(--magenta);color:var(--cream)}

/* ---- layout ---- */
.pp-main{
  display:grid;grid-template-columns:1fr;gap:26px;
  max-width:1180px;margin:0 auto;padding:22px 18px 8px;
}
@media (min-width:900px){
  .pp-main{grid-template-columns:1.05fr 1fr;gap:48px;padding:40px 32px 12px;align-items:start}
}

/* ---- media / plinth ---- */
.pp-media{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:start}
.pp-shotwrap{
  position:relative;border-radius:14px;overflow:hidden;padding:16px;
  display:flex;align-items:center;justify-content:center;min-height:150px;
  background:radial-gradient(circle at 50% 45%,rgba(107,121,214,.38),rgba(107,121,214,.10) 46%,rgba(13,15,36,0) 74%);
}
.pp-shot{max-width:100%;height:auto;filter:drop-shadow(0 14px 26px rgba(0,0,0,.55))}
@media (min-width:900px){.pp-media{position:sticky;top:16px}}

/* ---- info column ---- */
.pp-info{display:flex;flex-direction:column;gap:10px;min-width:0}
.pp-h1{
  margin:4px 0 0;font-family:var(--display);font-weight:400;
  font-size:clamp(24px,4.2vw,34px);letter-spacing:1.2px;line-height:1.08;color:var(--cream);
}
.pp-price{margin:2px 0 0;font-family:var(--display);font-size:28px;letter-spacing:1.6px;color:var(--pink)}
.pp-price small{font-family:var(--mono);font-size:12px;letter-spacing:1.4px;color:var(--periLight);margin-left:8px;vertical-align:middle}
.pp-ship{margin:0;font-size:12.5px;letter-spacing:1.2px;color:var(--periLight)}
.pp-edition{margin:0;font-size:12.5px;letter-spacing:1.2px;color:#ff9dc7}

.pp-bullets{list-style:none;margin:8px 0 0;padding:0;font-size:13.5px;line-height:1.55;color:var(--periLight)}
.pp-bullets li{display:grid;grid-template-columns:14px 1fr;gap:6px;padding:4px 0}
.pp-bullets li::before{content:"\25a0";color:#e56db1;font-size:8px;padding-top:2px}

/* ---- buy row: normal flow on desktop, sticky-to-viewport-bottom on phones ---- */
.pp-buyrow{display:flex;gap:10px;margin-top:14px}
.pp-sizewrap{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.pp-sizewrap[hidden]{display:none}
.pp-sizelabel{font-size:12px;letter-spacing:1.5px;color:var(--periLight);white-space:nowrap}
.pp-size{
  font-family:var(--mono);font-size:13px;background:var(--ink);color:var(--cream);
  border:1.5px solid var(--peri);border-radius:4px;padding:0 10px;min-height:44px;flex:1;min-width:0;cursor:pointer;
}
.pp-buy{
  font-family:var(--display);font-size:16px;letter-spacing:2px;white-space:nowrap;
  background:var(--btnFill);color:var(--cream);border:none;border-radius:4px;
  min-height:44px;padding:0 20px;cursor:pointer;box-shadow:0 0 16px rgba(227,58,142,.35);flex:none;
}
.pp-buy:hover{background:var(--btnFillHover);box-shadow:0 0 22px rgba(227,58,142,.5)}
.pp-buy:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}
.pp-buy[aria-busy="true"]{opacity:.85;cursor:progress}
.pp-nosize .pp-buy{flex:1}

.pp-status{min-height:16px;margin:2px 0 0;font-size:12px;letter-spacing:.6px;color:#ff8a92}

.pp-trust{margin:10px 0 0;font-size:12px;line-height:1.6;letter-spacing:.4px;color:var(--periLight)}
.pp-trust a{text-decoration:underline}
.pp-secondary{margin:2px 0 0;font-size:13px}

@media (max-width:899px){
  .pp-buyrow{
    position:sticky;bottom:0;z-index:20;margin:14px -18px 0;padding:10px 18px calc(10px + env(safe-area-inset-bottom));
    background:rgba(13,15,36,.97);border-top:1.5px solid rgba(107,121,214,.35);
    backdrop-filter:blur(6px);
  }
  /* Taller, easier tap targets in the pinned mobile buy bar. 16px also stops iOS zooming on the size picker. */
  .pp-size{min-height:52px;font-size:16px;padding:0 12px}
  .pp-buy{min-height:52px}
}
/* Smallest phones: the select already has aria-label="Size", so drop the visible label to keep "Select size" readable. */
@media (max-width:359px){.pp-sizelabel{display:none}.pp-size{padding:0 6px}.pp-buy{padding:0 14px}}

/* ---- more from the drop ---- */
.pp-more{max-width:1180px;margin:28px auto 0;padding:20px 18px 8px;border-top:1px dashed rgba(107,121,214,.3)}
@media (min-width:900px){.pp-more{padding:24px 32px 8px}}
.pp-more h2{font-family:var(--display);font-weight:400;font-size:14px;letter-spacing:2.4px;text-transform:uppercase;color:var(--periLight);margin:0 0 12px}
.pp-more-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px 16px;font-size:13px}
@media (min-width:640px){.pp-more-list{grid-template-columns:repeat(3,1fr)}}
.pp-more-list a{display:block;padding:8px 0;min-height:44px;line-height:1.3;text-decoration:none;color:var(--periLight)}
.pp-more-list a:hover{color:var(--cream)}
.pp-more-list b{display:block;font-weight:400;color:var(--cream)}
.pp-more-list i{font-style:normal;color:var(--pink)}

/* ---- footer ---- */
.pp-footer{
  max-width:1180px;margin:18px auto 0;padding:16px 18px 40px;
  text-align:center;font-size:12px;letter-spacing:1.2px;color:var(--periLight);
}
.pp-footer nav{margin-bottom:6px}
.pp-footer a{margin:0 6px;display:inline-flex;align-items:center;min-height:44px;padding:0 4px;text-decoration:none}
.pp-footer a:hover{color:var(--cream)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}