/* The Joker House — Área de cuenta (login/registro/contraseña) premium claro */
/* Las plantillas usan {extends $layout}+block content (patrón brands.tpl),
   así que renderizan a ancho completo sin el .container estrecho. */
.jh-acc{--g:#b8860b;--g2:#d4af37;--tx:#1a1a1a;--soft:#8a8a8a;--ln:#ececec;--bg:#fafafa;
  font-family:'Inter',system-ui,-apple-system,sans-serif;color:var(--tx);
  max-width:1080px;margin:0 auto;padding:48px 24px 72px;box-sizing:border-box}
.jh-acc__grid{display:grid;grid-template-columns:1.25fr .75fr;gap:22px;align-items:start}
.jh-acc__grid--single{grid-template-columns:1fr;max-width:520px;margin:0 auto}

/* Tarjeta */
.jh-acc__card{background:#fff;border:1px solid var(--ln);border-radius:18px;
  padding:48px 46px;display:flex;flex-direction:column;justify-content:center}
.jh-acc__grid--single .jh-acc__card{justify-content:flex-start}
.jh-acc__title{font-size:clamp(24px,3.4vw,32px);font-weight:800;letter-spacing:-.02em;margin:0 0 8px}
.jh-acc__sub{color:var(--soft);font-size:14.5px;line-height:1.6;margin:0 0 26px}

/* ===== FORM (nativo PS + propios) ===== */
.jh-acc__form .form-group,
.jh-acc__form .form-field,
.jh-acc__field{margin:0 0 18px;display:block}
.jh-acc__form label,
.jh-acc__field label,
.jh-acc__form .form-control-label{display:block;font-size:13px;font-weight:700;
  color:var(--tx);margin:0 0 7px;padding:0;text-align:left;width:auto;float:none}
.jh-acc__form input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
.jh-acc__form .form-control,
.jh-acc__field input{width:100%;border:1px solid var(--ln);border-radius:11px;
  padding:13px 15px;font-size:15px;font-family:inherit;background:#fff;color:var(--tx);
  outline:none;transition:border-color .15s,box-shadow .15s;box-sizing:border-box}
.jh-acc__form input:focus,
.jh-acc__form .form-control:focus,
.jh-acc__field input:focus{border-color:var(--g);box-shadow:0 0 0 4px rgba(184,134,11,.1)}
.jh-acc__form .input-group{display:flex}
.jh-acc__form .input-group .form-control{border-radius:11px}
.jh-acc__form .input-group .input-group-btn,
.jh-acc__form .input-group-append{display:none}
/* PrestaShop a veces mete columnas bootstrap: las anulamos */
.jh-acc__form .row,.jh-acc__form [class*="col-md-"],.jh-acc__form [class*="offset-"]{
  display:block;width:100%;max-width:100%;flex:none;margin-left:0;padding:0}
.jh-acc__form .form-text,.jh-acc__form small{font-size:12px;color:var(--soft)}

/* Olvidaste contraseña (dentro del form de login) */
.jh-acc__form .forgot-password{margin:-6px 0 20px;text-align:right}
.jh-acc__form .forgot-password a{font-size:13px;color:var(--soft);text-decoration:none;
  border-bottom:1px solid transparent;transition:color .15s,border-color .15s}
.jh-acc__form .forgot-password a:hover{color:var(--g);border-color:var(--g)}

/* Botones */
.jh-acc__form .form-footer{margin:6px 0 0;text-align:left}
.jh-acc__form .btn,
.jh-acc__form button[type=submit],
.jh-acc__btn--primary,
.jh-acc__btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;background:var(--tx);color:#fff;border:1px solid var(--tx);
  border-radius:11px;padding:14px 22px;font-size:14.5px;font-weight:700;
  font-family:inherit;letter-spacing:.01em;cursor:pointer;text-decoration:none;
  transition:background .16s,border-color .16s,color .16s,transform .12s;box-sizing:border-box}
.jh-acc__form .btn:hover,
.jh-acc__form button[type=submit]:hover,
.jh-acc__btn--primary:hover,
.jh-acc__btn:hover{background:var(--g);border-color:var(--g);color:#111;transform:translateY(-1px)}

/* Errores */
.jh-acc__errors,
.jh-acc__form .ps-alert-error{list-style:none;margin:0 0 20px;padding:14px 16px;
  background:#fff5f5;border:1px solid #f3c2c2;border-radius:11px;color:#b42318;font-size:13.5px}
.jh-acc__errors li,.jh-acc__form .ps-alert-error li{margin:0;padding:2px 0}
.jh-acc__form .ps-alert-error svg{display:none}

/* Volver */
.jh-acc__back{display:inline-block;margin-top:22px;font-size:13.5px;color:var(--soft);
  text-decoration:none;transition:color .15s}
.jh-acc__back:hover{color:var(--g)}

/* Tarjeta centrada (confirmaciones) */
.jh-acc__card--center{text-align:center;align-items:center}
.jh-acc__card--center .jh-acc__sub{margin-bottom:24px}
.jh-acc__success-icon{width:64px;height:64px;border-radius:50%;
  background:rgba(34,160,90,.12);color:#22a05a;display:flex;align-items:center;
  justify-content:center;margin:0 auto 22px}
.jh-acc__success-icon svg{width:30px;height:30px;display:block}
.jh-acc__notice{background:#f6faf7;border:1px solid #cfe8d8;border-radius:11px;
  padding:14px 16px;margin:0 0 22px;color:#1d6b41;font-size:13.5px;line-height:1.55}
.jh-acc__notice p{margin:0}
.jh-acc__card--center .jh-acc__back{margin-top:16px}

/* Enlace inline (p.ej. "Inicia sesión" en registro) */
.jh-acc__inline-link{color:var(--g);font-weight:700;text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color .15s}
.jh-acc__inline-link:hover{border-color:var(--g)}

/* ===== PANEL DE BENEFICIOS (registro) ===== */
.jh-acc__aside{background:linear-gradient(160deg,#1c1c22,#2a2418);color:#fff;
  border-radius:18px;padding:40px 36px;display:flex;flex-direction:column}
.jh-acc__aside-title{font-size:21px;font-weight:800;letter-spacing:-.01em;margin:0 0 26px;line-height:1.3}
.jh-acc__benefits{list-style:none;margin:0 0 30px;padding:0;display:flex;flex-direction:column;gap:20px;flex:1}
.jh-acc__benefits li{display:flex;gap:15px;align-items:center}
.jh-acc__bicon{flex:0 0 44px;width:44px;height:44px;border-radius:12px;line-height:0;
  background:rgba(212,175,55,.14);color:var(--g2);display:flex;align-items:center;justify-content:center}
.jh-acc__bicon svg{width:21px;height:21px;display:block;margin:0}
.jh-acc__benefits li>div strong{display:block;font-size:15px;font-weight:700;margin-bottom:3px}
.jh-acc__benefits li>div span{display:block;font-size:13px;color:rgba(255,255,255,.6);line-height:1.5}
.jh-acc__aside .jh-acc__btn{background:var(--g2);border-color:var(--g2);color:#1a1a1a}
.jh-acc__aside .jh-acc__btn:hover{background:#fff;border-color:#fff;color:#1a1a1a}

/* ===== RESPONSIVE =====
   Por debajo de 980px una sola columna ancha (evita 2 col comprimidas) */
@media(max-width:980px){
  .jh-acc{padding:32px 18px 60px;max-width:560px}
  .jh-acc__grid{grid-template-columns:1fr;gap:16px}
  .jh-acc__card,.jh-acc__aside{padding:32px 26px}
  .jh-acc__grid--single{max-width:100%}
}
@media(max-width:520px){
  .jh-acc__card,.jh-acc__aside{padding:26px 20px}
}

/* ============================================================
   ÁREA DE CUENTA — shell premium (sidebar + contenido)
   Aplica a TODAS las páginas internas (Mis datos, Mis pedidos,
   Direcciones, Cupones, Detalle de pedido, etc.)
   ============================================================ */
.jh-account{--g:#b8860b;--g2:#d4af37;--tx:#1a1a1a;--soft:#8a8a8a;--ln:#ececec;--bg:#fafafa;
  font-family:'Inter',system-ui,-apple-system,sans-serif;color:var(--tx);
  max-width:1180px;margin:0 auto;padding:40px 24px 80px;box-sizing:border-box}
.jh-account__back{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;
  font-weight:600;color:var(--soft);text-decoration:none;margin:0 0 18px;
  transition:color .15s}
.jh-account__back svg{width:16px;height:16px}
.jh-account__back:hover{color:var(--g)}
.jh-account__head{display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;margin:0 0 26px;flex-wrap:wrap}
.jh-account__title{font-size:clamp(24px,3.2vw,32px);font-weight:800;
  letter-spacing:-.02em;margin:0}
.jh-account__layout{display:grid;grid-template-columns:248px 1fr;gap:28px;align-items:start}

/* Sidebar nav */
.jh-account__nav{background:#fff;border:1px solid var(--ln);border-radius:16px;
  padding:10px;position:sticky;top:20px}
.jh-account__nav a{display:flex;align-items:center;gap:12px;padding:12px 14px;
  border-radius:11px;color:var(--tx);text-decoration:none;font-size:14px;
  font-weight:600;transition:background .14s,color .14s}
.jh-account__nav a svg{width:18px;height:18px;flex:0 0 18px;color:var(--soft);
  transition:color .14s}
.jh-account__nav a:hover{background:var(--bg)}
.jh-account__nav a.is-active{background:#1a1a1a;color:#fff}
.jh-account__nav a.is-active svg{color:var(--g2)}
.jh-account__nav-sep{height:1px;background:var(--ln);margin:8px 12px}
.jh-account__nav a.jh-account__logout{color:#b42318}
.jh-account__nav a.jh-account__logout svg{color:#b42318}
.jh-account__nav a.jh-account__logout:hover{background:#fff5f5}

/* Panel de contenido */
.jh-account__panel{background:#fff;border:1px solid var(--ln);border-radius:16px;
  padding:34px 34px;min-height:300px}
.jh-account__panel-lead{color:var(--soft);font-size:14.5px;line-height:1.6;margin:0 0 24px}

/* Dashboard (tarjetas) */
.jh-account__cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:16px;margin:0}
.jh-account__cards a{display:flex;flex-direction:column;gap:10px;padding:22px;
  border:1px solid var(--ln);border-radius:14px;text-decoration:none;color:var(--tx);
  background:#fff;transition:border-color .15s,transform .12s,box-shadow .15s}
.jh-account__cards a:hover{border-color:var(--g);transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,.06)}
.jh-account__card-ic{width:44px;height:44px;border-radius:12px;background:rgba(184,134,11,.1);
  color:var(--g);display:flex;align-items:center;justify-content:center}
.jh-account__card-ic svg{width:22px;height:22px}
.jh-account__cards strong{font-size:15px;font-weight:700}
.jh-account__cards span{font-size:13px;color:var(--soft);line-height:1.5}

/* Tablas nativas PS -> premium */
.jh-account .table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;margin:0 0 8px}
.jh-account .table thead th{text-align:left;font-size:11.5px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--soft);
  padding:0 14px 12px;border:0;border-bottom:1px solid var(--ln);background:none}
.jh-account .table tbody td,.jh-account .table tbody th{padding:16px 14px;border:0;
  border-bottom:1px solid var(--ln);vertical-align:middle;font-weight:400;background:none}
.jh-account .table tbody tr:last-child td,.jh-account .table tbody tr:last-child th{border-bottom:0}
.jh-account .table.table-striped tbody tr:nth-of-type(odd) td,
.jh-account .table.table-striped tbody tr:nth-of-type(odd) th{background:none}
.jh-account .label-pill{display:inline-block;padding:5px 12px;border-radius:999px;
  font-size:12px;font-weight:700;color:#fff}

/* Alerts nativos */
.jh-account .alert{border-radius:12px;padding:16px 18px;font-size:14px;border:1px solid var(--ln);
  background:var(--bg);color:var(--tx);margin:0 0 18px}
.jh-account .alert-info{background:#f5f8fb;border-color:#d6e4f0;color:#2a4a63}
.jh-account .alert-success{background:#f6faf7;border-color:#cfe8d8;color:#1d6b41}
.jh-account .alert a{color:var(--g);font-weight:700}
/* Empty-state propio */
.jh-account__empty{text-align:center;padding:48px 24px;color:var(--soft)}
.jh-account__empty svg{width:46px;height:46px;color:var(--ln);margin:0 0 14px}
.jh-account__empty p{margin:0 0 6px;font-size:15px}
.jh-account__empty .jh-account__empty-cta{display:inline-block;margin-top:18px}

/* Botones genéricos dentro del panel */
.jh-account__btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:#1a1a1a;color:#fff;border:1px solid #1a1a1a;border-radius:11px;
  padding:12px 22px;font-size:14px;font-weight:700;text-decoration:none;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s,transform .12s}
.jh-account__btn:hover{background:var(--g);border-color:var(--g);color:#111;transform:translateY(-1px)}
.jh-account__btn--ghost{background:#fff;color:var(--tx);border-color:var(--ln)}
.jh-account__btn--ghost:hover{background:#fff;border-color:var(--g);color:var(--g)}

/* Acciones de pedido en la tabla (Ver pedido / Repetir pedido) */
.jh-account .order-actions{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.jh-account .order-actions a{display:inline-flex;align-items:center;gap:6px;
  font-size:13px;font-weight:700;text-decoration:none;padding:7px 13px;border-radius:9px;
  border:1px solid var(--ln);color:var(--tx);transition:border-color .15s,color .15s}
.jh-account .order-actions a:hover{border-color:var(--g);color:var(--g)}
.jh-account .order-actions .reorder-link{color:var(--g);border-color:rgba(184,134,11,.35)}
/* Miniaturas de producto en Mis pedidos */
.jh-account__order-thumbs{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.jh-account__order-thumbs img{width:44px;height:44px;object-fit:cover;border-radius:8px;
  border:1px solid var(--ln);background:#fff}
.jh-account__order-thumbs .more{font-size:12px;color:var(--soft);font-weight:600}

/* Direcciones */
.jh-account .address-footer{margin-top:14px}
/* addresses-footer (barra "Crear nueva dirección") no fuerza margin — lo maneja jh-account__addr-topbar */
.jh-account article.address{background:#fff;border:1px solid var(--ln);border-radius:14px;
  padding:22px 22px;height:100%;display:flex;flex-direction:column}
.jh-account .address-body h4{font-size:16px;font-weight:800;margin:0 0 10px}
.jh-account .address-body address{font-style:normal;color:#4a4a4a;line-height:1.6;font-size:14px}
.jh-account .address-footer{display:flex;gap:16px;border-top:1px solid var(--ln);
  padding-top:14px;margin-top:16px}
.jh-account .address-footer a{display:inline-flex;align-items:center;gap:6px;
  font-size:13px;font-weight:700;color:var(--tx);text-decoration:none}
.jh-account .address-footer a:hover{color:var(--g)}
.jh-account .address-footer .material-icons{font-size:17px}
.jh-account .addresses-footer a{display:inline-flex;align-items:center;gap:7px;
  font-weight:700;color:var(--g);text-decoration:none}
.jh-account__addr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}

/* Detalle de pedido: cajas */
.jh-account .box,.jh-account #order-infos .box,.jh-account #order-history .box,
.jh-account #order-products .box{background:var(--bg);border:1px solid var(--ln);
  border-radius:14px;padding:20px 22px;margin:0 0 16px}
.jh-account .box ul{list-style:none;margin:0;padding:0}
.jh-account .box li{padding:4px 0;font-size:14px}
.jh-account #order-products.table tfoot td{font-weight:700}

/* Ocultar hints ruidosos de los campos (alfanuméricos / Optional nativo) */
.jh-account .form-control-comment{display:none !important}
/* Marcador "(opcional)" sutil junto a la etiqueta */
.jh-optional,.jh-acc__form .jh-optional{font-weight:500;font-size:11.5px;
  color:#a8a8a8;margin-left:6px;letter-spacing:.01em;text-transform:none}
.jh-account .form-footer{margin-top:8px}
.jh-account .radio-inline{display:inline-flex;align-items:center;gap:7px;margin-right:18px;font-size:14px}
/* Checkbox custom: label como bloque, cuadradito en absolute, texto fluye */
.jh-account .custom-checkbox{display:block;position:relative;padding-left:34px;min-height:22px}
.jh-account .custom-checkbox label{display:block;font-size:14px;font-weight:600;
  color:#1a1a1a;line-height:1.4;cursor:pointer;text-align:left;margin:0}
.jh-account .custom-checkbox label > span:first-of-type{
  position:absolute;left:0;top:0;
  width:22px;height:22px;border:1.5px solid #cfc9b8;border-radius:5px;
  background:#fff;display:inline-flex;align-items:center;justify-content:center;
  transition:background .12s,border-color .12s}
.jh-account .custom-checkbox label > span:first-of-type .material-icons{
  font-size:18px;color:#fff;visibility:hidden}
.jh-account .custom-checkbox input[type=checkbox]{position:absolute;opacity:0;
  left:0;top:0;width:22px;height:22px;margin:0;cursor:pointer;z-index:1}
.jh-account .custom-checkbox input[type=checkbox]:checked + span{
  background:#1a1a1a;border-color:#1a1a1a}
.jh-account .custom-checkbox input[type=checkbox]:checked + span .material-icons{
  visibility:visible}
/* Descripción secundaria: <em> en línea aparte debajo del título */
.jh-account .custom-checkbox label em{
  display:block;font-style:normal;font-weight:400;font-size:12.5px;color:#8a8a8a;
  line-height:1.5;margin-top:6px}
.jh-account .custom-checkbox label br{display:none}
.jh-account form .form-control-label,.jh-account form label{font-size:13px;font-weight:700;text-align:left}
/* Forzar labels alineados a la izquierda incluso con grid Bootstrap */
.jh-account form .col-md-3,.jh-account form [class*="col-md-"] label{text-align:left !important}
.jh-account form input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
.jh-account form .form-control,.jh-account form select,.jh-account form textarea{
  width:100%;border:1px solid var(--ln);border-radius:11px;padding:12px 16px;
  font-size:15px;font-family:inherit;background:#fff;color:var(--tx);outline:none;
  box-sizing:border-box;transition:border-color .15s,box-shadow .15s;
  text-indent:0 !important;
  line-height:1.4 !important;
  height:auto !important;
  min-height:46px}
/* Selects: pintan una flechita dropdown propia a la derecha, ancho suficiente para no comer el texto */
.jh-account form select,.jh-account form .form-control-select{
  padding:12px 38px 12px 16px !important;
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:12px;
  line-height:1.4 !important;
  height:auto !important;
  min-height:46px}
.jh-account form input:focus,.jh-account form .form-control:focus,
.jh-account form select:focus,.jh-account form textarea:focus{
  border-color:var(--g);box-shadow:0 0 0 4px rgba(184,134,11,.1)}
.jh-account form .form-group{margin:0 0 18px}
.jh-account form .row,.jh-account form [class*="col-md-"],
.jh-account form [class*="col-lg-"]{display:block;width:100%;max-width:100%;
  flex:none;margin-left:0;padding:0}
.jh-account form .btn,.jh-account form button[type=submit],
.jh-account form .form-control-submit{display:inline-flex;align-items:center;
  justify-content:center;gap:8px;background:#1a1a1a;color:#fff;border:1px solid #1a1a1a;
  border-radius:11px;padding:13px 26px;font-size:14px;font-weight:700;cursor:pointer;
  width:auto;float:none;transition:background .15s,border-color .15s,transform .12s}
.jh-account form .btn:hover,.jh-account form button[type=submit]:hover{
  background:var(--g);border-color:var(--g);color:#111;transform:translateY(-1px)}
.jh-account .field-password-policy .input-group{display:flex;gap:8px}
.jh-account .field-password-policy .input-group-btn .btn{background:#fff;color:var(--tx);
  border-color:var(--ln)}

/* Bloque legal "Responsable del tratamiento" (Mis datos) */
.jh-account__legal{background:var(--bg);border:1px solid var(--ln);border-radius:12px;
  padding:16px 18px;font-size:12.5px;color:var(--soft);line-height:1.6;margin:6px 0 20px}
.jh-account__legal strong{color:var(--tx);display:block;margin-bottom:4px;font-size:13px}

@media(max-width:920px){
  .jh-account__layout{grid-template-columns:1fr}
  /* Subpáginas: nav como chips horizontales con scroll para navegar rápido */
  .jh-account__nav{
    position:static;
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:6px;
    padding:8px;
    margin-bottom:14px;
  }
  .jh-account__nav::-webkit-scrollbar{display:none}
  .jh-account__nav a{
    flex:0 0 auto;
    justify-content:center;
    white-space:nowrap;
    padding:8px 14px;
    font-size:13px;
    border-radius:999px;
    background:#f5f2ea;
    border:1px solid transparent;
  }
  .jh-account__nav a svg{width:15px;height:15px;flex:0 0 15px}
  .jh-account__nav a.is-active{background:#1a1a1a;color:#fff}
  .jh-account__nav a.jh-account__logout{background:#fff5f5;border-color:#f4d4d0}
  .jh-account__nav-sep{display:none}
  .jh-account__panel{padding:24px 20px}
  /* Home mi-cuenta: el nav es redundante con las píldoras del panel → ocultar */
  .jh-account--home .jh-account__nav{display:none}
}
/* Barra superior en "Mis direcciones" con botón "Crear nueva dirección".
   Margin negativo horizontal saca el botón del padding lateral del panel,
   quedando pegado al borde izquierdo real. Margin bottom grande separa del grid. */
.jh-account__panel:has(.jh-account__addr-topbar){display:flex;flex-direction:column}
.jh-account__addr-topbar{display:flex !important;justify-content:flex-start !important;
  margin:0 -22px 0 -22px !important;padding:0 22px 0 22px !important;order:-1}
.jh-account__addr-topbar a{display:inline-block !important;
  padding:7px 14px !important;background:#fbf5e6 !important;
  color:#8a6a12 !important;border-radius:8px;font-weight:600;font-size:12.5px;
  text-decoration:none !important;border:1px solid rgba(184,134,11,.25) !important;
  transition:background .15s,border-color .15s,color .15s;
  margin:0 !important;align-self:flex-start;line-height:1.2;
  white-space:nowrap}
.jh-account__addr-topbar a:hover{background:#f5ebd0 !important;
  border-color:rgba(184,134,11,.5) !important;color:#5f4a09 !important}
.jh-account__addr-topbar .material-icons,
.jh-account__addr-topbar svg{display:none !important}
.jh-account__addr-topbar a > span{all:unset}
/* Grid direcciones: mismo espacio arriba (bajo el botón) que tiene el botón desde
   el borde superior del panel (padding del panel = ~24px, así que 24) */
.jh-account__addr-grid{margin-top:24px}

@media(max-width:991px){
  .jh-account{padding:24px 14px 60px}
  /* Tabla → tarjetas apiladas con grid interno */
  .jh-account .table,.jh-account .table tbody{display:block;width:100%}
  .jh-account .table thead{display:none}
  .jh-account .table tbody tr{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "ref  date"
      "prod prod"
      "total total"
      "status status"
      "act  act";
    gap:12px 14px;
    align-items:start;
    background:#fff;border:1px solid var(--ln);border-radius:14px;
    padding:16px;margin:0 0 14px}
  .jh-account .table tbody tr > *{display:block;padding:0;border:0;text-align:left}
  .jh-account .table tbody tr > *:nth-child(1){grid-area:ref}
  .jh-account .table tbody tr > *:nth-child(2){grid-area:date;text-align:right}
  .jh-account .table tbody tr > *:nth-child(3){grid-area:prod}
  /* Total y Estado: label izq, valor der en una sola fila */
  .jh-account .table tbody tr > *:nth-child(4){grid-area:total;
    display:flex;justify-content:space-between;align-items:baseline;
    border-top:1px solid var(--ln);padding-top:12px;margin-top:2px}
  .jh-account .table tbody tr > *:nth-child(5){grid-area:status;
    display:flex;justify-content:space-between;align-items:center}
  .jh-account .table tbody tr > *:nth-child(6){grid-area:act;
    border-top:1px solid var(--ln);padding-top:12px;margin-top:2px}
  /* Etiqueta pequeña — arriba en Ref/Fecha/Productos; inline en Total/Estado */
  .jh-account .table tbody tr [data-label]::before{
    content:attr(data-label);
    display:block;
    font-size:10.5px;font-weight:700;color:#8a8a8a;
    text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
  .jh-account .table tbody tr > *:nth-child(2)[data-label]::before{text-align:right}
  .jh-account .table tbody tr > *:nth-child(4)[data-label]::before,
  .jh-account .table tbody tr > *:nth-child(5)[data-label]::before{
    margin-bottom:0;font-size:11.5px}
  .jh-account .table tbody tr th[scope="row"]{font-weight:700;font-size:15px;color:#1a1a1a}
  .jh-account .table tbody tr td{font-size:14px;color:#4a4a4a}
  /* Miniaturas producto */
  .jh-account__order-thumbs{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
  .jh-account__order-thumbs img{width:44px;height:44px;border-radius:8px;object-fit:cover;
    border:1px solid var(--ln);background:#fff}
  .jh-account__order-thumbs .more{font-size:12px;color:#8a8a8a;font-weight:600;
    padding:0 8px;border-radius:8px;background:#f4f0e6}
  /* Estado (pill) — alineado a la derecha en móvil */
  .jh-account .table tbody tr .label-pill{display:inline-block;padding:6px 12px;
    border-radius:999px;font-size:12px;font-weight:700;line-height:1;color:#fff;
    white-space:nowrap}
  /* Botones acción — Ver pedido izquierda, Repetir pedido derecha, mismo ancho */
  .jh-account .order-actions{display:flex !important;flex-direction:row !important;
    justify-content:space-between !important;align-items:stretch !important;
    gap:14px !important;flex-wrap:nowrap !important;width:100%;margin:0 !important}
  .jh-account .order-actions a,
  .jh-account .order-actions .reorder-link{
    display:inline-flex !important;align-items:center;justify-content:center;
    flex:1 1 0 !important;text-align:center;padding:11px 14px;
    border-radius:10px;background:#1a1a1a;color:#fff !important;font-weight:700;
    font-size:13px;text-decoration:none !important;border:1px solid #1a1a1a;
    white-space:nowrap;float:none !important;margin:0 !important;min-width:0}
  .jh-account .order-actions a.reorder-link{background:#fff;color:#1a1a1a !important;
    border:1px solid #cfc9b8}
}
@media(max-width:560px){
  .jh-account .table tbody tr{grid-template-columns:1fr 1fr;padding:14px}
}