/* Tulaser Clinic 2026 en WordPress: formularios de WPForms, WooCommerce y entradas con el aspecto del diseño. */ /* ---------- formularios (WPForms dentro de los huecos del diseño) */ .tl-wpforms { margin-top: 36px; } .tl-wpforms .wpforms-container { margin: 0 !important; max-width: none !important; } .tl-wpforms .wpforms-form .wpforms-field-container { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; } .tl-wpforms .wpforms-form .wpforms-field { padding: 0 !important; margin: 0 !important; min-width: 0; float: none !important; width: auto !important; } .tl-wpforms .wpforms-form .wpforms-field-textarea, .tl-wpforms .wpforms-form .wpforms-field-checkbox, .tl-wpforms .wpforms-form .wpforms-field-gdpr-checkbox, .tl-wpforms .wpforms-form .wpforms-field-html, .tl-wpforms .wpforms-form .wpforms-field-radio, .tl-wpforms .wpforms-form .wpforms-field-name { grid-column: 1 / -1; } .tl-wpforms .wpforms-form .wpforms-field-label, .tl-wpforms .wpforms-form .wpforms-field-sublabel { font-size: .7rem !important; font-weight: 500 !important; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft) !important; margin: 0 0 8px !important; } .tl-wpforms .wpforms-form .wpforms-required-label { color: inherit !important; } .tl-wpforms .wpforms-form input[type=text], .tl-wpforms .wpforms-form input[type=email], .tl-wpforms .wpforms-form input[type=tel], .tl-wpforms .wpforms-form input[type=number], .tl-wpforms .wpforms-form input[type=date], .tl-wpforms .wpforms-form select, .tl-wpforms .wpforms-form textarea { width: 100% !important; max-width: none !important; min-height: 50px; height: auto !important; padding: 12px 0 !important; border: 0 !important; border-bottom: 1px solid var(--line-strong) !important; background-color: transparent !important; box-shadow: none !important; border-radius: 0 !important; font: inherit !important; font-size: 1.02rem !important; color: var(--ink) !important; -webkit-appearance: none; appearance: none; } .tl-wpforms .wpforms-form select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23121110' stroke-width='1.2'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 4px center !important; padding-right: 24px !important; } .tl-wpforms .wpforms-form textarea { min-height: 110px !important; resize: vertical; } .tl-wpforms .wpforms-form input:focus, .tl-wpforms .wpforms-form select:focus, .tl-wpforms .wpforms-form textarea:focus { outline: none !important; border-bottom-color: var(--ink) !important; } .tl-wpforms .wpforms-form .wpforms-field-row { max-width: none !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; } .tl-wpforms .wpforms-form .wpforms-field-row::before, .tl-wpforms .wpforms-form .wpforms-field-row::after { display: none !important; } .tl-wpforms .wpforms-form .wpforms-field-row-block { width: auto !important; padding: 0 !important; float: none !important; } .tl-wpforms .wpforms-form ul { margin: 0 !important; padding: 0 !important; list-style: none; } .tl-wpforms .wpforms-form ul li { display: flex !important; gap: 12px; align-items: flex-start; font-size: .84rem; color: var(--ink-soft); margin: 0 0 6px !important; } .tl-wpforms .wpforms-form input[type=checkbox], .tl-wpforms .wpforms-form input[type=radio] { width: 18px; height: 18px; margin: 2px 0 0 !important; accent-color: var(--ink); flex: none; } .tl-wpforms .wpforms-form ul li label { font-size: .84rem !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--ink-soft) !important; } .tl-wpforms .wpforms-form ul li a { text-decoration: underline; text-underline-offset: 3px; } .tl-wpforms .wpforms-form .wpforms-field-description { font-size: .8rem !important; color: var(--ink-soft) !important; } .tl-wpforms .wpforms-form label.wpforms-error, .tl-wpforms .wpforms-form em.wpforms-error { color: #9b2c2c !important; font-size: .78rem !important; font-style: normal; margin-top: 6px !important; } .tl-wpforms .wpforms-form .wpforms-submit-container { padding: 0 !important; margin-top: 26px !important; } .tl-wpforms .wpforms-form button[type=submit] { display: inline-flex !important; align-items: center; justify-content: center; min-height: 52px; padding: 0 30px !important; border: 1px solid var(--ink) !important; border-radius: 0 !important; background: var(--ink) !important; color: var(--white) !important; font: inherit !important; font-size: .74rem !important; font-weight: 500 !important; letter-spacing: .2em !important; text-transform: uppercase; box-shadow: none !important; cursor: pointer; transition: background .3s, color .3s; } .tl-wpforms .wpforms-form button[type=submit]:hover { background: transparent !important; color: var(--ink) !important; } .tl-wpforms .wpforms-confirmation-container-full, .tl-wpforms div[submit-success] > .wpforms-confirmation-container-full { padding: 18px 20px !important; background: var(--white) !important; border: 0 !important; border-left: 2px solid var(--ink) !important; color: var(--ink) !important; font-size: .95rem; margin: 0 !important; } .pp .tl-wpforms { margin-top: 24px; } .pp .tl-wpforms .wpforms-form input, .pp .tl-wpforms .wpforms-form select { background-color: transparent !important; } .tl-form-fallback { margin-top: 28px; font-size: .95rem; color: var(--ink-soft); } .tl-form-fallback a { text-decoration: underline; text-underline-offset: 3px; color: var(--ink); } @media (max-width: 720px) { .tl-wpforms .wpforms-form .wpforms-field-container, .tl-wpforms .wpforms-form .wpforms-field-row { grid-template-columns: 1fr; } } /* ---------- cesta */ #cart.is-busy .cart-body, #cart.is-busy .cart-foot { opacity: .55; pointer-events: none; transition: opacity .2s; } .cart-msg { margin: 16px 0 0; padding: 12px 14px; background: var(--linen); color: var(--ink); } .cart-msg[hidden] { display: none; } .ci-qty button:disabled { opacity: .3; cursor: default; } /* ---------- páginas de WordPress (blog, cesta, finalizar compra, mi cuenta) */ .wp-head { border-bottom: 1px solid var(--line); } .wp-content { max-width: 1080px; } .wp-post { max-width: 760px; } .wp-content > * + * { margin-top: 1.1em; } .wp-content h2 { font-family: var(--serif, inherit); font-weight: 300; font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin-top: 1.6em; } .wp-content h3 { font-size: 1.2rem; font-weight: 500; margin-top: 1.4em; } .wp-content p, .wp-content li { color: var(--ink-soft); font-weight: 300; font-size: 1.05rem; line-height: 1.7; } .wp-content a { text-decoration: underline; text-underline-offset: 3px; } .wp-content a.btn, .wp-content a.button { text-decoration: none; } .wp-content img { max-width: 100%; height: auto; } .wp-cover { margin: 0 0 2em; } .wp-cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .wp-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 28px; } .wp-card { display: grid; gap: 12px; align-content: start; } .wp-card-img { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--linen); } .wp-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s; } .wp-card:hover .wp-card-img img { transform: scale(1.03); } .wp-pager { margin-top: 56px; } .wp-pager .nav-links { display: flex; gap: 18px; flex-wrap: wrap; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; } .wp-pager .current { text-decoration: underline; text-underline-offset: 4px; } @media (max-width: 900px) { .wp-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .wp-posts { grid-template-columns: 1fr; } } /* WooCommerce: botones, campos y tablas con los tokens del diseño */ .wp-shop .button, .wp-shop button.button, .wp-shop input.button, .wp-shop #place_order, .wp-shop .checkout-button, .wp-shop .wc-block-components-button, .wp-shop .wp-element-button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 30px; border: 1px solid var(--ink) !important; border-radius: 0 !important; background: var(--ink) !important; color: var(--white) !important; font: inherit; font-size: .74rem !important; font-weight: 500 !important; letter-spacing: .2em; text-transform: uppercase; text-decoration: none !important; } .wp-shop .button:hover, .wp-shop #place_order:hover, .wp-shop .wc-block-components-button:hover { background: transparent !important; color: var(--ink) !important; } .wp-shop input[type=text], .wp-shop input[type=email], .wp-shop input[type=tel], .wp-shop input[type=password], .wp-shop input[type=number], .wp-shop select, .wp-shop textarea, .wp-shop .wc-block-components-text-input input { min-height: 50px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 0; background: var(--white); font: inherit; font-size: 1rem; color: var(--ink); box-shadow: none; } .wp-shop label { font-size: .72rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); } .wp-shop table.shop_table { width: 100%; border-collapse: collapse; border: 0; border-top: 1px solid var(--line); } .wp-shop table.shop_table th, .wp-shop table.shop_table td { padding: 16px 10px; border: 0; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; } .wp-shop .woocommerce-message, .wp-shop .woocommerce-info, .wp-shop .woocommerce-error { list-style: none; padding: 16px 20px; margin: 0 0 24px; background: var(--white); border: 0; border-left: 2px solid var(--ink); color: var(--ink); } .wp-shop .woocommerce-error { border-left-color: #9b2c2c; } .wp-shop .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; display: grid; gap: 10px; } .wp-shop .woocommerce-MyAccount-navigation a { text-decoration: none; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; } .wp-shop .woocommerce-MyAccount-navigation .is-active a { text-decoration: underline; text-underline-offset: 4px; } .wp-shop .wc-item-meta, .wp-shop dl.variation { font-size: .84rem; color: var(--ink-soft); } .wp-shop dl.variation dt { font-weight: 500; } /* ---------- plugins de la web actual que pintan cosas encima del diseño */ /* CheckoutWC: botón flotante de su carrito lateral (el diseño ya tiene su cesta en la cabecera) */ #cfw-side-cart-floating-button, .cfw-side-cart-floating-button { display: none !important; } /* barra de administración: la cabecera fija queda debajo de ella (solo la ven los administradores) */ body.admin-bar .header { top: 32px; } @media (max-width: 782px) { body.admin-bar .header { top: 0; } } /* WPForms: campo de teléfono con prefijo internacional (la bandera no tapa el texto) */ .tl-wpforms .iti { width: 100%; } .tl-wpforms .wpforms-form .iti input[type=tel] { padding-left: 52px !important; } .tl-wpforms .iti__flag-container { padding: 0; } .tl-wpforms .iti__selected-flag { padding: 0 8px 0 0; background: transparent !important; } /* ---------- página de la cesta (WooCommerce, /carrito/) con el aspecto del diseño */ .woocommerce-cart .wp-shop > .woocommerce { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: 48px clamp(32px, 5vw, 80px); align-items: start; } .woocommerce-cart .wp-shop > .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; } .woocommerce-cart .wp-content { max-width: none; } .wp-shop table.shop_table.cart { border-top: 1px solid var(--line); } .wp-shop table.cart thead { display: none; } .wp-shop table.cart, .wp-shop table.cart tbody { display: block; width: 100%; } .wp-shop table.cart tr.cart_item { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; grid-template-areas: "img name total" "img qty remove"; gap: 6px 20px; padding: 24px 0; border-bottom: 1px solid var(--line); } .wp-shop table.cart tr.cart_item td { display: block; padding: 0; border: 0; text-align: left; } .wp-shop table.cart td::before { display: none !important; } .wp-shop table.cart td.product-thumbnail { grid-area: img; } .wp-shop table.cart td.product-thumbnail img { width: 96px; height: 96px; aspect-ratio: 1; object-fit: cover; background: var(--linen); } .wp-shop table.cart td.product-name { grid-area: name; font-family: var(--serif); font-weight: 300; font-size: 1.3rem; line-height: 1.25; letter-spacing: -.01em; } .wp-shop table.cart td.product-name a { text-decoration: none; } .wp-shop table.cart td.product-name dl.variation { margin: 8px 0 0; font-family: var(--sans); font-size: .82rem; line-height: 1.5; color: var(--muted); display: grid; grid-template-columns: auto 1fr; gap: 0 8px; } .wp-shop table.cart td.product-name dl.variation dt { font-weight: 500; color: var(--ink-soft); } .wp-shop table.cart td.product-name dl.variation dd, .wp-shop table.cart td.product-name dl.variation dd p { margin: 0; } .wp-shop table.cart td.product-price { display: none; } .wp-shop table.cart td.product-quantity { grid-area: qty; align-self: end; } .wp-shop table.cart td.product-subtotal { grid-area: total; text-align: right; font-weight: 500; white-space: nowrap; } .wp-shop table.cart td.product-remove { grid-area: remove; align-self: end; text-align: right; } .wp-shop table.cart a.remove { font-size: 0 !important; color: var(--ink) !important; background: none !important; width: auto; height: auto; } .wp-shop table.cart a.remove::after { content: "Eliminar"; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; } .wp-shop .quantity .qty { width: 72px; min-height: 42px; padding: 8px 10px; text-align: center; } .wp-shop table.cart tr:not(.cart_item) { display: block; padding: 24px 0 0; } .wp-shop table.cart td.actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: end; padding: 0; border: 0; } .wp-shop table.cart td.actions .coupon { display: flex; gap: 10px; align-items: end; flex: 1 1 320px; } .wp-shop table.cart td.actions .coupon label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .wp-shop table.cart td.actions .coupon input.input-text { flex: 1; width: auto !important; } .wp-shop table.cart td.actions .button { min-height: 50px; } .wp-shop table.cart td.actions button[name=update_cart] { background: transparent !important; color: var(--ink) !important; } .wp-shop table.cart td.actions button[name=update_cart]:disabled { opacity: .35; } .wp-shop .cart-collaterals { position: sticky; top: calc(var(--header-h) + 24px); } .wp-shop .cart-collaterals .cross-sells { display: none; } .wp-shop .cart_totals { width: auto !important; float: none !important; padding: clamp(24px, 3vw, 40px); background: var(--linen); } .wp-shop .cart_totals h2 { margin: 0 0 18px; font-size: 1.6rem; } .wp-shop .cart_totals table.shop_table { border-top: 0; } .wp-shop .cart_totals table.shop_table th, .wp-shop .cart_totals table.shop_table td { padding: 14px 0; font-weight: 400; background: none; } .wp-shop .cart_totals table.shop_table td { text-align: right; } .wp-shop .cart_totals tr.order-total th, .wp-shop .cart_totals tr.order-total td strong { font-family: var(--serif); font-size: 1.5rem; font-weight: 300; } .wp-shop .cart_totals tr.order-total small { display: block; margin-top: 4px; font-size: .78rem; color: var(--muted); } .wp-shop .wc-proceed-to-checkout { padding: 20px 0 0; } .wp-shop .wc-proceed-to-checkout .checkout-button { display: flex !important; width: 100%; font-size: .74rem !important; padding: 0 20px !important; margin: 0 !important; } .wp-shop .wc-proceed-to-checkout::after { content: "Pago seguro con tu banco, Bizum o financiación"; display: block; margin-top: 14px; font-size: .82rem; color: var(--ink-soft); text-align: center; } .wp-shop .cart-empty.woocommerce-info { font-family: var(--serif); font-size: 1.6rem; font-weight: 300; border: 0; padding: 0; background: none; } .wp-shop .return-to-shop .button { margin-top: 12px; } @media (max-width: 900px) { .woocommerce-cart .wp-shop > .woocommerce { grid-template-columns: 1fr; } .wp-shop .cart-collaterals { position: static; } } @media (max-width: 560px) { .wp-shop table.cart tr.cart_item { grid-template-columns: 72px minmax(0, 1fr) auto; } .wp-shop table.cart td.product-thumbnail img { width: 72px; height: 72px; } .wp-shop table.cart td.product-name { font-size: 1.1rem; } } /* ---------- mi cuenta (WooCommerce) con el aspecto del diseño */ /* mismo ancho que la cabecera: con «none» el menú y los formularios se iban al borde izquierdo de la pantalla */ body.woocommerce-account .wp-content { max-width: var(--max); } body.woocommerce-account .wp-shop > .woocommerce { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 40px clamp(40px, 6vw, 112px); align-items: start; } body.woocommerce-account .woocommerce-MyAccount-navigation, body.woocommerce-account .woocommerce-MyAccount-content { float: none !important; width: auto !important; } body.woocommerce-account .woocommerce-MyAccount-navigation { position: sticky; top: calc(var(--header-h) + 24px); grid-column: 1; grid-row: 1; } body.woocommerce-account .woocommerce-MyAccount-content { grid-column: 2; grid-row: 1; min-width: 0; } body.woocommerce-account .woocommerce-MyAccount-navigation::before { content: "Mi cuenta"; display: block; margin-bottom: 14px; font-size: var(--t-label); font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); } body.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); display: block; } body.woocommerce-account .woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--line); margin: 0; } body.woocommerce-account .woocommerce-MyAccount-navigation a { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 15px 0 15px 0; font-family: var(--serif); font-weight: 300; font-size: 1.12rem; letter-spacing: -.01em; text-transform: none; text-decoration: none !important; color: var(--ink-soft); transition: color .3s, padding .3s var(--ease); } body.woocommerce-account .woocommerce-MyAccount-navigation a::after { content: "→"; font-family: var(--sans); font-size: .9rem; opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .3s var(--ease); } body.woocommerce-account .woocommerce-MyAccount-navigation a:hover { color: var(--ink); padding-left: 6px; } body.woocommerce-account .woocommerce-MyAccount-navigation a:hover::after, body.woocommerce-account .woocommerce-MyAccount-navigation .is-active a::after { opacity: 1; transform: none; } body.woocommerce-account .woocommerce-MyAccount-navigation .is-active a { color: var(--ink); } body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--muted); font-family: var(--sans); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; } body.woocommerce-account .woocommerce-MyAccount-content > p:first-child, body.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-notices-wrapper + p { margin-top: 0; } body.woocommerce-account .woocommerce-MyAccount-content p { font-size: 1rem; color: var(--ink-soft); } body.woocommerce-account .woocommerce-MyAccount-content mark { background: none; color: var(--ink); font-weight: 500; } body.woocommerce-account .woocommerce-MyAccount-content h2, body.woocommerce-account .woocommerce-MyAccount-content h3 { font-family: var(--serif); font-weight: 300; letter-spacing: -.015em; color: var(--ink); } body.woocommerce-account .woocommerce-MyAccount-content h2 { font-size: var(--t-h3); margin: 0 0 18px; } /* resumen */ .acc-dash { display: grid; gap: clamp(36px, 4vw, 56px); } .acc-hello { display: grid; gap: 14px; } .acc-hello .h2 { margin: 0; } .acc-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .acc-card { position: relative; display: grid; align-content: start; gap: 8px; min-height: 190px; padding: 22px 22px 52px; background: var(--linen); text-decoration: none !important; color: var(--ink); transition: background .35s; } .acc-card:hover { background: var(--sand); } .acc-card .label, .acc-card p { margin: 0; } .acc-card-num { font-family: var(--serif); font-weight: 300; font-size: 2.6rem; line-height: 1; letter-spacing: -.03em; color: var(--ink) !important; } .acc-card-t { font-family: var(--serif); font-weight: 300; font-size: 1.3rem; line-height: 1.15; color: var(--ink) !important; } .acc-card-go { position: absolute; left: 22px; bottom: 20px; transition: transform .4s var(--ease); } .acc-card:hover .acc-card-go { transform: translateX(6px); } .acc-block-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); } .acc-block-head .h3 { margin: 0; } .acc-list { list-style: none; margin: 0; padding: 0; } .acc-list li { border-bottom: 1px solid var(--line); } .acc-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 20px; padding: 18px 0; text-decoration: none !important; color: var(--ink); } .acc-list a:hover .acc-list-main strong { text-decoration: underline; text-underline-offset: 4px; } .acc-list-main { display: grid; gap: 4px; min-width: 0; } .acc-list-main strong { font-weight: 500; } .acc-list-main .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .acc-list-total { font-family: var(--serif); font-weight: 300; font-size: 1.15rem; white-space: nowrap; } .acc-cta { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding: clamp(24px, 3vw, 36px); background: var(--ink); color: var(--white); } .acc-cta .label { color: var(--on-dark-muted); } .acc-cta .h3 { margin: 0; color: var(--white); } .acc-cta .btn { background: var(--white); color: var(--ink); border-color: var(--white); } .acc-cta .btn:hover { background: transparent; color: var(--white); } .acc-cta .btn-ghost { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, .5); } .acc-cta .btn-ghost:hover { background: var(--white); color: var(--ink); } /* estado del pedido */ .acc-status, .woocommerce-orders-table__cell-order-status { white-space: nowrap; } .acc-status, body.woocommerce-account .woocommerce-orders-table__cell-order-status span.tl-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--line-strong); font-size: .7rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); } .acc-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); } .acc-status.is-processing::before, .acc-status.is-on-hold::before { background: var(--clay); } .acc-status.is-completed::before { background: #4f7a5a; } .acc-status.is-cancelled::before, .acc-status.is-failed::before, .acc-status.is-refunded::before { background: #a24b3d; } /* pedido cancelado o fallido: en rojo en toda la web (resumen, lista de pedidos, detalle y pedido recibido) */ .acc-status.is-cancelled, .acc-status.is-failed { color: #a24b3d; border-color: rgba(162, 75, 61, .45); } .tl-status-bad, mark.order-status.tl-status-bad { color: #a24b3d !important; font-weight: 500; } /* tabla de pedidos */ body.woocommerce-account table.woocommerce-orders-table { width: 100%; border: 0 !important; border-collapse: collapse; margin: 0; } body.woocommerce-account table.woocommerce-orders-table thead th { padding: 0 12px 14px 0 !important; border: 0 !important; border-bottom: 1px solid var(--line-strong) !important; background: none !important; font-size: .68rem !important; font-weight: 500 !important; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); text-align: left; } body.woocommerce-account table.woocommerce-orders-table tbody th, body.woocommerce-account table.woocommerce-orders-table tbody td { padding: 22px 12px 22px 0 !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; background: none !important; vertical-align: middle; font-size: .95rem; text-align: left; } body.woocommerce-account .woocommerce-orders-table__cell-order-number a { font-family: var(--serif); font-weight: 300; font-size: 1.25rem; text-decoration: none !important; color: var(--ink); } body.woocommerce-account .woocommerce-orders-table__cell-order-actions { text-align: right !important; padding-right: 0 !important; } body.woocommerce-account .woocommerce-orders-table__cell-order-actions .button { display: inline-flex !important; align-items: center !important; justify-content: center; min-height: 40px !important; padding: 0 18px !important; background: transparent !important; color: var(--ink) !important; border: 1px solid var(--ink) !important; font-size: .68rem !important; line-height: 1 !important; margin: 0 0 0 6px !important; } body.woocommerce-account .woocommerce-orders-table__cell-order-actions .button:hover { background: var(--ink) !important; color: var(--white) !important; } body.woocommerce-account .woocommerce-orders-table__row--status-processing .woocommerce-orders-table__cell-order-status, body.woocommerce-account .woocommerce-orders-table__row--status-on-hold .woocommerce-orders-table__cell-order-status { color: var(--clay); } body.woocommerce-account .woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status { color: #4f7a5a; } body.woocommerce-account .woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status, body.woocommerce-account .woocommerce-orders-table__row--status-failed .woocommerce-orders-table__cell-order-status { color: #a24b3d; } body.woocommerce-account .woocommerce-orders-table__cell-order-status { font-size: .74rem !important; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; } body.woocommerce-account .woocommerce-pagination { display: flex; gap: 10px; margin-top: 28px; } /* avisos (sin pedidos, sin descargas, verificación…) */ body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info, body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px !important; margin: 0 0 28px !important; background: var(--linen) !important; border: 0 !important; color: var(--ink-soft); font-size: .95rem; } body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info::before, body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message::before { display: none !important; } body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info .button, body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message .button { order: 2; float: none !important; display: inline-flex !important; align-items: center; min-height: 44px; padding: 0 20px !important; line-height: 1 !important; } /* detalle de un pedido */ body.woocommerce-account .woocommerce-order-details, body.woocommerce-account .woocommerce-customer-details { margin-top: 36px; } body.woocommerce-account table.order_details { width: 100%; border: 0 !important; border-top: 1px solid var(--line-strong) !important; border-collapse: collapse; } body.woocommerce-account table.order_details th, body.woocommerce-account table.order_details td { padding: 16px 0 !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; background: none !important; text-align: left; font-weight: 400; } body.woocommerce-account table.order_details td:last-child, body.woocommerce-account table.order_details tfoot td { text-align: right; } body.woocommerce-account table.order_details thead th { font-size: .68rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } body.woocommerce-account table.order_details tfoot tr:last-child th, body.woocommerce-account table.order_details tfoot tr:last-child td { font-family: var(--serif); font-weight: 300; font-size: 1.35rem; border-bottom: 0 !important; } body.woocommerce-account table.order_details .product-name a { text-decoration: none; font-family: var(--serif); font-weight: 300; font-size: 1.1rem; } body.woocommerce-account .woocommerce-customer-details address { padding: 22px 24px; background: var(--linen); border: 0 !important; font-style: normal; line-height: 1.7; color: var(--ink-soft); } body.woocommerce-account .order-again .button { margin-top: 20px; } /* direcciones */ body.woocommerce-account .woocommerce-Addresses { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 18px; } body.woocommerce-account .woocommerce-Addresses::before, body.woocommerce-account .woocommerce-Addresses::after { display: none !important; } body.woocommerce-account .woocommerce-Address { width: auto !important; float: none !important; padding: 26px; background: var(--linen); } body.woocommerce-account .woocommerce-Address-title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 16px; } body.woocommerce-account .woocommerce-Address-title h2, body.woocommerce-account .woocommerce-Address-title h3 { margin: 0 !important; font-size: 1.35rem !important; } body.woocommerce-account .woocommerce-Address-title .edit { float: none !important; font-size: .7rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; } body.woocommerce-account .woocommerce-Address address { font-style: normal; line-height: 1.75; color: var(--ink-soft); } /* formularios: mis datos, facturación, contraseña, acceso y registro */ body.woocommerce-account .woocommerce-MyAccount-content form, body.woocommerce-account .wp-shop form.login, body.woocommerce-account .wp-shop form.register, body.woocommerce-account .wp-shop form.lost_reset_password { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 24px; max-width: 760px; margin: 0 !important; padding: 0 !important; border: 0 !important; } body.woocommerce-account .woocommerce-address-fields__field-wrapper { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 24px; grid-column: 1 / -1; } body.woocommerce-account .woocommerce-address-fields { display: contents; } body.woocommerce-account .wp-shop form .form-row { display: grid; gap: 8px; width: auto !important; float: none !important; margin: 0 !important; padding: 0 !important; grid-column: 1 / -1; } body.woocommerce-account .wp-shop form .form-row-first, body.woocommerce-account .wp-shop form .form-row-last { grid-column: auto; } body.woocommerce-account .wp-shop form label { margin: 0; font-size: .7rem !important; font-weight: 500 !important; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); line-height: 1.4; } body.woocommerce-account .wp-shop form .required { color: var(--clay); text-decoration: none; border: 0; } body.woocommerce-account .wp-shop form input.input-text, body.woocommerce-account .wp-shop form input[type=text], body.woocommerce-account .wp-shop form input[type=email], body.woocommerce-account .wp-shop form input[type=tel], body.woocommerce-account .wp-shop form input[type=password], body.woocommerce-account .wp-shop form select, body.woocommerce-account .wp-shop form textarea, body.woocommerce-account .wp-shop .select2-container .select2-selection--single { width: 100%; min-height: 50px; height: auto; padding: 12px 0 !important; border: 0 !important; border-bottom: 1px solid var(--line-strong) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; font: inherit; font-size: 1.02rem; color: var(--ink); } body.woocommerce-account .wp-shop form input:focus, body.woocommerce-account .wp-shop form select:focus, body.woocommerce-account .wp-shop form textarea:focus { outline: none; border-bottom-color: var(--ink) !important; } body.woocommerce-account .wp-shop .select2-container .select2-selection__rendered { padding: 0 !important; line-height: 26px !important; color: var(--ink) !important; } body.woocommerce-account .wp-shop .select2-container .select2-selection__arrow { height: 48px !important; } body.woocommerce-account .wp-shop form em, body.woocommerce-account .wp-shop form #account_display_name_description { font-style: normal; font-size: .8rem; color: var(--muted); } body.woocommerce-account .wp-shop form fieldset { grid-column: 1 / -1; display: grid; gap: 22px; margin: 18px 0 0; padding: 28px 0 0; border: 0; border-top: 1px solid var(--line); } body.woocommerce-account .wp-shop form fieldset legend { float: left; width: 100%; margin: 0 0 4px; padding: 0; font-family: var(--serif); font-weight: 300; font-size: 1.45rem; letter-spacing: -.015em; color: var(--ink); } body.woocommerce-account .wp-shop form .password-input { position: relative; display: block; } body.woocommerce-account .wp-shop form .show-password-input { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; padding: 0 !important; background: none !important; border: 0 !important; opacity: .55; } body.woocommerce-account .wp-shop form .show-password-input:hover { opacity: 1; } body.woocommerce-account .wp-shop form > p:last-of-type, body.woocommerce-account .wp-shop form .woocommerce-form-row:has(> button), body.woocommerce-account .wp-shop form > p:has(> button) { grid-column: 1 / -1; } body.woocommerce-account .wp-shop form button[type=submit], body.woocommerce-account .wp-shop form .button { justify-self: start; display: inline-flex !important; align-items: center !important; justify-content: center; min-height: 52px !important; padding: 0 32px !important; line-height: 1 !important; margin: 8px 0 0 !important; } body.woocommerce-account .wp-shop form .woocommerce-form-login__rememberme { display: inline-flex; gap: 10px; align-items: center; text-transform: none !important; letter-spacing: 0 !important; font-size: .9rem !important; margin: 0 0 4px; } body.woocommerce-account .wp-shop form .woocommerce-form-login__rememberme input { width: 18px; height: 18px; accent-color: var(--ink); } body.woocommerce-account .wp-shop .lost_password { grid-column: 1 / -1; margin: 0; } body.woocommerce-account .wp-shop .lost_password a { font-size: .85rem; text-decoration: underline; text-underline-offset: 3px; } body.woocommerce-account .wp-shop .woocommerce-privacy-policy-text { grid-column: 1 / -1; font-size: .82rem; color: var(--muted); } /* sin sesión: acceso y registro en dos columnas */ body.woocommerce-account:not(.logged-in) .wp-shop > .woocommerce { display: block; } body.woocommerce-account .wp-shop .u-columns.col2-set { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px clamp(40px, 6vw, 112px); max-width: 1080px; } body.woocommerce-account .wp-shop .u-columns.col2-set::before, body.woocommerce-account .wp-shop .u-columns.col2-set::after { display: none; } body.woocommerce-account .wp-shop .u-columns .col-1, body.woocommerce-account .wp-shop .u-columns .col-2 { width: auto; float: none; } body.woocommerce-account .wp-shop .u-columns h2 { font-family: var(--serif); font-weight: 300; font-size: var(--t-h3); margin: 0 0 24px; } body.woocommerce-account .wp-shop form.login, body.woocommerce-account .wp-shop form.register, body.woocommerce-account .wp-shop form.lost_reset_password { grid-template-columns: 1fr; } @media (max-width: 1100px) { .acc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 860px) { body.woocommerce-account .wp-shop > .woocommerce { grid-template-columns: 1fr; } body.woocommerce-account .woocommerce-MyAccount-navigation { position: static; grid-column: 1; grid-row: 1; } body.woocommerce-account .woocommerce-MyAccount-content { grid-column: 1; grid-row: 2; } body.woocommerce-account .woocommerce-MyAccount-navigation ul { display: flex; overflow-x: auto; gap: 8px; border: 0; padding-bottom: 4px; scrollbar-width: none; } body.woocommerce-account .woocommerce-MyAccount-navigation li { border: 0; flex: none; } body.woocommerce-account .woocommerce-MyAccount-navigation a { padding: 10px 16px; border: 1px solid var(--line-strong); font-family: var(--sans); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; } body.woocommerce-account .woocommerce-MyAccount-navigation a::after { display: none; } body.woocommerce-account .woocommerce-MyAccount-navigation a:hover { padding-left: 16px; } body.woocommerce-account .woocommerce-MyAccount-navigation .is-active a { background: var(--ink); color: var(--white); border-color: var(--ink); } body.woocommerce-account .wp-shop .u-columns.col2-set, body.woocommerce-account .woocommerce-Addresses { grid-template-columns: 1fr; } } @media (max-width: 560px) { /* minmax(0, 1fr): las dos columnas iguales aunque una palabra larga («Facturación») no quepa */ .acc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .acc-card { min-width: 0; } .acc-card .label { letter-spacing: .12em; overflow-wrap: anywhere; } .acc-card { min-height: 160px; padding: 18px 16px 46px; } .acc-card-go { left: 16px; } .acc-card-num { font-size: 2.1rem; } .acc-card-t { font-size: 1.1rem; } .acc-list a { grid-template-columns: minmax(0, 1fr) auto; } .acc-list .acc-status { grid-column: 1; grid-row: 2; justify-self: start; } .acc-list-total { grid-row: 1; grid-column: 2; } body.woocommerce-account .woocommerce-MyAccount-content form, body.woocommerce-account .woocommerce-address-fields__field-wrapper { grid-template-columns: 1fr; } body.woocommerce-account .wp-shop form .form-row-first, body.woocommerce-account .wp-shop form .form-row-last { grid-column: 1 / -1; } /* tabla de pedidos como tarjetas */ body.woocommerce-account table.woocommerce-orders-table thead { display: none; } body.woocommerce-account table.woocommerce-orders-table, body.woocommerce-account table.woocommerce-orders-table tbody { display: block; } body.woocommerce-account table.woocommerce-orders-table tr { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 18px 0; border-bottom: 1px solid var(--line); } body.woocommerce-account table.woocommerce-orders-table tbody th, body.woocommerce-account table.woocommerce-orders-table tbody td { display: block; padding: 0 !important; border: 0 !important; text-align: left !important; } body.woocommerce-account table.woocommerce-orders-table td::before { display: none !important; } body.woocommerce-account .woocommerce-orders-table__cell-order-actions { grid-column: 1 / -1; } body.woocommerce-account .woocommerce-orders-table__cell-order-actions .button { margin: 8px 0 0 !important; } } /* ---------- tienda y categorías de WooCommerce (rejilla de tarjetas del diseño) */ .wp-shop .woocommerce-result-count { margin: 0; font-size: .82rem; letter-spacing: .04em; color: var(--muted); } .wp-shop .woocommerce-ordering { margin: 0 0 32px; float: right; } .wp-shop .woocommerce-ordering select { min-height: 44px; padding: 8px 36px 8px 14px; font-size: .9rem; } .wp-shop ul.products { clear: both; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 24px; margin: 24px 0 0 !important; padding: 0; list-style: none; } .wp-shop ul.products::before, .wp-shop ul.products::after { display: none !important; } .wp-shop ul.products li.product { width: auto !important; float: none !important; margin: 0 !important; padding: 0 !important; display: flex; flex-direction: column; gap: 12px; position: relative; text-align: left; } .wp-shop ul.products li.product a.woocommerce-LoopProduct-link { display: flex; flex-direction: column; gap: 12px; text-decoration: none !important; flex: 1; } .wp-shop ul.products li.product img { width: 100% !important; aspect-ratio: 4 / 5; object-fit: cover; margin: 0 !important; background: var(--linen); transition: transform 1s var(--ease); } .wp-shop ul.products li.product:hover img { transform: scale(1.02); } .wp-shop ul.products li.product .woocommerce-loop-product__title { margin: 4px 0 0 !important; padding: 0 !important; font-family: var(--serif) !important; font-weight: 300 !important; font-size: 1.15rem !important; line-height: 1.25 !important; letter-spacing: -.01em; color: var(--ink); } .wp-shop ul.products li.product .price { margin: 0 !important; display: flex; gap: 10px; align-items: baseline; font-size: 1rem !important; color: var(--ink) !important; } .wp-shop .price del { color: var(--muted) !important; opacity: 1 !important; font-size: .88em; } .wp-shop .price ins { text-decoration: none !important; font-weight: 500 !important; background: none !important; color: var(--ink) !important; } .wp-shop span.onsale { position: absolute !important; top: 12px !important; left: 12px !important; right: auto !important; z-index: 2; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 7px 10px !important; border-radius: 0 !important; background: var(--ink) !important; color: var(--white) !important; font-size: .64rem !important; font-weight: 500 !important; letter-spacing: .16em; line-height: 1 !important; text-transform: uppercase; } .wp-shop ul.products li.product .button, .wp-shop .single_add_to_cart_button, .wp-shop a.added_to_cart { display: flex !important; align-items: center !important; justify-content: center !important; width: 100%; min-height: 46px !important; margin: 4px 0 0 !important; padding: 0 16px !important; line-height: 1.2 !important; text-align: center; white-space: normal; } .wp-shop a.added_to_cart { background: transparent !important; color: var(--ink) !important; border: 1px solid var(--ink) !important; font-size: .7rem !important; letter-spacing: .16em; text-transform: uppercase; text-decoration: none !important; } .wp-shop .woocommerce-pagination ul { display: flex; gap: 8px; border: 0 !important; justify-content: center; margin-top: 48px !important; } .wp-shop .woocommerce-pagination ul li { border: 0 !important; } .wp-shop .woocommerce-pagination ul li a, .wp-shop .woocommerce-pagination ul li span { min-width: 40px; min-height: 40px; display: grid !important; place-items: center; border: 1px solid var(--line-strong); } .wp-shop .woocommerce-pagination ul li span.current { background: var(--ink) !important; color: var(--white) !important; border-color: var(--ink); } /* ficha de producto */ .wp-shop div.product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px clamp(32px, 5vw, 80px); align-items: start; } .wp-shop div.product .woocommerce-product-gallery, .wp-shop div.product .summary { width: auto !important; float: none !important; margin: 0 !important; } .wp-shop div.product .product_title { font-family: var(--serif); font-weight: 300; font-size: var(--t-h2); line-height: 1.05; } .wp-shop div.product p.price { font-size: 1.4rem !important; color: var(--ink) !important; } .wp-shop div.product form.cart { display: flex; gap: 12px; align-items: stretch; margin: 24px 0 !important; } .wp-shop div.product form.cart .single_add_to_cart_button { width: auto; flex: 1; } .wp-shop div.product .woocommerce-tabs, .wp-shop div.product .related, .wp-shop div.product .upsells { grid-column: 1 / -1; } @media (max-width: 1000px) { .wp-shop ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 760px) { .wp-shop ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 14px; } .wp-shop .woocommerce-ordering { float: none; margin: 12px 0 0; } .wp-shop div.product { grid-template-columns: 1fr; } } .post-type-archive-product .wp-content, .tax-product_cat .wp-content, .tax-product_tag .wp-content, .single-product .wp-content { max-width: none; } /* el resumen gana a los estilos genéricos del contenido de la cuenta */ body.woocommerce-account .woocommerce-MyAccount-content .acc-hello .h2 { font-size: var(--t-h2); margin: 0; } body.woocommerce-account .woocommerce-MyAccount-content .acc-hello .lead { font-size: var(--t-lead); } body.woocommerce-account .woocommerce-MyAccount-content .acc-card-num { font-size: 2.6rem; } body.woocommerce-account .woocommerce-MyAccount-content .acc-card-t { font-size: 1.3rem; } body.woocommerce-account .woocommerce-MyAccount-content .acc-card .small { font-size: .85rem; } body.woocommerce-account .woocommerce-MyAccount-content .acc-cta .h3 { font-size: var(--t-h3); } @media (max-width: 560px) { body.woocommerce-account .woocommerce-MyAccount-content .acc-card-num { font-size: 2.1rem; } body.woocommerce-account .woocommerce-MyAccount-content .acc-card-t { font-size: 1.1rem; } } body.woocommerce-account .woocommerce-MyAccount-content .acc-cta .h3, body.woocommerce-account .woocommerce-MyAccount-content .acc-cta em { color: var(--white); } body.woocommerce-account .woocommerce-MyAccount-content .acc-cta .label { color: var(--on-dark-muted); } body.woocommerce-account table.order_details thead th:last-child { text-align: right; } @media (max-width: 860px) { body.woocommerce-account .wp-shop > .woocommerce { grid-template-columns: minmax(0, 1fr); } body.woocommerce-account .woocommerce-MyAccount-navigation { min-width: 0; } } /* bloques de plugins en el resumen (p. ej. «Mis tarjetas» de PAYCOMET) */ body.woocommerce-account .acc-extra h2, body.woocommerce-account .acc-extra h3 { font-size: var(--t-h3) !important; padding-bottom: 14px; margin: 0 0 16px !important; border-bottom: 1px solid var(--line); } body.woocommerce-account .acc-extra .button, body.woocommerce-account .acc-extra a.button { display: inline-flex !important; align-items: center !important; justify-content: center; min-height: 46px !important; padding: 0 22px !important; line-height: 1 !important; } /* «Mis tarjetas» de PAYCOMET: su botón lleva el texto en un con un icono y el aviso PCI va en un