
/* ===== VERDOR Checkout v2 (mobile-first) ===== */
/* THEME INHERIT */
body.checkout, .checkout-v2{ font-family: inherit !important; color: var(--primary, #111) !important; }
:root{ --vd-primary: var(--accent, #caa43a); }

:root{
  --vd-radius:14px;
  --vd-border:1px solid rgba(0,0,0,.08);
  --vd-shadow:0 8px 24px rgba(0,0,0,.08);
  --vd-gap:14px;
  --vd-primary:#caa43a; /* goldish */
  --vd-text:#111;
}
/* reset small inconsistencies */
*{box-sizing:border-box}

.checkout-v2{max-width:960px;margin:0 auto;padding:12px}
.checkout-v2 h1{font-size:22px;margin:8px 0 14px}
.section-card{background:#fff;border:var(--vd-border);border-radius:var(--vd-radius);box-shadow:var(--vd-shadow);padding:var(--vd-gap);margin:12px 0}

.form-grid{display:flex;flex-direction:column;gap:var(--vd-gap)}
.form-grid .row{display:flex;flex-direction:column;gap:var(--vd-gap)}
.form-grid label{font-weight:600;font-size:14px;margin-bottom:6px}
.form-grid input, .form-grid select{
  width:100%;height:50px;border-radius:12px;border:1px solid rgba(0,0,0,.12);
  padding:12px 14px;font-size:16px;background:#fff
}

/* Payment area */
#payment-element, #card-element, .StripeElement{
  width:100%;display:block;background:#fff;border:1px solid rgba(0,0,0,.12);
  border-radius:12px;padding:10px;min-height:50px
}
.paybar{position:sticky;bottom:0;left:0;right:0;background:rgba(255,255,255,.96);
  border-top:1px solid rgba(0,0,0,.08);backdrop-filter:blur(6px);padding:10px 12px;margin:0 -12px;z-index:900}
.paybar-inner{display:flex;gap:12px;align-items:center}
.paybar-total{margin-left:auto;font-weight:700}
.paybtn{flex:1;display:inline-flex;align-items:center;justify-content:center;height:50px;border-radius:12px;border:none;
  background:var(--vd-primary);color:var(--primary, #111);font-weight:700;font-size:16px;cursor:pointer}
.paybtn:disabled{opacity:.6;cursor:not-allowed}

/* Summary table */
.summary-table{width:100%;border-collapse:collapse}
.summary-table th,.summary-table td{padding:8px 0;border-bottom:1px solid rgba(0,0,0,.06);text-align:left}
.summary-table th:last-child,.summary-table td:last-child{text-align:right}

/* Desktop enhancements */
@media (min-width:1025px){
  .checkout-v2{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;padding:20px}
  .paybar{position:static;margin:0;padding:0;background:transparent;border:0;backdrop-filter:none}
  .paybtn{width:100%}
}
/* Hide site mobile burger inside checkout content if any */
.checkout-v2 .menu-toggle,.checkout-v2 .burger,.checkout-v2 .hamburger{display:none!important}


/* Desktop bottom bar half-width on the left */
@media (min-width: 1025px){
  #paybar-bottom{justify-content:flex-start}
  #paybar-bottom .wrap{max-width:640px;margin:0 0 0 20px}
}


/* Keep recap, info and pay sections on their own layers */
#info-section, #pay-section, .order-summary{
  position:relative;
  z-index: 1;
}




/* ===== Checkout standard patterns ===== */
/* Minimal header on checkout only */
.checkout-min-header{
  display:flex; align-items:center; gap:12px; margin:0 0 12px;
}
.checkout-min-header .back-to-cart{
  text-decoration:none; font-weight:600; font-size:14px; border:1px solid rgba(0,0,0,.1);
  padding:8px 10px; border-radius:8px; display:inline-block;
}

/* Hide global site navigation on checkout to reduce distractions */
body.checkout header nav,
body.checkout header .menu,
body.checkout .main-menu,
body.checkout .nav, 
body.checkout .navbar,
body.checkout .vd17-burger,
body.checkout .vd16b-burger,
body.checkout .header-top,
body.checkout .header-actions,
body.checkout .search,
body.checkout .megamenu,
body.checkout .category-bar{
  display:none !important;
}

/* Keep logo area if present */
body.checkout .logo, body.checkout header .logo{ display:inline-flex !important; }

/* Simplify footer on checkout */
body.checkout footer .newsletter,
body.checkout footer .social,
body.checkout footer .cta,
body.checkout footer .widgets,
body.checkout footer .promo{
  display:none !important;
}
body.checkout footer, body.checkout .footer{
  border-top:1px solid rgba(0,0,0,.06);
  margin-top:18px;
  padding-top:12px;
}

/* Make sure the page isn't cramped on mobile */
.checkout-v2{ padding-top:12px; }


/* Back-to-cart link neatly placed inside the checkout card */
.card-backline{ display:flex; justify-content:flex-start; margin:0 0 8px; }
.card-backline .back-to-cart{
  display:inline-block; font-weight:600; font-size:14px; text-decoration:none;
  border:1px solid rgba(0,0,0,.12); border-radius:8px; padding:8px 10px;
}
@media (max-width: 768px){
  .card-backline{ margin-bottom:10px; }
  .card-backline .back-to-cart{ font-size:13px; }
}


/* BACK LINK THEME */
.back-to-cart{
  color: var(--primary, #111) !important;
  border-color: rgba(17,17,17,.12) !important;
}
.back-to-cart:hover{
  background: rgba(17,17,17,.04) !important;
}


/* Recap thumbnails */
.summary-table td.prod-cell{ display:flex; align-items:center; gap:10px; }
.summary-table .recap-thumb{ width:40px; height:40px; object-fit:cover; border-radius:8px; box-shadow:0 2px 6px rgba(0,0,0,.06); flex:0 0 40px; }
.summary-table .prod-title{ display:inline-block; }
@media (max-width: 768px){
  .summary-table .recap-thumb{ width:36px; height:36px; border-radius:8px; }
}


/* === Normalize section titles to match site (no bubble background) === */
.section-card > h2{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 0 10px !important;
  color: var(--primary, #111) !important;
  font-family: inherit !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}
/* Keep H1 "Informations" aligned too */
.section-card > h1{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 0 10px !important;
  color: var(--primary, #111) !important;
  font-family: inherit !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}


/* ===== FONT SYNC WITH SITE (inherit system UI stack) ===== */
body.checkout, .checkout-v2{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  color: var(--primary, #111) !important;
}
.checkout-v2 *{ font-family: inherit !important; }
.section-card > h1, .section-card > h2, .section-card > h3{ font-family: inherit !important; color: var(--primary, #111) !important; }


/* ===== Harmonize recap: push total to the far right ===== */
.summary-table{ table-layout: fixed; width:100%; }
.summary-table th, .summary-table td{ font-variant-numeric: tabular-nums; }
.summary-table th:nth-child(1), .summary-table td:nth-child(1){ width: 66%; padding-right: 12px; }
.summary-table th:nth-child(2), .summary-table td:nth-child(2){ width: 10%; text-align: right; padding-right: 10px; }
.summary-table th:nth-child(3), .summary-table td:nth-child(3){ width: 24%; text-align: right; white-space: nowrap; padding-right: 0; }
.section-card .summary-table th:last-child, .section-card .summary-table td:last-child{ text-align:right; padding-right:0; }

