/* Build 6.0 */
/*
  THE BOY'S REBELLION — SITE-WIDE STYLESHEET
  Build 4.0 — shared across every page: colors, reset, nav, footer, and the
  mobile nav fix. Page-specific layout (hero sections, cards, article body
  widths, etc.) stays inline in each page's own <style> block.

  Edit this file to change the nav or footer sitewide. Do NOT put
  page-specific rules in here — they belong in that page's own <style> tag.
*/

:root{
  --bg:#FFFFFF; --bg-soft:#F5F5F7;
  --ink:#1D1D1F; --ink-soft:#6E6E73;
  --red:#E42313; --red-dark:#C21C0E; --red-tint:#FBEAE8;
  --line:rgba(0,0,0,0.08); --black:#0A0A0C;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg); color:var(--ink-soft);
  font-family:'Inter',-apple-system,sans-serif;
  line-height:1.6;
  min-height:100vh; display:flex; flex-direction:column;
}
h1,h2,h3{font-family:'Inter',sans-serif; color:var(--ink); font-weight:800; letter-spacing:-0.02em;}
a{color:inherit;}
.mono{font-family:'IBM Plex Mono',monospace; letter-spacing:0.08em; text-transform:uppercase;}

/* Nav */
.nav{position:sticky; top:0; z-index:50; background:rgba(255,255,255,0.82); backdrop-filter:blur(14px); border-bottom:1px solid var(--line);}
.nav .wrap{max-width:1400px; display:flex; align-items:center; justify-content:space-between; padding:16px 28px;}
.brand{font-weight:800; font-size:16px; color:var(--ink);}
.brand span{color:var(--red);}
.nav-links{display:flex; gap:44px; align-items:center;}
#nav-cart-wrap{margin-left:100px; display:flex; align-items:center;}
.nav-links > a, .nav-links a{font-size:13px; font-weight:600; color:var(--ink); text-decoration:none;}
.nav-links > a:hover, .nav-links a:hover{color:var(--red);}

/* Footer */
footer{padding:44px 0 60px; text-align:center; background:var(--black); margin-top:auto;}
.footer-links{display:flex; gap:20px; justify-content:center; margin-bottom:14px; flex-wrap:wrap;}
.footer-links a{font-size:12.5px; font-weight:600; color:#b0b0b5; text-decoration:none;}
.footer-links a:hover{color:var(--red);}
footer .fine{color:#b0b0b5; font-size:12px;}
footer a, footer a.email-link{color:#9a9a9e;}

/* Mobile nav fix — applies sitewide */
@media (max-width: 640px) {
  .nav .wrap{flex-wrap:wrap; padding:14px 20px; row-gap:10px;}
  .brand{font-size:15px; flex:1 1 100%;}
  .nav-links{flex:1 1 100%; gap:16px; flex-wrap:wrap; justify-content:flex-start;}
  #nav-cart-wrap{margin-left:auto;}
}

/* Product reviews widget — shared across every product page */
.reviews-list{display:flex; flex-direction:column; gap:16px; margin-bottom:36px;}
.reviews-loading, .reviews-empty{font-size:14px; color:var(--ink-soft);}
.review-card{background:var(--bg-soft); border-radius:12px; padding:18px 20px;}
.review-card-stars{color:var(--red); font-size:15px; letter-spacing:2px; margin-bottom:8px;}
.review-card-comment{font-size:14.5px; color:var(--ink); line-height:1.6; margin-bottom:10px;}
.review-card-meta{font-size:12px; color:var(--ink-soft); font-weight:600;}

.reviews-form-wrap{border-top:1px solid var(--line); padding-top:28px;}
.reviews-form-wrap h3{font-size:18px; margin-bottom:6px;}
.reviews-note{font-size:13px; color:var(--ink-soft); margin-bottom:18px;}
.review-field{margin-bottom:16px;}
.review-field label{display:block; font-size:12.5px; font-weight:700; color:var(--ink); margin-bottom:6px;}
.review-field input[type="text"], .review-field textarea{
  width:100%; border:1px solid var(--line); border-radius:10px; padding:10px 14px;
  font-family:'Inter',sans-serif; font-size:14px; color:var(--ink); resize:vertical;
}
.review-field input[type="text"]:focus, .review-field textarea:focus{outline:none; border-color:var(--red);}

.star-picker{display:flex; gap:4px;}
.star-btn{
  background:none; border:none; font-size:36px; line-height:1; cursor:pointer;
  color:#9ca3af; opacity:0.45; padding:0 2px; transition:color 0.1s ease, opacity 0.1s ease;
}
.star-btn:hover{opacity:0.7;}
.star-btn--active{color:#f5b301; opacity:1;}

.review-honeypot{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;}

.review-submit-btn{
  background:var(--red); color:#fff; font-weight:700; font-size:14px;
  padding:12px 26px; border:none; border-radius:100px; cursor:pointer;
}
.review-submit-btn:hover{background:var(--red-dark);}
.review-submit-btn:disabled{opacity:0.6; cursor:default;}

.review-status{font-size:13px; margin-top:12px;}
.review-status--success{color:#1a7f37;}
.review-status--error{color:var(--red-dark);}