/* ==========================================================================
   Cuerpos todavia no reescritos, con la cara del rediseño
   ==========================================================================
   Las paginas que extienden layouts/shop-legacy tienen la cabecera y el pie
   nuevos, pero por dentro siguen siendo el marcado de siempre: la cuenta
   (.account-*), el checkout mayorista (.ws-*), tablas y formularios de
   Bootstrap. Reescribir cada una es el trabajo que queda; mientras tanto esta
   hoja les da la tipografia, los colores y las formas del rediseño sin tocar
   una linea de Blade — que es lo que mantiene a salvo las reglas que viven en
   ese marcado.

   Carga la ultima (ver shop/partials/head), asi le gana a account.css y
   wholesale.css, que cada pagina trae por su cuenta.

   Todo cuelga de body.hp-legacy: las paginas ya rediseñadas no la cargan y no
   pueden verse afectadas.

   Cada bloque de aca se borra cuando su pagina se reescriba de verdad. */

body.hp-legacy {
    background: #fff;
    color: #2b2724;
    font-family: Figtree, system-ui, -apple-system, "Segoe UI", sans-serif;
}

body.hp-legacy h1,
body.hp-legacy h2,
body.hp-legacy h3,
body.hp-legacy h4 {
    color: #2b2724;
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* --------------------------------------------------------------------------
   La caja de la pagina
   --------------------------------------------------------------------------
   Estos cuerpos se envuelven en el .container de Bootstrap, que no es una caja
   fluida sino tres anchos fijos por punto de quiebre: 1170px, 970px y 750px.
   Apenas la ventana baja de 1200 el contenido salta a 970 mientras la cabecera
   sigue midiendo 1180, y el borde de la primera tarjeta deja de coincidir con
   el logo —en una ventana de 1100px son 58px de diferencia, y a 900px el
   cuerpo queda con 68px de margen contra los 16 del encabezado—.

   Aca se le devuelve el comportamiento de las paginas ya rediseñadas: fluida,
   con el mismo tope y el mismo canal que .hp-listing, para que las dos mitades
   de la pagina esten en la misma linea en cualquier ancho.

   El padding de arriba es el otro lado del mismo reclamo: el contenido
   arrancaba pegado al borde inferior de la cabecera. Son los mismos 18px que
   usan las paginas rediseñadas.

   Cubre las dos formas en que estan escritas estas vistas —el .container
   colgando de <main> y el que viene dentro de un <section>—; los .container
   anidados dentro de otro se quedan como estan, que ya heredan el canal del
   de afuera. */
body.hp-legacy main > .container,
body.hp-legacy main > section > .container {
    width: 100%;
    max-width: var(--page);
    padding-top: 18px;
    padding-right: 16px;
    padding-left: 16px;
}

/* --------------------------------------------------------------------------
   Mi cuenta: direcciones, facturacion, pedidos, pedidos mayoristas
   -------------------------------------------------------------------------- */
body.hp-legacy .account-page {
    max-width: 1180px;
}

body.hp-legacy .account-header h1,
body.hp-legacy .account-header h2 {
    font-size: clamp(26px, 4vw, 38px);
}

body.hp-legacy .account-header p {
    color: #6f6862;
}

body.hp-legacy .account-card,
body.hp-legacy .ws-billing-card {
    margin-bottom: 14px;
    border: 1px solid #ece7e1;
    border-radius: 18px;
    box-shadow: none;
    background: #fff;
    overflow: hidden;
}

body.hp-legacy .account-card-head {
    padding: 16px 20px;
    border-bottom: 1px solid #ece7e1;
    background: #fff;
    font-size: 16px;
    font-weight: 700;
}

body.hp-legacy .account-card-body {
    padding: 18px 20px;
    color: #6f6862;
    font-size: 14.5px;
    line-height: 1.6;
}

/* La insignia de "predeterminada", "pagado", "esperando transferencia". */
body.hp-legacy .address-badge,
body.hp-legacy .order-badge,
body.hp-legacy .adm-pill {
    display: inline-block;
    padding: 4px 11px;
    border: 0;
    border-radius: 999px;
    background: #fff4e2;
    color: #6b4a06;
    font-size: 12px;
    font-weight: 700;
}

body.hp-legacy .order-badge--ok,
body.hp-legacy .address-badge--default {
    background: #e9f9ee;
    color: #2f6b41;
}

body.hp-legacy .account-empty {
    padding: 34px 20px;
    border: 1px dashed #ece7e1;
    border-radius: 18px;
    color: #a49b93;
    text-align: center;
}

body.hp-legacy .account-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* La barra lateral de "Mi cuenta", igual que en la pagina ya rediseñada. */
body.hp-legacy .account-sidebar {
    border: 0;
    background: none;
}

body.hp-legacy .account-nav a {
    display: block;
    padding: 11px 14px;
    border: 0;
    border-radius: 12px;
    color: #6f6862;
    font-size: 14.5px;
    font-weight: 500;
}

body.hp-legacy .account-nav a:hover {
    background: #f5f2ee;
    color: #2b2724;
    text-decoration: none;
}

body.hp-legacy .account-nav .is-active a {
    background: #2b2724;
    color: #fff;
    font-weight: 700;
}

body.hp-legacy .account-avatar {
    background: #f0a92e;
    color: #2b2724;
    font-weight: 800;
}

/* --------------------------------------------------------------------------
   Checkout mayorista
   -------------------------------------------------------------------------- */
body.hp-legacy .ws-btn {
    padding: 13px 22px;
    border: 0;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 700;
    box-shadow: none;
}

body.hp-legacy .ws-btn--primary {
    background: #f0a92e;
    color: #2b2724;
}

body.hp-legacy .ws-btn--primary:hover {
    background: #ffc24f;
    color: #2b2724;
}

body.hp-legacy .ws-btn--ghost {
    border: 1px solid #ece7e1;
    background: #fff;
    color: #2b2724;
}

body.hp-legacy .ws-btn--ghost:hover {
    border-color: #2b2724;
}

body.hp-legacy .ws-table,
body.hp-legacy .table {
    border-color: #ece7e1;
}

body.hp-legacy .ws-table th,
body.hp-legacy .table > thead > tr > th {
    border-bottom: 2px solid #2b2724;
    color: #2b2724;
    font-size: 13px;
    font-weight: 700;
}

body.hp-legacy .ws-table td,
body.hp-legacy .table > tbody > tr > td {
    border-top: 1px solid #ece7e1;
    color: #2b2724;
    font-size: 14.5px;
    vertical-align: middle;
}

/* Los precios, en cifras tabulares: una columna de montos tiene que alinear. */
body.hp-legacy .ws-col-price,
body.hp-legacy .ws-total,
body.hp-legacy .order-total {
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Formularios y botones que quedan sueltos en estas paginas
   -------------------------------------------------------------------------- */
body.hp-legacy .form-control,
body.hp-legacy input[type="text"],
body.hp-legacy input[type="email"],
body.hp-legacy input[type="tel"],
body.hp-legacy input[type="password"],
body.hp-legacy input[type="number"],
body.hp-legacy select,
body.hp-legacy textarea {
    height: auto;
    padding: 12px 15px;
    border: 1px solid #ece7e1;
    border-radius: 12px;
    box-shadow: none;
    /* 16px: por debajo, Safari en iPhone hace zoom al enfocar. */
    font-size: 16px;
    color: #2b2724;
}

body.hp-legacy .form-control:focus {
    border-color: #2b2724;
    box-shadow: none;
}

body.hp-legacy .btn {
    padding: 12px 20px;
    border: 0;
    border-radius: 14px;
    font-weight: 700;
    text-shadow: none;
    box-shadow: none;
}

body.hp-legacy .btn-primary,
body.hp-legacy .btn-default.btn-account,
body.hp-legacy .btn-account {
    background: #2b2724;
    color: #fff;
}

body.hp-legacy .btn-primary:hover,
body.hp-legacy .btn-account:hover {
    background: #f0a92e;
    color: #2b2724;
}

body.hp-legacy .btn-account-ghost,
body.hp-legacy .btn-default {
    border: 1px solid #ece7e1;
    background: #fff;
    color: #2b2724;
}

body.hp-legacy .btn-account-ghost:hover,
body.hp-legacy .btn-default:hover {
    border-color: #2b2724;
    background: #fff;
    color: #2b2724;
}

body.hp-legacy .btn-danger {
    background: #a4483c;
    color: #fff;
}

/* El titulo naranja en mayusculas de la plantilla vieja, callado. */
body.hp-legacy h2.title {
    color: #2b2724;
    font-size: 20px;
    text-transform: none;
}

/* --------------------------------------------------------------------------
   Lo que quedaba gritando de la plantilla
   --------------------------------------------------------------------------
   Dos naranjas saturados que la plantilla usa como fondo: el encabezado de la
   tabla del carro y la miga activa. En el rediseño el naranja es para acciones,
   no para tapar franjas enteras. */
/* El id va adelante porque la plantilla lo pinta con "#cart_items .cart_info
   .cart_menu" (0,1,2) y una clase sola no le gana. */
body.hp-legacy #cart_items .cart_info .cart_menu,
body.hp-legacy .cart_menu,
body.hp-legacy .table thead,
body.hp-legacy .table > thead > tr {
    background: #fff;
    color: #2b2724;
}

body.hp-legacy #cart_items .cart_info .cart_menu td,
body.hp-legacy #cart_items .cart_info .cart_menu th,
body.hp-legacy .cart_menu td,
body.hp-legacy .cart_menu th {
    padding: 14px 10px;
    border-bottom: 2px solid #2b2724;
    color: #2b2724;
    font-size: 13px;
    font-weight: 700;
    text-transform: none;
}

body.hp-legacy .breadcrumbs {
    padding: 0;
}

body.hp-legacy .breadcrumb {
    padding: 0;
    margin: 0 0 6px;
    background: none;
    font-size: 13px;
}

body.hp-legacy .breadcrumb > li > a,
body.hp-legacy .breadcrumb > .active {
    padding: 0;
    background: none;
    color: #a49b93;
    font-weight: 500;
}

body.hp-legacy .breadcrumb > li > a:hover {
    color: #2b2724;
    text-decoration: underline;
}

/* La caja del total del carro, sin el gris de la plantilla. */
body.hp-legacy .total_area,
body.hp-legacy .total_area ul li {
    border: 0;
    background: none;
}

body.hp-legacy .total_area {
    padding: 18px 20px;
    border: 1px solid #ece7e1;
    border-radius: 18px;
}

body.hp-legacy .total_area span {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}