/* ============================================================
   Cart drawer + search overlay + verification widget
   + sticky buy rail + ghost-light button
   ============================================================ */

/* ---------- BUTTON VARIANT ---------- */
.btn--ghost-light {
  background: transparent;
  color: var(--ink);
  border-color: var(--hairline-strong);
}
.btn--ghost-light:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------- CART BADGE ---------- */
.cart__dot.is-empty { background: var(--muted-soft); }

/* ---------- CART DRAWER ---------- */
.cart-overlay {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(0,0,0,0.55);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-med) var(--ease-out);
}
.cart-overlay.is-open { opacity: 1; pointer-events: auto; }

.cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(440px, 100vw);
  background: var(--canvas);
  z-index: 71;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--dur-med) var(--ease-out);
  border-left: 1px solid var(--hairline);
}
.cart-drawer.is-open { transform: translateX(0); }
.cart-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 24px;
  border-bottom: 1px solid var(--hairline);
}
.cart-drawer__head .iconbtn { color: var(--ink); }
.cart-drawer__body {
  flex: 1; overflow-y: auto;
  padding: 8px 0;
}
.cart-drawer__foot {
  border-top: 1px solid var(--hairline);
  padding: 18px 24px 22px;
  display: flex; flex-direction: column; gap: 10px;
}
.cart-foot-row {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font); font-size: 14px;
  padding-bottom: 8px;
}
.cart-foot-row :last-child { font-size: 22px; font-weight: 300; }

.cart-shipbar {
  padding: 12px 24px;
  background: var(--surface-soft);
  border-bottom: 1px solid var(--hairline);
  font-size: 12px;
}
.cart-shipbar__txt { color: var(--muted); margin-bottom: 8px; }
.cart-shipbar__txt b { color: var(--ink); font-weight: 500; }
.cart-shipbar__track { height: 3px; background: var(--hairline); position: relative; overflow: hidden; }
.cart-shipbar__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: var(--blue); transition: width var(--dur-med) var(--ease-out); }

.cart-line {
  display: grid; grid-template-columns: 80px 1fr; gap: 14px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--hairline);
}
.cart-line__photo {
  background: var(--surface-card); aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
}
.cart-line__photo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cart-line__name { font-size: 14px; font-weight: 700; margin: 0 0 8px; line-height: 1.3; }
.cart-line__row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.cart-line__price { font-size: 14px; font-weight: 500; }
.cart-line__remove {
  background: transparent; border: 0; padding: 0; margin: 0;
  font-family: var(--font); font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--muted); cursor: pointer;
}
.cart-line__remove:hover { color: var(--error); }

.qty {
  display: inline-flex; align-items: center;
  border: 1px solid var(--hairline-strong);
}
.qty__btn {
  width: 28px; height: 28px; background: transparent; border: 0;
  font-size: 16px; line-height: 1; color: var(--ink); cursor: pointer;
}
.qty__btn:hover { background: var(--surface-soft); }
.qty__val { width: 30px; text-align: center; font-size: 13px; }

.cart-empty {
  padding: 56px 24px; text-align: center;
  display: flex; flex-direction: column; gap: 14px; align-items: center;
}
.cart-empty svg { width: 36px; height: 36px; color: var(--muted-soft); }
.cart-empty p { color: var(--muted); margin: 0; }

body.cart-open, body.search-open { overflow: hidden; }

/* ---------- QUICK-ADD on product cards ---------- */
.card__quick {
  position: absolute;
  left: 12px; right: 12px; bottom: 12px;
  background: var(--ink); color: #fff;
  padding: 10px 14px;
  border: 0; cursor: pointer;
  font-family: var(--font); font-size: 12px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out), background var(--dur-fast) var(--ease-out);
  z-index: 2;
}
.card { position: relative; }
.card:hover .card__quick { opacity: 1; transform: translateY(0); }
.card__quick:hover { background: var(--blue); }
.card__quick.is-added { background: var(--success); pointer-events: none; }
.card__quick.is-added::before { content: "\2713  "; }

@media (max-width: 720px) {
  .card__quick { opacity: 1; transform: none; }
}

/* ---------- SEARCH OVERLAY ---------- */
.search-overlay {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(11,11,11,0.78);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-med) var(--ease-out);
  padding: 80px 20px 20px;
  overflow-y: auto;
}
.search-overlay.is-open { opacity: 1; pointer-events: auto; }
.search-overlay__inner {
  max-width: 880px; margin: 0 auto;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  display: flex; flex-direction: column;
  max-height: calc(100vh - 100px);
}
.search-overlay__head {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--hairline);
}
.search-overlay__head svg { color: var(--muted); width: 20px; height: 20px; }
.search-overlay__head input {
  border: 0; outline: none; background: transparent;
  font-family: var(--font); font-size: 18px; font-weight: 300;
  padding: 12px 0; color: var(--ink);
  width: 100%;
}
.search-overlay__head .iconbtn { color: var(--ink); }
.search-overlay__body {
  padding: 24px; overflow-y: auto;
}
.search-suggest .eyebrow { display: block; margin-bottom: 14px; }
.search-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.search-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1px; background: var(--hairline); border: 1px solid var(--hairline);
}
.search-hit {
  display: flex; gap: 14px;
  background: var(--canvas); padding: 14px;
  text-decoration: none; color: inherit;
  transition: background var(--dur-fast) var(--ease-out);
}
.search-hit:hover { background: var(--surface-soft); }
.search-hit__photo {
  width: 64px; height: 64px;
  background: var(--surface-card);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.search-hit__photo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.search-hit__body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.search-hit__cat { font-size: 10px; font-weight: 500; letter-spacing: 1.4px; text-transform: uppercase; color: var(--blue); }
.search-hit__name { font-size: 14px; font-weight: 700; margin: 0; }
.search-hit__meta { font-size: 12px; color: var(--muted); }
.search-hit__price { font-size: 14px; font-weight: 500; margin-top: auto; }
.search-empty {
  padding: 40px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px;
  color: var(--muted);
}
.search-empty svg { width: 32px; height: 32px; }

/* ---------- VERIFICATION WIDGET ---------- */
.verify-widget {
  background: var(--canvas);
  border: 1px solid var(--hairline-strong);
  padding: 32px;
  display: flex; flex-direction: column; gap: 20px;
}
.verify-form {
  display: grid; grid-template-columns: 1fr auto;
  gap: 8px;
}
.verify-form input {
  padding: 14px 16px;
  font-family: var(--font); font-size: 15px;
  border: 1px solid var(--hairline-strong);
  background: var(--canvas);
  color: var(--ink);
  outline: none;
}
.verify-form input:focus { border-color: var(--blue); }
.verify-miss {
  background: var(--surface-soft);
  border: 1px solid var(--hairline-strong);
  padding: 16px 20px;
  display: flex; align-items: center; gap: 12px;
  font-size: 14px;
}
.verify-miss svg { width: 20px; height: 20px; color: var(--warning); flex-shrink: 0; }

/* ---------- STICKY BUY RAIL (PDP) ---------- */
.buy-rail {
  position: sticky;
  bottom: 0;
  background: var(--canvas);
  border-top: 1px solid var(--hairline-strong);
  padding: 14px 20px;
  display: none;
  align-items: center; justify-content: space-between; gap: 16px;
  z-index: 30;
  margin: 0 -20px;
}
.buy-rail__price { font-size: 22px; font-weight: 300; font-variant-numeric: tabular-nums; }
.buy-rail .btn { flex: 1; max-width: 280px; justify-content: center; }
@media (max-width: 900px) {
  .buy-rail { display: flex; }
}

/* ---------- STUB PAGE PRIMITIVES ---------- */
.page-head { display:flex; flex-direction:column; gap:14px; margin-bottom:48px; max-width:760px; }
.page-head__lede { font-size:16px; font-weight:300; line-height:1.55; color:var(--body); margin-top:8px; }
.prose { max-width:680px; font-size:16px; font-weight:300; line-height:1.65; color:var(--body); display:flex; flex-direction:column; gap:16px; }
.prose ul, .prose ol { margin:0; padding-left:24px; display:flex; flex-direction:column; gap:8px; }
.prose a { color:var(--blue); }
.spec-list { display:grid; grid-template-columns:1fr; max-width:720px; }
.spec-list > div { display:grid; grid-template-columns:200px 1fr; gap:24px; padding:18px 0; border-bottom:1px solid var(--hairline); }
.spec-list dt { font-size:11px; font-weight:500; letter-spacing:1.6px; text-transform:uppercase; color:var(--muted); margin:0; }
.spec-list dd { font-size:15px; color:var(--ink); margin:0; }
.faq { display:flex; flex-direction:column; max-width:760px; border-top:1px solid var(--hairline); }
.faq details { border-bottom:1px solid var(--hairline); padding:22px 0; }
.faq summary { font-family:var(--font); font-size:18px; font-weight:300; color:var(--ink); cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; }
.faq summary::after { content:"+"; font-size:22px; color:var(--blue); transition:transform .25s; }
.faq details[open] summary::after { content:"\2212"; transform:rotate(0); }
.faq details p { margin:14px 0 0; font-size:15px; line-height:1.6; color:var(--body); }
.checkout-grid { display:grid; grid-template-columns:1fr 360px; gap:48px; align-items:flex-start; }
.checkout-col { display:flex; flex-direction:column; gap:18px; }
.checkout-col .title-md { margin-top:14px; padding-top:14px; border-top:1px solid var(--hairline); }
.checkout-col .title-md:first-child { margin-top:0; padding-top:0; border:0; }
.field { display:flex; flex-direction:column; gap:6px; }
.field span { font-size:11px; font-weight:500; letter-spacing:1.6px; text-transform:uppercase; color:var(--muted); }
.field input { padding:14px 16px; border:1px solid var(--hairline-strong); background:var(--canvas); font-family:var(--font); font-size:15px; color:var(--ink); outline:none; }
.field input:focus { border-color:var(--blue); }
.field-row { display:grid; grid-template-columns:2fr 1fr 1fr; gap:8px; }
.pay-options { display:flex; flex-direction:column; gap:8px; }
.pay-opt { display:flex; align-items:center; gap:12px; padding:14px 16px; border:1px solid var(--hairline-strong); cursor:pointer; }
.pay-opt:has(input:checked) { border-color:var(--blue); background:rgba(28,105,212,0.04); }
.check { display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--body); margin-top:8px; }
.check input { margin-top:3px; }
.checkout-summary { background:var(--surface-soft); padding:24px; display:flex; flex-direction:column; gap:8px; position:sticky; top:90px; }
.checkout-summary .cart-foot-row { padding:8px 0; }
@media (max-width:900px) { .checkout-grid { grid-template-columns:1fr; } .checkout-summary { position:static; } .field-row { grid-template-columns:1fr; } }

/* ---------- RUO PDP DISCLAIMER ---------- */
.pdp-ruo { padding: 32px 0; background: var(--surface-soft); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.ruo-block { display: grid; grid-template-columns: 32px 1fr; gap: 18px; align-items: flex-start; max-width: 920px; padding: 24px; background: var(--canvas); border-left: 3px solid var(--blue); }
.ruo-block svg { width: 28px; height: 28px; color: var(--blue); }
.ruo-block h3 { margin: 0 0 6px; font-size: 14px; font-weight: 700; letter-spacing: 0.04em; }
.ruo-block p { font-size: 13px; line-height: 1.6; color: var(--body); margin: 0; }
.ruo-block a { color: var(--blue); }
@media (max-width: 600px) { .ruo-block { grid-template-columns: 1fr; padding: 18px; } }