/* ============================================================
   Born on Asphalt — Centralized Cart Drawer Component
   ============================================================ */

.drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(11, 11, 10, 0.75);
  display: none; z-index: 200;
  backdrop-filter: blur(4px);
}
.drawer-overlay.open { display: block; }

/* Base button structure for buttons inside the cart drawer — scoped
   to .drawer-foot so it never conflicts with .btn rules that pages
   loading style.css may already define elsewhere on the page. */
.drawer-foot .btn{
  font-family:'IBM Plex Mono',monospace;
  font-size:0.75rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:12px 22px;
  border:1px solid #ece5d3;
  background:#ece5d3;
  color:#0b0b0a;
  cursor:pointer;
  width:100%;
  display:block;
  text-align:center;
  box-sizing:border-box;
}
.drawer-foot .btn:hover{opacity:0.85;}

.drawer {
  position: fixed; top: 0; right: -420px; bottom: 0;
  width: 100%; max-width: 400px;
  background: #19170f;
  color: #ece5d3;
  border-left: 1px solid rgba(236, 229, 211, 0.14);
  z-index: 201;
  display: flex; flex-direction: column;
  transition: right 0.25s ease;
  font-family: 'IBM Plex Mono', monospace;
}
.drawer.open { right: 0; }

.drawer-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 22px;
  border-bottom: 2px solid rgba(236, 229, 211, 0.14);
}
.drawer-head h3 {
  font-family: 'Bebas Neue', sans-serif;
  text-transform: uppercase; margin: 0;
  font-size: 1.5rem; letter-spacing: 0.04em;
  color: #ece5d3;
}
.drawer-head .modal-close {
  background: none; border: none;
  font-size: 18px; color: #ece5d3;
  cursor: pointer; padding: 4px;
}

.drawer-items { flex: 1; overflow-y: auto; padding: 16px 22px; }

.cart-line {
  display: flex; gap: 12px;
  padding: 14px 0;
  border-bottom: 1px dotted rgba(236, 229, 211, 0.14);
}
.cart-line .sw {
  width: 56px; height: 66px;
  background: #0b0b0a;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(236, 229, 211, 0.14);
}
.cart-line .sw img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.cart-line .sw span {
  color: #ece5d3;
  font-family: 'Oswald', sans-serif;
  font-size: 12px; font-weight: 700;
}

.cart-line-info { flex: 1; }
.cart-line-info h4 {
  margin: 0 0 4px;
  font-size: 0.95rem;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.03em;
  color: #ece5d3;
}
.cart-line-info .meta {
  font-size: 0.68rem;
  color: #b8ae97;
  font-family: 'IBM Plex Mono', monospace;
}

.cart-line-actions {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 8px;
}
.cart-qty-row { display: flex; align-items: center; gap: 8px; }
.cart-qty-row button {
  width: 24px; height: 24px;
  border: 1px solid rgba(236, 229, 211, 0.18);
  background: #211e15;
  color: #ece5d3;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px; line-height: 1;
  padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.15s, background 0.15s;
}
.cart-qty-row button:hover {
  border-color: #b5551f;
  background: #2a261c;
}
.cart-qty-row span {
  font-size: 0.78rem; min-width: 16px; text-align: center;
}

.remove-btn {
  background: none; border: none;
  font-size: 0.65rem; color: #9c7a3e;
  letter-spacing: 0.05em; text-transform: uppercase;
  margin-top: 6px; cursor: pointer; padding: 0;
  transition: color 0.15s;
}
.remove-btn:hover { color: #a52a1c; }

.drawer-foot {
  border-top: 2px solid rgba(236, 229, 211, 0.14);
  padding: 18px 22px 24px;
  background: #14130c;
}
.subtotal-row {
  display: flex; justify-content: space-between;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.25rem; letter-spacing: 0.03em;
  margin-bottom: 14px; color: #ece5d3;
}
.empty-cart {
  font-size: 0.8rem; color: #b8ae97;
  text-align: center; padding: 40px 0;
  font-family: 'IBM Plex Mono', monospace;
}

/* Red primary action button for Checkout in cart drawer */
.drawer-foot #checkoutBtn {
  background: #7c1f16;
  border-color: #a52a1c;
  color: #ece5d3;
  font-weight: 600;
  transition: background 0.15s;
}
.drawer-foot #checkoutBtn:hover {
  background: #a52a1c;
}

/* Continue Shopping button (.btn.ghost used inside .drawer-foot) —
   must be light text on the dark drawer background, matching the
   ivory tone used everywhere else in the cart drawer */
.drawer-foot .btn.ghost{
  background:transparent;
  color:#ece5d3;
  border:1px solid rgba(236,229,211,0.14);
}
.drawer-foot .btn.ghost:hover{
  border-color:#9c7a3e;
}

/* ============================================================
   Modal overlay (Account / Checkout / Product detail) — single
   source of truth, scoped under .overlay for higher specificity
   than style.css / style-dark-pages.css, so no changes needed
   in those files.
   ============================================================ */
.overlay{
  position:fixed;inset:0;
  background:rgba(11,11,10,0.85);
  display:none;
  align-items:center;justify-content:center;
  z-index:200;
  padding:20px;
}
.overlay.open{display:flex;}
.overlay .modal{
  background:#19170f;
  color:#ece5d3;
  max-width:460px;width:100%;
  max-height:90vh;overflow-y:auto;
  position:relative;
  padding:30px 28px 32px;
  border:1px solid rgba(236,229,211,0.14);
  font-family:'IBM Plex Mono',monospace;
}
.overlay .modal-close{
  position:absolute;top:14px;right:14px;
  background:none;border:none;
  font-size:18px;color:#ece5d3;cursor:pointer;
}
.overlay .modal .section-label{
  font-family:'IBM Plex Mono',monospace;
  font-size:0.65rem;letter-spacing:0.15em;text-transform:uppercase;
  color:#9c7a3e;
}
.overlay .modal h2{
  font-family:'Bebas Neue',sans-serif;
  font-size:1.6rem;text-transform:uppercase;
  margin:6px 0 18px;color:#ece5d3;
}
.overlay .modal-note{
  font-size:0.68rem;color:#b8ae97;margin-top:16px;line-height:1.6;
}
.overlay .tab-row{
  display:flex;gap:0;margin-bottom:18px;
  border-bottom:1px solid rgba(236,229,211,0.14);
}
.overlay .tab-btn{
  flex:1;background:none;border:none;padding:10px;
  font-family:'IBM Plex Mono',monospace;
  font-size:0.7rem;letter-spacing:0.06em;text-transform:uppercase;
  color:#b8ae97;border-bottom:2px solid transparent;cursor:pointer;
}
.overlay .tab-btn.active{color:#ece5d3;border-color:#9c7a3e;}
.overlay .tab-panel{display:none;}
.overlay .tab-panel.active{display:block;}
.overlay .form-field{margin-bottom:14px;}
.overlay .form-field label{
  display:block;font-size:0.68rem;letter-spacing:0.06em;
  text-transform:uppercase;color:#b8ae97;margin-bottom:6px;
}
.overlay .form-field input,
.overlay .form-field textarea,
.overlay .form-field select{
  width:100%;padding:10px 12px;
  border:1px solid rgba(236,229,211,0.14);
  background:#171510;color:#ece5d3;
  font-family:'IBM Plex Mono',monospace;font-size:0.85rem;
  box-sizing:border-box;
}
.overlay .form-field input:focus,
.overlay .form-field textarea:focus{outline:2px solid #9c7a3e;}
.overlay #stripePayBtn{width:100%;margin-bottom:10px;font-family:'IBM Plex Mono',monospace;font-size:0.75rem;letter-spacing:0.08em;text-transform:uppercase;padding:14px 22px;border:1px solid #a52a1c;background:#7c1f16;color:#ece5d3;cursor:pointer;box-sizing:border-box;}
.overlay #stripePayBtn:hover{background:#a52a1c;}
.overlay #paypalButtonContainer{margin-top:10px;min-height:45px;}
.overlay #checkoutPayError{
  color:#a52a1c;font-size:0.72rem;margin-bottom:10px;
}

/* Checkout summary line items (.option-line, generated by
   renderCheckoutSummary() in main.js) — the .option-line rule in
   style.css is broken (missing leading dot: "option-line{...}"
   instead of ".option-line{...}"), so it never applies anywhere on
   the site. Fixed here instead of touching the minified style.css. */
.overlay .option-line{
  display:flex;
  align-items:baseline;
  gap:10px;
  font-size:0.8rem;
  padding:8px 0;
  border-bottom:1px dotted rgba(236,229,211,0.14);
  color:#ece5d3;
}
.overlay .option-line .box{
  font-size:0.85rem;color:#a52a1c;width:16px;
}
.overlay .option-line .code{
  color:#b8ae97;width:56px;flex-shrink:0;
}
.overlay .option-line .desc{flex:1;}

.welcome-overlay{
  position:fixed;inset:0;
  background:rgba(11,11,10,0.85);
  display:none;
  align-items:center;justify-content:center;
  z-index:210;
  padding:20px;
}
.welcome-overlay.open{display:flex;}
.welcome-card{
  max-width:420px;width:100%;
  background:#19170f;color:#ece5d3;
  border:1px solid rgba(236,229,211,0.14);
  position:relative;
}
.welcome-top{
  background:#0b0b0a;color:#ece5d3;
  padding:16px 24px;display:flex;justify-content:space-between;align-items:center;
}
.welcome-top .doc-id{color:#b8ae97;font-size:0.6rem;font-family:'IBM Plex Mono',monospace;letter-spacing:0.06em;text-align:left;}
.welcome-close{background:none;border:none;color:#ece5d3;font-size:18px;cursor:pointer;}
.welcome-body{padding:26px 26px 30px;text-align:center;}
.welcome-body .stamp{
  font-family:'Bebas Neue',sans-serif;font-size:0.9rem;letter-spacing:0.1em;
  color:#a52a1c;border:2.5px solid #a52a1c;
  padding:6px 12px;transform:rotate(-7deg);display:inline-block;
  margin-bottom:10px;
}
.welcome-body h2{font-family:'Bebas Neue',sans-serif;font-size:1.6rem;text-transform:uppercase;margin:6px 0;color:#ece5d3;}
.welcome-body p{font-size:0.78rem;color:#b8ae97;margin:0 0 20px;line-height:1.6;font-family:'IBM Plex Mono',monospace;}
.welcome-form{display:flex;flex-direction:column;gap:10px;}
.welcome-form input{
  width:100%;padding:10px 12px;
  border:1px solid rgba(236,229,211,0.14);
  background:#211e15;color:#ece5d3;
  font-family:'IBM Plex Mono',monospace;font-size:13px;
  box-sizing:border-box;
}
.welcome-form input:focus{outline:2px solid #b5551f;}
.welcome-body .btn{
  font-family:'IBM Plex Mono',monospace;font-size:0.75rem;letter-spacing:0.08em;text-transform:uppercase;
  padding:12px 22px;border:1px solid #ece5d3;background:#ece5d3;color:#0b0b0a;cursor:pointer;width:100%;
  box-sizing:border-box;
}
.welcome-body .btn:hover{opacity:0.85;}
.welcome-code{
  display:none;border:2px dashed #a52a1c;padding:14px;
  font-family:'Bebas Neue',sans-serif;font-size:1.3rem;letter-spacing:0.1em;
  color:#a52a1c;margin-top:16px;
}
.welcome-code.show{display:block;}