/*
 * Ficha de producto: precio y compra encima de la descripción; la descripción, plegada, con un botón para leerla entera.
 * Sólo cambia el orden en pantalla: la plantilla del tema no se toca. El botón lo añade ficha.js;
 * sin JavaScript la descripción se ve completa debajo de la compra.
 */

#product .product-information { display: flex; flex-direction: column; }
/* El formulario de compra y lo que le acompaña pasan a ordenarse junto a la descripción. */
#product .product-information > .product-actions { display: contents; }
#product .product-information > *,
#product .product-actions > * { order: 4; }
#product .product-information > .product-customization { order: 1; }
#product .product-actions > #add-to-cart-or-refresh { order: 2; width: 100%; }
#product .product-information > .product-description,
#product .product-information > .mnv-descripcion__boton { order: 3; }

#product .product-information > .product-description { margin-top: 6px; }
#product .mnv-descripcion--plegada {
    max-height: 9.6em; overflow: hidden;
    -webkit-mask-image: linear-gradient(#000 40%, transparent); mask-image: linear-gradient(#000 40%, transparent);
}
#product .mnv-descripcion__boton {
    align-self: center; min-height: 40px; margin: 12px 0 26px; padding: 0 20px;
    border: 1px solid rgba(128, 128, 128, .55); border-radius: 999px; background: transparent;
    color: inherit; font: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
    transition: background .15s, border-color .15s;
}
#product .mnv-descripcion__boton:hover { background: rgba(128, 128, 128, .18); border-color: rgba(128, 128, 128, .9); }
#product .mnv-descripcion__boton:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
#product .mnv-descripcion__boton::after {
    content: ''; display: inline-block; width: 7px; height: 7px; margin: 0 0 3px 10px;
    border-right: 2px solid; border-bottom: 2px solid; transform: rotate(45deg); transition: transform .15s;
}
#product .mnv-descripcion__boton[aria-expanded="true"]::after { margin-bottom: -2px; transform: rotate(-135deg); }