/* ==========================================================================
   Carrito de FEDELAN

   Un solo archivo para las dos caras del carrito: el drawer lateral y la
   pagina /carro/. La linea de producto se define una sola vez (las clases
   .fedelan-cart-drawer__item*) y la pagina la reusa tal cual; lo unico que la
   pagina agrega es su propio armado de columnas.

   El armazon del panel (fondo, panel, cabecera, titulo, cerrar, vacio) es el
   mismo para el drawer de favoritos y para el agregado rapido, que lo toman de
   aca: favorites-drawer.css solo define su lista, y el agregado rapido tiene
   su bloque al final de este archivo.

   Direccion "Reset total": negro, blanco y la rampa de grises de
   variables.css, radio cero en todo, una sola tipografia.
   ========================================================================== */

.fedelan-cart-drawer,
.fedelan-favorites-drawer,
.fedelan-compra-rapida {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    pointer-events: none;
    visibility: hidden;
    transition: visibility var(--fedelan-dur) var(--fedelan-ease);
}

.fedelan-cart-drawer--open,
.fedelan-favorites-drawer--open,
.fedelan-compra-rapida--open {
    pointer-events: auto;
    visibility: visible;
    /* Al abrir, visible de una. Con la transicion el panel arrancaba oculto
       justo cuando el JS le pasa el foco, y el foco se quedaba afuera: el
       lector de pantalla seguia en la pagina de atras (X7). Al cerrar se
       usa la transicion de arriba, que lo deja visible hasta que sale. */
    transition-duration: 0s;
}

/* Overlay */
.fedelan-cart-drawer__overlay,
.fedelan-favorites-drawer__overlay,
.fedelan-compra-rapida__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0);
    transition: background-color var(--fedelan-dur) var(--fedelan-ease);
}

.fedelan-cart-drawer--open .fedelan-cart-drawer__overlay,
.fedelan-favorites-drawer--open .fedelan-favorites-drawer__overlay,
.fedelan-compra-rapida--open .fedelan-compra-rapida__overlay {
    background-color: rgba(0, 0, 0, 0.5);
}

/* Panel, entra desde la derecha */
.fedelan-cart-drawer__panel,
.fedelan-favorites-drawer__panel,
.fedelan-compra-rapida__panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 480px;
    max-width: 100%;
    height: 100%;
    background-color: var(--fedelan-paper);
    transform: translateX(100%);
    transition: transform var(--fedelan-dur) var(--fedelan-ease);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.fedelan-cart-drawer--open .fedelan-cart-drawer__panel,
.fedelan-favorites-drawer--open .fedelan-favorites-drawer__panel,
.fedelan-compra-rapida--open .fedelan-compra-rapida__panel {
    transform: translateX(0);
}

/* Header */
.fedelan-cart-drawer__header,
.fedelan-favorites-drawer__header,
.fedelan-compra-rapida__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--fedelan-line);
    flex-shrink: 0;
}

.fedelan-cart-drawer__title,
.fedelan-favorites-drawer__title,
.fedelan-compra-rapida__title {
    font-family: var(--fedelan-font-primary);
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    color: var(--fedelan-ink);
}

.fedelan-cart-drawer__close,
.fedelan-favorites-drawer__close,
.fedelan-compra-rapida__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.fedelan-cart-drawer__close svg,
.fedelan-favorites-drawer__close svg,
.fedelan-compra-rapida__close svg {
    width: 24px;
    height: 24px;
    stroke: var(--fedelan-ink);
}

/* Contenido que scrollea */
.fedelan-cart-drawer__content,
.fedelan-favorites-drawer__content,
.fedelan-compra-rapida__content {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

/* Pedido vacio (y favoritos vacio) */
.fedelan-cart-drawer__empty,
.fedelan-favorites-drawer__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 30px;
    text-align: center;
    height: 100%;
}

.fedelan-cart-drawer__empty svg,
.fedelan-favorites-drawer__empty svg {
    width: 64px;
    height: 64px;
    stroke: var(--fedelan-line);
    margin-bottom: 20px;
}

.fedelan-cart-drawer__empty p,
.fedelan-favorites-drawer__empty p {
    font-family: var(--fedelan-font-primary);
    font-size: 16px;
    color: var(--fedelan-muted);
    margin: 0 0 25px;
}

.fedelan-cart-drawer__shop-btn {
    display: inline-block;
    padding: 14px 30px;
    font-family: var(--fedelan-font-primary);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--fedelan-paper);
    background-color: var(--fedelan-ink);
    border: none;
    border-radius: var(--fedelan-radius);
    text-decoration: none;
    transition: opacity var(--fedelan-dur) var(--fedelan-ease);
}

.fedelan-cart-drawer__shop-btn:hover {
    opacity: 0.85;
    color: var(--fedelan-paper);
}

/* ==========================================================================
   La linea de producto (K3, K4, K5). Compartida por el drawer y la pagina.
   ========================================================================== */

.fedelan-cart-drawer__items {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fedelan-cart-drawer__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    position: relative;
    border-bottom: 1px solid var(--fedelan-line-soft);
    transition: opacity 0.2s var(--fedelan-ease), transform 0.2s var(--fedelan-ease);
}

.fedelan-cart-drawer__item:last-child {
    border-bottom: none;
}

.fedelan-cart-drawer__item--pending {
    opacity: 0.42;
    transform: scale(0.985);
    pointer-events: none;
}

.fedelan-cart-drawer__item-image {
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    min-width: 72px;
    min-height: 72px;
    max-width: 72px;
    max-height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Campo gris atras de la prenda, igual que en el catalogo. */
    background-color: var(--fedelan-sand);
    border-radius: var(--fedelan-radius);
    overflow: hidden;
}

.fedelan-cart-drawer__item-image a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.fedelan-cart-drawer__item-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    max-width: 100%;
    max-height: 100%;
}

.fedelan-cart-drawer__item-details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* El boton de eliminar vive en la esquina de la linea: el texto no se le
       mete debajo. */
    padding-right: 56px;
}

.fedelan-cart-drawer__item-name {
    font-family: var(--fedelan-font-primary);
    font-size: 14px;
    font-weight: 700;
    color: var(--fedelan-ink);
    text-decoration: none;
    text-transform: uppercase;
    line-height: 1.2;
}

.fedelan-cart-drawer__item-name:hover {
    text-decoration: underline;
}

/* Cada dato en su renglon y con su peso: la composicion de la curva es lo que
   decide la compra, cortarla con puntos suspensivos la vuelve inutil. */
.fedelan-cart-drawer__item-attributes {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-top: 4px;
    font-family: var(--fedelan-font-primary);
    font-size: 12px;
    line-height: 1.35;
    color: var(--fedelan-muted);
}

/* El color es el dato que distingue dos lineas del mismo modelo: va destacado
   siempre, haya o no composicion arriba. */
.fedelan-cart-drawer__item-attribute--color {
    color: var(--fedelan-ink-soft);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.fedelan-cart-drawer__item-unit {
    color: var(--fedelan-muted);
}

.fedelan-cart-drawer__item-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.fedelan-cart-drawer__item-price {
    font-family: var(--fedelan-font-primary);
    font-size: 16px;
    font-weight: 700;
    color: var(--fedelan-ink);
    margin: 0 0 0 auto;
    white-space: nowrap;
    line-height: 1;
    text-align: right;
}

/* Control de cantidad */
.fedelan-cart-drawer__item-quantity {
    display: inline-flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--fedelan-line-strong);
    border-radius: var(--fedelan-radius);
    width: fit-content;
    max-width: 100%;
}

.fedelan-cart-drawer__qty-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    /* 44 es el minimo de target tactil del manual. */
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s var(--fedelan-ease);
    -webkit-tap-highlight-color: transparent;
}

.fedelan-cart-drawer__qty-btn:hover {
    background-color: var(--fedelan-field-2);
}

.fedelan-cart-drawer__qty-btn svg {
    width: 12px;
    height: 12px;
    stroke: var(--fedelan-ink);
}

/* En el tope de stock el mas queda apagado (fedelan_cart_cambiar_cantidad). */
.fedelan-cart-drawer__qty-btn:disabled {
    cursor: not-allowed;
    background: none;
}

.fedelan-cart-drawer__qty-btn:disabled svg {
    stroke: var(--fedelan-muted-2);
}

.fedelan-cart-drawer__item-aviso {
    margin-top: 4px;
    color: var(--fedelan-ink);
    font-weight: 600;
}

.fedelan-cart-drawer__qty-value {
    font-family: var(--fedelan-font-primary);
    font-size: 16px;
    font-weight: 600;
    min-width: 22px;
    text-align: center;
    color: var(--fedelan-ink);
}

/* El campo escribible de la pagina (K4). 16px o mas para que iOS no haga zoom.
   Con input[type] adelante: el padding de 15px de los campos de texto de
   GeneratePress le ganaba y cortaba el "10". */
input[type="text"].fedelan-cart-drawer__qty-input,
.fedelan-cart-drawer__qty-input {
    width: 42px;
    height: 44px;
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--fedelan-radius);
}

.fedelan-cart-drawer__qty-input:focus-visible {
    outline: 2px solid var(--fedelan-accent);
    outline-offset: -2px;
}

.fedelan-cart-drawer__qty-label {
    padding-right: 10px;
    font-family: var(--fedelan-font-primary);
    font-size: 12px;
    color: var(--fedelan-muted);
    white-space: nowrap;
}

/* Boton de eliminar. La clase base es solo el gancho de comportamiento: el
   menos, cuando la cantidad es 1, tambien la lleva. */
.fedelan-cart-drawer__item-remove {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.fedelan-cart-drawer__item-remove--corner {
    position: absolute;
    top: 10px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: none;
    color: var(--fedelan-muted);
    transition: color 0.2s var(--fedelan-ease);
}

.fedelan-cart-drawer__item-remove--corner:hover {
    color: var(--fedelan-ink);
}

.fedelan-cart-drawer__item-remove--corner svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

.fedelan-cart-drawer__item-remove--texto {
    width: auto;
    padding: 0 4px;
    font-family: var(--fedelan-font-primary);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ==========================================================================
   Cross sell (K8): debajo de los items, con rotulo, nunca como paso obligado.
   ========================================================================== */

.fedelan-cart-drawer__cross {
    padding: 18px 20px 24px;
    border-top: 1px solid var(--fedelan-line);
}

.fedelan-cart-drawer__cross-title {
    margin: 0 0 12px;
    font-family: var(--fedelan-font-primary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--fedelan-muted);
}

.fedelan-cart-drawer__cross-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.fedelan-cart-drawer__cross-link {
    display: block;
    text-decoration: none;
    color: var(--fedelan-ink);
}

.fedelan-cart-drawer__cross-image {
    display: block;
    background-color: var(--fedelan-sand);
    aspect-ratio: 2 / 3;
    overflow: hidden;
}

.fedelan-cart-drawer__cross-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

.fedelan-cart-drawer__cross-name {
    display: block;
    margin-top: 6px;
    font-family: var(--fedelan-font-primary);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
}

.fedelan-cart-drawer__cross-price {
    display: block;
    font-family: var(--fedelan-font-primary);
    font-size: 12px;
    color: var(--fedelan-muted);
}

.fedelan-cart-drawer__cross-price del {
    display: none;
}

/* ==========================================================================
   Resumen (K6) y envio gratis (K9)
   ========================================================================== */

.fedelan-cart-drawer__footer {
    flex-shrink: 0;
    padding: 16px 20px 20px;
    border-top: 1px solid var(--fedelan-line-strong);
    background-color: var(--fedelan-paper);
}

.fedelan-cart-drawer__envio-gratis {
    margin-bottom: 14px;
}

.fedelan-cart-drawer__envio-gratis-texto {
    margin: 0 0 6px;
    font-family: var(--fedelan-font-primary);
    font-size: 13px;
    line-height: 1.3;
    color: var(--fedelan-ink-soft);
}

.fedelan-cart-drawer__envio-gratis-riel {
    height: 4px;
    background-color: var(--fedelan-sand-2);
}

.fedelan-cart-drawer__envio-gratis-avance {
    display: block;
    height: 100%;
    background-color: var(--fedelan-accent);
}

.fedelan-cart-drawer__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 3px 0;
    font-family: var(--fedelan-font-primary);
    font-size: 14px;
    color: var(--fedelan-ink-soft);
}

.fedelan-cart-drawer__row-value {
    text-align: right;
    white-space: nowrap;
}

/* La explicacion de por que todavia no hay costo de envio es texto largo: es
   lo unico del resumen que puede ocupar dos renglones. */
.fedelan-cart-drawer__row-value--nota {
    white-space: normal;
    max-width: 62%;
    font-size: 12px;
    line-height: 1.3;
    color: var(--fedelan-muted);
}

.fedelan-cart-drawer__discounts {
    margin: 4px 0;
}

.fedelan-cart-drawer__discount-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    padding: 3px 0;
}

.fedelan-cart-drawer__discount-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--fedelan-font-primary);
    font-size: 14px;
    font-weight: 400;
    color: var(--fedelan-ink-soft);
}

.fedelan-cart-drawer__discount-tag {
    display: inline-block;
    padding: 1px 7px;
    background-color: var(--fedelan-field-2);
    border-radius: var(--fedelan-radius);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--fedelan-ink);
}

.fedelan-cart-drawer__discount-amount {
    font-family: var(--fedelan-font-primary);
    font-size: 14px;
    font-weight: 400;
    color: var(--fedelan-ok);
    white-space: nowrap;
}

.fedelan-cart-drawer__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    margin: 10px 0 12px;
    padding-top: 10px;
    border-top: 1px solid var(--fedelan-line);
}

.fedelan-cart-drawer__total-label,
.fedelan-cart-drawer__total-value {
    font-family: var(--fedelan-font-primary);
    font-size: 20px;
    font-weight: 700;
    color: var(--fedelan-ink);
}

.fedelan-cart-drawer__manual-note {
    margin: -6px 0 14px;
    text-align: right;
    font-family: var(--fedelan-font-primary);
    font-size: 14px;
    line-height: 1.2;
    font-weight: 400;
    color: var(--fedelan-ink-soft);
}

.fedelan-cart-drawer__manual-total {
    white-space: nowrap;
}

/* El alto, la tipografia y la esquina del boton los define el bloque de botones
   de theme.css, el mismo para todo el sitio. Aca va solo lo del carrito: que
   ocupe el ancho del pie y centre su texto. */
.fedelan-cart-drawer__checkout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    color: var(--fedelan-paper);
    background-color: var(--fedelan-ink);
    border: none;
    text-decoration: none;
}

.fedelan-cart-drawer__checkout-btn:hover {
    color: var(--fedelan-paper);
}

/* Pedido minimo sin alcanzar: el boton queda apagado y arriba se dice cuanto
   falta (fedelan_render_cart_footer). */
.fedelan-cart-drawer__checkout-btn:disabled,
.fedelan-cart-drawer__checkout-btn:disabled:hover {
    color: var(--fedelan-muted);
    background-color: var(--fedelan-sand);
    cursor: not-allowed;
}

.fedelan-cart-drawer__minimo {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--fedelan-ink);
}

/* K1: el drawer confirma, la pagina de carrito es donde se decide. */
.fedelan-cart-drawer__cart-link {
    display: block;
    margin-top: 10px;
    font-family: var(--fedelan-font-primary);
    font-size: 13px;
    text-align: center;
    color: var(--fedelan-ink-soft);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.fedelan-cart-drawer__cart-link:hover {
    color: var(--fedelan-ink);
}

/* Bloqueo de scroll del fondo */
body.fedelan-cart-open,
body.fedelan-favorites-open,
body.fedelan-compra-rapida-open {
    overflow: hidden;
}

/* ==========================================================================
   Pagina de carrito (K1). Reusa la linea del drawer y le pone columnas.
   ========================================================================== */

/* La pagina trae su propio h1 ("Tu pedido"), asi que el titulo que pone
   GeneratePress ("Carro", el nombre de la pagina en WordPress) sale. Es lo
   mismo que hace el checkout. */
body.woocommerce-cart .entry-header {
    display: none;
}

/* Mas ancho que 1280 el precio de cada linea queda lejos de la prenda y el ojo
   tiene que cruzar la pantalla para unirlos. Es el mismo tope que las
   paginas de texto. */
.fedelan-cart-page {
    max-width: min(var(--fedelan-container), 1280px);
    margin: 0 auto;
    padding: 32px var(--fedelan-container-padding) 64px;
}

.fedelan-cart-page__title {
    margin: 0 0 24px;
    font-family: var(--fedelan-font-primary);
    font-size: 28px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.5px;
    color: var(--fedelan-ink);
}

.fedelan-cart-page__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

.fedelan-cart-page__items {
    border-top: 1px solid var(--fedelan-line-strong);
    border-bottom: 1px solid var(--fedelan-line-strong);
}

.fedelan-cart-page__items .fedelan-cart-drawer__item {
    padding-left: 0;
    padding-right: 0;
}

.fedelan-cart-page__items .fedelan-cart-drawer__item:last-child {
    border-bottom: none;
}

/* El boton de eliminar se alinea con el nombre del modelo, no con el borde de
   arriba de la linea. En la pagina dice la palabra entera, asi que hay que
   reservarle mas lugar que al tacho del drawer. */
.fedelan-cart-page__items .fedelan-cart-drawer__item-remove--corner {
    top: 16px;
    right: 0;
}

.fedelan-cart-page__items .fedelan-cart-drawer__item-details {
    padding-right: 84px;
}

.fedelan-cart-page__summary {
    padding: 20px;
    border: 1px solid var(--fedelan-line-strong);
    background-color: var(--fedelan-paper);
}

.fedelan-cart-page__summary-title {
    margin: 0 0 14px;
    font-family: var(--fedelan-font-primary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--fedelan-muted);
}

/* K7: el cupon vive colapsado detras de un link, nunca abierto. */
.fedelan-cart-page__cupon {
    margin: 14px 0;
    border-top: 1px solid var(--fedelan-line);
    padding-top: 12px;
}

.fedelan-cart-page__cupon-toggle {
    font-family: var(--fedelan-font-primary);
    font-size: 13px;
    color: var(--fedelan-ink-soft);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    list-style: none;
    padding: 6px 0;
}

.fedelan-cart-page__cupon-toggle::-webkit-details-marker {
    display: none;
}

.fedelan-cart-page__cupon-campos {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.fedelan-cart-page__cupon-input {
    flex: 1;
    min-width: 0;
    height: 48px;
    padding: 0 12px;
    font-family: var(--fedelan-font-primary);
    font-size: 16px;
    color: var(--fedelan-ink);
    background-color: var(--fedelan-field-2);
    border: 1px solid var(--fedelan-line);
    border-radius: var(--fedelan-radius);
}

.fedelan-cart-page__cupon-aplicar {
    height: 48px;
    padding: 0 18px;
    font-family: var(--fedelan-font-primary);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--fedelan-ink);
    background: none;
    border: 1px solid var(--fedelan-line-strong);
    border-radius: var(--fedelan-radius);
    cursor: pointer;
}

.fedelan-cart-page__cupon-aplicar:hover {
    color: var(--fedelan-accent-ink);
    background-color: var(--fedelan-accent);
}

.fedelan-cart-page__seguir {
    display: inline-block;
    margin-top: 16px;
    font-family: var(--fedelan-font-primary);
    font-size: 13px;
    color: var(--fedelan-ink-soft);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* En la pagina el cross sell va a lo ancho, abajo de todo, alineado con las
   lineas y no con el padding interno del drawer. */
.fedelan-cart-drawer__cross--page {
    margin-top: 48px;
    padding: 24px 0 0;
    border-top: 1px solid var(--fedelan-line-strong);
}

.fedelan-cart-drawer__cross--page .fedelan-cart-drawer__cross-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--fedelan-gutter);
}

.fedelan-cart-page__vacio {
    font-family: var(--fedelan-font-primary);
    font-size: 16px;
    color: var(--fedelan-ink-soft);
}

@media (min-width: 900px) {
    .fedelan-cart-page__layout {
        grid-template-columns: minmax(0, 1fr) 360px;
        gap: 48px;
    }

    .fedelan-cart-page__summary {
        position: sticky;
        top: calc(var(--fedelan-header-total-height) + 16px);
    }

    .fedelan-cart-drawer__cross--page .fedelan-cart-drawer__cross-list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .fedelan-cart-page__items .fedelan-cart-drawer__item-image {
        flex: 0 0 112px;
        width: 112px;
        height: 150px;
        min-width: 112px;
        min-height: 150px;
        max-width: 112px;
        max-height: 150px;
    }

    .fedelan-cart-page__items .fedelan-cart-drawer__item {
        gap: 20px;
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .fedelan-cart-page__items .fedelan-cart-drawer__item-remove--corner {
        top: 24px;
    }

    .fedelan-cart-page__items .fedelan-cart-drawer__item-name {
        font-size: 16px;
    }

    .fedelan-cart-page__items .fedelan-cart-drawer__item-attributes {
        font-size: 13px;
    }
}

/* ==========================================================================
   Agregado rapido (inc/compra-rapida.php)
   El panel que abre el + de la tarjeta: arriba la prenda como en la tarjeta
   (foto, precio, curva y numero de articulo) y abajo el formulario de la
   ficha, que se ve igual que en la ficha porque sus reglas son las mismas.
   ========================================================================== */

.fedelan-compra-rapida__content {
    padding: 20px 20px 32px;
}

.fedelan-compra-rapida__producto {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 16px;
    margin: 0 0 24px;
}

/* La foto con el mismo encuadre que la tarjeta (G5): campo gris, anclada
   arriba y al 130% del alto. */
.fedelan-compra-rapida__foto {
    position: relative;
    display: block;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    background: var(--fedelan-sand);
}

.fedelan-compra-rapida__foto img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    max-width: 100%;
    height: 130%;
    object-fit: contain;
    object-position: top center;
}

.fedelan-compra-rapida__datos {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
}

.fedelan-compra-rapida__precio {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--fedelan-ink);
}

.fedelan-compra-rapida__meta {
    display: flex;
    flex-wrap: wrap;
    column-gap: 10px;
    margin: 0;
    font-size: 13px;
    line-height: 1.35;
    color: var(--fedelan-muted);
}

.fedelan-compra-rapida__ficha {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 14px;
}

.fedelan-compra-rapida__estado {
    margin: 0;
    padding: 48px 0 16px;
    font-size: 15px;
    color: var(--fedelan-muted);
}

/* ==========================================================================
   Anchos chicos
   ========================================================================== */

@media (max-width: 480px) {
    .fedelan-cart-drawer__panel,
    .fedelan-favorites-drawer__panel,
    .fedelan-compra-rapida__panel {
        width: 100%;
    }

    .fedelan-cart-drawer__header,
    .fedelan-favorites-drawer__header,
    .fedelan-compra-rapida__header,
    .fedelan-cart-drawer__item,
    .fedelan-favorites-drawer__item,
    .fedelan-cart-drawer__cross--drawer {
        padding-left: 16px;
        padding-right: 16px;
    }

    .fedelan-cart-drawer__footer,
    .fedelan-compra-rapida__content {
        padding-left: 16px;
        padding-right: 16px;
    }

    .fedelan-compra-rapida__producto {
        grid-template-columns: 96px minmax(0, 1fr);
    }

    .fedelan-cart-drawer__item-details {
        padding-right: 48px;
    }

    .fedelan-cart-drawer__item-remove--corner {
        right: 6px;
    }

    .fedelan-cart-page {
        padding-top: 24px;
    }

    .fedelan-cart-page__title {
        font-size: 22px;
    }
}

/* Barra de admin */
.admin-bar .fedelan-cart-drawer__panel,
.admin-bar .fedelan-favorites-drawer__panel,
.admin-bar .fedelan-compra-rapida__panel {
    padding-top: 32px;
}

@media (max-width: 782px) {
    .admin-bar .fedelan-cart-drawer__panel,
    .admin-bar .fedelan-favorites-drawer__panel,
    .admin-bar .fedelan-compra-rapida__panel {
        padding-top: 46px;
    }
}

/* ==========================================================================
   K8: el cross sell va despues del boton de confirmar
   Las lineas, el resumen y el cross sell comparten un solo scroll. El resumen
   se queda pegado abajo (sticky) mientras hay lineas por ver, asi el boton
   sigue a mano, y al llegar al final aparece el cross sell debajo. El pie es
   display: contents para que el resumen sea hijo directo del scroll: un
   sticky no puede salirse de su padre.
   ========================================================================== */

.fedelan-cart-drawer__scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.fedelan-cart-drawer__scroll > .fedelan-cart-drawer__content {
    flex: 1 0 auto;
    overflow: visible;
}

.fedelan-cart-drawer__footer {
    display: contents;
}

.fedelan-cart-drawer__resumen {
    position: sticky;
    bottom: 0;
    z-index: 1;
    flex-shrink: 0;
    padding: 16px 20px 20px;
    border-top: 1px solid var(--fedelan-line-strong);
    background-color: var(--fedelan-paper);
}

.fedelan-cart-drawer__cross--drawer {
    flex-shrink: 0;
}

/* K49: "IVA incluido" abajo del total, en el drawer y en /carro/. */
.fedelan-cart-drawer__iva {
    margin: -8px 0 12px;
    text-align: right;
    font-family: var(--fedelan-font-primary);
    font-size: 12px;
    line-height: 1.3;
    color: var(--fedelan-muted);
}

@media (max-width: 480px) {
    .fedelan-cart-drawer__resumen {
        padding-left: 16px;
        padding-right: 16px;
    }
}