/* =============================================
   TINTIN ACCESORIOS — Estilos de checkout.html
   Extraído del <style> inline original (sin cambios de diseño).
   ============================================= */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    /* Fase 3: misma paleta que el resto del sitio (css/core/tokens-tintin.css) —
       estos nombres cortos se mantienen porque los usa toda la hoja de acá
       abajo, pero ahora apuntan al mismo valor real en todas las superficies. */
    :root {
      --acc: var(--pink-dark);
      --acc-dark: var(--rose);
      --acc-light: var(--pink-lightest);
      --acc-pale: var(--card-bg);
      --text: var(--ink);
      --text-muted: #888;
      /* --border y --radius-sm ya vienen de css/core/tokens-tintin.css con el
         mismo valor (#f0d8e0 / 8px) — no se redeclaran acá para no caer en
         una auto-referencia var(--x) dentro de --x, que en CSS invalida la
         propiedad en vez de heredar el valor anterior de la cascada. */
      --radius: var(--radius-md);
      --font: "Montserrat";
    }

    body {
      font-family:Montserrat;
      background: #f7f4f6;
      color: var(--text);
      min-height: 100vh;
    }

    /* ---- ACCION CONTEXTUAL DE CHECKOUT ---- */
    .ck-back-row {
      width: min(100%, 1100px);
      margin: 0 auto;
      padding: calc(var(--header-h) + 16px) 24px 0;
    }
    .ck-header-back {
      font-size: 12px;
      font-weight: 700;
      color: var(--text-muted);
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 6px;
      text-transform: uppercase;
      letter-spacing: .06em;
      min-height: 44px;
      padding-block: 6px;
      width: fit-content;
    }
    .ck-header-back:hover { color:var(--color-text-primary,#222222); }
    @media (max-width: 768px) { .ck-back-row { padding-top: 16px; } }

    /* ---- STEP INDICATOR ---- */
    .ck-steps {
      display: flex;
      align-items: flex-start;
      justify-content: center;
      gap: 0;
      padding: 24px 16px 16px;
      max-width: 700px;
      margin: 0 auto;
    }
    .ck-step {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      flex: 1;
      position: relative;
    }
    .ck-step:not(:last-child)::after {
      content: '';
      position: absolute;
      top: 16px;
      left: calc(50% + 16px);
      right: calc(-50% + 16px);
      height: 2px;
      background: var(--border);
      z-index: 0;
    }
    .ck-step.done:not(:last-child)::after { background: var(--acc); }

    .ck-step-num {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 2.5px solid var(--border);
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 800;
      color: var(--text-muted);
      position: relative;
      z-index: 1;
      transition:transform .3s,opacity .3s,background-color .3s,border-color .3s,color .3s,box-shadow .3s;
    }
    .ck-step.active .ck-step-num {
      background: var(--acc);
      border-color: var(--acc);
      color: #fff;
    }
    .ck-step.done .ck-step-num {
      background: var(--acc);
      border-color: var(--acc);
      color: #fff;
    }
    .ck-step-label {
      font-size: 11.5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .06em;
      color: var(--text-muted);
      text-align: center;
      white-space: nowrap;
      overflow-wrap: normal;
      word-break: normal;
    }
    .ck-step.active .ck-step-label { color:var(--color-text-primary,#222222); }
    .ck-step.done .ck-step-label { color:var(--color-text-primary,#222222); }

    /* ---- MAIN LAYOUT ---- */
    .ck-body {
      max-width: 700px;
      margin: 0 auto;
      padding: 8px 16px 80px;
    }

    /* ---- PANELS ---- */
    .ck-panel {
      background: #fff;
      border-radius: var(--radius);
      border: 1.5px solid var(--border);
      box-shadow: var(--shadow-sm);
      overflow: hidden;
      display: none;
    }
    .ck-panel.active { display: block; }

    .ck-panel-head {
      background: #fff;
      padding: 20px 24px;
      border-bottom: 1.5px solid var(--border);
    }
    .ck-panel-title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 16px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .06em;
      color:var(--color-text-primary,#222222);
    }
    .ck-panel-title-icon { flex: 0 0 auto; }
    .ck-panel-sub {
      font-size: 12px;
      color: var(--text-muted);
      margin-top: 2px;
    }
    .ck-panel-body { padding: 24px; }

    /* ---- CART ITEMS ---- */
    /* Reserva el alto de una fila mientras carga: evita que el botón se mueva. */
    #ck-items:empty { min-height: 92px; }

    .ck-item {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px 0;
      border-bottom: 1px solid #FDECF2;
    }
    .ck-item:last-child { border-bottom: none; }
    .ck-item-img {
      width: 64px;
      height: 64px;
      border-radius: var(--radius-sm);
      object-fit: contain;
      background: transparent;
      flex-shrink: 0;
    }
    .ck-item-img-placeholder {
      width: 64px;
      height: 64px;
      border-radius: var(--radius-sm);
      background: var(--acc-pale);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      flex-shrink: 0;
    }
    .ck-item-info { flex: 1; min-width: 0; }
    .ck-item-name {
      font-size: 14px;
      font-weight: 700;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .ck-item-cat {
      font-size: 11px;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: .06em;
    }
    .ck-item-price {
      font-size: 13px;
      font-weight: 700;
      color:var(--color-text-primary,#222222);
      margin-top: 2px;
    }
    .ck-item-controls {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .ck-qty-btn {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: 2px solid var(--border);
      background: #fff;
      font-size: 16px;
      font-weight: 700;
      color:var(--color-text-primary,#222222);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition:transform .15s,opacity .15s,background-color .15s,border-color .15s,color .15s,box-shadow .15s;
      line-height: 1;
    }
    .ck-qty-btn:hover { background: var(--acc); color: #fff; border-color: var(--acc); }
    .ck-qty-num {
      font-size: 14px;
      font-weight: 800;
      min-width: 24px;
      text-align: center;
    }
    .ck-remove-btn {
      background: none;
      border: none;
      cursor: pointer;
      color:var(--color-text-primary,#222222);
      font-size: 18px;
      line-height: 1;
      transition: color .15s;
      padding: 4px;
    }
    .ck-remove-btn:hover { color: #ef4444; }

    .ck-subtotal {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 0 0;
      margin-top: 8px;
      border-top: 2px solid var(--border);
      font-size: 15px;
      font-weight: 800;
    }
    .ck-subtotal-val { color:var(--color-text-primary,#222222); font-size: 16px; }

    .ck-empty {
      text-align: center;
      padding: 32px 20px 16px;
      color: var(--text-muted);
    }
    .ck-empty-icon { font-size: 48px; margin-bottom: 12px; }
    .ck-empty-text { font-size: 14px; font-weight: 600; }
    .ck-suggested { padding: 0 0 16px; }
    .ck-suggested-title { font-size: 13px; font-weight: 700; color:var(--color-text-primary,#222222); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 12px; }
    .ck-suggested-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
    @media (max-width: 500px) { .ck-suggested-grid { grid-template-columns: repeat(2, 1fr); } }
    .ck-sug-card { border: 1px solid var(--border); border-radius: 12px; padding: 12px 8px; text-align: center; display: flex; flex-direction: column; gap: 4px; }
    .ck-sug-img { display:flex; justify-content:center; align-items:center; height:56px; margin-bottom:6px; }
    .ck-sug-name { font-size: 12px; font-weight: 700; color:var(--color-text-primary,#222222); line-height: 1.2; }
    .ck-sug-cat { font-size: 10px; color:var(--color-text-primary,#222222); text-transform: uppercase; letter-spacing: .05em; }
    .ck-sug-price { font-size: 12px; font-weight: 700; color:var(--color-text-primary,#222222); margin: 2px 0; }
    .ck-sug-add { min-height:44px; background: var(--acc); color: #fff !important; border: none; border-radius: 20px; padding: 8px 12px; font-size: 11px; font-weight: 700; cursor: pointer; transition: background .2s; margin-top: 4px; }
    .ck-sug-add:hover { background: var(--color-brand-primary, #F8AACA); }
    .ck-sug-add:disabled { background: #4caf50; cursor: default; }

    /* ---- BUTTONS ---- */
    .ck-btn {
      display: block;
      width: 100%;
      padding: 14px;
      background: var(--acc);
      color: #fff;
      border: none;
      border-radius: 50px;
      font-size: 13px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .1em;
      cursor: pointer;
      font-family:Montserrat;
      transition: background .2s, transform .15s;
      margin-top: 20px;
    }
    .ck-btn:hover { background: var(--acc-dark); }
    .ck-btn:active { transform: scale(.98); }
    .ck-btn:disabled { background: #ccc; cursor: not-allowed; }

    .ck-btn-back {
      display: block;
      width: 100%;
      padding: 12px;
      background: transparent;
      color: var(--text-muted);
      border: 2px solid var(--border);
      border-radius: 50px;
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .08em;
      cursor: pointer;
      font-family:Montserrat;
      transition:transform .2s,opacity .2s,background-color .2s,border-color .2s,color .2s,box-shadow .2s;
      margin-top: 10px;
    }
    .ck-btn-back:hover { border-color: var(--acc); color:var(--color-text-primary,#222222); }

    /* ---- FORM FIELDS ---- */
    .ck-field {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: 16px;
    }
    .ck-label {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: var(--text-muted);
    }
    .ck-input, .ck-select, .ck-textarea {
      padding: 12px 16px;
      border: 1.5px solid var(--border);
      border-radius: var(--radius-sm);
      font-size: 14px;
      font-family:Montserrat;
      color: var(--text);
      transition: border .2s, box-shadow .2s;
      background: #fff;
      width: 100%;
    }
    .ck-input:focus, .ck-select:focus, .ck-textarea:focus {
      outline: none;
      border-color: var(--acc);
      box-shadow: 0 0 0 3px rgba(184,76,114,.1);
    }
    .ck-textarea { resize: vertical; min-height: 80px; }

    /* ---- SHIPPING INFO ---- */
    .ck-ship-info {
      background: #fff;
      border: 1.5px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 14px 16px;
      margin-top: 12px;
      display: none;
    }
    .ck-ship-info.show { display: block; }
    .ck-ship-method {
      font-size: 14px;
      font-weight: 700;
      color:var(--color-text-primary,#222222);
      margin-bottom: 4px;
    }
    .ck-ship-cost {
      font-size: 13px;
      color: var(--text-muted);
      font-weight: 600;
    }

    /* ---- SHIPPING TIMING REMINDER (llamativo, debajo del método elegido) ---- */
    .ck-ship-reminder {
      display: none;
      align-items: flex-start;
      gap: 10px;
      background: #fdf6f9;
      border: 1.5px solid var(--border);
      border-left: 4px solid var(--acc);
      border-radius: var(--radius-sm);
      padding: 12px 14px;
      margin-top: 10px;
      font-size: 12.5px;
      line-height: 1.55;
      color:#222222;
    }
    .ck-ship-reminder.show { display: flex; }
    .ck-ship-reminder-icon { font-size: 17px; line-height: 1.4; flex-shrink: 0; }
    .ck-ship-reminder-text strong {
      display: block;
      margin-bottom: 2px;
      color:var(--color-text-primary,#222222);
      font-size: 12.5px;
    }

    .ck-pickup-notice {
      display: none;
      align-items: flex-start;
      gap: 12px;
      margin-top: 10px;
      padding: 14px 16px;
      border: 1.5px solid var(--border);
      border-left: 4px solid var(--acc);
      border-radius: var(--radius-sm);
      background: var(--acc-pale);
      color: var(--text);
      font-size: 12.5px;
      line-height: 1.55;
    }
    .ck-pickup-notice.show { display: flex; }
    .ck-pickup-notice-icon { flex: 0 0 auto; font-size: 18px; line-height: 1.4; }
    .ck-pickup-notice strong { display: block; margin-bottom: 3px; color:var(--color-text-primary,#222222); font-size: 13px; }
    .ck-pickup-notice p { margin: 0; }
    .ck-pickup-notice-detail { margin-top: 5px !important; color:#222222; }

    .ck-summary-private-location {
      margin-top: 12px;
      padding: 11px 12px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: var(--acc-pale);
      color:#222222;
      font-size: 12.5px;
      font-weight: 600;
      line-height: 1.5;
    }

    /* ---- PAYMENT RADIO CARDS ---- */
    .ck-pay-option {
      position: absolute;
      width: 1px;
      height: 1px;
      opacity: 0;
      clip-path: inset(50%);
    }
    .ck-pay-option:focus-visible + .ck-pay-label {
      outline: 3px solid var(--accent, #F8AACA);
      outline-offset: 3px;
    }
    .ck-pay-label {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      padding: 16px;
      border: 2px solid var(--border);
      border-radius: var(--radius-sm);
      cursor: pointer;
      margin-bottom: 12px;
      transition:transform .2s,opacity .2s,background-color .2s,border-color .2s,color .2s,box-shadow .2s;
    }
    .ck-pay-label:hover { border-color: var(--acc); background: var(--acc-pale); }
    .ck-pay-option:checked + .ck-pay-label {
      border-color: var(--acc);
      background: var(--acc-pale);
    }
    .ck-pay-icon { font-size: 24px; flex-shrink: 0; margin-top: 2px; }
    .ck-pay-title {
      font-size: 14px;
      font-weight: 800;
      color: var(--text);
    }
    .ck-pay-desc {
      font-size: 12px;
      color: var(--text-muted);
      margin-top: 2px;
    }

    .ck-bank-details {
      background: #f0f8f0;
      border: 1.5px solid #c8e6c9;
      border-radius: var(--radius-sm);
      padding: 14px 16px;
      margin-top: 4px;
      display: none;
      font-size: 13px;
      color: #2e7d32;
    }
    .ck-bank-details.show { display: block; }
    .ck-bank-line { margin-bottom: 4px; font-weight: 600; }

    .ck-pay-note {
      text-align: center;
      font-size: 12px;
      color: var(--text-muted);
      margin-top: 12px;
      padding: 10px 14px;
      background: var(--acc-pale);
      border-radius: var(--radius-sm);
      border: 1px solid var(--border);
    }

    /* ---- ORDER SUMMARY ---- */
    .ck-summary-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 0;
      font-size: 13px;
      border-bottom: 1px solid #FDECF2;
    }
    .ck-summary-row:last-child { border-bottom: none; }
    .ck-summary-label { color: var(--text-muted); font-weight: 600; }
    .ck-summary-val { font-weight: 700; }
    .ck-summary-total {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 14px 0 0;
      font-size: 16px;
      font-weight: 900;
      border-top: 2.5px solid var(--acc);
      margin-top: 8px;
    }
    .ck-summary-total-val { color:var(--color-text-primary,#222222); }

    .ck-summary-items {
      margin-top: 8px;
    }
    .ck-summary-item {
      display: flex;
      justify-content: space-between;
      font-size: 13px;
      padding: 4px 0;
      color: var(--text);
    }
    .ck-summary-item-name {
      font-weight: 600;
      color: var(--text-muted);
    }

    /* ---- CONFIRM ---- */
    .ck-confirm-check {
      text-align: center;
      padding: 12px 8px 24px;
    }
    .ck-confirm-icon {
      width: 72px;
      height: 72px;
      background: #eafaf0;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 18px;
      font-size: 34px;
      box-shadow: 0 12px 28px rgba(46,125,50,.16);
      animation: ckPop .45s cubic-bezier(.22,1,.36,1) both;
    }
    @keyframes ckPop {
      from { transform: scale(.7); opacity: 0; }
      to   { transform: scale(1); opacity: 1; }
    }
    .ck-confirm-title {
      font-size: 22px;
      font-weight: 780;
      letter-spacing: -.02em;
      color: var(--text-strong, #2b2226);
      margin-bottom: 8px;
    }
    .ck-confirm-sub {
      max-width: 320px;
      margin: 0 auto;
      font-size: 13.5px;
      line-height: 1.5;
      color: var(--text-muted);
    }

    .ck-wa-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 15px;
      background: #0d8043;
      color: #fff;
      border: none;
      border-radius: 50px;
      font-size: 14px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .08em;
      cursor: pointer;
      font-family:Montserrat;
      text-decoration: none;
      margin-top: 20px;
      transition: background .2s;
      width: 100%;
    }
    .ck-wa-btn:hover { background: #0a6835; }

    /* ---- ERROR ---- */
    .ck-error {
      background: #ffebee;
      color: #c62828;
      padding: 10px 14px;
      border-radius: var(--radius-sm);
      font-size: 12px;
      font-weight: 600;
      margin-top: 12px;
      display: none;
    }
    .ck-error.show { display: block; }

    /* ---- SPINNER ---- */
    .ck-spinner {
      display: inline-block;
      width: 18px;
      height: 18px;
      border: 2.5px solid rgba(255,255,255,.4);
      border-top-color: #fff;
      border-radius: 50%;
      animation: spin .7s linear infinite;
      vertical-align: middle;
      margin-right: 6px;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* ---- MAP ---- */
    .ck-map-wrap {
      display: none;
      margin-top: 16px;
      border-radius: var(--radius-sm);
      overflow: hidden;
      border: 1.5px solid var(--border);
    }
    .ck-map-wrap.show { display: block; }
    .ck-map-tip {
      background: var(--acc-pale);
      padding: 10px 14px;
      font-size: 12px;
      font-weight: 600;
      color:var(--color-text-primary,#222222);
      border-bottom: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
    .ck-map-tip strong { color:var(--color-text-primary,#222222); }
    .ck-map-tip-steps {
      font-size: 11px;
      font-weight: 500;
      color:var(--color-text-primary,#222222);
      opacity: .85;
    }
    #ck-map { height: 260px; width: 100%; }
    .ck-map-coords {
      background: #f9f9f9;
      padding: 8px 14px;
      font-size: 11px;
      color: var(--text-muted);
      font-weight: 600;
      border-top: 1px solid var(--border);
    }
    .ck-map-coords.ck-map-coords-missing { color: #c0392b; }
    @media (max-width: 480px) { #ck-map { height: 200px; } }

    /* Aviso "usando tu ubicación guardada" — aparece solo si el perfil ya
       tiene una ubicación con nombre guardada y se precargó sola. */

    /* Nombre obligatorio de la ubicación + guardar en el perfil */
    .ck-map-name-wrap { background: #fff; padding: 12px 14px 14px; }
    .ck-map-name-wrap .ck-label { font-size: 11px; margin-bottom: 5px; display: block; }
    .ck-checkbox-row {
      display: flex; align-items: flex-start; gap: 8px;
      margin-top: 10px; font-size: 11.5px; color: var(--text-muted);
      min-height: 44px; padding-block: 6px;
      cursor: pointer; line-height: 1.4;
    }
    .ck-checkbox-row input { margin-top: 2px; flex-shrink: 0; }

    /* ---- MAP SEARCH ---- */
    .ck-map-search-wrap { position: relative; padding: 12px 14px 0; background: #fff; }
    .ck-map-search-results {
      position: absolute;
      top: 100%; left: 14px; right: 14px;
      z-index: 500;
      background: #fff;
      border: 1.5px solid var(--border);
      border-radius: var(--radius-sm);
      margin-top: 4px;
      max-height: 220px;
      overflow-y: auto;
      display: none;
      box-shadow: 0 8px 24px rgba(248,170,202,.15);
    }
    .ck-map-search-results.show { display: block; }
    .ck-map-search-item {
      padding: 10px 14px;
      font-size: 12.5px;
      cursor: pointer;
      border-bottom: 1px solid #f5f5f5;
      line-height: 1.4;
    }
    .ck-map-search-item:last-child { border-bottom: none; }
    .ck-map-search-item:hover { background: var(--acc-pale); }
    .ck-map-search-item.ck-map-search-empty { color: var(--text-muted); cursor: default; }
    .ck-map-search-item.ck-map-search-empty:hover { background: none; }
    .ck-map-search-item-name { font-weight: 700; color: var(--text); }
    .ck-map-search-item-addr { color: var(--text-muted); font-size: 11px; margin-top: 2px; }

    /* ---- TRUST BAR (step 1) ---- */
    .ck-trust-bar {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 20px;
      padding-top: 16px;
      border-top: 1px solid var(--border);
    }
    .ck-trust-item {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 600;
      color: var(--text-muted);
      background: var(--acc-pale);
      border-radius: 50px;
      padding: 6px 12px;
    }

    /* ---- RESPONSIVE ---- */
    @media (max-width: 480px) {
      .ck-panel-body { padding: 16px; }
      .ck-step-label { display: none; }
      .ck-card-row { grid-template-columns: 1fr; }
      .ck-trust-bar { gap: 6px; }
      .ck-trust-item { font-size: 10px; }
    }

/* ---------------------------------------------------------------
   Encomienda: retiro en agencia o entrega en puerta.
   Dos opciones grandes y tocables, porque cambian qué datos se le
   piden después — no es un detalle que convenga esconder.
   --------------------------------------------------------------- */
.ck-enc-modes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 14px 0 4px;
}

@media (min-width: 560px) {
  .ck-enc-modes { grid-template-columns: 1fr 1fr; }
}

.ck-enc-mode {
  display: grid;
  gap: 3px;
  min-height: 44px;
  padding: 14px 16px;
  border: 1.5px solid var(--border, #f0d8e0);
  border-radius: var(--radius-sm, 14px);
  background: #fff;
  font-family: "Montserrat", sans-serif;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}

.ck-enc-mode:hover { border-color: var(--color-brand-primary, var(--color-brand-primary, #F8AACA)); }

.ck-enc-mode.is-active {
  border-color: var(--color-brand-primary, var(--color-brand-primary, #F8AACA));
  background: rgba(248,170,202, .06);
  box-shadow: inset 0 0 0 1px var(--color-brand-primary, var(--color-brand-primary, #F8AACA));
}

.ck-enc-mode:focus-visible {
  outline: 3px solid rgba(248,170,202, .45);
  outline-offset: 2px;
}

.ck-enc-mode-icon { font-size: 20px; line-height: 1; }

.ck-enc-mode-title {
  color: var(--text, #222222);
  font-size: 14px;
  font-weight: 800;
}

.ck-enc-mode-sub {
  /* Contraste ≥ 4.5:1 sobre blanco y sobre el fondo activo. */
  color:#222222;
  font-size: 12.5px;
  line-height: 1.4;
}

.ck-enc-note {
  margin: 10px 0 4px;
  padding: 12px 14px;
  border-radius: var(--radius-sm, 14px);
  background: #fdf6f9;
  color:#222222;
  font-size: 13px;
  line-height: 1.5;
}

/* ---------------------------------------------------------------
   "¿Te lo llevamos acá?" — confirmación de la ubicación guardada.
   Se muestra sobre el mapa, con el punto ya marcado, para que se
   vea dónde es y no haya que buscarla de nuevo en cada compra.
   --------------------------------------------------------------- */
.ck-saved-confirm {
  padding: 14px;
  border-bottom: 1px solid var(--border, #f0d8e0);
  background: #fdf6f9;
}

.ck-saved-confirm-title {
  color: var(--text, #222222);
  font-size: 13px;
  font-weight: 800;
}

.ck-saved-confirm-name {
  margin-top: 4px;
  color: var(--text, #222222);
  font-size: 14px;
  font-weight: 700;
}

.ck-saved-confirm-detail {
  margin-top: 2px;
  /* Contraste ≥ 4.5:1 sobre el fondo rosado. */
  color:#222222;
  font-size: 12.5px;
  line-height: 1.4;
}

.ck-saved-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.ck-saved-confirm-yes,
.ck-saved-confirm-no {
  flex: 1 1 140px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 50px;
  font: 800 12px/1 "Montserrat", sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}

.ck-saved-confirm-yes {
  border: none;
  background: var(--color-brand-primary, var(--color-brand-primary, #F8AACA));
  color:#222222;
}

.ck-saved-confirm-yes:hover { background: var(--color-brand-primary-hover, var(--color-brand-primary, #F8AACA)); }

.ck-saved-confirm-no {
  border: 1.5px solid var(--color-brand-primary, var(--color-brand-primary, #F8AACA));
  background: transparent;
  color:var(--color-text-primary,#222222);
}

.ck-saved-confirm-no:hover {
  background: var(--color-brand-primary, var(--color-brand-primary, #F8AACA));
  color:#222222;
}

.ck-saved-confirm-yes:focus-visible,
.ck-saved-confirm-no:focus-visible {
  outline: 3px solid rgba(248,170,202, .45);
  outline-offset: 2px;
}

/* Los datos guardados de la cuenta no vuelven a solicitarse. */
#ck-name-field[hidden], #ck-phone-field[hidden], #ck-saved-identity[hidden] { display:none !important; }

/* El resumen mantiene etiquetas y valores separados aun con textos largos. */
.ck-summary-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 12px; align-items: start; }
.ck-summary-val { min-width: 0; overflow-wrap: anywhere; text-align: right; }
.ck-summary-total { gap: 12px; align-items: start; }
.ck-summary-total > span:first-child { flex: 0 0 auto; }
.ck-summary-total-val { min-width: 0; overflow-wrap: anywhere; text-align: right; }
.ck-summary-shipping-note { margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--text-muted); }
@media (max-width: 480px) {
  .ck-summary-total { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Una constancia legible y con las mismas acciones en cada pantalla. */
.ck-receipt { max-width: 760px; margin-inline: auto; border-radius: 24px; overflow: hidden; }
.ck-receipt .ck-confirm-check { padding: 28px 24px 22px; background: linear-gradient(135deg, var(--acc-pale, #fff0f5), #fff); border-bottom: 1px solid var(--border, #f1dfe7); }
.ck-receipt .ck-confirm-sub { max-width: 520px; }
.ck-order-number { width: fit-content; max-width: 100%; margin: 0 auto 24px; padding: 10px 16px; border: 1px solid var(--border, #f1dfe7); border-radius: 12px; background: var(--acc-pale, #fff0f5); color: var(--text, #222222); font-size: 14px; font-weight: 800; overflow-wrap: anywhere; text-align: center; }
.ck-receipt .ck-summary-items { margin-top: 0; }
.ck-summary-item { gap: 12px; align-items: start; }
.ck-summary-item-name { min-width: 0; overflow-wrap: anywhere; }
.ck-summary-item > span:last-child { flex-shrink: 0; white-space: nowrap; }
.ck-receipt .ck-summary-total:last-of-type { padding: 16px; border: 0; border-radius: 14px; background: var(--acc-pale, #fff0f5); margin-top: 16px; }
.ck-receipt-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 24px; }
.ck-receipt-action { min-height: 48px; border: 1px solid var(--border, #ecd0dc); border-radius: 14px; padding: 12px; background: #fff; color: var(--text, #222222); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.ck-receipt-action:hover { background: var(--acc-pale, #fff0f5); border-color: var(--acc, #efabc7); }
.ck-receipt-action:focus-visible { outline: 3px solid var(--acc, #efabc7); outline-offset: 3px; }
.ck-receipt-status, .ck-receipt-disclaimer { font-size: 12px; line-height: 1.5; color: var(--text-muted, #856673); text-align: center; margin-top: 12px; }
.ck-receipt-status:empty { display: none; }
@media (max-width: 480px) {
  .ck-receipt-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ck-receipt-actions > :last-child { grid-column: 1 / -1; }
  .ck-receipt .ck-confirm-check { padding: 24px 16px 20px; }
}
@media print {
  body:has(.ck-receipt) * { visibility: hidden; }
  body:has(.ck-receipt) #panel-4, body:has(.ck-receipt) #panel-4 * { visibility: visible; }
  body:has(.ck-receipt) #panel-4 { position: absolute; inset: 0 auto auto 0; width: 100%; max-width: none; box-shadow: none; border: 0; }
  body:has(.ck-receipt) #ck-post-confirm { display: none !important; }
}

.ck-receipt #ck-view-orders { display: flex; justify-content: center; margin: 12px 0; text-decoration: none; }
/* La disponibilidad bloquea únicamente este checkout; no borra otros artículos. */
.ck-availability-dialog {
  box-sizing: border-box;
  width: min(480px, calc(100% - 32px));
  max-width: calc(100% - 32px);
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: clamp(24px, 5vw, 36px);
  overflow: auto;
  border: 1px solid #ead6df;
  border-radius: 20px;
  background: #fff;
  color: #292329;
  box-shadow: 0 20px 64px #29232926;
  overflow-wrap: anywhere;
}
.ck-availability-dialog::backdrop { background: #29232970; }
.ck-availability-dialog h2 { margin: 0 0 16px; font-size: clamp(20px, 3vw, 24px); line-height: 1.3; text-transform: none; }
.ck-availability-dialog p { margin: 0 0 16px; font-size: 15px; line-height: 1.6; }
.ck-availability-dialog .ck-availability-hint { color: #65545d; }
.ck-availability-actions { display: grid; gap: 12px; margin-top: 24px; }
.ck-availability-actions a { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; min-height: 48px !important; margin: 0; padding: 12px 16px; text-align: center; white-space: normal; text-decoration: none; line-height: 1.4; }
.ck-availability-actions a:focus-visible { outline: 2px solid #292329 !important; outline-offset: 3px; }