/* ===== Big Rig — interactive prototype (responsive sketch) ===== */
:root{
  --paper:#f7f6f2; --panel:#fdfdfb; --panel2:#f1f0eb;
  --ink:#1c1b19; --ink-soft:#54524d;
  --line:#1c1b19; --ph-a:#e9e8e3; --ph-b:#f1f0ec; --ph-line:#bdbcb5; --ph-text:#8b8a82;
  --accent:#c75327; --accent-ink:#7a3214; --warn-bg:#fbe9dd; --warn-ink:#a8430f;
  --mono:'Space Mono', ui-monospace, monospace;
  --hand:'Kalam', cursive; --head:'Caveat', cursive;
}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body{background:var(--paper);color:var(--ink);font-family:var(--hand);font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased;}
#root{height:100%;}
.app{min-height:100%;display:flex;flex-direction:column;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
a{color:inherit;}

/* ---- nav ---- */
.nav{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:18px;padding:14px 22px;background:rgba(247,246,242,.94);backdrop-filter:blur(6px);border-bottom:2px solid var(--ink);}
.logo{display:flex;align-items:center;color:var(--ink);}
.logo-mark{height:34px;width:auto;display:block;}
.foot .logo-mark{height:48px;}
.nav-links{display:flex;gap:6px;}
.nav-links button{font-family:var(--mono);font-size:12px;letter-spacing:.5px;padding:7px 11px;border-radius:10px 7px 11px 8px;color:var(--ink-soft);}
.nav-links button:hover{color:var(--ink);background:var(--panel2);}
.nav-links button.on{color:var(--ink);background:var(--panel2);}
.nav .grow{flex:1;}
.contact-links{display:flex;gap:8px;}
.contact-btn{font-family:var(--mono);font-size:12px;letter-spacing:.5px;border:2px solid var(--ink);padding:7px 11px;border-radius:11px 8px 12px 9px;display:flex;align-items:center;gap:7px;color:var(--ink);transition:transform .08s;}
.contact-btn svg{display:block;}
.contact-btn.wa{color:#1c8a4a;}
.contact-btn:hover{transform:translateY(-1px) rotate(-.5deg);background:var(--panel2);}
.cartbtn{font-family:var(--mono);font-size:12px;border:2px solid var(--ink);padding:7px 12px;border-radius:11px 8px 12px 9px;display:flex;align-items:center;gap:7px;transition:transform .08s;}
.cartbtn:hover{transform:translateY(-1px) rotate(-.5deg);}
.cartbtn .bdg{background:var(--accent);color:#fff;border-radius:50%;min-width:19px;height:19px;display:inline-flex;align-items:center;justify-content:center;font-size:10px;padding:0 4px;}
.hamb{display:none;font-size:22px;line-height:1;padding:4px 8px;}
.mobile-menu{display:none;flex-direction:column;gap:2px;padding:8px 16px 14px;border-bottom:2px solid var(--ink);background:var(--panel);}
.mobile-menu button{text-align:left;font-family:var(--mono);font-size:13px;padding:10px 8px;border-radius:9px;}
.mobile-menu button:hover{background:var(--panel2);}

/* ---- screen wrap ---- */
.screen{flex:1;animation:slidein .26s ease;}
@keyframes slidein{from{transform:translateY(6px);}to{transform:none;}}
.pad{padding:22px;}
.maxw{max-width:1180px;margin:0 auto;width:100%;}
.kick{font-family:var(--mono);font-size:11px;letter-spacing:2px;color:var(--accent);text-transform:uppercase;}
.h1{font-family:var(--head);font-weight:700;line-height:.98;font-size:44px;margin:4px 0;}
.h2{font-family:var(--head);font-weight:700;line-height:1;font-size:32px;margin:2px 0;}
.muted{color:var(--ink-soft);}
.mono{font-family:var(--mono);}

/* ---- placeholders ---- */
.ph{background:repeating-linear-gradient(45deg,var(--ph-a),var(--ph-a) 9px,var(--ph-b) 9px,var(--ph-b) 18px);border:1.5px dashed var(--ph-line);display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--mono);font-size:11px;color:var(--ph-text);border-radius:9px;padding:8px;min-height:46px;}
.ph.tall{min-height:160px;}
.ph.hero{min-height:230px;}
/* real photo dropped into a placeholder slot */
.ph-img{background:none;border:2px solid var(--ink);padding:0;object-fit:cover;width:100%;display:block;box-shadow:4px 5px 0 rgba(28,27,25,.13);}
.ph-img.hero{height:230px;}
.ph-img.tall{height:160px;}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-family:var(--mono);font-size:12px;letter-spacing:.5px;background:var(--ink);color:var(--paper);border:2px solid var(--ink);padding:11px 16px;border-radius:13px 9px 14px 10px/10px 14px 9px 13px;transition:transform .08s,opacity .15s;}
.btn:hover{transform:translateY(-1px) rotate(-.4deg);}
.btn:active{transform:translateY(0);}
.btn.accent{background:var(--accent);border-color:var(--accent);}
.btn.ghost{background:transparent;color:var(--ink);}
.btn[disabled]{opacity:.4;cursor:not-allowed;transform:none;}
.btn.block{width:100%;}

/* ---- rental warning / waiver ---- */
.warnbox{background:#0d0d0d;color:#f1f0ec;border:2px solid var(--ink);border-radius:15px 11px 16px 12px/12px 16px 11px 15px;padding:20px 20px 16px;box-shadow:5px 6px 0 rgba(28,27,25,.16);}
.warn-head{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;background:none;border:none;text-align:left;cursor:pointer;padding:0 0 12px;border-bottom:1.5px solid #ff2d2d;color:#f1f0ec;}
.warn-title{font-family:var(--mono);font-weight:700;font-size:13.5px;letter-spacing:1.2px;text-transform:uppercase;color:#f1f0ec;line-height:1.3;}
.warn-chev{font-family:var(--mono);font-weight:700;font-size:20px;line-height:1;color:#ff2d2d;flex:none;width:22px;height:22px;display:flex;align-items:center;justify-content:center;border:1.5px solid #ff2d2d;border-radius:7px 5px 8px 6px;}
.warn-body{margin-top:14px;}
.warn-hint{font-family:var(--mono);font-size:10px;letter-spacing:.4px;color:#b3b2ad;margin-top:10px;}
.warnbox p{font-family:var(--mono);font-size:11px;line-height:1.7;margin:0 0 11px;color:#d9d8d3;text-wrap:pretty;}
.warn-body p:last-child{margin-bottom:0;}
.warn-lead{color:#ff2d2d !important;text-align:center;font-size:11.5px !important;letter-spacing:.4px;}
.warn-lead b{color:#ff2d2d;letter-spacing:1px;}
.warn-check{margin-top:14px;}
.warn-check{display:flex;gap:11px;align-items:flex-start;cursor:pointer;border:1.5px solid #3a3a38;border-radius:10px 8px 11px 9px;padding:12px 13px;transition:border-color .12s,background .12s;}
.warn-check:hover{border-color:#5a5a57;}
.warn-check input{appearance:none;-webkit-appearance:none;flex:none;width:21px;height:21px;margin:1px 0 0;border:2px solid #f1f0ec;border-radius:6px 4px 7px 5px;background:transparent;cursor:pointer;position:relative;}
.warn-check input:checked{background:#ff2d2d;border-color:#ff2d2d;}
.warn-check input:checked::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:700;}
.warn-check span{font-family:var(--mono);font-size:11px;line-height:1.55;color:#f1f0ec;}
.warn-check.bad{border-color:#ff2d2d;background:rgba(255,45,45,.1);}

/* ---- fields ---- */
.field{flex:1;min-width:0;border:2px solid var(--ink);background:var(--panel);border-radius:11px 8px 12px 9px;padding:9px 12px;}
.field .lab{font-family:var(--mono);font-size:9.5px;letter-spacing:1px;color:var(--ink-soft);text-transform:uppercase;}
.field .val{font-family:var(--hand);font-size:16px;}
.ffield{border:2px solid var(--ink);border-radius:10px 8px 11px 9px;padding:7px 12px;background:var(--panel);display:flex;flex-direction:column;gap:2px;}
.ffield .lab{font-family:var(--mono);font-size:9.5px;letter-spacing:1px;color:var(--ink-soft);text-transform:uppercase;}
.ffield input{border:none;outline:none;background:none;font-family:var(--hand);font-size:16px;width:100%;color:var(--ink);}
.ffield.bad{border-color:var(--accent);background:var(--warn-bg);}

/* international phone field */
.phone-row{display:flex;align-items:center;gap:0;}
.phone-row .dial-show{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:15px;color:var(--ink);white-space:nowrap;padding-right:9px;margin-right:9px;border-right:1.5px solid var(--ph-line);pointer-events:none;}
.phone-row .dial-show::after{content:"▾";font-size:9px;color:var(--ink-soft);margin-left:1px;}
.phone-ff{position:relative;}
.phone-row .dial-sel{position:absolute;left:0;top:0;height:100%;width:118px;opacity:0;cursor:pointer;font-size:16px;}
.phone-row input{border:none;outline:none;background:none;font-family:var(--hand);font-size:16px;width:100%;color:var(--ink);}

/* ---- pills / tags ---- */
.lowstock{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;letter-spacing:.5px;background:var(--warn-bg);color:var(--warn-ink);border:1.5px solid var(--accent);padding:3px 8px;border-radius:8px;width:fit-content;}
.lowstock::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);animation:pulse 1.6s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}
.instock{font-family:var(--mono);font-size:10px;color:var(--ink-soft);}
.tag{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:10px;letter-spacing:.5px;border:1.5px solid var(--ink);padding:2px 7px;border-radius:7px;width:fit-content;}
.tag.rent{background:var(--ink);color:var(--paper);}
.price{font-family:var(--mono);font-size:13px;}
.pname{font-family:var(--hand);font-size:18px;font-weight:700;line-height:1.05;}
.chips{display:flex;flex-wrap:wrap;gap:7px;}
.chip{font-family:var(--mono);font-size:11px;border:1.5px solid var(--ink);padding:6px 11px;border-radius:9px;transition:transform .08s;}
.chip:hover{transform:translateY(-1px);}
.chip.on{background:var(--ink);color:var(--paper);}

/* ---- card ---- */
.card{border:2px solid var(--ink);border-radius:13px 10px 14px 11px/11px 14px 10px 13px;background:var(--panel);padding:11px;display:flex;flex-direction:column;gap:8px;transition:transform .1s,box-shadow .1s;}
.card.click{cursor:pointer;}
.card.click:hover{transform:translateY(-3px) rotate(-.4deg);box-shadow:5px 6px 0 var(--ink);}

/* ---- qty ---- */
.qty{display:inline-flex;align-items:center;border:2px solid var(--ink);border-radius:9px;font-family:var(--mono);font-size:14px;user-select:none;}
.qty button{padding:5px 11px;}
.qty button:hover{background:var(--panel2);}
.qty b{padding:5px 12px;border-left:2px solid var(--ink);border-right:2px solid var(--ink);min-width:36px;text-align:center;}

/* ---- stepper ---- */
.stepper{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;color:var(--ink-soft);flex-wrap:wrap;}
.stepper .step{display:flex;align-items:center;gap:6px;}
.stepper .num{width:20px;height:20px;border:2px solid var(--ink);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;}
.stepper .step.on{color:var(--ink);}
.stepper .step.on .num{background:var(--accent);border-color:var(--accent);color:#fff;}
.stepper .step.done .num{background:var(--ink);color:#fff;}
.stepper .sep{color:var(--ph-line);}

/* ---- calendar ---- */
.cal{border:2px solid var(--ink);border-radius:13px 10px 14px 11px;padding:13px;background:var(--panel);max-width:360px;}
.cal-head{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:13px;margin-bottom:10px;}
.cal-head button{padding:2px 9px;border:2px solid var(--ink);border-radius:8px;}
.cal-head button:hover{background:var(--panel2);}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
.cal-dow{font-family:var(--mono);font-size:9px;color:var(--ink-soft);text-align:center;padding-bottom:4px;}
.cal-day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px;border:1.5px solid transparent;border-radius:7px;cursor:pointer;}
.cal-day:hover{border-color:var(--ink);}
.cal-day.mute{color:var(--ph-line);cursor:default;}
.cal-day.mute:hover{border-color:transparent;}
.cal-day.in-range{background:var(--warn-bg);}
.cal-day.sel{background:var(--accent);color:#fff;border-color:var(--accent);}

/* ---- lines / summary ---- */
.line{display:flex;gap:12px;align-items:center;padding:13px 0;border-bottom:1.5px dashed var(--ph-line);}
.line .ph{width:74px;min-height:64px;flex:none;}
.line .meta{flex:1;display:flex;flex-direction:column;gap:5px;min-width:0;}
.spec{display:flex;justify-content:space-between;gap:10px;font-family:var(--mono);font-size:11px;color:var(--ink-soft);border-bottom:1px dashed var(--ph-line);padding:4px 0;}
.spec b{color:var(--ink);}
.summbar{position:sticky;bottom:0;display:flex;align-items:center;gap:14px;padding:13px 22px;border-top:2px solid var(--ink);background:var(--panel);z-index:10;}
.summbar .tot{font-family:var(--mono);font-size:13px;}
.summbar .tot b{font-size:17px;}
.banner{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 22px;background:var(--panel2);border-bottom:2px solid var(--ink);}
.linkish{font-family:var(--mono);font-size:11px;text-decoration:underline;cursor:pointer;}
.linkish:hover{color:var(--accent);}
.crumb{font-family:var(--mono);font-size:11px;color:var(--ink-soft);padding:11px 22px;border-bottom:1.5px dashed var(--ph-line);}
.crumb b{color:var(--ink);}
.crumb .linkish{color:var(--ink-soft);}
.seg{display:inline-flex;border:2px solid var(--ink);border-radius:12px 9px 13px 10px;overflow:hidden;font-family:var(--mono);font-size:11px;}
.seg button{padding:8px 15px;}
.seg button.on{background:var(--ink);color:var(--paper);}
.note{font-family:var(--mono);font-size:11px;color:var(--ink-soft);border:1.5px dashed var(--ph-line);border-radius:9px;padding:9px 11px;}

/* ---- bulk discount ---- */
.spec.discount{color:var(--accent-ink);}
.spec.discount b{color:var(--accent-ink);}
.strike{text-decoration:line-through;color:var(--ink-soft);font-family:var(--mono);}
.tag.disc{background:var(--accent);color:#fff;border-color:var(--accent);}
.bulk-pill{display:inline-flex;align-items:center;width:fit-content;font-family:var(--mono);font-size:10px;letter-spacing:.5px;background:var(--ink);color:var(--paper);padding:5px 10px;border-radius:9px 7px 10px 8px;}

/* ---- footer ---- */
.foot{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:22px;border-top:2px solid var(--ink);font-family:var(--mono);font-size:11px;color:var(--ink-soft);margin-top:10px;}
.foot .cols{display:flex;gap:34px;flex-wrap:wrap;}
.foot .cols div{display:flex;flex-direction:column;gap:5px;}

/* ---- layout grids ---- */
.split{display:flex;gap:0;border-bottom:2px solid var(--ink);}
.split>.half{flex:1;display:flex;flex-direction:column;gap:13px;padding:24px;}
.split>.half:first-child{border-right:2px solid var(--ink);}
.row{display:flex;gap:14px;}
.col{display:flex;flex-direction:column;}
.wrap{flex-wrap:wrap;}
.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:13px;}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;}
.g5{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;}
.shop{display:flex;align-items:stretch;}
.shop aside{width:200px;flex:none;display:flex;flex-direction:column;gap:9px;padding:22px;border-right:2px solid var(--ink);background:var(--panel2);}
.shop .grid-wrap{flex:1;padding:22px;}
.shop-chips{display:none;}

/* ---- toast ---- */
.toast{position:fixed;left:50%;bottom:74px;transform:translateX(-50%);background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:12px;padding:10px 16px;border-radius:11px 8px 12px 9px;z-index:60;animation:toastin .3s ease;box-shadow:3px 4px 0 rgba(0,0,0,.2);}
@keyframes toastin{from{opacity:0;transform:translate(-50%,8px);}to{opacity:1;transform:translate(-50%,0);}}

/* ===== responsive: below 720 = mobile ===== */
@media (max-width:720px){
  .nav-links,.cartbtn .lbl{display:none;}
  .contact-btn .lbl{display:none;}
  .contact-btn{padding:6px 8px;}
  .hamb{display:block;}
  .nav .cartbtn{padding:6px 9px;}
  .split{flex-direction:column;}
  .split>.half:first-child{border-right:none;border-bottom:2px solid var(--ink);}
  .h1{font-size:30px;} .h2{font-size:24px;}
  .pad{padding:16px;}
  .g3,.g4,.g5{grid-template-columns:repeat(2,1fr);}
  .shop{flex-direction:column;}
  .shop aside{display:none;}
  .shop .grid-wrap{padding:16px;}
  .shop-chips{display:flex;flex-wrap:wrap;gap:7px;padding:14px 16px 0;}
  .prod-cols{flex-direction:column;}
  .prod-cols>div{border-right:none !important;}
  .book-cols{flex-direction:column;}
  .book-cols>.cal-side{border-right:none !important;border-bottom:2px solid var(--ink);}
  .cart-cols{flex-direction:column;}
  .cart-cols>.sum{border-left:none !important;border-top:2px solid var(--ink);}
}
.menu-open .mobile-menu{display:flex;}