/* ==========================================================================
   Belec 2026 — Phase D: forms, auth, 5-step checkout, account, CMS, static.
   CSS-only restyle on stock PrestaShop classes/ids. Loaded via belec.css.
   eicaptcha (#captcha-box) is module/JS-rendered — styled only, never moved.
   ========================================================================== */

/* ---- Global form controls ----------------------------------------------- */
.form-group { margin-bottom: 14px; }
.form-control,
.std input[type=text], .std input[type=email], .std input[type=password], .std input[type=tel],
#account-creation_form input[type=text], #account-creation_form input[type=password],
.contact-form-box input[type=text], .contact-form-box textarea {
  width: 100%;
  font-family: var(--bel-font-body);
  font-size: 14px;
  color: var(--bel-ink);
  padding: 10px 12px;
  height: auto;
  background: var(--bel-card);
  border: 1px solid var(--bel-rule);
  border-radius: var(--bel-r-sm);
  box-shadow: none;
  transition: border-color var(--bel-fast) var(--bel-ease), box-shadow var(--bel-fast) var(--bel-ease);
}
.form-control:focus,
.std input:focus, .contact-form-box input:focus, .contact-form-box textarea:focus {
  outline: none;
  border-color: var(--bel-ink);
  box-shadow: 0 0 0 3px rgba(245,206,26,.28);
}
select.form-control {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  min-height: 42px;
  padding: 10px 38px 10px 12px;
  line-height: 1.3;
  cursor: pointer;
  color: var(--bel-ink);
  background-color: var(--bel-card);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A3A33' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 15px;
  text-overflow: ellipsis;
}
select.form-control:hover { border-color: var(--bel-ink-3); }
select.form-control::-ms-expand { display: none; }
textarea.form-control { min-height: 110px; resize: vertical; }
.form-group label, .std label, fieldset label, .contact-form-box label { font-weight: 600; font-size: 13px; color: var(--bel-ink-2); margin-bottom: 6px; display: inline-block; }
.required sup, sup.required, .form_error { color: var(--bel-stock-out); }
.checkbox label, .radio-inline { font-weight: 400; }
/* Native checkboxes/radios — consistent gold accent + size everywhere (selects/checkboxes/radios are
   no longer uniform-skinned; this is the single source of truth, matching the category filters). */
.checkbox input, .radio input, input[type=checkbox], input[type=radio] {
  accent-color: var(--bel-gold); width: 16px; height: 16px; cursor: pointer; vertical-align: middle; margin: 0;
}

/* generic "box" section wrapper used across account/auth */
.box, .std .box, fieldset.box {
  background: var(--bel-card);
  border: 1px solid var(--bel-rule);
  border-radius: var(--bel-r-md);
  padding: 22px;
}

/* ---- Buttons (account/checkout submits) --------------------------------- */
.account_creation .button, .footer_links .btn,
#SubmitLogin, #SubmitCreate, #submitAccount, #submitAddress, #submitGuestAccount,
button[name=submitIdentity], button[name=processAddress], button[name=processCarrier],
button[name=submitMessage], #submitMessage, button[name=submitGuestTracking],
.cart_navigation .button, .form-group .btn, .footer_links + .clearfix .btn,
p.submit .btn, .submit button, .submit .btn {
  font-family: var(--bel-font-body);
  font-weight: 600;
  border-radius: var(--bel-r-sm);
  border: 0;
}
/* primary (forward) submits → gold; kill legacy gradients */
#SubmitLogin, #SubmitCreate, #submitAccount, #submitAddress, #submitGuestAccount,
button[name=submitIdentity], button[name=processAddress], button[name=processCarrier],
#submitMessage, button[name=submitGuestTracking] {
  background: var(--bel-gold) !important; background-image: none !important; color: var(--bel-gold-ink) !important;
  padding: 12px 22px; display: inline-flex; align-items: center; gap: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
#SubmitLogin:hover, #SubmitCreate:hover, #submitAccount:hover, #submitAddress:hover,
button[name=processAddress]:hover, button[name=processCarrier]:hover, #submitMessage:hover { background: var(--bel-gold-hi) !important; }
#SubmitLogin span, #SubmitCreate span, #submitAccount span, #submitAddress span,
button[name=processAddress] span, button[name=processCarrier] span, #submitMessage span { color: var(--bel-gold-ink) !important; }
/* secondary (back) buttons */
.button-exclusive, .btn.button-exclusive, a.button-medium { color: var(--bel-ink-2); }

/* ---- Alerts -------------------------------------------------------------- */
.alert { border-radius: var(--bel-r-md); border: 1px solid var(--bel-rule); font-size: 14px; padding: 14px 16px; }
.alert ol, .alert ul { margin: 6px 0 0 18px; }
.alert-success { background: rgba(15,122,60,.1); border-color: rgba(15,122,60,.3); color: var(--bel-new); }
.alert-danger  { background: rgba(163,30,30,.08); border-color: rgba(163,30,30,.3); color: var(--bel-stock-out); }
.alert-warning { background: rgba(184,92,0,.1); border-color: rgba(184,92,0,.3); color: var(--bel-stock-low); }
.alert-info    { background: var(--bel-sheet); color: var(--bel-ink-2); }

/* ---- Headings on account/checkout pages --------------------------------- */
.page-subheading { font-family: var(--bel-font-display); font-size: 16px; font-weight: 800; letter-spacing: -.01em; margin: 0 0 14px; }
body#authentication .page-heading, body#order .page-heading, body#my-account .page-heading,
body#identity .page-heading, body#address .page-heading, body#addresses .page-heading,
body#history .page-heading, body#order-detail .page-heading, body#contact .page-heading,
body#cms .page-heading, body#stores .page-heading, body#sitemap .page-heading { margin: 8px 0 20px; }

/* ---- Authentication (login + register) ---------------------------------- */
body#authentication #create-account_form.box, body#authentication #login_form.box { height: 100%; }
body#authentication .page-heading.bottom-indent, body#authentication h3.page-subheading { margin-bottom: 14px; }
body#authentication .lost_password { font-size: 13px; }
body#authentication .lost_password a { color: var(--bel-gold-lo); }
#account-creation_form { background: var(--bel-card); border: 1px solid var(--bel-rule); border-radius: var(--bel-r-md); padding: 24px; }
#account-creation_form .account_creation { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--bel-rule); }

/* v2 connexion landing — two equal-height cards (login + create) in the full-width shell.
   Scoped under .belv2-catalog (added by the AuthController override). Reuses .belv2-co-card. */
.belv2-catalog .belv2-auth-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: stretch; margin-top: 4px; }
.belv2-catalog .belv2-auth-card { display: flex; flex-direction: column; }
.belv2-catalog .belv2-auth-card .form_content { display: flex; flex-direction: column; flex: 1; }
.belv2-catalog .belv2-auth-card__title { font-family: var(--bel-font-display); font-size: 20px; font-weight: 700; color: var(--bel-ink); margin: 0 0 18px; padding: 0 0 14px; border-bottom: 1px solid var(--bel-rule); }
.belv2-catalog .belv2-auth-card__lead { color: var(--bel-muted); font-size: 14px; line-height: 1.6; margin: 0 0 16px; }
.belv2-catalog .belv2-auth-card .form-group > label { font-family: var(--bel-font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--bel-muted); font-weight: 400; margin-bottom: 6px; display: block; }
/* inputs full-width to match the CTA button below. .form_content is a flex column, so
   stretch every row and force the controls to 100% (password is wrapped in an inline <span>).
   NB: authentication.css caps `#login_form/#create-account_form .form-control` at max-width:271px
   (an ID rule) — beat it with the ID-qualified selectors below. */
.belv2-catalog .belv2-auth-card .form_content > * { width: 100%; align-self: stretch; }
.belv2-catalog .belv2-auth-card .form-group > span { display: block; width: 100%; }
.belv2-catalog #login_form.belv2-auth-card .form-control,
.belv2-catalog #create-account_form.belv2-auth-card .form-control { display: block; width: 100%; max-width: none; box-sizing: border-box; }
.belv2-catalog .belv2-auth-card .lost_password { margin: 2px 0 0; font-size: 13px; }
.belv2-catalog .belv2-auth-card .lost_password a { color: var(--bel-gold-lo); }
.belv2-catalog .belv2-auth-card .lost_password a:hover { text-decoration: underline; }
/* push the submit row to the bottom so both cards line up */
.belv2-catalog .belv2-auth-card .submit { margin-top: auto; padding-top: 18px; }
.belv2-catalog .belv2-auth-card .submit .bel-btn { width: 100%; }
/* login = gold primary; create = ghost secondary. Beat the legacy gold !important
   rule (~lines 72-82) that forces #SubmitCreate gold, via higher specificity + !important. */
.belv2-catalog .belv2-auth-card #SubmitCreate.bel-btn--ghost {
  background: transparent !important; background-image: none !important;
  color: var(--bel-ink) !important; border: 1px solid var(--bel-rule) !important;
  box-shadow: none !important;
}
.belv2-catalog .belv2-auth-card #SubmitCreate.bel-btn--ghost:hover { background: var(--bel-sheet) !important; border-color: var(--bel-ink) !important; }
.belv2-catalog .belv2-auth-card #SubmitCreate.bel-btn--ghost span { color: var(--bel-ink) !important; }
@media (max-width: 760px) {
  .belv2-catalog .belv2-auth-grid { grid-template-columns: 1fr; }
}

/* ---- eicaptcha box (style only; module/JS-rendered) --------------------- */
#captcha-box, .g-recaptcha { margin: 12px 0; }
.account_eicaptcha div#captcha-box { float: none; }

/* ---- Checkout stepper (#order_step) ------------------------------------- */
#order_step.step { display: flex; gap: 8px; list-style: none; margin: 0 0 24px; padding: 0; flex-wrap: wrap; counter-reset: step; }
#order_step.step li { float: none; background: none; flex: 1 1 0; min-width: 120px; margin: 0; }
#order_step.step li span, #order_step.step li a {
  display: block; text-align: center;
  font-family: var(--bel-font-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  padding: 12px 8px; border-radius: var(--bel-r-sm);
  background: var(--bel-sheet); color: var(--bel-muted); border: 1px solid var(--bel-rule);
}
#order_step.step li.step_current span, #order_step.step li.step_current a { background: var(--bel-gold); color: var(--bel-gold-ink); border-color: var(--bel-gold); font-weight: 700; }
#order_step.step li.step_done span, #order_step.step li.step_done a { background: var(--bel-ink); color: var(--bel-paper); border-color: var(--bel-ink); }
#order_step.step li.step_done a:hover { background: var(--bel-ink-2); }

/* ---- Address step ------------------------------------------------------- */
body#order #address_delivery, body#order #address_invoice,
.address_select { background: var(--bel-card); border: 1px solid var(--bel-rule); border-radius: var(--bel-r-md); padding: 16px; }
body#order .addresses .waitimage { display: none; }
#ordermsg textarea { width: 100%; }

/* ---- Carrier step (delivery options as cards) --------------------------- */
.delivery_options_address .delivery_option, .delivery_option {
  background: var(--bel-card); border: 1px solid var(--bel-rule); border-radius: var(--bel-r-md);
  padding: 14px 16px; margin-bottom: 10px; cursor: pointer; display: flex; align-items: center; gap: 12px;
}
.delivery_option.selected, .delivery_option:hover { border-color: var(--bel-gold); }
.delivery_option_radio { margin: 0; }
#cgv, .checker { vertical-align: middle; }
.gift_div, #gift_div { margin-top: 12px; }
#noCarrierWarning { margin: 12px 0; }

/* ---- Payment step (payment_module choice cards) ------------------------- */
.paiement_block { margin-top: 18px; }
#HOOK_PAYMENT .payment_module, p.payment_module { margin: 0 0 12px; }
#HOOK_PAYMENT .payment_module a, p.payment_module a {
  display: flex; align-items: center; gap: 12px;
  background: var(--bel-card); border: 1px solid var(--bel-rule); border-radius: var(--bel-r-md);
  padding: 16px 18px; color: var(--bel-ink); font-weight: 600;
  background-position: 18px center; background-repeat: no-repeat;
  min-height: 60px; padding-left: 18px;
  transition: border-color var(--bel-fast) var(--bel-ease), transform var(--bel-fast) var(--bel-ease);
}
#HOOK_PAYMENT .payment_module a:hover, p.payment_module a:hover { border-color: var(--bel-gold); transform: translateY(-1px); }
#HOOK_PAYMENT .payment_module a span, p.payment_module a span { font-weight: 400; color: var(--bel-muted); font-size: 13px; }

/* ---- Confirmation ------------------------------------------------------- */
body#order-confirmation .page-heading, #order-confirmation .page-heading { text-align: center; }
.order-confirmation.box, .cheque-indent, #order-confirmation .box { background: var(--bel-card); border: 1px solid var(--bel-rule); border-radius: var(--bel-r-md); padding: 24px; }

/* ---- My-account dashboard ----------------------------------------------- */
.myaccount-link-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px;
  list-style: none; margin: 0 0 20px; padding: 0;
}
.myaccount-link-list li { margin: 0; background: none; }
.addresses-lists .myaccount-link-list li a, .myaccount-link-list li a {
  display: flex !important; align-items: center; gap: 12px;
  background: var(--bel-card) !important; border: 1px solid var(--bel-rule); border-radius: var(--bel-r-md);
  padding: 18px; font-size: 14px; font-weight: 600; color: var(--bel-ink);
  transition: border-color var(--bel-fast) var(--bel-ease), transform var(--bel-fast) var(--bel-ease); height: 100%;
  min-height: 64px;
}
.addresses-lists .myaccount-link-list li a:hover, .myaccount-link-list li a:hover { border-color: var(--bel-gold); transform: translateY(-2px); color: var(--bel-ink); }
.myaccount-link-list li a i, .myaccount-link-list li a [class^=icon] { font-size: 22px; color: var(--bel-gold-lo); flex: 0 0 auto; }
.myaccount-link-list li a span { background: none !important; padding: 0 !important; border: 0 !important; color: inherit; font-size: 14px; }

/* ---- Account tables (history / discount / slips / order-detail) --------- */
.table.table-bordered, #order-list, table.discount, .detail_step_by_step {
  width: 100%; border: 1px solid var(--bel-rule); border-radius: var(--bel-r-md);
  border-collapse: separate; border-spacing: 0; overflow: hidden; background: var(--bel-card);
}
.table.table-bordered thead th, #order-list thead th {
  font-family: var(--bel-font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--bel-muted); background: var(--bel-sheet); padding: 12px; border: 0; text-align: left;
}
.table.table-bordered td, #order-list td { padding: 12px; border-top: 1px solid var(--bel-rule); border-left: 0; border-right: 0; vertical-align: middle; font-size: 13px; }
.color-myaccount { color: var(--bel-gold-lo); font-weight: 600; }
.label { display: inline-block; padding: 4px 9px; border-radius: 999px; font-family: var(--bel-font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.label-success { background: rgba(15,122,60,.14); color: var(--bel-new); }
.label-danger  { background: rgba(163,30,30,.12); color: var(--bel-stock-out); }
.label-warning { background: rgba(184,92,0,.14); color: var(--bel-stock-low); }
.label-info    { background: var(--bel-sheet); color: var(--bel-ink-2); }
.info-order.box, .adresses_bloc .address.box, #order-detail-content { margin-bottom: 18px; }
.adresses_bloc .address { background: var(--bel-card); border: 1px solid var(--bel-rule); border-radius: var(--bel-r-md); padding: 16px; }

/* ---- Addresses list + form ---------------------------------------------- */
.addresses .bloc_adresses, .address-list { display: flex; flex-wrap: wrap; gap: 16px; }
ul.address.box, .address ul.box { background: var(--bel-card); border: 1px solid var(--bel-rule); border-radius: var(--bel-r-md); padding: 18px; list-style: none; margin: 0; }
.address .address_update { display: flex; gap: 10px; margin-top: 12px; }
#add_address fieldset, #add_address .box { border: 0; padding: 0; }

/* ---- CMS / contact / stores / sitemap ----------------------------------- */
body#cms .rte, .rte.content_only, .cms .rte { max-width: 820px; font-size: 15px; line-height: 1.7; color: var(--bel-ink-2); }
body#cms .rte h1, body#cms .rte h2, body#cms .rte h3 { font-family: var(--bel-font-display); color: var(--bel-ink); margin: 1.2em 0 .5em; }
body#cms .rte img { border-radius: var(--bel-r-md); }
.block-cms ul, .block-cms li { list-style: none; }

.contact-form-box { background: var(--bel-card); border: 1px solid var(--bel-rule); border-radius: var(--bel-r-lg); padding: 28px; }
.contact-form-box fieldset { border: 0; padding: 0; margin: 0; }
.contact-form-box .submit { margin-top: 16px; }

body#stores #map { height: 420px; border: 1px solid var(--bel-rule); border-radius: var(--bel-r-md); }
body#stores #stores-table .store-small { border-bottom: 1px solid var(--bel-rule); }
body#stores .store-picture img { border-radius: var(--bel-r-md); }

body#sitemap #sitemap_content .tree, #sitemap_content ul { list-style: none; }
#sitemap_content .sitemap_block { margin-bottom: 24px; }
#sitemap_content a { color: var(--bel-ink-2); }
#sitemap_content a:hover { color: var(--bel-gold-lo); }

/* ---- 404 / errors / empty states — v2 hero ------------------------------ */
/* 404 is a full-width hero: hide the left column (brands block) and let .bel-shell
   control width (mirrors the home.css full-width pattern). Scoped to body#pagenotfound;
   id specificity beats Bootstrap's .col-sm-9, so no !important needed. */
body#pagenotfound #columns.container { max-width: none; width: 100%; padding: 0; }
body#pagenotfound #left_column { display: none; }
body#pagenotfound #center_column { width: 100%; padding: 0; float: none; }
.pagenotfound { padding: 8px 0; }
.belv2-404 { max-width: 640px; margin: 0 auto; padding-top: 64px; padding-bottom: 88px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.belv2-404__eyebrow { font-family: var(--bel-font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--bel-muted); }
.belv2-404__code { font-family: var(--bel-font-display); font-size: clamp(88px, 18vw, 168px); font-weight: 800; line-height: 1; letter-spacing: -.04em; color: var(--bel-gold-lo); margin: 6px 0 2px; }
.belv2-404__title { font-family: var(--bel-font-display); font-size: clamp(24px, 4vw, 36px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: var(--bel-ink); margin: 0; }
.belv2-404__title em { color: var(--bel-gold-lo); font-style: normal; }
.belv2-404__sub { color: var(--bel-muted); font-size: 15px; line-height: 1.6; max-width: 46ch; margin: 12px auto 0; }
.belv2-404__search { display: flex; gap: 8px; width: 100%; max-width: 480px; margin: 28px auto 8px; }
.belv2-404__search .bel-input { flex: 1; }
.belv2-404__actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 20px; }
@media (max-width: 520px) {
  .belv2-404 { padding-top: 40px; padding-bottom: 64px; }
  .belv2-404__search { flex-direction: column; }
}
#maintenance { text-align: center; padding: 60px 20px; }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 760px) {
  #order_step.step { gap: 4px; }
  #order_step.step li { min-width: 0; }
  #order_step.step li span, #order_step.step li a { font-size: 9px; padding: 8px 4px; }
  .myaccount-link-list { grid-template-columns: 1fr 1fr; }
  .table.table-bordered, #order-list { font-size: 12px; }
}

/* ==========================================================================
   v2 account dashboard (my-account.tpl rebuilt to the account-v2 mock).
   Scoped under `.belv2-catalog` (the body class the MyAccountController override adds — same
   full-width v2 page shell as the catalog routes; page-head/crumb/width come from catalog.css).
   Ported from v2-pages.css (.belv2 …) → here for the real page.
   ========================================================================== */
.belv2-catalog .belv2-acct-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.belv2-catalog .belv2-acct-card { background: var(--bel-card); border: 1px solid var(--bel-rule); border-radius: var(--bel-r-md); padding: 20px; display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; transition: border-color .15s var(--bel-ease), transform .15s var(--bel-ease), box-shadow .15s var(--bel-ease); }
.belv2-catalog a.belv2-acct-card:hover { border-color: var(--bel-ink); transform: translateY(-2px); box-shadow: var(--bel-shadow-md); }
.belv2-catalog .belv2-acct-card__icon { width: 42px; height: 42px; border-radius: var(--bel-r-sm); background: var(--bel-sheet); display: inline-flex; align-items: center; justify-content: center; color: var(--bel-ink); }
.belv2-catalog .belv2-acct-card__title { font-weight: 600; font-size: 15px; color: var(--bel-ink); }
.belv2-catalog .belv2-acct-card__sub { font-size: 12px; color: var(--bel-muted); }

.belv2-catalog .belv2-acct-section { margin-top: 28px; }
.belv2-catalog .belv2-acct-section + .belv2-acct-section { margin-top: 24px; }
.belv2-catalog .belv2-acct-section__title { margin-bottom: 12px; }
/* order-history / credit-slip: breathing room under the page head + consistent ghost-pill actions */
.belv2-catalog .belv2-page-head + .belv2-acct-section,
.belv2-catalog .belv2-page-head + .alert + .belv2-acct-section { margin-top: 24px; }
.belv2-catalog .belv2-co-card { background: var(--bel-card); border: 1px solid var(--bel-rule); border-radius: var(--bel-r-lg); padding: 24px 26px; }
.belv2-catalog .belv2-co-card__title { font-family: var(--bel-font-display); font-size: 20px; font-weight: 700; color: var(--bel-ink); margin: 0 0 18px; }

.belv2-catalog .belv2-table-wrap { overflow-x: auto; }
.belv2-catalog .belv2-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.belv2-catalog .belv2-table th { text-align: left; font-family: var(--bel-font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--bel-muted); padding: 0 12px 12px; border-bottom: 1px solid var(--bel-rule); font-weight: 600; }
.belv2-catalog .belv2-table td { padding: 14px 12px; border-bottom: 1px solid var(--bel-rule); color: var(--bel-ink); vertical-align: middle; }
.belv2-catalog .belv2-table tr:last-child td { border-bottom: 0; }
.belv2-catalog .belv2-table__r { text-align: right; }
.belv2-catalog .belv2-table__link { font-family: var(--bel-font-mono); font-size: 12px; color: var(--bel-muted); }
.belv2-catalog .belv2-table__link:hover { color: var(--bel-ink); }
.belv2-catalog .belv2-acct-seeall { display: inline-block; margin-top: 14px; }
.belv2-catalog .belv2-acct-empty { color: var(--bel-muted); font-size: 14px; margin: 0; }
/* Order-history table: reference = primary clickable; action links grouped on the right */
.belv2-catalog .belv2-table__ref { color: var(--bel-ink); font-weight: 600; }
.belv2-catalog .belv2-table__ref:hover { color: var(--bel-gold-lo); }
.belv2-catalog .belv2-table__actions { display: inline-flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
/* row hover + roomier rows */
.belv2-catalog .belv2-table tbody tr { transition: background var(--bel-fast) var(--bel-ease); }
.belv2-catalog .belv2-table tbody tr:hover td { background: var(--bel-rule-2); }
.belv2-catalog .belv2-table tbody td:first-child { border-top-left-radius: var(--bel-r-sm); border-bottom-left-radius: var(--bel-r-sm); }
.belv2-catalog .belv2-table tbody td:last-child { border-top-right-radius: var(--bel-r-sm); border-bottom-right-radius: var(--bel-r-sm); }
/* action links → small ghost pills */
.belv2-catalog .belv2-table__actions .belv2-table__link {
  padding: 6px 11px; border: 1px solid var(--bel-rule); border-radius: var(--bel-r-sm);
  color: var(--bel-ink-2); white-space: nowrap; transition: border-color var(--bel-fast) var(--bel-ease), color var(--bel-fast) var(--bel-ease), background var(--bel-fast) var(--bel-ease);
}
.belv2-catalog .belv2-table__actions .belv2-table__link:hover { border-color: var(--bel-ink); color: var(--bel-ink); background: var(--bel-card); }
/* mobile: collapse table into stacked cards */
@media (max-width: 620px) {
  .belv2-catalog .belv2-table thead { display: none; }
  .belv2-catalog .belv2-table, .belv2-catalog .belv2-table tbody { display: block; width: 100%; }
  .belv2-catalog .belv2-table tbody tr {
    display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center;
    border: 1px solid var(--bel-rule); border-radius: var(--bel-r-md); padding: 14px 16px; margin-bottom: 12px;
  }
  .belv2-catalog .belv2-table tbody td { display: block; padding: 0; border: 0; }
  .belv2-catalog .belv2-table tbody td.belv2-table__r { text-align: left; }
  .belv2-catalog .belv2-table tbody td.belv2-table__actions { grid-column: 1 / -1; justify-content: flex-start; margin-top: 6px; }
  .belv2-catalog .belv2-table tbody tr:hover td { background: none; }
}

.belv2-catalog .belv2-acct-addr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.belv2-catalog .belv2-acct-addr { background: var(--bel-card); border: 1px solid var(--bel-rule); border-radius: var(--bel-r-md); padding: 20px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; text-decoration: none; }
.belv2-catalog .belv2-acct-addr__name { font-weight: 600; font-size: 15px; color: var(--bel-ink); }
.belv2-catalog .belv2-acct-addr__body { font-size: 13px; color: var(--bel-muted); line-height: 1.6; }
.belv2-catalog .belv2-acct-addr--add { border-style: dashed; align-items: center; justify-content: center; min-height: 120px; color: var(--bel-muted); font-family: var(--bel-font-mono); font-size: 13px; transition: border-color .12s var(--bel-ease), color .12s var(--bel-ease); }
.belv2-catalog .belv2-acct-addr--add:hover { border-color: var(--bel-ink); color: var(--bel-ink); }
/* Address-card actions pinned to the bottom; delete turns red on hover */
.belv2-catalog .belv2-acct-addr__actions { display: flex; gap: 16px; margin-top: auto; padding-top: 6px; }
.belv2-catalog .belv2-acct-addr__del:hover { color: var(--bel-stock-out); }

/* Account forms inside a v2 card (identity / address) — v2-skin the legacy .std form markup
   WITHOUT touching its fields/ids/JS hooks. Labels become mono-uppercase like .belv2-field. */
/* Full-page form: span the whole v2 shell (was capped at 680px) with a 2-col field grid.
   identity = groups inside <fieldset>; address = groups direct in <form id="add_address">. */
.belv2-catalog .belv2-acct-form { max-width: none; }
.belv2-catalog .belv2-acct-form form.std > fieldset,
.belv2-catalog .belv2-acct-form form#add_address {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 22px;
  align-items: start;
}
/* full-width rows: long fields, multi-control groups, headings, notes, actions */
.belv2-catalog .belv2-acct-form > .clearfix,
.belv2-catalog .belv2-acct-form .form-group:has(textarea),
.belv2-catalog .belv2-acct-form .form-group:has(#days),
.belv2-catalog .belv2-acct-form .form-group:has(#address1),
.belv2-catalog .belv2-acct-form .form-group:has(#address2),
.belv2-catalog .belv2-acct-form #adress_alias,
.belv2-catalog .belv2-acct-form #vat_area,
.belv2-catalog .belv2-acct-form .checkbox,
.belv2-catalog .belv2-acct-form .page-subheading,
.belv2-catalog .belv2-acct-form .inline-infos,
.belv2-catalog .belv2-acct-form .submit2,
.belv2-catalog .belv2-acct-form .belv2-acct-form__submit,
.belv2-catalog .belv2-acct-form #security_informations { grid-column: 1 / -1; }
.belv2-catalog .belv2-acct-form .clearfix:empty { display: none; }
@media (max-width: 760px) {
  .belv2-catalog .belv2-acct-form form.std > fieldset,
  .belv2-catalog .belv2-acct-form form#add_address { grid-template-columns: 1fr; }
}
.belv2-catalog .belv2-acct-form .required-note { font-size: 12px; color: var(--bel-muted); margin: 0 0 20px; }
.belv2-catalog .belv2-acct-form .required-note sup,
.belv2-catalog .belv2-acct-form label sup { color: var(--bel-stock-out); }
.belv2-catalog .belv2-acct-form fieldset { border: 0; padding: 0; margin: 0; }
.belv2-catalog .belv2-acct-form .form-group { margin-bottom: 16px; }
.belv2-catalog .belv2-acct-form .form-group > label,
.belv2-catalog .belv2-acct-form > .clearfix > label {
  font-family: var(--bel-font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--bel-muted); font-weight: 400; margin-bottom: 6px; display: block;
}
/* Title (civilité) radios inline */
.belv2-catalog .belv2-acct-form .radio-inline { display: inline-flex; align-items: center; margin: 0 18px 0 0; }
.belv2-catalog .belv2-acct-form .radio-inline label { font-family: var(--bel-font-body); font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--bel-ink); font-weight: 400; margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.belv2-catalog .belv2-acct-form .radio-inline input,
.belv2-catalog .belv2-acct-form .checkbox input { accent-color: var(--bel-gold); width: 16px; height: 16px; }
/* Date-of-birth 3-select row */
.belv2-catalog .belv2-acct-form .row { display: flex; gap: 10px; margin: 0; }
.belv2-catalog .belv2-acct-form .row .col-xs-4 { flex: 1; max-width: none; padding: 0; }
/* Newsletter / optin checkboxes */
.belv2-catalog .belv2-acct-form .checkbox { margin: 6px 0; }
.belv2-catalog .belv2-acct-form .checkbox label { font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--bel-ink); font-weight: 400; display: flex; align-items: center; gap: 8px; margin: 0; }
.belv2-catalog .belv2-acct-form__submit { margin: 8px 0 0; }
.belv2-catalog .belv2-acct-form__note { font-size: 12px; color: var(--bel-muted); margin-top: 14px; }
.belv2-catalog .belv2-acct-form .page-subheading { margin-top: 22px; }

.belv2-catalog .belv2-acct-links { list-style: none; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--bel-rule); display: flex; flex-wrap: wrap; gap: 8px 18px; }
.belv2-catalog .belv2-acct-links li { margin: 0; }
.belv2-catalog .belv2-acct-links a { font-family: var(--bel-font-mono); font-size: 12px; color: var(--bel-muted); }
.belv2-catalog .belv2-acct-links a:hover { color: var(--bel-ink); }

@media (max-width: 980px) {
  .belv2-catalog .belv2-acct-grid { grid-template-columns: repeat(2, 1fr); }
  .belv2-catalog .belv2-acct-addr-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .belv2-catalog .belv2-acct-grid { grid-template-columns: 1fr 1fr; }
  .belv2-catalog .belv2-acct-addr-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   v2 checkout — shopping-cart.tpl + order-address/carrier/payment/confirmation.tpl
   restyled to match the checkout-v2 mock. Scoped under the `.belv2-checkout` wrapper
   that each template renders directly (no body class needed). Ported from v2-pages.css
   ~lines 158-186. Existing Phase-D `.delivery_option` + `#HOOK_PAYMENT .payment_module a`
   + `#order_step.step` rules earlier in this file STILL apply on pages without a
   `.belv2-checkout` wrapper; these `.belv2-checkout` rules supersede on the v2 route via
   higher specificity.
   ========================================================================== */

/* --- 2-col layout (main + sticky summary). --single = 1 col on address/carrier/confirmation.
   Outer container stays at the shell width + gutters so every step aligns with the header/footer
   and the cart step (was capped at 900px → looked narrower/inconsistent). --- */
.belv2-checkout { display: grid; grid-template-columns: 1fr 360px; gap: 32px; align-items: start; padding-top: 28px; padding-bottom: 48px; max-width: var(--bel-shell-max); margin: 0 auto; padding-left: var(--bel-gutter); padding-right: var(--bel-gutter); width: 100%; }
.belv2-checkout--single { grid-template-columns: 1fr; max-width: var(--bel-shell-max); }
/* keep single-column form content readable (not stretched to 1480) while the head/gutters align */
/* .belv2-checkout--single .belv2-checkout__main { max-width: 920px; } */
.belv2-checkout__main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

/* --- step cards --- */
.belv2-checkout .belv2-co-card { background: var(--bel-card); border: 1px solid var(--bel-rule); border-radius: var(--bel-r-lg); padding: 24px 26px; }
.belv2-checkout .belv2-co-card__title { font-family: var(--bel-font-display); font-size: 20px; font-weight: 700; color: var(--bel-ink); margin: 0 0 18px; display: flex; align-items: center; gap: 10px; }
.belv2-checkout .belv2-co-num { width: 26px; height: 26px; border-radius: 50%; background: var(--bel-ink); color: var(--bel-paper); font-family: var(--bel-font-mono); font-size: 13px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.belv2-checkout .belv2-co-num--ok { background: var(--bel-stock-ok); color: var(--bel-paper); }
.belv2-checkout .belv2-co-card--success { text-align: center; padding: 48px 32px; }
.belv2-checkout .belv2-co-card--success .belv2-co-card__title { justify-content: center; font-size: 28px; }

/* --- sticky summary aside (cart + payment) --- */
.belv2-checkout .belv2-summary { position: sticky; top: 20px; background: var(--bel-card); border: 1px solid var(--bel-rule); border-radius: var(--bel-r-lg); padding: 24px; align-self: start; }
.belv2-checkout .belv2-summary__title { font-family: var(--bel-font-display); font-size: 18px; font-weight: 700; color: var(--bel-ink); margin: 0 0 16px; padding-bottom: 14px; border-bottom: 1px solid var(--bel-rule); }
.belv2-checkout .belv2-summary__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; color: var(--bel-ink-2); padding: 8px 0; }
.belv2-checkout .belv2-summary__row > span:last-child { font-weight: 600; color: var(--bel-ink); white-space: nowrap; }
.belv2-checkout .belv2-summary__total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 16px 0 20px; padding-top: 16px; border-top: 1px solid var(--bel-rule); font-family: var(--bel-font-display); font-weight: 800; font-size: 22px; color: var(--bel-ink); }
.belv2-checkout .belv2-summary__total > span:last-child { white-space: nowrap; }
.belv2-checkout .belv2-summary .bel-btn { margin-top: 4px; }
.belv2-checkout .belv2-summary__note { font-size: 11px; color: var(--bel-muted); margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--bel-rule-2); text-align: center; }

/* --- LEGACY #cart_summary table — restyle to look like the v2 line list, keep table contracts --- */
.belv2-checkout #cart_summary { width: 100%; border: 0; background: none; border-collapse: collapse; border-spacing: 0; overflow: visible; margin: 0; }
.belv2-checkout #cart_summary thead th { font-family: var(--bel-font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--bel-muted); background: none; padding: 0 12px 12px; border: 0; border-bottom: 1px solid var(--bel-rule); text-align: left; }
.belv2-checkout #cart_summary tbody td { padding: 14px 12px; border: 0; border-bottom: 1px solid var(--bel-rule-2); vertical-align: middle; }
.belv2-checkout #cart_summary tbody tr:last-child td { border-bottom: 0; }
.belv2-checkout #cart_summary tbody td.cart_product img { max-width: 64px; height: auto; border: 1px solid var(--bel-rule); border-radius: var(--bel-r-sm); background: var(--bel-sheet); }
.belv2-checkout #cart_summary tfoot td { padding: 10px 12px; border: 0; border-top: 1px solid var(--bel-rule); font-size: 14px; }
.belv2-checkout #cart_summary tfoot tr.cart_total_price:last-child td { padding-top: 16px; font-family: var(--bel-font-display); font-weight: 800; font-size: 20px; color: var(--bel-ink); border-top: 2px solid var(--bel-ink); }
.belv2-checkout #cart_summary tfoot #total_price { font-family: var(--bel-font-display); font-weight: 800; font-size: 22px; color: var(--bel-ink); }
.belv2-checkout #cart_summary .cart_voucher { background: var(--bel-sheet); border-radius: var(--bel-r-sm); padding: 14px; vertical-align: top; }
.belv2-checkout #cart_summary .cart_voucher h4 { font-family: var(--bel-font-display); font-size: 14px; margin: 0 0 8px; }
.belv2-checkout #cart_summary .cart_voucher .discount_name { padding: 8px 10px; border: 1px solid var(--bel-rule); border-radius: var(--bel-r-sm); margin-right: 6px; }
.belv2-checkout #cart_summary .price-discount { color: var(--bel-stock-ok); }

/* --- pay/ship choice cards --- */
.belv2-checkout .belv2-pay-grid, .belv2-checkout #HOOK_PAYMENT { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.belv2-checkout .belv2-pay-card, .belv2-checkout .delivery_option, .belv2-checkout #HOOK_PAYMENT .payment_module a, .belv2-checkout #HOOK_PAYMENT p.payment_module a { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1.5px solid var(--bel-rule); border-radius: var(--bel-r-md); background: var(--bel-card); cursor: pointer; transition: border-color .12s var(--bel-ease), box-shadow .12s var(--bel-ease); text-decoration: none; color: var(--bel-ink); min-height: 64px; margin: 0; }
.belv2-checkout .delivery_option:hover, .belv2-checkout .delivery_option.selected, .belv2-checkout #HOOK_PAYMENT .payment_module a:hover, .belv2-checkout .belv2-pay-card:hover { border-color: var(--bel-ink); }
.belv2-checkout .belv2-pay-card:has(input:checked), .belv2-checkout .delivery_option:has(input:checked) { border-color: var(--bel-ink); box-shadow: 0 0 0 3px rgba(245, 206, 26, .18); }
.belv2-checkout .delivery_option table.resume { width: 100%; border: 0; background: none; margin: 0; }
.belv2-checkout .delivery_option table.resume td { border: 0; padding: 4px 8px; vertical-align: middle; }
.belv2-checkout .delivery_option .delivery_option_radio { width: auto; accent-color: var(--bel-ink); }

/* --- addresses block + selectors --- */
.belv2-checkout .addresses { padding: 0; }
/* the legacy Bootstrap .row > .col-xs-6 has no gutter (global.css emptied) → give the two address
   columns a real gap, and space between the selector row and the address-card row. */
.belv2-checkout .addresses .row { display: flex; flex-wrap: wrap; gap: 20px 24px; margin: 0 0 4px; }
.belv2-checkout .addresses .row + .row { margin-top: 4px; }
.belv2-checkout .addresses .row > [class*="col-"] { flex: 1 1 320px; width: auto; max-width: none; padding: 0; float: none; }
.belv2-checkout .address_select { padding: 10px 14px; border: 1px solid var(--bel-rule); border-radius: var(--bel-r-sm); background: var(--bel-card); width: 100%; max-width: none; }
.belv2-checkout .address_delivery > label, .belv2-checkout #address_invoice_form > label { display: block; margin-bottom: 8px; }
.belv2-checkout #address_delivery, .belv2-checkout #address_invoice { background: var(--bel-sheet); border: 1px solid var(--bel-rule); border-radius: var(--bel-r-md); padding: 16px 18px; list-style: none; line-height: 1.7; margin-top: 4px; }
.belv2-checkout #address_delivery:empty, .belv2-checkout #address_invoice:empty { display: none; }
.belv2-checkout .address_add { margin-top: 18px; }
.belv2-checkout #ordermsg textarea, .belv2-checkout textarea[name="message"], .belv2-checkout #gift_message { width: 100%; padding: 12px 14px; border: 1px solid var(--bel-rule); border-radius: var(--bel-r-sm); background: var(--bel-card); font: inherit; min-height: 80px; }
.belv2-checkout .addressesAreEquals { display: flex; align-items: center; gap: 8px; padding: 14px 0; margin: 0; }
.belv2-checkout .addressesAreEquals label { margin: 0; color: var(--bel-ink-2); }

/* --- carrier extra (recyclable / gift / cgv) — checkbox + label aligned in a row --- */
.belv2-checkout .checkbox { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.belv2-checkout .checkbox, .belv2-checkout .checkbox label { color: var(--bel-ink-2); font-size: 14px; }
.belv2-checkout .checkbox label { margin: 0; }
.belv2-checkout #cgv { accent-color: var(--bel-gold); margin: 0; }
.belv2-checkout .carrier_title { font-family: var(--bel-font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--bel-muted); margin: 16px 0 8px; }

/* --- nav row (cart_navigation / belv2-cart-nav) --- */
.belv2-checkout .cart_navigation, .belv2-checkout .belv2-cart-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 20px; padding: 0; }
.belv2-checkout .cart_navigation .button-exclusive { color: var(--bel-ink-2); }

/* --- empty / catalog-mode state --- */
.belv2-checkout .belv2-empty { padding: 64px 24px; text-align: center; color: var(--bel-muted); background: var(--bel-card); border: 1px solid var(--bel-rule); border-radius: var(--bel-r-lg); display: flex; flex-direction: column; align-items: center; gap: 16px; }
.belv2-checkout .belv2-empty h3 { font-family: var(--bel-font-display); font-size: 24px; color: var(--bel-ink); margin: 0; }
.belv2-checkout .belv2-empty__icon { width: 56px; height: 56px; border-radius: 50%; background: var(--bel-sheet); display: inline-flex; align-items: center; justify-content: center; color: var(--bel-muted); }
.belv2-checkout .belv2-empty p { margin: 0; font-size: 14px; }
.belv2-checkout .belv2-empty .bel-btn { margin-top: 4px; }

/* --- stepper inside the v2 layout has the existing #order_step pills (rules above ~line 105) --- */

/* --- responsive --- */
@media (max-width: 980px) {
  .belv2-checkout { grid-template-columns: 1fr; gap: 20px; }
  .belv2-checkout .belv2-summary { position: static; }
}
@media (max-width: 620px) {
  .belv2-checkout #cart_summary thead { display: none; }
  .belv2-checkout #cart_summary, .belv2-checkout #cart_summary tbody, .belv2-checkout #cart_summary tr, .belv2-checkout #cart_summary td { display: block; width: 100%; }
  .belv2-checkout #cart_summary tbody tr { padding: 12px 0; border-bottom: 1px solid var(--bel-rule); }
  .belv2-checkout #cart_summary tbody td { padding: 4px 0; border: 0; }
  .belv2-checkout .belv2-pay-grid, .belv2-checkout #HOOK_PAYMENT { grid-template-columns: 1fr; }
}

/* ==========================================================================
   v2 checkout — REFINEMENT (kill the leftover legacy UI on the v2 routes).
   The eicaptcha OrderController override is off-limits, so we use :has() to scope the
   parent-level resets to any body that renders the .belv2-checkout wrapper. Same pattern
   used by .belv2-pay-card:has(input:checked) above. Pages without a .belv2-checkout wrapper
   (e.g. the old theme's cart) are untouched because :has() misses.
   ========================================================================== */

/* A — full-bleed #columns + hide theme breadcrumb + drop side columns on any v2-checkout page */
body:has(.belv2-checkout) .breadcrumb,
body:has(.belv2-checkout) .bel-crumb { display: none; }
body:has(.belv2-checkout) #columns.container { max-width: none; width: 100%; padding: 0; }
body:has(.belv2-checkout) #center_column { width: 100%; padding: 0; float: none; }
body:has(.belv2-checkout) .columns-container { padding: 0; }
body:has(.belv2-checkout) #columns > .row { margin: 0; }
body:has(.belv2-checkout) #left_column,
body:has(.belv2-checkout) #right_column { display: none; }

/* B — page-head base + crumb live in components.css (shared). Checkout delta:
   compact head (no divider/margin — the form cards carry their own spacing). */
.belv2-checkout .belv2-page-head { padding: 4px 0 18px; border-bottom: 0; margin-bottom: 0; }
.belv2-checkout .belv2-page-head__title,
.belv2-checkout h1.page-heading.belv2-page-head__title { font-family: var(--bel-font-display); font-size: clamp(28px, 3.5vw, 38px); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; margin: 0; padding: 0; color: var(--bel-ink); border: 0; text-transform: none; }
.belv2-checkout h1.page-heading.belv2-page-head__title .heading-counter { display: block; font-family: var(--bel-font-mono); font-size: 12px; font-weight: 400; color: var(--bel-muted); text-transform: none; margin-top: 8px; }

/* C — Bootstrap .btn.btn-default → v2 ghost (gold .standard-checkout keeps its existing gold) */
.belv2-checkout .btn.btn-default,
.belv2-checkout .button.btn-default,
.belv2-checkout .button-small.btn-default { background: var(--bel-card); color: var(--bel-ink); border: 1px solid var(--bel-rule); border-radius: var(--bel-r-sm); padding: 10px 16px; font: inherit; font-weight: 500; box-shadow: none; transition: border-color .12s var(--bel-ease), background .12s var(--bel-ease); }
.belv2-checkout .btn.btn-default:hover,
.belv2-checkout .button.btn-default:hover,
.belv2-checkout .button-small.btn-default:hover { border-color: var(--bel-ink); background: var(--bel-sheet); }
.belv2-checkout .button-exclusive.btn-default { background: transparent; border: 0; padding: 10px 12px; color: var(--bel-muted); }
.belv2-checkout .button-exclusive.btn-default:hover { color: var(--bel-ink); background: none; }
/* the gold proceed button — make sure it wins (it has multiple classes) */
.belv2-checkout .button.btn-default.standard-checkout,
.belv2-checkout a.standard-checkout,
.belv2-checkout button.standard-checkout { background: var(--bel-gold); color: var(--bel-gold-ink); border: 0; border-radius: var(--bel-r-sm); padding: 14px 24px; font-weight: 600; }
.belv2-checkout .button.btn-default.standard-checkout:hover,
.belv2-checkout a.standard-checkout:hover,
.belv2-checkout button.standard-checkout:hover { background: var(--bel-gold-hi); color: var(--bel-gold-ink); border-color: transparent; }

/* D — form fields polished to v2 */
.belv2-checkout input.form-control,
.belv2-checkout select.form-control,
.belv2-checkout textarea.form-control,
.belv2-checkout .discount_name.form-control { padding: 10px 14px; border: 1px solid var(--bel-rule); border-radius: var(--bel-r-sm); background: var(--bel-card); font: inherit; color: var(--bel-ink); outline: none; box-shadow: none; transition: border-color .12s var(--bel-ease), box-shadow .12s var(--bel-ease); height: auto; }
.belv2-checkout input.form-control:focus,
.belv2-checkout select.form-control:focus,
.belv2-checkout textarea.form-control:focus { border-color: var(--bel-ink); box-shadow: 0 0 0 3px rgba(245,206,26,.25); }

/* E — slim v2 alerts */
.belv2-checkout .alert { padding: 10px 14px; border: 1px solid var(--bel-rule); border-radius: var(--bel-r-sm); font-size: 13px; margin: 0 0 14px; }
.belv2-checkout .alert.alert-success { color: var(--bel-stock-ok); background: rgba(73,118,68,.06); border-color: rgba(73,118,68,.25); }
.belv2-checkout .alert.alert-warning { color: var(--bel-used); background: rgba(174,106,18,.06); border-color: rgba(174,106,18,.25); }
.belv2-checkout .alert.alert-danger { color: var(--bel-stock-out); background: rgba(174,49,49,.06); border-color: rgba(174,49,49,.2); }
.belv2-checkout .alert.alert-info { color: var(--bel-ink-2); background: var(--bel-sheet); border-color: var(--bel-rule); }