/**
 * PrestaXperts Checkout — front styles.
 * Self-contained: no dependency on theme CSS. All classes are prefixed `pxc-`.
 * Brand color and accents are driven by CSS custom properties so the admin
 * configuration can restyle the checkout without shipping extra CSS.
 *
 * @author    PrestaXperts
 * @copyright PrestaXperts
 * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0
 */

.pxc-root {
  /* Flores Navarro palette: the web's green family plus the cream/beige
     backgrounds of the original checkout. */
  --pxc-primary: #008344;
  --pxc-primary-hover: #006f38;
  --pxc-primary-soft: #f5fdf8;
  --pxc-primary-border: #d9eadf;
  --pxc-primary-processing: #4da87c;
  --pxc-primary-disabled: #9fc5b0;
  --pxc-focus-ring: rgba(0, 131, 68, 0.16);
  --pxc-heading: #004021;
  --pxc-success: #008344;
  --pxc-success-bg: #f5fdf8;
  --pxc-success-border: #d9eadf;
  --pxc-success-input: #008344;
  --pxc-danger: #d92d20;
  --pxc-danger-bg: #fef3f2;
  --pxc-danger-border: #f0c4bd;
  --pxc-danger-text: #b42318;
  --pxc-text: #111827;
  --pxc-text-2: #4b5563;
  --pxc-text-3: #6b7280;
  --pxc-text-4: #9ca3af;
  --pxc-border: #d5d1c4;
  --pxc-border-2: #e5e1d3;
  --pxc-border-3: #ece8db;
  --pxc-border-4: #f1eee3;
  --pxc-bg-page: #faf5e9;
  --pxc-bg-summary: #f0e8d6;
  --pxc-bg-card: #f8f3e7;
  --pxc-help-bg: #f5c84c;
  --pxc-bg-soft: #f5f1e6;
  --pxc-bg-soft-2: #efe9da;
  --pxc-radius-input: 10px;
  --pxc-radius-card: 12px;
  --pxc-radius-panel: 16px;
  --pxc-shadow-input: none;
  --pxc-shadow-card: none;
  --pxc-shadow-panel: none;
  --pxc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --pxc-mono: ui-monospace, Menlo, monospace;

  margin: 0;
  padding: 0;
  background: var(--pxc-bg-page);
  font-family: var(--pxc-font);
  color: var(--pxc-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 15px;
  line-height: 1.45;
}
.pxc-root *,
.pxc-root *::before,
.pxc-root *::after { box-sizing: border-box; }
.pxc-root input,
.pxc-root select,
.pxc-root textarea,
.pxc-root button { font-family: inherit; }
.pxc-root input:focus,
.pxc-root select:focus,
.pxc-root textarea:focus { outline: none; border-color: var(--pxc-primary); box-shadow: 0 0 0 3px var(--pxc-focus-ring); }
/* Keyboard/click focus is ALWAYS the solid brand green — never the UA's
   default gray ring (checkbox/radio inside selectable cards included). */
.pxc-root button:focus-visible { outline: 2px solid var(--pxc-primary); outline-offset: 2px; }
.pxc-root input[type="checkbox"]:focus-visible,
.pxc-root input[type="radio"]:focus-visible { outline: 2px solid var(--pxc-primary); outline-offset: 2px; }
.pxc-root input[type="checkbox"]:focus,
.pxc-root input[type="radio"]:focus { box-shadow: none; }
.pxc-num { font-variant-numeric: tabular-nums; }

/* ============ Skeleton loading primitives ============ */
@keyframes pxc-shimmer { 100% { transform: translateX(100%); } }
.pxc-skel { position: relative; overflow: hidden; background: var(--pxc-bg-soft-2); border-radius: 8px; }
.pxc-skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent); animation: pxc-shimmer 1.4s infinite; }
.pxc-skel-line { height: 14px; }
.pxc-skel-input { height: 48px; border-radius: var(--pxc-radius-input); }
.pxc-skel-card { height: 56px; border-radius: var(--pxc-radius-card); }
.pxc-skel-stack { display: flex; flex-direction: column; gap: 8px; }
/* Server-rendered boot skeleton: visible until the Vue app mounts */
body.pxc-ready .pxc-boot-skel { display: none; }
.pxc-boot-skel { display: flex; flex-direction: column; gap: 16px; }

@keyframes pxc-spin { to { transform: rotate(360deg); } }
@keyframes pxc-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pxc-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pxc-pop { from { opacity: 0; transform: scale(0.96) translateY(4px); } to { opacity: 1; transform: none; } }
.pxc-anim-rise { animation: pxc-rise 0.3s ease both; }
.pxc-anim-fade { animation: pxc-fade 0.2s ease both; }
.pxc-anim-pop { animation: pxc-pop 0.25s ease both; }

/* ============ Layout ============ */
/* The form column carries the visual weight; the summary on the right is a
   narrower, quieter sidebar. */
.pxc-page { display: flex; flex-wrap: wrap; min-height: 100vh; align-items: stretch; width: 100%; }
.pxc-summary { flex: 1 1 300px; background: var(--pxc-bg-summary); display: flex; flex-direction: column; }
.pxc-summary-inner { width: 100%; max-width: 470px; margin: 0 auto; padding: 24px 16px 32px; }
.pxc-form-col { flex: 2 1 480px; background: var(--pxc-bg-page); display: flex; flex-direction: column; }
.pxc-form-inner { width: 100%; max-width: 620px; margin: 0 auto; padding: 32px 16px 64px; display: flex; flex-direction: column; gap: 48px; }
@media (min-width: 880px) {
  /* Columns swapped for Flores Navarro: form on the left, summary on the
     right. Same DOM, flipped with flex order so mobile stacking is intact. */
  .pxc-form-col { order: 1; }
  .pxc-summary { order: 2; border-left: 1px solid var(--pxc-border-3); }
  .pxc-summary-inner { position: sticky; top: 0; margin: 0 auto 0 0; max-width: 400px; padding: 56px 32px 56px 40px; }
  .pxc-form-inner { margin: 0 0 0 auto; padding: 48px 56px 96px 48px; }
}
@media (max-width: 879.98px) {
  .pxc-summary { border-bottom: 1px solid var(--pxc-border-3); }
}

/* Mobile: logo first (centered), then the "Resumen del pedido" row with the
   total (green, underlined) toggling the order detail. Summary cards go
   white on the cream page background. */
@media (max-width: 879.98px) {
  .pxc-summary { background: var(--pxc-bg-page); }
  .pxc-summary-inner { padding: 0 16px 8px; }
  .pxc-detail { border-top: none; margin-top: 0; padding: 0 0 16px; }
  .pxc-form-inner .pxc-masthead { display: none; }
  /* Summary bar + expanded content: full-bleed WHITE band (no rounding),
     clearly separated from the logo above */
  .pxc-sumwrap { background: #fff; border-top: 1px solid var(--pxc-border-2); border-bottom: 1px solid var(--pxc-border-2); border-radius: 0; padding: 0 16px; margin: 24px -16px 0; }
  .pxc-sumcard { background: #fff; border: 1px solid var(--pxc-border-2); }
}
.pxc-masthead--mobile { justify-content: center; padding: 16px 0 0; margin: 0; }
.pxc-masthead--mobile .pxc-masthead-logo { max-height: 48px; }
.pxc-sumhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 0; cursor: pointer; }
.pxc-sumhead-title { font-size: 15px; font-weight: 600; color: var(--pxc-heading); }
.pxc-sumhead-total { font-size: 14px; font-weight: 600; color: var(--pxc-primary); text-decoration: underline; text-underline-offset: 2px; display: inline-flex; align-items: center; gap: 4px; }
.pxc-sumhead-total .pxc-ic, .pxc-sumhead-total svg { width: 12px; height: 12px; }

/* ============ Buttons & links ============ */
.pxc-linkbtn { background: none; border: none; padding: 0; font-size: 13px; font-weight: 500; color: var(--pxc-primary); cursor: pointer; }
.pxc-linkbtn--sm { font-size: 12.5px; font-weight: 600; }
.pxc-linkbtn--muted { color: var(--pxc-text-4); font-weight: 400; font-size: 12px; transition: color 0.15s; }
.pxc-linkbtn--muted:hover { color: var(--pxc-text-2); }
.pxc-linkbtn--underline { text-decoration: underline; }
.pxc-btn { padding: 12px 22px; border: none; border-radius: 9px; background: var(--pxc-primary); color: #fff; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background 0.15s; }
.pxc-btn:hover { background: var(--pxc-primary-hover); }
.pxc-btn--ghost { padding: 12px 20px; border: 1px solid var(--pxc-border); background: #fff; font-weight: 500; color: var(--pxc-text-2); transition: background 0.15s; }
.pxc-btn--ghost:hover { background: var(--pxc-bg-soft); }

/* ============ Brand masthead (left column) ============ */
.pxc-masthead { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: -6px; }
.pxc-masthead-logo { max-height: 46px; max-width: 230px; }

/* ============ Summary (quiet right sidebar) ============ */
.pxc-shop-name { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.pxc-shop-logo { max-height: 34px; max-width: 180px; }
.pxc-badge-secure { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 500; color: var(--pxc-success); letter-spacing: 0.01em; }
.pxc-badge-secure::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pxc-success); }
.pxc-order-ref { font-size: 12px; color: var(--pxc-text-4); margin-bottom: 30px; }
.pxc-total-label { font-size: 13px; font-weight: 500; color: var(--pxc-text); margin-top: 2px; }
.pxc-total-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pxc-total-orig { font-size: 15px; font-weight: 500; color: var(--pxc-text-4); text-decoration: line-through; }
.pxc-total-big { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--pxc-heading); }
.pxc-vat-note { font-size: 12px; color: var(--pxc-text-4); }
.pxc-detail-toggle { margin-top: 12px; }

.pxc-detail { display: flex; flex-direction: column; gap: 16px; margin-top: 0; padding-top: 0; }
.pxc-summary-title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--pxc-heading); margin: 0 0 14px; }
@media (max-width: 879.98px) { .pxc-summary-title { margin-top: 16px; } }
/* Lighter cards inside the summary column: product lines + payment totals */
.pxc-sumcard { display: flex; flex-direction: column; gap: 16px; background: var(--pxc-bg-card); border-radius: var(--pxc-radius-card); padding: 16px; }
.pxc-sumcard .pxc-totals { border-top: none; padding-top: 0; }
.pxc-item { display: flex; gap: 16px; align-items: center; }
.pxc-item-thumb { width: 52px; height: 52px; border-radius: 12px; background: var(--pxc-bg-soft-2); border: 1px solid var(--pxc-border-3); flex: none; position: relative; overflow: visible; }
.pxc-item-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 9px; }
.pxc-item-qty { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: var(--pxc-text); color: #fff; font-size: 10px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.pxc-item-info { flex: 1; min-width: 0; }
.pxc-item-name { font-size: 13.5px; font-weight: 500; }
.pxc-item-variant { font-size: 12px; color: var(--pxc-text-4); }
.pxc-item-price { font-size: 13.5px; font-weight: 500; }

/* Coupon */
/* Applied-coupon chip: same card background and shape as the summary
   product cards */
.pxc-coupon-chip { display: flex; align-items: center; gap: 8px; background: var(--pxc-bg-card); border: none; border-radius: var(--pxc-radius-card); padding: 16px; }
@media (max-width: 879.98px) {
  .pxc-coupon-chip { background: #fff; border: 1px solid var(--pxc-border-2); }
}
.pxc-coupon-code { font-size: 10.5px; font-weight: 600; font-family: var(--pxc-mono); background: transparent; color: var(--pxc-success); border: 1px solid var(--pxc-success-border); padding: 2px 8px; border-radius: 5px; letter-spacing: 0.03em; }
.pxc-coupon-desc { flex: 1; font-size: 12.5px; color: var(--pxc-success); min-width: 0; }
.pxc-coupon-amount { font-size: 13px; font-weight: 600; color: var(--pxc-success); }
.pxc-coupon-remove { width: 22px; height: 22px; border: none; border-radius: 6px; background: rgba(18, 128, 92, 0.12); color: var(--pxc-success); font-size: 11px; font-weight: 600; cursor: pointer; transition: background 0.15s; }
.pxc-coupon-remove:hover { background: rgba(18, 128, 92, 0.22); }
.pxc-coupon-box { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--pxc-border-2); border-radius: 10px; padding: 14px; background: #fff; box-shadow: var(--pxc-shadow-card); }
.pxc-coupon-head { display: flex; justify-content: space-between; align-items: center; }
.pxc-coupon-title { font-size: 13px; font-weight: 600; }
.pxc-coupon-row { display: flex; gap: 8px; }
.pxc-coupon-row .pxc-input { flex: 1; min-width: 0; }
.pxc-coupon-apply { padding: 0 16px; border: none; border-radius: 8px; background: var(--pxc-primary); font-size: 13px; font-weight: 600; color: #fff; cursor: pointer; transition: background 0.15s; }
.pxc-coupon-apply:hover { background: var(--pxc-primary-hover); }
.pxc-coupon-msg { font-size: 12.5px; }
.pxc-coupon-msg--err { color: var(--pxc-danger); }
.pxc-coupon-msg--ok { color: var(--pxc-success); }

/* Totals */
.pxc-totals { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--pxc-border-3); padding-top: 16px; }
.pxc-trow { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--pxc-text-2); }
.pxc-trow--muted { font-size: 12.5px; color: var(--pxc-text-4); }
.pxc-trow--discount { color: var(--pxc-success); }
.pxc-trow-final { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--pxc-border-3); padding-top: 16px; margin-top: 4px; }
.pxc-trow-final-label { font-size: 15px; font-weight: 600; }
.pxc-trow-final-group { display: flex; align-items: baseline; gap: 8px; }
.pxc-trow-final-orig { font-size: 13px; color: var(--pxc-text-4); text-decoration: line-through; }
.pxc-trow-final-total { font-size: 20px; font-weight: 700; }
.pxc-free { color: var(--pxc-success); }

/* Aside cards */
.pxc-aside { display: flex; flex-direction: column; gap: 24px; margin-top: 40px; }
.pxc-aside--mobile { border-top: 1px solid var(--pxc-border-4); padding-top: 20px; margin-top: 6px; }
.pxc-card { background: transparent; border: none; border-top: 1px solid var(--pxc-border-3); border-radius: 0; padding: 24px 0 0; }
.pxc-card-title { font-size: 13.5px; font-weight: 600; margin-bottom: 14px; }
.pxc-upsell { display: flex; gap: 12px; align-items: center; }
.pxc-upsell + .pxc-upsell { margin-top: 14px; }
.pxc-upsell-thumb { width: 40px; height: 40px; border-radius: 10px; background: var(--pxc-bg-soft-2); border: 1px solid var(--pxc-border-3); flex: none; overflow: hidden; }
.pxc-upsell-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pxc-upsell-info { flex: 1; min-width: 0; }
.pxc-upsell-name { font-size: 13px; font-weight: 500; }
.pxc-upsell-price { font-size: 12px; color: var(--pxc-text-4); }
.pxc-upsell-btn { padding: 7px 14px; border: 1px solid var(--pxc-border); border-radius: 16px; background: transparent; font-size: 12px; font-weight: 600; color: var(--pxc-primary); cursor: pointer; white-space: nowrap; transition: all 0.15s; }
.pxc-upsell-btn--added { border-color: var(--pxc-success-border); background: var(--pxc-success-bg); color: var(--pxc-success); }
.pxc-help-lines { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--pxc-text-2); }
.pxc-help-strong { color: var(--pxc-primary); font-weight: 600; }
.pxc-trust { font-size: 11.5px; line-height: 1.7; color: var(--pxc-text-4); margin-top: 34px; }

/* ============ Form sections ============ */
.pxc-section-head { display: flex; align-items: center; gap: 8px; margin: 0 0 24px; }
.pxc-section-head--split { justify-content: space-between; flex-wrap: wrap; row-gap: 6px; }
.pxc-section-head-left { display: inline-flex; align-items: center; gap: 8px; }
.pxc-h2 { font-size: 16px; font-weight: 600; margin: 0; letter-spacing: -0.01em; color: var(--pxc-heading); }
/* Secondary CTA aligned with a section title (Iniciar sesión, Quiero factura,
   Editar / Eliminar): underlined link in the primary color. */
.pxc-head-cta { background: none; border: none; padding: 0; font-size: 13px; font-weight: 500; color: var(--pxc-primary); text-decoration: underline; cursor: pointer; }
.pxc-head-cta:hover { color: var(--pxc-primary-hover); }
.pxc-head-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.pxc-head-check input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--pxc-primary); cursor: pointer; flex: none; }
.pxc-head-cta-text { font-size: 13px; font-weight: 500; color: var(--pxc-primary); text-decoration: underline; }
/* Sub-headings inside a section (the legacy h5 step titles) */
.pxc-sub-title { font-size: 14.5px; font-weight: 600; margin: 0 0 8px; color: var(--pxc-heading); }
/* Helper note under a field (info icon + muted text, as in the legacy form) */
.pxc-field-note { display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--pxc-text-3); line-height: 1.45; }
.pxc-field-note .pxc-ic { font-size: 14px; color: var(--pxc-text-4); margin-top: 1px; }
.pxc-done-badge { width: 18px; height: 18px; border-radius: 50%; background: transparent; border: 1.5px solid var(--pxc-success); color: var(--pxc-success); font-size: 9px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; animation: pxc-pop 0.25s ease both; }
.pxc-stack { display: flex; flex-direction: column; gap: 16px; }
.pxc-stack--lg { gap: 16px; }
.pxc-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pxc-grid-cp { display: grid; grid-template-columns: 1fr 1.5fr; gap: 16px; }
/* Legacy address row: street (wide) + floor/door (narrow) */
.pxc-grid-addr { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
@media (max-width: 559.98px) {
  .pxc-grid2, .pxc-grid-cp, .pxc-grid-addr { grid-template-columns: 1fr; }
}
.pxc-label { display: block; font-size: 12.5px; font-weight: 500; color: var(--pxc-text-2); margin: 0 0 8px; }
.pxc-label-row { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 8px; }
.pxc-input { width: 100%; padding: 13px 16px; border: 1px solid var(--pxc-border); border-radius: var(--pxc-radius-input); font-size: 15px; background: #fff; box-shadow: var(--pxc-shadow-input); transition: border-color 0.15s; color: var(--pxc-text); }
.pxc-input--err { border-color: var(--pxc-danger); }
/* Read-only look for non-editable fields (profile e-mail) */
.pxc-input--disabled, .pxc-root .pxc-input:disabled { background: var(--pxc-bg-soft-2); color: var(--pxc-text-3); border-color: var(--pxc-border-2); cursor: not-allowed; }
.pxc-input--ok { border-color: var(--pxc-success-input); }
.pxc-input--mono { font-family: var(--pxc-mono); }
select.pxc-input { padding: 12px 10px; }
textarea.pxc-input { resize: vertical; min-height: 72px; }
/* Dedication: tall enough for the full character limit without scrolling */
textarea.pxc-input--dedic { min-height: 152px; }
/* Input with a trailing info icon (contact e-mail / phone) */
.pxc-inputwrap { position: relative; }
.pxc-inputwrap .pxc-input { padding-right: 40px; }
.pxc-input-info { position: absolute; top: 0; right: 0; bottom: 0; width: 40px; border: none; background: none; cursor: pointer; color: var(--pxc-text-4); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.pxc-input-info:hover { color: var(--pxc-primary); }
.pxc-input-info .pxc-ic, .pxc-input-info svg { width: 16px; height: 16px; }
.pxc-err { font-size: 12.5px; color: var(--pxc-danger); margin-top: 5px; animation: pxc-fade 0.2s ease; }
.pxc-ok { font-size: 12.5px; color: var(--pxc-success); margin-top: 5px; animation: pxc-fade 0.2s ease; }

/* Checkbox rows */
.pxc-check-row { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.pxc-check-row input[type="checkbox"] { width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--pxc-primary); flex: none; cursor: pointer; }
.pxc-check-row label, .pxc-check-row > span { font-size: 13.5px; cursor: pointer; line-height: 1.45; }
.pxc-check-note { font-size: 11.5px; color: var(--pxc-text-4); }
.pxc-check-hint { color: var(--pxc-text-4); }
/* "Quiero factura" inline check (before the delivery instructions) */
.pxc-invoice-block { display: flex; flex-direction: column; }
.pxc-check-row--invoice > span { font-weight: 500; color: var(--pxc-heading); }

/* ============ Access / social ============ */
/* Google's default sign-in button look (white, #dadce0 border, official G
   mark, medium label) blended with the checkout radius. Shown above the
   Contact title, full width, on every viewport. */
.pxc-access { margin-bottom: 24px; }
.pxc-social-list { display: flex; flex-direction: column; gap: 8px; }
/* "o como invitado" divider: centered text with a rule on each side */
.pxc-guest-divider { display: flex; align-items: center; gap: 16px; font-size: 13px; color: var(--pxc-text-4); margin-top: 16px; }
.pxc-guest-divider::before, .pxc-guest-divider::after { content: ""; flex: 1; height: 1px; background: var(--pxc-border-2); }
.pxc-social-btn .pxc-brand { align-items: center; }
/* Sign-in mail button: green envelope, label matches the Google button */
.pxc-social-btn--mail .pxc-brand { position: relative; top: 1px; }
.pxc-social-btn--mail .pxc-brand svg { color: var(--pxc-primary); }
.pxc-social-btn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; background: #fff; border: 1px solid #dadce0; border-radius: var(--pxc-radius-input); font-size: 14px; font-weight: 500; color: #3c4043; cursor: pointer; text-decoration: none; transition: background 0.15s, border-color 0.15s, box-shadow 0.15s; }
.pxc-social-btn:hover { background: #f8f9fa; border-color: #d2d5d9; box-shadow: 0 1px 2px rgba(60, 64, 67, 0.12); }
.pxc-social-btn:active { background: #f1f3f4; }
/* The Google entry is an <a>: global theme link colors (higher-specificity
   selectors from external stylesheets) tint its label. Pinning the color on
   the label span beats that inheritance so both buttons read identically. */
.pxc-social-btn span { color: #3c4043 !important; font-weight: 500; }
.pxc-divider { display: flex; align-items: center; gap: 12px; }
.pxc-divider::before, .pxc-divider::after { content: ""; flex: 1; height: 1px; background: var(--pxc-border-3); }
.pxc-divider-text { font-size: 12.5px; color: var(--pxc-text-4); }

/* Panels (login, password) */
.pxc-panel { border: none; border-left: 2px solid var(--pxc-border-2); border-radius: 0; overflow: visible; background: transparent; padding-left: 20px; }
.pxc-panel-head { padding: 0 0 4px; background: transparent; border: none; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px; }
.pxc-panel-title { font-size: 14.5px; font-weight: 600; }
.pxc-panel-body { padding: 16px 0 0; display: flex; flex-direction: column; gap: 16px; }
.pxc-note-ok { font-size: 12.5px; color: var(--pxc-success); background: var(--pxc-success-bg); border: 1px solid var(--pxc-success-border); border-radius: 8px; padding: 10px 12px; animation: pxc-rise 0.25s ease both; }
.pxc-note-err { font-size: 12.5px; color: var(--pxc-danger); animation: pxc-fade 0.2s ease; }
.pxc-btn-block { width: 100%; padding: 13px; border: none; border-radius: 8px; background: var(--pxc-primary); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.15s; }
.pxc-btn-block:hover { background: var(--pxc-primary-hover); }

/* Signed-in account block: name (only bold line), then e-mail and phone at
   the same size; Edit | Sign out actions underneath */
.pxc-account { display: flex; flex-direction: column; gap: 4px; }
.pxc-account-name { font-size: 14px; font-weight: 600; color: var(--pxc-heading); }
.pxc-account-line { font-size: 14px; font-weight: 400; color: var(--pxc-text-2); }
.pxc-account-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; }

/* Password checks */
.pxc-pass-group { display: flex; }
.pxc-pass-group .pxc-input { flex: 1; min-width: 0; border-right: none; border-radius: var(--pxc-radius-input) 0 0 var(--pxc-radius-input); box-shadow: none; }
.pxc-pass-eye { padding: 0 14px; border: 1px solid var(--pxc-border); border-left: none; border-radius: 0 var(--pxc-radius-input) var(--pxc-radius-input) 0; background: #fff; cursor: pointer; display: flex; align-items: center; color: var(--pxc-text-3); transition: border-color 0.15s; }
.pxc-pass-checks { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.pxc-pass-check { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--pxc-text-4); transition: color 0.2s; }
.pxc-pass-check--ok { color: var(--pxc-success); }
.pxc-pass-check-icon { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--pxc-border); display: inline-flex; align-items: center; justify-content: center; font-size: 9px; flex: none; }
.pxc-pass-check-icon.is-ok { border-color: var(--pxc-success); color: var(--pxc-success); }

/* ============ Addresses ============ */
/* Saved addresses: full-width rows like the legacy cards, with alias +
   one-line summary + Eliminar | Editar actions. */
.pxc-addr-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.pxc-addr-row { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px 11px; padding: 16px; border: 1px solid var(--pxc-border-2); border-radius: var(--pxc-radius-card); background: #fff; cursor: pointer; transition: all 0.15s; }
.pxc-addr-row:hover { border-color: var(--pxc-border); }
.pxc-addr-row--sel { border: 2px solid var(--pxc-primary); padding: 15px; }
.pxc-addr-row .pxc-radio-dot { margin-top: 2px; }
.pxc-addr-row-main { flex: 1; min-width: 0; font-size: 13px; line-height: 1.5; color: var(--pxc-text-3); }
.pxc-addr-alias { color: var(--pxc-text); font-weight: 600; font-size: 13.5px; }
.pxc-addr-actions { display: inline-flex; align-items: center; gap: 6px; flex: none; margin-left: auto; }
.pxc-addr-sep { color: var(--pxc-text-4); font-size: 12px; }
.pxc-addr-row--new { align-items: center; border-style: dashed; }
.pxc-addr-row--new .pxc-addr-row-main { color: var(--pxc-primary); font-weight: 600; font-size: 13.5px; }
.pxc-addr-row--new .pxc-radio-dot { margin-top: 0; }
.pxc-addr-row--new.pxc-addr-row--sel { border-style: solid; }
.pxc-radio-dot { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--pxc-border); flex: none; margin-top: 2px; background: #fff; transition: border 0.15s; }
.pxc-radio-dot--sel { border: 5px solid var(--pxc-primary); }

/* Recipient / soft box */
.pxc-softbox { display: flex; flex-direction: column; gap: 16px; padding: 16px; border: 1px solid var(--pxc-border-3); border-radius: 12px; background: transparent; }
.pxc-softbox-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pxc-softbox-text { flex: 1; font-size: 13px; color: var(--pxc-text-2); min-width: 180px; }
.pxc-toggle-wrap { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.pxc-toggle-label { font-size: 12.5px; font-weight: 500; color: var(--pxc-primary); }
.pxc-toggle { width: 38px; height: 22px; border-radius: 11px; background: #c9d0dc; position: relative; transition: background 0.2s; flex: none; }
.pxc-toggle--on { background: var(--pxc-primary); }
.pxc-toggle-knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: left 0.2s; }
.pxc-toggle--on .pxc-toggle-knob { left: 18px; }

/* Autocomplete dropdown */
.pxc-autocomplete { position: relative; }
.pxc-sugs { position: absolute; top: 100%; left: 0; right: 0; z-index: 30; background: #fff; border: 1px solid var(--pxc-border-2); border-radius: 12px; margin-top: 6px; box-shadow: 0 10px 30px rgba(16, 24, 40, 0.08); overflow: hidden; animation: pxc-rise 0.2s ease both; }
.pxc-sug { padding: 12px 14px; cursor: pointer; font-size: 13.5px; border-bottom: 1px solid #f4f5f8; transition: background 0.12s; }
.pxc-sug:hover { background: var(--pxc-primary-soft); }
.pxc-sugs-credit { padding: 7px 14px; font-size: 10.5px; font-family: var(--pxc-mono); color: #b7bcc7; text-align: right; background: #fafbfc; }


/* ============ Shipping ============ */
.pxc-ship-list { display: flex; flex-direction: column; gap: 12px; }
.pxc-ship-card { display: flex; align-items: center; gap: 14px; padding: 17px 18px; border: 1px solid var(--pxc-border-2); border-radius: var(--pxc-radius-card); background: #fff; cursor: pointer; transition: all 0.15s; }
.pxc-ship-card:hover { border-color: var(--pxc-border); }
.pxc-ship-card--sel { border: 2px solid var(--pxc-primary); background: #fff; padding: 16px 17px; }
.pxc-ship-card .pxc-radio-dot { margin-top: 0; }
.pxc-ship-info { flex: 1; min-width: 0; }
.pxc-ship-name { font-size: 14px; font-weight: 600; }
.pxc-ship-logo { max-height: 22px; margin-left: 6px; vertical-align: middle; }
.pxc-ship-desc { font-size: 12.5px; color: var(--pxc-text-3); }
.pxc-ship-price { font-size: 14px; font-weight: 600; }
.pxc-ship-extra { font-size: 12.5px; color: var(--pxc-text-3); margin-top: 4px; }
.pxc-ship-extra p { margin: 0 0 4px; }
.pxc-comment-block { margin-top: 22px; }

/* ============ Payment ============ */
.pxc-pm-list { border: 1px solid var(--pxc-border-2); border-radius: 14px; overflow: hidden; }
.pxc-pm { background: #fff; transition: background 0.2s; }
.pxc-pm + .pxc-pm { border-top: 1px solid var(--pxc-border-4); }
.pxc-pm--sel { background: #fbfaf4; }
.pxc-pm-head { display: flex; align-items: center; gap: 16px; padding: 16px; cursor: pointer; }
.pxc-pm-head .pxc-radio-dot { margin-top: 0; }
.pxc-pm-name { flex: 1; font-size: 14px; font-weight: 500; }
.pxc-pm--sel .pxc-pm-name { font-weight: 600; }
.pxc-pm-logo { max-height: 22px; max-width: 90px; }
.pxc-pm-body { padding: 0 16px 16px; animation: pxc-rise 0.25s ease both; font-size: 13px; color: var(--pxc-text-3); line-height: 1.65; }
.pxc-pm-body form { margin: 0; }
.pxc-pm-body .pxc-input { margin-bottom: 8px; }
.pxc-pm-extra { font-size: 13px; color: var(--pxc-text-3); }

/* ============ Confirmation ============ */
.pxc-confirm { display: flex; flex-direction: column; gap: 24px; }
.pxc-terms-err { font-size: 12.5px; color: var(--pxc-danger); margin-top: -10px; animation: pxc-fade 0.2s ease; }
.pxc-form-err { border: 1px solid var(--pxc-danger-border); background: var(--pxc-danger-bg); border-radius: 10px; padding: 12px 15px; font-size: 13px; color: var(--pxc-danger-text); animation: pxc-rise 0.25s ease both; }
.pxc-btn-pay { width: 100%; padding: 16px; border: none; border-radius: 12px; background: var(--pxc-primary); color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: background 0.15s; }
.pxc-btn-pay:hover:not(:disabled) { background: var(--pxc-primary-hover); }
.pxc-btn-pay:disabled { cursor: default; }
.pxc-btn-pay--processing { background: var(--pxc-primary-processing); }
.pxc-spinner { width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; border-radius: 50%; display: inline-block; animation: pxc-spin 0.7s linear infinite; }
.pxc-legal-foot { font-size: 11.5px; line-height: 1.6; color: var(--pxc-text-4); text-align: center; }

/* ============ Modals ============ */
.pxc-overlay { position: fixed; inset: 0; background: rgba(17, 24, 39, 0.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; animation: pxc-fade 0.2s ease both; }
.pxc-modal { background: #fff; border-radius: 16px; max-width: 600px; width: 100%; max-height: 82vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.14); animation: pxc-pop 0.25s ease both; }
/* Symmetric 24px frame with a constant 16px rhythm between blocks */
.pxc-modal-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 24px 24px 0; }
.pxc-modal-title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--pxc-heading); }
.pxc-modal-x { width: 30px; height: 30px; border: none; border-radius: 50%; background: transparent; color: var(--pxc-text-3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s; }
.pxc-modal-x:hover { background: var(--pxc-bg-soft-2); }
.pxc-modal-body { padding: 16px 24px; overflow: auto; font-size: 13.5px; line-height: 1.75; color: var(--pxc-text-2); }
.pxc-modal-body h2 { font-size: 15px; color: var(--pxc-text); }
.pxc-modal-foot { padding: 0 24px 24px; border: none; display: flex; justify-content: flex-end; gap: 10px; }
.pxc-modal-foot:empty { padding: 0 0 8px; }
/* Full-width map iframe, like the legacy store map modal */
.pxc-map-frame { width: 100%; height: 350px; min-height: 350px; border: 0; border-radius: 12px; margin-bottom: 16px; }
.pxc-reset-email { background: var(--pxc-primary-soft); border: 1px solid var(--pxc-primary-border); border-radius: 10px; padding: 13px 14px; font-size: 14px; font-weight: 600; color: var(--pxc-text); text-align: center; margin-bottom: 14px; }

/* ============ Empty cart / notices ============ */
.pxc-empty { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 40px 20px; }
.pxc-empty-title { font-size: 20px; font-weight: 700; }
.pxc-empty-text { font-size: 14px; color: var(--pxc-text-3); }
.pxc-note-info { background: var(--pxc-primary-soft); border: 1px solid var(--pxc-primary-border); border-radius: 10px; padding: 11px 14px; font-size: 12.5px; color: var(--pxc-primary-hover); }

/* ============ Icons (Phosphor, inline SVG) ============ */
.pxc-ic { display: inline-flex; width: 1em; height: 1em; vertical-align: -0.14em; flex: none; }
.pxc-ic svg { width: 100%; height: 100%; display: block; }
.pxc-linkbtn .pxc-ic, .pxc-err .pxc-ic, .pxc-ok .pxc-ic { font-size: 13px; }
.pxc-done-badge .pxc-ic, .pxc-banner-user-check .pxc-ic { font-size: 10px; }
.pxc-iconbtn { width: 34px; height: 34px; border: 1px solid var(--pxc-border); border-radius: 50%; background: transparent; color: var(--pxc-text-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; padding: 0; transition: border-color 0.15s, color 0.15s; }
.pxc-iconbtn:hover { border-color: var(--pxc-text-4); color: var(--pxc-text); }
.pxc-iconbtn--primary { border-color: var(--pxc-primary); color: var(--pxc-primary); }
.pxc-iconbtn--primary:hover { background: var(--pxc-primary); color: #fff; border-color: var(--pxc-primary); }
.pxc-opt { font-weight: 400; color: var(--pxc-text-4); }
.pxc-spinner--dark { border-color: var(--pxc-border-2); border-top-color: var(--pxc-text-3); }

/* ============ Social brand buttons ============ */
.pxc-brand { display: inline-flex; width: 18px; height: 18px; flex: none; }
.pxc-brand svg { width: 100%; height: 100%; display: block; }
.pxc-brand--apple { color: #000; margin-top: -2px; }

/* ============ Coupon inline (minimal collapse) ============ */
.pxc-coupon-inline { display: flex; flex-direction: column; gap: 8px; }
.pxc-coupon-inline .pxc-coupon-row { display: flex; align-items: center; gap: 10px; }
.pxc-coupon-inline .pxc-input { flex: 1; min-width: 0; }
.pxc-coupon-inline .pxc-btn--ghost { padding: 12px 18px; border-radius: var(--pxc-radius-input); font-size: 13px; }
.pxc-coupon-inline .pxc-iconbtn { border: none; width: 30px; height: 30px; color: var(--pxc-text-4); }
.pxc-coupon-inline .pxc-iconbtn:hover { color: var(--pxc-text); }

/* ============ Upsell quantity ============ */
.pxc-upsell-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.pxc-iconbtn:disabled { opacity: 0.4; cursor: default; }
.pxc-upsell-actions .pxc-iconbtn { width: 28px; height: 28px; font-size: 12px; }
.pxc-upsell-qty { min-width: 18px; text-align: center; font-size: 13px; font-weight: 600; }
.pxc-upsell-qty--badge { color: var(--pxc-text-3); }

/* ============ Combination modal ============ */
.pxc-modal--combo { max-width: 560px; }
.pxc-combo { display: flex; gap: 22px; align-items: flex-start; }
.pxc-combo-img { width: 168px; flex: none; border-radius: 12px; overflow: hidden; background: var(--pxc-bg-soft-2); border: 1px solid var(--pxc-border-3); }
.pxc-combo-img img { width: 100%; height: auto; display: block; }
.pxc-combo-list { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow: auto; }
.pxc-combo-row { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border: 1px solid var(--pxc-border-2); border-radius: 10px; cursor: pointer; transition: border-color 0.15s; }
.pxc-combo-row:hover { border-color: var(--pxc-border); }
.pxc-combo-row--sel { border: 2px solid var(--pxc-primary); padding: 11px 13px; }
.pxc-combo-row--off { opacity: 0.45; cursor: default; }
.pxc-combo-row .pxc-radio-dot { margin-top: 0; }
.pxc-combo-attrs { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.pxc-combo-attr { font-size: 13px; }
.pxc-combo-attr-group { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--pxc-text-4); }
.pxc-combo-price { font-size: 13px; font-weight: 600; }
.pxc-combo-na { font-size: 12px; color: var(--pxc-text-4); }
.pxc-combo-loading { display: flex; justify-content: center; padding: 40px 0; }
@media (max-width: 559.98px) {
  .pxc-combo { flex-direction: column; }
  .pxc-combo-img { width: 100%; max-width: 220px; margin: 0 auto; }
}

/* ============ Help block styles ============ */
.pxc-help { display: flex; gap: 16px; align-items: flex-start; }
/* Brand-yellow help card, dark green text for contrast */
.pxc-card.pxc-help { background: var(--pxc-help-bg); border-top: none; border-radius: var(--pxc-radius-card); padding: 16px; }
.pxc-card.pxc-help .pxc-card-title { color: var(--pxc-heading); }
.pxc-card.pxc-help .pxc-help-lines { color: rgba(0, 64, 33, 0.85); }
.pxc-card.pxc-help .pxc-help-row { color: rgba(0, 64, 33, 0.85); }
.pxc-card.pxc-help .pxc-help-row .pxc-ic { color: rgba(0, 64, 33, 0.6); }
.pxc-card.pxc-help a.pxc-help-row:hover { color: var(--pxc-heading); }
.pxc-card.pxc-help .pxc-help-strong { color: var(--pxc-heading); }
/* Contact rows: tight icon-to-text gap, underlined links */
.pxc-card.pxc-help .pxc-help-row { gap: 5px; }
.pxc-card.pxc-help a.pxc-help-row { text-decoration: underline; text-underline-offset: 2px; }
/* Agent layout: avatar centered and floating over the card's top edge,
   everything else left-aligned */
.pxc-card.pxc-help--agent { flex-direction: column; align-items: stretch; margin-top: 30px; }
.pxc-card.pxc-help--agent .pxc-help-avatar { width: 60px; height: 60px; align-self: center; margin-top: -48px; }
.pxc-card.pxc-help .pxc-card-title { margin-bottom: 4px; }
/* The description comes from BO HTML: kill the <p> UA margins that were
   inflating the title↔text gap */
.pxc-card.pxc-help .pxc-help-lines p { margin: 0; }
.pxc-card.pxc-help .pxc-help-lines p + p { margin-top: 6px; }
/* ...and give the contact rows more air below the description */
.pxc-card.pxc-help .pxc-help-rows { margin-top: 16px; }
.pxc-card.pxc-help--agent .pxc-help-main { margin-top: -4px; text-align: left; width: 100%; }
.pxc-help-main { flex: 1; min-width: 0; }
.pxc-help-rows { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.pxc-help-row { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--pxc-text-2); text-decoration: none; }
.pxc-help-row .pxc-ic { color: var(--pxc-text-4); font-size: 14px; }
a.pxc-help-row:hover { color: var(--pxc-primary); }
.pxc-help--agent .pxc-help-avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex: none; background: var(--pxc-bg-soft-2); }
.pxc-help--agent .pxc-help-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pxc-help--brand { flex-direction: column; gap: 12px; }
.pxc-help--brand .pxc-help-logo { max-width: 132px; }
.pxc-help--brand .pxc-help-logo img { width: 100%; height: auto; display: block; border-radius: 8px; }

/* ============ intl-tel-input (vendored) overrides ============ */
.pxc-root .iti { width: 100%; }
.pxc-root .iti__country-container { padding: 3px 0 3px 3px; }
.pxc-root .iti__selected-country-primary { border-radius: calc(var(--pxc-radius-input) - 2px) 0 0 calc(var(--pxc-radius-input) - 2px); }
.pxc-root .iti__selected-country { color: var(--pxc-text-2); font-size: 13.5px; background: transparent; border: none; border-right: 1px solid var(--pxc-border-2); }
.pxc-root .iti__selected-country:hover .iti__selected-country-primary,
.pxc-root .iti__selected-country-primary:hover { background: var(--pxc-bg-soft); }
.pxc-root .iti--separate-dial-code .iti__selected-dial-code { font-variant-numeric: tabular-nums; }
.pxc-root .iti__dropdown-content { border: 1px solid var(--pxc-border-2); border-radius: 12px; box-shadow: 0 10px 30px rgba(16, 24, 40, 0.08); margin-top: 6px; z-index: 40; }
.pxc-root .iti__search-input { padding: 11px 14px; border: none; border-bottom: 1px solid var(--pxc-border-3); font-size: 14px; outline: none; width: 100%; }
.pxc-root .iti__search-input:focus { box-shadow: none; }
.pxc-root .iti__country-list { font-size: 13.5px; }
.pxc-root .iti__country { padding: 9px 12px; }
.pxc-root .iti__country:hover, .pxc-root .iti__country--highlight { background: var(--pxc-primary-soft); }
.pxc-root .iti__dial-code { color: var(--pxc-text-4); }

/* ============ PAYCOMET (paytpv JetIframe) harmonization ============ */
/* The theme's payment template ships its own inline styles tuned for the
   legacy checkout (cool grays, alien greens, theme .btn classes we do not
   load). Everything here is scoped to the payment body and re-skins it to
   the checkout's palette without touching the shared template. */
.pxc-pm-body .btn, .pxc-pm-body button[type="submit"] { display: block; width: 100%; padding: 14px 16px; border: none; border-radius: var(--pxc-radius-input); background: var(--pxc-primary); color: #fff !important; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.15s; }
.pxc-pm-body .btn:hover, .pxc-pm-body button[type="submit"]:hover { background: var(--pxc-primary-hover); }
.pxc-pm-body .nc-input, .pxc-pm-body .paytpv_jet input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) { height: 48px; border: 1px solid var(--pxc-border) !important; border-radius: var(--pxc-radius-input) !important; background: #fff; color: var(--pxc-text) !important; font-size: 15px; }
.pxc-pm-body .nc-input:focus { border-color: var(--pxc-primary) !important; box-shadow: 0 0 0 3px var(--pxc-focus-ring); }
.pxc-pm-body .nc-label { font-size: 12.5px; font-weight: 500; color: var(--pxc-text-2); }
/* PAN / CVC live inside provider iframes that carry their OWN inline border:
   drop the outer one so the fields do not show a double frame. */
.pxc-pm-body #paycomet-pan iframe, .pxc-pm-body #paycomet-cvc2 iframe { border: none !important; background: transparent !important; height: 48px !important; }
.pxc-pm-body .nc-wrapper { border: 1px dashed var(--pxc-primary-border) !important; border-radius: var(--pxc-radius-card) !important; background: #fff !important; }
.pxc-pm-body .nc-box { border-top-color: var(--pxc-border-3) !important; }
.pxc-pm-body .paytpv-row { border: 1px solid var(--pxc-border-2) !important; border-radius: var(--pxc-radius-card) !important; }
.pxc-pm-body .paytpv-row.is-selected { border: 2px solid var(--pxc-primary) !important; box-shadow: none !important; padding: 11px !important; }
.pxc-pm-body .paytpv-row input[type="radio"], .pxc-pm-body .nc-header input[type="radio"], .pxc-pm-body .paytpv input[type="checkbox"] { accent-color: var(--pxc-primary) !important; }
.pxc-pm-body .paytpv-row .title, .pxc-pm-body .nc-header .title { color: var(--pxc-heading) !important; }
.pxc-pm-body #paymentErrorMsg { color: var(--pxc-danger); font-size: 13px; margin-top: 8px; }
@media (max-width: 559.98px) { .pxc-pm-body .nc-grid-2 { grid-template-columns: 1fr; } }

/* ============ Payment module content normalization ============ */
.pxc-pm-body h1, .pxc-pm-body h2, .pxc-pm-body h3 { font-size: 13.5px; font-weight: 600; color: var(--pxc-text); margin: 12px 0 6px; }
.pxc-pm-body p { margin: 0 0 8px; }
.pxc-pm-body dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 8px 0; }
.pxc-pm-body dt { color: var(--pxc-text-3); font-weight: 500; }
.pxc-pm-body dd { margin: 0; color: var(--pxc-text); }
.pxc-pm-body ul { margin: 6px 0; padding-left: 18px; }
.pxc-pm-body img { max-width: 100%; }
.pxc-pm-body .close, .pxc-pm-body button.close { display: none; }
.pxc-pm-body section { margin: 0; }

/* ============ Credit line ============ */
.pxc-credit { text-align: right; font-size: 10.5px; color: #c3c8d1; margin-top: 18px; }
.pxc-credit a { color: var(--pxc-text-4); text-decoration: underline; }
.pxc-credit a:hover { color: var(--pxc-primary); }

/* ============ Upsell line removal + small confirm modals ============ */
.pxc-item-remove { width: 24px; height: 24px; border: none; border-radius: 50%; background: transparent; color: var(--pxc-text-4); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; padding: 0; flex: none; }
.pxc-item-remove:hover { color: var(--pxc-danger); }
.pxc-modal--sm { max-width: 420px; }
.pxc-modal--sm .pxc-modal-body { padding-top: 10px; }

/* ============ Empty-cart page (single column, plain white) ============ */
.pxc-empty-page { min-height: 100vh; background: var(--pxc-bg-page); }
.pxc-emptyv { max-width: 720px; margin: 0 auto; padding: 64px 24px 48px; display: flex; flex-direction: column; gap: 56px; }
.pxc-emptyv-brand { text-align: center; }
.pxc-emptyv-hero { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pxc-emptyv-icon { font-size: 40px; color: var(--pxc-text-4); display: inline-flex; }
.pxc-emptyv-icon svg { width: 1em; height: 1em; }
.pxc-emptyv-title { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; margin: 4px 0 0; }
.pxc-emptyv-text { font-size: 14px; color: var(--pxc-text-3); margin: 0; }
/* <a> styled as a button: external theme link colors would tint it green
   on green — pin the white label */
.pxc-emptyv-cta { margin-top: 16px; padding: 13px 28px; border-radius: 10px; font-size: 14px; text-decoration: none; display: inline-block; color: #fff !important; }
.pxc-emptyv-cta:hover { color: #fff !important; }
.pxc-emptyv-heading { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pxc-text-4); text-align: center; margin-bottom: 20px; }
.pxc-emptyv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 220px)); gap: 16px; justify-content: center; }
.pxc-emptyv-card { border: 1px solid var(--pxc-border-2); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.pxc-emptyv-thumb { width: 120px; height: 120px; border-radius: 12px; overflow: hidden; background: var(--pxc-bg-soft-2); margin-bottom: 6px; }
.pxc-emptyv-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pxc-emptyv-name { font-size: 13.5px; font-weight: 500; }
.pxc-emptyv-price { font-size: 13px; color: var(--pxc-text-3); }
.pxc-emptyv-card .pxc-iconbtn { margin-top: 8px; }
.pxc-emptyv-help { max-width: 460px; margin: 0 auto; width: 100%; }

/* ============ Cart line steppers + combo selects ============ */
.pxc-iconbtn--xs { width: 22px; height: 22px; font-size: 10px; }
.pxc-item-stepper { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.pxc-item-stepper-qty { font-size: 12.5px; font-weight: 600; min-width: 14px; text-align: center; }
.pxc-combo-opts { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.pxc-select { appearance: auto; -webkit-appearance: auto; cursor: pointer; }
.pxc-qty-stepper { display: flex; align-items: center; gap: 12px; }
.pxc-qty-stepper .pxc-iconbtn { width: 30px; height: 30px; font-size: 12px; }
.pxc-qty-stepper-n { font-size: 14px; font-weight: 600; min-width: 20px; text-align: center; }
.pxc-combo-status { font-size: 14px; padding-top: 2px; }
.pxc-combo-status .pxc-combo-price { font-size: 15px; font-weight: 700; }

/* Empty-page cards: add buttons pinned to the same baseline */
.pxc-emptyv-name { flex-grow: 1; display: flex; align-items: flex-start; justify-content: center; }
.pxc-emptyv-card .pxc-iconbtn { margin-top: auto; }

/* ============================================================
   FN (Flores Navarro) delivery flow
   ============================================================ */
.pxc-fn-note { font-size: 12.5px; color: var(--pxc-text-3); }
.pxc-fn-phone-row { display: flex; align-items: flex-start; gap: 8px; }
.pxc-fn-phone-row .pxc-btn { white-space: nowrap; }

.pxc-fn-types { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pxc-fn-type { display: flex; align-items: center; gap: 8px; padding: 16px; border: 1px solid var(--pxc-border-2); border-radius: var(--pxc-radius-card); background: #fff; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--pxc-heading); transition: all 0.15s; }
.pxc-fn-type:hover { border-color: var(--pxc-border); }
.pxc-fn-type--sel { border: 2px solid var(--pxc-primary); padding: 15px; }

/* "Ubicación tienda" card: embedded map + Location/Hours/Contact columns,
   mirroring the legacy fn-store-card. */
.pxc-store-card { border: 1px solid var(--pxc-border-2); border-radius: var(--pxc-radius-card); overflow: hidden; background: #fff; }
.pxc-store-map iframe, .pxc-store-map-frame { width: 100%; height: 350px; border: 0; display: block; }
.pxc-store-info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 16px; }
.pxc-store-info-title { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pxc-text-4); margin-bottom: 4px; }
.pxc-store-info-text { font-size: 13px; color: var(--pxc-text-2); line-height: 1.5; }
@media (max-width: 560px) { .pxc-store-info { grid-template-columns: 1fr; } }
/* Click&GO badge: bigger mark, negative margins keep the card height as-is */
.pxc-clickgo { height: 32px; margin: -10px 0 -10px 2px; flex: none; }

.pxc-fn-summary { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--pxc-success-border); background: var(--pxc-success-bg); border-radius: var(--pxc-radius-card); }
.pxc-fn-summary-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.pxc-fn-summary-type { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--pxc-success); }
.pxc-fn-summary-when { font-size: 14px; font-weight: 600; color: var(--pxc-text); }
.pxc-fn-summary-line { font-size: 12.5px; color: var(--pxc-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pxc-fn-warn { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; border: 1px solid #f2d9a4; background: #fdf6e7; border-radius: 12px; }
.pxc-fn-warn-text { flex: 1; min-width: 220px; font-size: 13px; color: #7a5410; line-height: 1.5; }
.pxc-fn-reco { display: flex; flex-direction: column; gap: 12px; }

/* Day AND slot options share this full-width card component (legacy
   .fn-option): title + inline subtitle, radio dot, 100% width. */
.pxc-fn-days { display: flex; flex-direction: column; gap: 8px; }
.pxc-fn-day { display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px; border: 1px solid var(--pxc-border-2); border-radius: var(--pxc-radius-card); background: #fff; cursor: pointer; transition: all 0.15s; }
.pxc-fn-day:hover { border-color: var(--pxc-border); }
.pxc-fn-day--sel { border: 2px solid var(--pxc-primary); padding: 15px; }
.pxc-fn-day--off { opacity: 0.55; cursor: not-allowed; }
.pxc-fn-day--off:hover { border-color: var(--pxc-border-2); }
.pxc-fn-day--special { background: #fffbeb; }
.pxc-fn-day-main { display: flex; flex-direction: row; align-items: baseline; gap: 4px 8px; flex-wrap: wrap; flex: 1; min-width: 0; font-size: 14px; }
.pxc-fn-day-main b { color: var(--pxc-heading); }
.pxc-fn-day-date { font-size: 13px; color: var(--pxc-text-3); }
.pxc-fn-day-na { font-size: 12.5px; color: var(--pxc-text-4); }
.pxc-fn-day-price { font-size: 13px; font-weight: 600; }
/* Locked day block: informative panel until a served postcode is entered */
.pxc-day-locked { background: var(--pxc-bg-soft-2); border-radius: var(--pxc-radius-card); padding: 16px; font-size: 13.5px; line-height: 1.5; color: var(--pxc-text-3); }
.pxc-day-locked--bad { color: var(--pxc-danger-text); background: var(--pxc-danger-bg); }

.pxc-fn-cal { border: 1px solid var(--pxc-border-2); border-radius: var(--pxc-radius-card); padding: 16px; width: 100%; background: #fff; }
.pxc-fn-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.pxc-fn-cal-title { font-size: 13.5px; font-weight: 600; }
.pxc-fn-cal-nav { border: 1px solid var(--pxc-border-2); background: #fff; border-radius: 8px; width: 30px; height: 30px; font-size: 16px; cursor: pointer; color: var(--pxc-text-2); }
.pxc-fn-cal-nav:hover { border-color: var(--pxc-border); }
.pxc-fn-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.pxc-fn-cal-dows { margin-bottom: 4px; text-align: center; font-size: 11px; color: var(--pxc-text-4); text-transform: uppercase; }
.pxc-fn-cal-dows span { padding: 4px 0; }
.pxc-fn-cal-cell { height: 44px; border: none; border-radius: 9px; background: transparent; font-size: 13.5px; cursor: pointer; color: var(--pxc-text); font-variant-numeric: tabular-nums; }
.pxc-fn-cal-cell:hover:not(:disabled) { background: var(--pxc-bg-soft); }
.pxc-fn-cal-cell.is-empty { cursor: default; }
.pxc-fn-cal-cell.is-off { color: var(--pxc-text-4); opacity: 0.5; cursor: not-allowed; }
.pxc-fn-cal-cell.is-special:not(.is-off) { background: #fef3c7; font-weight: 600; }
.pxc-fn-cal-cell.is-sel { background: var(--pxc-primary); color: #fff; font-weight: 600; }

/* Calendar legend: what each color means */
.pxc-cal-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 16px; border-top: 1px solid var(--pxc-border-3); padding-top: 16px; }
.pxc-cal-legend-item { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--pxc-text-3); }
.pxc-leg { width: 14px; height: 14px; border-radius: 4px; display: inline-block; flex: none; }
.pxc-leg--sel { background: var(--pxc-primary); }
.pxc-leg--special { background: #fef3c7; border: 1px solid #f9a825; }
.pxc-leg--off { background: #f3f4f6; border: 1px solid var(--pxc-border-2); }

.pxc-fn-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pxc-fn-slot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border: 1px solid var(--pxc-border-2); border-radius: 11px; background: #fff; cursor: pointer; font-size: 13px; transition: all 0.15s; }
.pxc-fn-slot:hover { border-color: var(--pxc-border); }
.pxc-fn-slot--sel { border: 2px solid var(--pxc-primary); padding: 11px 13px; font-weight: 600; }
.pxc-fn-slot--off { opacity: 0.5; cursor: not-allowed; }
.pxc-fn-slot-na { font-size: 11.5px; color: var(--pxc-text-4); }
.pxc-fn-slot-price { font-size: 12px; color: var(--pxc-text-2); }

.pxc-fn-dedic { display: flex; flex-direction: column; gap: 8px; }
.pxc-fn-dedic-head { display: flex; align-items: center; gap: 12px; margin-bottom: 2px; }
.pxc-fn-dedic-name { font-size: 13.5px; font-weight: 600; }
.pxc-fn-dedic-count { font-size: 11.5px; color: var(--pxc-text-4); text-align: right; }

@media (max-width: 560px) {
  .pxc-fn-types { grid-template-columns: 1fr; }
  .pxc-fn-store { flex-direction: column; align-items: flex-start; }
  .pxc-fn-slots { grid-template-columns: 1fr 1fr; }
}

/* Bajo el pedido mínimo de envío a domicilio: los campos de entrega quedan
   inertes hasta llegar al mínimo o cambiar a recogida (paridad legacy). */
.pxc-fn-locked { pointer-events: none; opacity: .45; user-select: none; }