.elementor-3703 .elementor-element.elementor-element-a2c3425{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--gap:0px 0px;--background-transition:0.3s;--padding-block-start:80px;--padding-block-end:0px;--padding-inline-start:0px;--padding-inline-end:0px;}.elementor-3703 .elementor-element.elementor-element-b885cc5{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--gap:0px 0px;--background-transition:0.3s;--padding-block-start:30px;--padding-block-end:30px;--padding-inline-start:30px;--padding-inline-end:30px;}.elementor-3703 .elementor-element.elementor-element-b885cc5.e-con{--align-self:flex-start;}.elementor-3703 .elementor-element.elementor-element-f676cc9{text-align:left;}.elementor-3703 .elementor-element.elementor-element-f676cc9 .elementor-heading-title{color:#FFFFFF;font-family:"Sahitya", Sans-serif;font-size:40px;font-weight:600;text-transform:uppercase;line-height:45px;letter-spacing:4px;word-spacing:6px;}.elementor-3703 .elementor-element.elementor-element-f676cc9 > .elementor-widget-container{margin:0px 0px 1px 0px;padding:0px 0px 0px 0px;}.elementor-3703 .elementor-element.elementor-element-f676cc9.elementor-element{--align-self:flex-start;--flex-grow:1;--flex-shrink:0;}.elementor-3703 .elementor-element.elementor-element-ab8f46c{--display:flex;--min-height:196px;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--background-transition:0.3s;}@media(max-width:1024px){.elementor-3703 .elementor-element.elementor-element-b885cc5{--gap:0px 0px;--padding-block-start:10px;--padding-block-end:10px;--padding-inline-start:10px;--padding-inline-end:10px;}.elementor-3703 .elementor-element.elementor-element-f676cc9 .elementor-heading-title{font-size:42px;}}@media(min-width:768px){.elementor-3703 .elementor-element.elementor-element-a2c3425{--width:70%;}}@media(max-width:1024px) and (min-width:768px){.elementor-3703 .elementor-element.elementor-element-a2c3425{--width:80%;}}@media(max-width:767px){.elementor-3703 .elementor-element.elementor-element-a2c3425{--padding-block-start:090px;--padding-block-end:0px;--padding-inline-start:0px;--padding-inline-end:0px;}.elementor-3703 .elementor-element.elementor-element-b885cc5{--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--padding-block-start:20px;--padding-block-end:20px;--padding-inline-start:20px;--padding-inline-end:20px;}.elementor-3703 .elementor-element.elementor-element-f676cc9 .elementor-heading-title{font-size:36px;line-height:39px;}}/* Start custom CSS for heading, class: .elementor-element-f676cc9 */body{ background-color: black !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-b885cc5 *//* ========================================================= RARE — MI CUENTA PASO 2 — ESTRUCTURA BASE CORREGIDA ========================================================= */ /* ----------------------------------------- CONTENEDOR GENERAL DE WOO ----------------------------------------- */ .rare-account .woocommerce { display: flex !important; align-items: flex-start !important; gap: 70px !important; width: 100% !important; max-width: none !important; margin: 0 !important; } /* ========================================================= NAVEGACIÓN — IZQUIERDA ========================================================= */ .rare-account .woocommerce-MyAccount-navigation { float: none !important; flex: 0 0 230px !important; width: 230px !important; max-width: 230px !important; margin: 0 !important; padding: 0 !important; order: 1 !important; } /* LISTA */ .rare-account .woocommerce-MyAccount-navigation ul { width: 100% !important; margin: 0 !important; padding: 0 !important; list-style: none !important; border: 0 !important; } /* ELEMENTOS */ .rare-account .woocommerce-MyAccount-navigation li { width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid #444 !important; } .rare-account .woocommerce-MyAccount-navigation li:first-child { border-top: 1px solid #444 !important; } /* LINKS */ .rare-account .woocommerce-MyAccount-navigation li a { display: block !important; width: 100% !important; padding: 17px 0 !important; background: transparent !important; color: #fff !important; font-family: "Sahitya", serif !important; font-size: 17px !important; font-weight: 400 !important; line-height: 1.2 !important; text-decoration: none !important; border: 0 !important; } /* ACTIVO */ .rare-account .woocommerce-MyAccount-navigation li.is-active a { color: #fff !important; background: transparent !important; font-weight: 600 !important; } /* HOVER — SIN LILA, SIN MOVIMIENTO */ .rare-account .woocommerce-MyAccount-navigation li a:hover, .rare-account .woocommerce-MyAccount-navigation li a:focus, .rare-account .woocommerce-MyAccount-navigation li a:visited { color: #fff !important; background: transparent !important; } /* ========================================================= CONTENIDO — DERECHA ========================================================= */ .rare-account .woocommerce-MyAccount-content { float: none !important; flex: 1 1 auto !important; width: auto !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; order: 2 !important; color: #fff !important; } /* TEXTO GENERAL */ .rare-account .woocommerce-MyAccount-content p { max-width: 650px; margin-top: 0; color: #aaa !important; font-family: "Sahitya", serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1.6 !important; } /* LINKS INTERNOS */ .rare-account .woocommerce-MyAccount-content a, .rare-account .woocommerce-MyAccount-content a:visited { color: #fff !important; text-decoration: none !important; } /* ========================================================= LIMPIEZA DE FLOATS DE WOOCOMMERCE / ASTRA ========================================================= */ .rare-account .woocommerce::before, .rare-account .woocommerce::after { display: none !important; content: none !important; } .rare-account .woocommerce-MyAccount-navigation::before, .rare-account .woocommerce-MyAccount-navigation::after, .rare-account .woocommerce-MyAccount-content::before, .rare-account .woocommerce-MyAccount-content::after { display: none !important; content: none !important; } /* ========================================================= MÓVIL ========================================================= */ @media (max-width: 767px) { .rare-account .woocommerce { display: block !important; } .rare-account .woocommerce-MyAccount-navigation { width: 100% !important; max-width: none !important; margin-bottom: 40px !important; } .rare-account .woocommerce-MyAccount-content { width: 100% !important; } } /* ========================================= RARE — MENÚ MI CUENTA ========================================= */ .rare-account .woocommerce-MyAccount-navigation li a { text-transform: uppercase; letter-spacing: .02em; } /* ========================================= RARE — BIENVENIDA ========================================= */ .rare-account-welcome { width: 100%; max-width: 620px; padding-bottom: 32px; border-bottom: 1px solid #444; } .rare-account-welcome h2 { margin: 0 0 8px !important; color: #fff !important; font-family: "Sahitya", serif !important; font-size: 27px !important; font-weight: 400 !important; line-height: 1.15 !important; } .rare-account-welcome p { margin: 0 !important; color: #aaa !important; font-family: "Sahitya", serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1.5 !important; } /* ========================================================== RARE — MI CUENTA / PEDIDOS LISTADO + DETALLE + AVISOS ========================================================== */ /* ========================================================== A. AVISOS DE PEDIDOS ========================================================== */ .rare-account .woocommerce-info, .rare-account .woocommerce-message, .rare-account .woocommerce-error { position: relative !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 30px !important; width: 100% !important; margin: 0 0 30px !important; padding: 18px 0 !important; background: transparent !important; color: #aaa !important; border: 0 !important; border-top: 1px solid #444 !important; border-bottom: 1px solid #444 !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Sahitya", serif !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1.45 !important; } /* Quitar iconos / líneas default Woo */ .rare-account .woocommerce-info::before, .rare-account .woocommerce-message::before, .rare-account .woocommerce-error::before { display: none !important; content: none !important; } /* CTA dentro de avisos */ .rare-account .woocommerce-info .button, .rare-account .woocommerce-message .button, .rare-account .woocommerce-error .button { order: 2 !important; float: none !important; flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; background: transparent !important; color: #A78FBA !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Sahitya", serif !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1 !important; text-transform: uppercase !important; letter-spacing: .04em !important; text-decoration: none !important; white-space: nowrap !important; transition: color .18s ease !important; } .rare-account .woocommerce-info .button::after, .rare-account .woocommerce-message .button::after, .rare-account .woocommerce-error .button::after { content: " ⟶"; } .rare-account .woocommerce-info .button:hover, .rare-account .woocommerce-message .button:hover, .rare-account .woocommerce-error .button:hover { background: transparent !important; color: #fff !important; opacity: 1 !important; transform: none !important; } /* ========================================================== B. TABLA — LISTADO DE PEDIDOS ========================================================== */ .rare-account .woocommerce-orders-table { width: 100% !important; margin: 0 !important; background: transparent !important; border: 0 !important; border-collapse: collapse !important; border-spacing: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Sahitya", serif !important; } /* CABECERA */ .rare-account .woocommerce-orders-table thead, .rare-account .woocommerce-orders-table thead tr, .rare-account .woocommerce-orders-table thead th { background: transparent !important; color: #888 !important; border: 0 !important; } .rare-account .woocommerce-orders-table thead th { padding: 0 14px 13px !important; border-bottom: 1px solid #555 !important; font-family: "Sahitya", serif !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.2 !important; text-transform: uppercase !important; letter-spacing: .055em !important; text-align: left !important; } /* Primera columna sin sangría */ .rare-account .woocommerce-orders-table thead th:first-child, .rare-account .woocommerce-orders-table tbody td:first-child { padding-left: 0 !important; } /* Última columna */ .rare-account .woocommerce-orders-table thead th:last-child, .rare-account .woocommerce-orders-table tbody td:last-child { padding-right: 0 !important; text-align: right !important; } /* FILAS */ .rare-account .woocommerce-orders-table tbody, .rare-account .woocommerce-orders-table tbody tr, .rare-account .woocommerce-orders-table tbody td { background: transparent !important; } .rare-account .woocommerce-orders-table tbody td { padding: 20px 14px !important; color: #ddd !important; border: 0 !important; border-bottom: 1px solid #444 !important; font-family: "Sahitya", serif !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1.35 !important; vertical-align: middle !important; } /* Número de pedido */ .rare-account .woocommerce-orders-table .woocommerce-orders-table__cell-order-number a { color: #A78FBA !important; text-decoration: none !important; } .rare-account .woocommerce-orders-table .woocommerce-orders-table__cell-order-number a:hover { color: #fff !important; } /* ========================================================== C. BOTÓN VER ========================================================== */ .rare-account .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button, .rare-account .woocommerce-orders-table a.woocommerce-button.button.view { margin: 0 !important; padding: 0 !important; background: transparent !important; color: #A78FBA !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; outline: none !important; font-family: "Sahitya", serif !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1 !important; text-transform: uppercase !important; letter-spacing: .04em !important; text-decoration: none !important; transition: color .18s ease !important; } .rare-account .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button::after, .rare-account .woocommerce-orders-table a.woocommerce-button.button.view::after { content: " ⟶"; } .rare-account .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button:hover, .rare-account .woocommerce-orders-table a.woocommerce-button.button.view:hover { background: transparent !important; color: #fff !important; transform: none !important; } /* ========================================================== D. DETALLE DEL PEDIDO ========================================================== */ .rare-account .woocommerce-order-details { width: 100% !important; margin: 30px 0 38px !important; } /* Título */ .rare-account .woocommerce-order-details__title { margin: 0 0 20px !important; padding: 0 !important; color: #fff !important; font-family: "Sahitya", serif !important; font-size: 19px !important; font-weight: 400 !important; line-height: 1.2 !important; text-transform: uppercase !important; letter-spacing: .05em !important; } /* ========================================================== E. TABLA DETALLE DEL PEDIDO ========================================================== */ .rare-account .woocommerce-order-details table.woocommerce-table--order-details { width: 100% !important; margin: 0 !important; background: transparent !important; border: 0 !important; border-collapse: collapse !important; border-radius: 0 !important; box-shadow: none !important; } /* Cabecera */ .rare-account .woocommerce-order-details table.woocommerce-table--order-details thead, .rare-account .woocommerce-order-details table.woocommerce-table--order-details thead tr, .rare-account .woocommerce-order-details table.woocommerce-table--order-details thead th { background: transparent !important; color: #888 !important; } .rare-account .woocommerce-order-details table.woocommerce-table--order-details thead th { padding: 0 0 13px !important; border: 0 !important; border-bottom: 1px solid #555 !important; font-family: "Sahitya", serif !important; font-size: 12px !important; font-weight: 400 !important; text-transform: uppercase !important; letter-spacing: .055em !important; text-align: left !important; } /* Celdas */ .rare-account .woocommerce-order-details table.woocommerce-table--order-details tbody td, .rare-account .woocommerce-order-details table.woocommerce-table--order-details tfoot th, .rare-account .woocommerce-order-details table.woocommerce-table--order-details tfoot td { background: transparent !important; color: #ddd !important; border: 0 !important; border-bottom: 1px solid #444 !important; padding: 16px 0 !important; font-family: "Sahitya", serif !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1.45 !important; } /* Columna precio */ .rare-account .woocommerce-order-details table.woocommerce-table--order-details th:last-child, .rare-account .woocommerce-order-details table.woocommerce-table--order-details td:last-child { text-align: right !important; } /* Nombre producto */ .rare-account .woocommerce-order-details .woocommerce-table__product-name > a { color: #A78FBA !important; font-size: 16px !important; text-decoration: none !important; } .rare-account .woocommerce-order-details .woocommerce-table__product-name > a:hover { color: #fff !important; } /* ========================================================== F. ATRIBUTOS DEL PRODUCTO ========================================================== */ .rare-account .woocommerce-order-details .wc-item-meta { margin: 12px 0 0 !important; padding: 0 !important; list-style: none !important; } .rare-account .woocommerce-order-details .wc-item-meta li { margin: 0 0 4px !important; padding: 0 !important; color: #aaa !important; font-family: "Sahitya", serif !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.45 !important; } .rare-account .woocommerce-order-details .wc-item-meta strong, .rare-account .woocommerce-order-details .wc-item-meta-label { color: #ddd !important; font-weight: 400 !important; } /* ========================================================== G. ARCHIVO ADJUNTO Ocultar UUID largo ========================================================== */ .rare-account .woocommerce-order-details .wc-item-meta a { display: inline-block !important; color: transparent !important; font-size: 0 !important; text-decoration: none !important; } .rare-account .woocommerce-order-details .wc-item-meta a::after { content: "VER ARCHIVO ↗"; color: #A78FBA !important; font-family: "Sahitya", serif !important; font-size: 13px !important; font-weight: 400 !important; letter-spacing: .025em !important; } .rare-account .woocommerce-order-details .wc-item-meta a:hover::after { color: #fff !important; } /* ========================================================== H. RESUMEN SUPERIOR DEL PEDIDO ========================================================== */ .rare-account .woocommerce-MyAccount-content p.order-info { max-width: none !important; margin: 0 0 28px !important; padding: 0 0 18px !important; color: #aaa !important; border-bottom: 1px solid #444 !important; font-family: "Sahitya", serif !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1.5 !important; } .rare-account .woocommerce-MyAccount-content mark.order-number, .rare-account .woocommerce-MyAccount-content mark.order-date, .rare-account .woocommerce-MyAccount-content mark.order-status { padding: 0 !important; background: transparent !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-family: inherit !important; font-size: inherit !important; font-weight: 400 !important; line-height: inherit !important; opacity: 1 !important; text-decoration: none !important; box-shadow: none !important; } /* ========================================================== I. DIRECCIONES DENTRO DEL DETALLE ========================================================== */ .rare-account .woocommerce-customer-details { margin: 34px 0 0 !important; } .rare-account .woocommerce-customer-details .woocommerce-columns { display: flex !important; gap: 34px !important; margin: 0 !important; } .rare-account .woocommerce-customer-details .woocommerce-column { float: none !important; flex: 1 1 0 !important; width: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; } /* Títulos */ .rare-account .woocommerce-customer-details .woocommerce-column__title { margin: 0 !important; padding: 0 0 14px !important; background: transparent !important; color: #fff !important; border: 0 !important; border-bottom: 1px solid #555 !important; font-family: "Sahitya", serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1.2 !important; text-transform: uppercase !important; letter-spacing: .04em !important; } /* Dirección */ .rare-account .woocommerce-customer-details address { margin: 0 !important; padding: 20px 0 !important; background: transparent !important; color: #aaa !important; border: 0 !important; border-bottom: 1px solid #444 !important; font-family: "Sahitya", serif !important; font-size: 15px !important; font-weight: 400 !important; font-style: normal !important; line-height: 1.55 !important; box-shadow: none !important; } /* Teléfono / correo */ .rare-account .woocommerce-customer-details address p { margin: 5px 0 0 !important; color: #aaa !important; font-size: 15px !important; } /* ========================================================== J. MOBILE ========================================================== */ @media (max-width: 767px) { .rare-account .woocommerce-info, .rare-account .woocommerce-message, .rare-account .woocommerce-error { display: block !important; padding: 18px 0 !important; } .rare-account .woocommerce-info .button, .rare-account .woocommerce-message .button, .rare-account .woocommerce-error .button { display: block !important; margin-top: 12px !important; } .rare-account .woocommerce-orders-table thead { display: none !important; } .rare-account .woocommerce-orders-table, .rare-account .woocommerce-orders-table tbody, .rare-account .woocommerce-orders-table tr, .rare-account .woocommerce-orders-table td { display: block !important; width: 100% !important; } .rare-account .woocommerce-orders-table tbody tr { margin-bottom: 30px !important; border-top: 1px solid #555 !important; } .rare-account .woocommerce-orders-table tbody td { display: flex !important; justify-content: space-between !important; gap: 20px !important; padding: 13px 0 !important; text-align: right !important; } .rare-account .woocommerce-orders-table tbody td::before { color: #888 !important; font-family: "Sahitya", serif !important; text-transform: uppercase !important; letter-spacing: .04em !important; } .rare-account .woocommerce-customer-details .woocommerce-columns { display: block !important; } .rare-account .woocommerce-customer-details .woocommerce-column { width: 100% !important; margin-bottom: 34px !important; } } /* ========================================================== RARE — MI CUENTA SESIÓN CERRADA / LOGIN — FINAL ========================================================== */ /* ---------------------------------------------------------- CONTENEDOR GENERAL ---------------------------------------------------------- */ .rare-account .woocommerce-form-login { width: 100% !important; max-width: 560px !important; margin: 0 auto !important; padding: 34px 0 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* ---------------------------------------------------------- TÍTULO ACCEDER ---------------------------------------------------------- */ .rare-account .woocommerce h2 { margin: 0 0 42px !important; padding: 0 !important; color: #fff !important; font-family: "Sahitya", serif !important; font-size: 18px !important; font-weight: 400 !important; line-height: 1 !important; text-transform: uppercase !important; letter-spacing: .05em !important; text-align: center !important; } /* ---------------------------------------------------------- FILAS ---------------------------------------------------------- */ .rare-account .woocommerce-form-login .form-row { float: none !important; width: 100% !important; margin: 0 0 31px !important; padding: 0 !important; background: transparent !important; } /* ---------------------------------------------------------- LABELS ---------------------------------------------------------- */ .rare-account .woocommerce-form-login label { display: block !important; margin: 0 0 9px !important; color: #ddd !important; font-family: "Sahitya", serif !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1.2 !important; } /* Asteriscos */ .rare-account .woocommerce-form-login .required { color: #ddd !important; opacity: .8 !important; } /* ---------------------------------------------------------- INPUTS ---------------------------------------------------------- */ .rare-account .woocommerce-form-login input[type="text"], .rare-account .woocommerce-form-login input[type="email"], .rare-account .woocommerce-form-login input[type="password"] { width: 100% !important; height: 44px !important; margin: 0 !important; padding: 8px 42px 10px 2px !important; background: transparent !important; color: #fff !important; border: 0 !important; border-bottom: 1px solid #666 !important; border-radius: 0 !important; outline: none !important; box-shadow: none !important; font-family: "Sahitya", serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1.4 !important; transition: border-color .18s ease !important; } /* Focus */ .rare-account .woocommerce-form-login input[type="text"]:focus, .rare-account .woocommerce-form-login input[type="email"]:focus, .rare-account .woocommerce-form-login input[type="password"]:focus { border-bottom-color: #fff !important; outline: none !important; box-shadow: none !important; } /* ---------------------------------------------------------- AUTOFILL Quita el amarillo/crema del navegador ---------------------------------------------------------- */ .rare-account .woocommerce-form-login input:-webkit-autofill, .rare-account .woocommerce-form-login input:-webkit-autofill:hover, .rare-account .woocommerce-form-login input:-webkit-autofill:focus { -webkit-text-fill-color: #fff !important; -webkit-box-shadow: 0 0 0 1000px #000 inset !important; caret-color: #fff !important; transition: background-color 9999s ease-out 0s !important; } /* ---------------------------------------------------------- CONTRASEÑA / OJO ---------------------------------------------------------- */ .rare-account .woocommerce-form-login .password-input { position: relative !important; display: block !important; } .rare-account .woocommerce-form-login .show-password-input { position: absolute !important; top: 50% !important; right: 7px !important; margin: 0 !important; color: #fff !important; opacity: .7 !important; transform: translateY(-50%) !important; background: transparent !important; border: 0 !important; font-size: 14px !important; } .rare-account .woocommerce-form-login .show-password-input::after { color: #fff !important; } .rare-account .woocommerce-form-login .show-password-input:hover { opacity: 1 !important; transform: translateY(-50%) !important; } /* ---------------------------------------------------------- FILA RECUÉRDAME + BOTÓN ---------------------------------------------------------- */ .rare-account .woocommerce-form-login .form-row:nth-last-of-type(1) { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 24px !important; margin: 4px 0 0 !important; } /* Recuérdame */ .rare-account .woocommerce-form-login__rememberme { display: inline-flex !important; align-items: center !important; gap: 8px !important; margin: 0 !important; color: #aaa !important; font-family: "Sahitya", serif !important; font-size: 15px !important; font-weight: 400 !important; white-space: nowrap !important; } /* Checkbox */ .rare-account .woocommerce-form-login__rememberme input[type="checkbox"] { appearance: none !important; -webkit-appearance: none !important; flex: 0 0 15px !important; width: 15px !important; height: 15px !important; margin: 0 !important; background: transparent !important; border: 1px solid #777 !important; border-radius: 0 !important; cursor: pointer !important; } .rare-account .woocommerce-form-login__rememberme input[type="checkbox"]:checked { background: linear-gradient(#fff, #fff) center / 7px 7px no-repeat !important; } /* ---------------------------------------------------------- BOTÓN ACCEDER ---------------------------------------------------------- */ .rare-account .woocommerce-form-login .woocommerce-button { float: none !important; width: auto !important; min-width: 120px !important; margin: 0 0 0 auto !important; padding: 11px 22px 9px !important; background: #000 !important; color: #fff !important; border: 2px solid #fff !important; border-radius: 0 !important; outline: none !important; box-shadow: none !important; font-family: "Sahitya", serif !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1 !important; text-transform: uppercase !important; letter-spacing: .06em !important; text-decoration: none !important; cursor: pointer !important; transition: background-color .18s ease, color .18s ease !important; } /* Quitar cualquier flecha vieja */ .rare-account .woocommerce-form-login .woocommerce-button::after { content: none !important; } /* Hover invertido */ .rare-account .woocommerce-form-login .woocommerce-button:hover, .rare-account .woocommerce-form-login .woocommerce-button:focus { background: #fff !important; color: #000 !important; border-color: #fff !important; opacity: 1 !important; transform: none !important; } /* ---------------------------------------------------------- OLVIDASTE LA CONTRASEÑA ---------------------------------------------------------- */ .rare-account .woocommerce-LostPassword { width: 100% !important; margin: 28px 0 0 !important; text-align: center !important; } .rare-account .woocommerce-LostPassword a, .rare-account .woocommerce-LostPassword a:visited { color: #A78FBA !important; font-family: "Sahitya", serif !important; font-size: 15px !important; font-weight: 400 !important; text-decoration: none !important; transition: color .18s ease !important; } .rare-account .woocommerce-LostPassword a:hover, .rare-account .woocommerce-LostPassword a:focus { color: #fff !important; text-decoration: none !important; } /* ---------------------------------------------------------- LIMPIEZA WOO ---------------------------------------------------------- */ .rare-account .woocommerce-form-login::before, .rare-account .woocommerce-form-login::after { display: none !important; content: none !important; } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 767px) { .rare-account .woocommerce-form-login { max-width: none !important; padding-top: 24px !important; } .rare-account .woocommerce h2 { margin-bottom: 34px !important; font-size: 17px !important; } .rare-account .woocommerce-form-login .form-row:nth-last-of-type(1) { align-items: center !important; gap: 16px !important; } .rare-account .woocommerce-form-login .woocommerce-button { min-width: 110px !important; padding: 10px 17px 8px !important; } } /* ========================================================== RARE — MI CUENTA / DIRECCIONES VISTA + AGREGAR / EDITAR DIRECCIÓN ========================================================== */ /* ========================================================== A. VISTA GENERAL DE DIRECCIONES ========================================================== */ /* TEXTO INTRODUCTORIO */ .rare-account .woocommerce-MyAccount-content > p:first-child { max-width: 760px !important; margin: 0 0 34px !important; color: #aaa !important; font-family: "Sahitya", serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1.5 !important; } /* ---------------------------------------------------------- CONTENEDOR DE LAS DOS DIRECCIONES ---------------------------------------------------------- */ .rare-account .woocommerce-Addresses { display: flex !important; flex-direction: row !important; align-items: stretch !important; gap: 34px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; } /* CADA DIRECCIÓN */ .rare-account .woocommerce-Addresses .woocommerce-Address { float: none !important; flex: 1 1 0 !important; width: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* ORDEN CORRECTO */ .rare-account .woocommerce-Addresses .col-1 { order: 1 !important; } .rare-account .woocommerce-Addresses .col-2 { order: 2 !important; } /* ---------------------------------------------------------- CABECERA ---------------------------------------------------------- */ .rare-account .woocommerce-Address-title { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; column-gap: 20px !important; width: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 0 0 15px !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid #555 !important; box-shadow: none !important; } /* TÍTULO */ .rare-account .woocommerce-Address-title h2, .rare-account .woocommerce-Address-title h3 { grid-column: 1 !important; grid-row: 1 !important; justify-self: start !important; float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; background: transparent !important; color: #fff !important; font-family: "Sahitya", serif !important; font-size: 17px !important; font-weight: 400 !important; line-height: 1.15 !important; text-transform: uppercase !important; letter-spacing: .025em !important; } /* ---------------------------------------------------------- LINK AGREGAR / EDITAR ---------------------------------------------------------- */ .rare-account .woocommerce-Address-title a, .rare-account .woocommerce-Address-title a:visited { grid-column: 2 !important; grid-row: 1 !important; justify-self: end !important; position: static !important; float: none !important; display: inline-block !important; width: auto !important; margin: 0 !important; padding: 0 !important; background: transparent !important; color: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; outline: 0 !important; font-size: 0 !important; text-decoration: none !important; white-space: nowrap !important; transition: opacity .15s ease !important; } /* Texto visual corto */ .rare-account .woocommerce-Address-title a::before { content: "AGREGAR ⟶"; color: #A78FBA !important; font-family: "Sahitya", serif !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1 !important; letter-spacing: .04em !important; } /* HOVER */ .rare-account .woocommerce-Address-title a:hover, .rare-account .woocommerce-Address-title a:focus { opacity: .7 !important; transform: none !important; } /* ---------------------------------------------------------- CONTENIDO DE DIRECCIÓN ---------------------------------------------------------- */ .rare-account .woocommerce-Address address { display: block !important; min-height: 108px !important; margin: 0 !important; padding: 22px 0 18px !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid #444 !important; color: #aaa !important; font-family: "Sahitya", serif !important; font-size: 16px !important; font-weight: 400 !important; font-style: normal !important; line-height: 1.5 !important; box-shadow: none !important; } /* ESTADO VACÍO */ .rare-account .woocommerce-Address address em { color: #888 !important; font-family: "Sahitya", serif !important; font-size: 16px !important; font-style: normal !important; font-weight: 400 !important; line-height: 1.5 !important; } /* ---------------------------------------------------------- LIMPIEZA WOO / ASTRA ---------------------------------------------------------- */ .rare-account .woocommerce-Addresses::before, .rare-account .woocommerce-Addresses::after, .rare-account .woocommerce-Address::before, .rare-account .woocommerce-Address::after { display: none !important; content: none !important; } .rare-account .woocommerce-Addresses .col-1, .rare-account .woocommerce-Addresses .col-2 { float: none !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* ========================================================== B. FORMULARIO AGREGAR / EDITAR DIRECCIÓN ========================================================== */ /* ---------------------------------------------------------- TÍTULO DEL FORMULARIO ---------------------------------------------------------- */ .rare-account .woocommerce-MyAccount-content > h2, .rare-account .woocommerce-MyAccount-content > h3, .rare-account .woocommerce-address-fields h2, .rare-account .woocommerce-address-fields h3 { margin: 0 0 36px !important; padding: 0 !important; color: #fff !important; background: transparent !important; font-family: "Sahitya", serif !important; font-size: 19px !important; font-weight: 400 !important; line-height: 1.15 !important; text-transform: uppercase !important; letter-spacing: .05em !important; } /* ---------------------------------------------------------- CONTENEDOR ---------------------------------------------------------- */ .rare-account .woocommerce-address-fields, .rare-account .woocommerce-address-fields__field-wrapper { width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } .rare-account .woocommerce-address-fields__field-wrapper { display: flex !important; flex-wrap: wrap !important; column-gap: 44px !important; } /* ---------------------------------------------------------- FILAS ---------------------------------------------------------- */ .rare-account .woocommerce-address-fields .form-row { float: none !important; width: 100% !important; margin: 0 0 28px !important; padding: 0 !important; background: transparent !important; } /* Nombre + Apellidos */ .rare-account .woocommerce-address-fields .form-row-first, .rare-account .woocommerce-address-fields .form-row-last { width: calc(50% - 22px) !important; } /* ---------------------------------------------------------- LABELS ---------------------------------------------------------- */ .rare-account .woocommerce-address-fields label { display: block !important; margin: 0 0 8px !important; color: #ddd !important; font-family: "Sahitya", serif !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1.2 !important; } /* ASTERISCOS */ .rare-account .woocommerce-address-fields .required { color: #ddd !important; opacity: .8 !important; } /* ---------------------------------------------------------- INPUTS ---------------------------------------------------------- */ .rare-account .woocommerce-address-fields input.input-text, .rare-account .woocommerce-address-fields input[type="text"], .rare-account .woocommerce-address-fields input[type="email"], .rare-account .woocommerce-address-fields input[type="tel"] { width: 100% !important; height: 44px !important; margin: 0 !important; padding: 8px 2px 10px !important; background: transparent !important; color: #fff !important; border: 0 !important; border-bottom: 1px solid #666 !important; border-radius: 0 !important; outline: 0 !important; box-shadow: none !important; font-family: "Sahitya", serif !important; font-size: 16px !important; font-weight: 400 !important; transition: border-color .18s ease !important; } /* FOCUS */ .rare-account .woocommerce-address-fields input.input-text:focus, .rare-account .woocommerce-address-fields input[type="text"]:focus, .rare-account .woocommerce-address-fields input[type="email"]:focus, .rare-account .woocommerce-address-fields input[type="tel"]:focus { border-bottom-color: #fff !important; outline: none !important; box-shadow: none !important; } /* PLACEHOLDER */ .rare-account .woocommerce-address-fields input::placeholder { color: #777 !important; opacity: 1 !important; } /* ---------------------------------------------------------- SELECT NORMAL ---------------------------------------------------------- */ .rare-account .woocommerce-address-fields select { width: 100% !important; height: 44px !important; margin: 0 !important; padding: 8px 32px 9px 2px !important; background-color: transparent !important; color: #fff !important; border: 0 !important; border-bottom: 1px solid #666 !important; border-radius: 0 !important; outline: none !important; box-shadow: none !important; font-family: "Sahitya", serif !important; font-size: 16px !important; appearance: none !important; -webkit-appearance: none !important; } /* ---------------------------------------------------------- SELECT2 DE WOO ---------------------------------------------------------- */ .rare-account .woocommerce-address-fields .select2-container { width: 100% !important; } .rare-account .woocommerce-address-fields .select2-container--default .select2-selection--single { width: 100% !important; height: 44px !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid #666 !important; border-radius: 0 !important; outline: none !important; box-shadow: none !important; } .rare-account .woocommerce-address-fields .select2-container--default .select2-selection--single .select2-selection__rendered { color: #fff !important; padding: 0 32px 0 2px !important; line-height: 43px !important; font-family: "Sahitya", serif !important; font-size: 16px !important; } /* Flecha */ .rare-account .woocommerce-address-fields .select2-container--default .select2-selection--single .select2-selection__arrow { height: 43px !important; right: 3px !important; } /* ---------------------------------------------------------- DROPDOWN SELECT2 ---------------------------------------------------------- */ .select2-dropdown { background: #0a0a0a !important; color: #fff !important; border: 1px solid #555 !important; border-radius: 0 !important; font-family: "Sahitya", serif !important; } .select2-results__option { padding: 9px 12px !important; background: #0a0a0a !important; color: #ddd !important; } .select2-results__option--highlighted, .select2-container--default .select2-results__option--highlighted[aria-selected] { background: #fff !important; color: #000 !important; } .select2-search--dropdown { padding: 8px !important; background: #0a0a0a !important; } .select2-search--dropdown .select2-search__field { background: #000 !important; color: #fff !important; border: 1px solid #555 !important; border-radius: 0 !important; outline: 0 !important; } /* ---------------------------------------------------------- AUTOFILL ---------------------------------------------------------- */ .rare-account .woocommerce-address-fields input:-webkit-autofill, .rare-account .woocommerce-address-fields input:-webkit-autofill:hover, .rare-account .woocommerce-address-fields input:-webkit-autofill:focus { -webkit-text-fill-color: #fff !important; -webkit-box-shadow: 0 0 0 1000px #000 inset !important; caret-color: #fff !important; } /* ---------------------------------------------------------- BOTÓN GUARDAR ---------------------------------------------------------- */ .rare-account .woocommerce-address-fields button.button, .rare-account .woocommerce-address-fields button[type="submit"] { float: right !important; width: auto !important; min-width: 190px !important; margin: 12px 0 0 !important; padding: 11px 22px 9px !important; background: #000 !important; color: #fff !important; border: 2px solid #fff !important; border-radius: 0 !important; outline: none !important; box-shadow: none !important; font-family: "Sahitya", serif !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1 !important; text-transform: uppercase !important; letter-spacing: .06em !important; cursor: pointer !important; transition: background-color .18s ease, color .18s ease !important; } .rare-account .woocommerce-address-fields button.button:hover, .rare-account .woocommerce-address-fields button[type="submit"]:hover { background: #fff !important; color: #000 !important; border-color: #fff !important; } /* ========================================================== C. LINKS SECUNDARIOS MI CUENTA ========================================================== */ .rare-account .woocommerce-MyAccount-content a:not(.button), .rare-account .woocommerce-Address-title a::before { color: #A78FBA !important; } .rare-account .woocommerce-MyAccount-content a:not(.button):hover { color: #fff !important; } /* ========================================================== D. RESPONSIVE ========================================================== */ @media (max-width: 767px) { .rare-account .woocommerce-Addresses { flex-direction: column !important; gap: 38px !important; } .rare-account .woocommerce-Addresses .woocommerce-Address { flex: none !important; width: 100% !important; } .rare-account .woocommerce-address-fields__field-wrapper { display: block !important; } .rare-account .woocommerce-address-fields .form-row-first, .rare-account .woocommerce-address-fields .form-row-last { width: 100% !important; } .rare-account .woocommerce-address-fields button.button, .rare-account .woocommerce-address-fields button[type="submit"] { float: none !important; width: 100% !important; } } /* ========================================================== RARE — MI CUENTA / DATOS DE CUENTA ========================================================== */ /* ========================================================== 1. CONTENEDOR DEL FORMULARIO ========================================================== */ .rare-account .woocommerce-EditAccountForm { width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* ========================================================== 2. FILAS / CAMPOS ========================================================== */ .rare-account .woocommerce-EditAccountForm .form-row { float: none !important; width: 100% !important; margin: 0 0 30px !important; padding: 0 !important; background: transparent !important; } /* Nombre + Apellidos en dos columnas */ .rare-account .woocommerce-EditAccountForm .form-row-first, .rare-account .woocommerce-EditAccountForm .form-row-last { width: calc(50% - 22px) !important; } /* Contenedor de las primeras filas */ .rare-account .woocommerce-EditAccountForm { display: flex !important; flex-wrap: wrap !important; column-gap: 44px !important; } /* Los elementos que deben ocupar toda la fila */ .rare-account .woocommerce-EditAccountForm .form-row-wide, .rare-account .woocommerce-EditAccountForm fieldset, .rare-account .woocommerce-EditAccountForm p:last-child { flex: 0 0 100% !important; width: 100% !important; } /* ========================================================== 3. LABELS ========================================================== */ .rare-account .woocommerce-EditAccountForm label { display: block !important; margin: 0 0 8px !important; color: #ddd !important; font-family: "Sahitya", serif !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1.2 !important; } /* Asteriscos */ .rare-account .woocommerce-EditAccountForm .required { color: #ddd !important; opacity: .8 !important; } /* ========================================================== 4. INPUTS ========================================================== */ .rare-account .woocommerce-EditAccountForm input[type="text"], .rare-account .woocommerce-EditAccountForm input[type="email"], .rare-account .woocommerce-EditAccountForm input[type="password"] { width: 100% !important; height: 44px !important; margin: 0 !important; padding: 8px 40px 10px 2px !important; background: transparent !important; color: #fff !important; border: 0 !important; border-bottom: 1px solid #666 !important; border-radius: 0 !important; outline: none !important; box-shadow: none !important; font-family: "Sahitya", serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1.4 !important; transition: border-color .18s ease !important; } /* Focus */ .rare-account .woocommerce-EditAccountForm input[type="text"]:focus, .rare-account .woocommerce-EditAccountForm input[type="email"]:focus, .rare-account .woocommerce-EditAccountForm input[type="password"]:focus { border-bottom-color: #fff !important; outline: none !important; box-shadow: none !important; } /* ========================================================== 5. TEXTO DE AYUDA "Así será como se mostrará..." ========================================================== */ .rare-account .woocommerce-EditAccountForm span em, .rare-account .woocommerce-EditAccountForm .form-row span em { display: block !important; margin-top: 8px !important; color: #888 !important; font-family: "Sahitya", serif !important; font-size: 14px !important; font-weight: 400 !important; font-style: normal !important; line-height: 1.4 !important; } /* ========================================================== 6. CAMBIO DE CONTRASEÑA ========================================================== */ .rare-account .woocommerce-EditAccountForm fieldset { margin: 14px 0 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; } /* Título Cambio de contraseña */ .rare-account .woocommerce-EditAccountForm fieldset legend { display: block !important; width: 100% !important; margin: 0 0 30px !important; padding: 22px 0 13px !important; color: #fff !important; border: 0 !important; border-bottom: 1px solid #555 !important; font-family: "Sahitya", serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1.2 !important; text-transform: uppercase !important; letter-spacing: .05em !important; } /* Campos de contraseña */ .rare-account .woocommerce-EditAccountForm fieldset .form-row { width: 100% !important; margin: 0 0 30px !important; } /* ========================================================== 7. OJO DE CONTRASEÑA ========================================================== */ .rare-account .woocommerce-EditAccountForm .password-input { position: relative !important; display: block !important; } .rare-account .woocommerce-EditAccountForm .show-password-input { position: absolute !important; top: 50% !important; right: 7px !important; margin: 0 !important; color: #fff !important; opacity: .7 !important; transform: translateY(-50%) !important; background: transparent !important; border: 0 !important; font-size: 14px !important; } .rare-account .woocommerce-EditAccountForm .show-password-input::after { color: #fff !important; } .rare-account .woocommerce-EditAccountForm .show-password-input:hover { opacity: 1 !important; transform: translateY(-50%) !important; } /* ========================================================== 8. AUTOFILL Evitar fondos crema / amarillo ========================================================== */ .rare-account .woocommerce-EditAccountForm input:-webkit-autofill, .rare-account .woocommerce-EditAccountForm input:-webkit-autofill:hover, .rare-account .woocommerce-EditAccountForm input:-webkit-autofill:focus { -webkit-text-fill-color: #fff !important; -webkit-box-shadow: 0 0 0 1000px #000 inset !important; caret-color: #fff !important; transition: background-color 9999s ease-out 0s !important; } /* ========================================================== 9. BOTÓN GUARDAR CAMBIOS ========================================================== */ .rare-account .woocommerce-EditAccountForm button[type="submit"], .rare-account .woocommerce-EditAccountForm .woocommerce-Button { float: right !important; width: auto !important; min-width: 190px !important; margin: 14px 0 0 auto !important; padding: 11px 22px 9px !important; background: #000 !important; color: #fff !important; border: 2px solid #fff !important; border-radius: 0 !important; outline: none !important; box-shadow: none !important; font-family: "Sahitya", serif !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1 !important; text-transform: uppercase !important; letter-spacing: .06em !important; cursor: pointer !important; transition: background-color .18s ease, color .18s ease !important; } /* Hover invertido */ .rare-account .woocommerce-EditAccountForm button[type="submit"]:hover, .rare-account .woocommerce-EditAccountForm .woocommerce-Button:hover { background: #fff !important; color: #000 !important; border-color: #fff !important; opacity: 1 !important; transform: none !important; } /* ========================================================== 10. LIMPIEZA WOO / ASTRA ========================================================== */ .rare-account .woocommerce-EditAccountForm::before, .rare-account .woocommerce-EditAccountForm::after { display: none !important; content: none !important; } /* ========================================================== 11. RESPONSIVE ========================================================== */ @media (max-width: 767px) { .rare-account .woocommerce-EditAccountForm { display: block !important; } .rare-account .woocommerce-EditAccountForm .form-row-first, .rare-account .woocommerce-EditAccountForm .form-row-last { width: 100% !important; } .rare-account .woocommerce-EditAccountForm button[type="submit"], .rare-account .woocommerce-EditAccountForm .woocommerce-Button { float: none !important; width: 100% !important; } } /* ========================================================== RARE — AJUSTE FINAL PEDIDO TÍTULO + ARCHIVO ADJUNTO ========================================================== */ /* Título del detalle alineado con la tabla */ .rare-account .woocommerce-order-details__title { width: 100% !important; margin: 0 0 20px !important; padding: 0 !important; text-align: left !important; color: #fff !important; font-family: "Sahitya", serif !important; font-size: 19px !important; font-weight: 400 !important; line-height: 1.2 !important; text-transform: uppercase !important; letter-spacing: .05em !important; } /* ---------------------------------------------------------- ARCHIVOS SUBIDOS DEL PEDIDO Oculta UUID / nombre largo, conserva el enlace real ---------------------------------------------------------- */ .rare-account .woocommerce-order-details a[href*="/wp-content/uploads/"][download], .rare-account .woocommerce-order-details a[href*="/wp-content/uploads/woocommerce_uploads/"], .rare-account .woocommerce-order-details a[href*="/wp-content/uploads/woocommerce/"] { display: inline-block !important; margin: 2px 0 0 !important; padding: 0 !important; color: transparent !important; -webkit-text-fill-color: transparent !important; font-size: 0 !important; line-height: 1 !important; text-decoration: none !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } /* Texto visual */ .rare-account .woocommerce-order-details a[href*="/wp-content/uploads/"][download]::after, .rare-account .woocommerce-order-details a[href*="/wp-content/uploads/woocommerce_uploads/"]::after, .rare-account .woocommerce-order-details a[href*="/wp-content/uploads/woocommerce/"]::after { content: "VER ARCHIVO ↗"; display: inline-block !important; color: #A78FBA !important; -webkit-text-fill-color: #A78FBA !important; font-family: "Sahitya", serif !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.2 !important; letter-spacing: .035em !important; text-decoration: none !important; } /* Hover */ .rare-account .woocommerce-order-details a[href*="/wp-content/uploads/"][download]:hover::after, .rare-account .woocommerce-order-details a[href*="/wp-content/uploads/woocommerce_uploads/"]:hover::after, .rare-account .woocommerce-order-details a[href*="/wp-content/uploads/woocommerce/"]:hover::after { color: #fff !important; -webkit-text-fill-color: #fff !important; } /* ========================================================== RARE — VERIFICAR EMAIL / PEDIDO ========================================================== */ .woocommerce-order-pay button.button, .woocommerce-order-pay .button, .woocommerce-checkout button.button, .woocommerce-checkout .button, .woocommerce form.checkout .button, .woocommerce form.checkout button[type="submit"] { background: #000 !important; color: #fff !important; border: 2px solid #fff !important; border-radius: 0 !important; box-shadow: none !important; outline: none !important; font-family: "Sahitya", serif !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1 !important; text-transform: uppercase !important; letter-spacing: .05em !important; padding: 12px 20px 10px !important; transition: background-color .18s ease, color .18s ease !important; } .woocommerce-order-pay button.button:hover, .woocommerce-order-pay .button:hover, .woocommerce-checkout button.button:hover, .woocommerce-checkout .button:hover, .woocommerce form.checkout .button:hover, .woocommerce form.checkout button[type="submit"]:hover { background: #fff !important; color: #000 !important; border-color: #fff !important; transform: none !important; opacity: 1 !important; } /* ========================================================== RARE — PEDIDO RECIBIDO / THANK YOU PAGE ========================================================== */ /* CONTENEDOR GENERAL */ .woocommerce-order { color: #fff !important; font-family: "Sahitya", serif !important; } /* ========================================================== MENSAJE "GRACIAS..." ========================================================== */ .woocommerce-order-received .woocommerce-notice--success, .woocommerce-order-received .woocommerce-thankyou-order-received { color: #fff !important; background: transparent !important; border: 0 !important; font-family: "Sahitya", serif !important; font-size: 15px !important; font-weight: 400 !important; margin-bottom: 24px !important; padding: 0 !important; } /* ========================================================== DATOS SUPERIORES DEL PEDIDO ========================================================== */ .woocommerce-order-overview { display: flex !important; flex-wrap: wrap !important; gap: 0 !important; margin: 0 0 32px !important; padding: 0 !important; border: 0 !important; } .woocommerce-order-overview li { color: #aaa !important; font-family: "Sahitya", serif !important; font-size: 10px !important; line-height: 1.3 !important; padding: 0 20px !important; margin: 0 !important; border-right: 1px solid #555 !important; } .woocommerce-order-overview li:first-child { padding-left: 0 !important; } .woocommerce-order-overview li:last-child { border-right: 0 !important; } .woocommerce-order-overview li strong { display: block !important; color: #fff !important; font-family: "Roboto Condensed", sans-serif !important; font-size: 14px !important; font-weight: 600 !important; margin-top: 3px !important; } /* ========================================================== TÍTULOS DE SECCIONES ========================================================== */ .woocommerce-order-details__title, .woocommerce-customer-details h2 { color: #fff !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid #444 !important; font-family: "Sahitya", serif !important; font-size: 19px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: .04em !important; padding: 0 0 12px !important; margin: 0 0 18px !important; } /* ========================================================== DETALLES DEL PEDIDO ========================================================== */ .woocommerce-order-details { margin-top: 0 !important; margin-bottom: 38px !important; } .woocommerce-order-details table.shop_table { width: 100% !important; background: transparent !important; border: 0 !important; border-collapse: collapse !important; color: #fff !important; } .woocommerce-order-details table.shop_table thead { background: transparent !important; } .woocommerce-order-details table.shop_table thead th { color: #999 !important; background: transparent !important; font-family: "Sahitya", serif !important; font-size: 11px !important; font-weight: 400 !important; text-transform: uppercase !important; letter-spacing: .06em !important; border: 0 !important; border-bottom: 1px solid #333 !important; padding: 10px 0 !important; } /* FILAS */ .woocommerce-order-details table.shop_table tbody td, .woocommerce-order-details table.shop_table tfoot th, .woocommerce-order-details table.shop_table tfoot td { color: #fff !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid #333 !important; padding: 14px 0 !important; font-family: "Sahitya", serif !important; font-size: 14px !important; line-height: 1.45 !important; vertical-align: top !important; } /* EVITAR EL ESPACIO GIGANTE DEL PRODUCTO */ .woocommerce-order-details table.shop_table tbody tr, .woocommerce-order-details table.shop_table tbody td { height: auto !important; min-height: 0 !important; } .woocommerce-order-details .woocommerce-table__product-name { padding-right: 30px !important; } /* NOMBRE DEL PRODUCTO */ .woocommerce-order-details .woocommerce-table__product-name a { color: #b991d0 !important; text-decoration: none !important; } .woocommerce-order-details .woocommerce-table__product-name a:hover { color: #d8b7ea !important; } /* PRECIO / COLUMNA TOTAL */ .woocommerce-order-details .woocommerce-table__product-total, .woocommerce-order-details table.shop_table tfoot td { text-align: right !important; color: #fff !important; font-family: "Roboto Condensed", sans-serif !important; } /* SUBTOTAL / ENVÍO / TOTAL / MÉTODO */ .woocommerce-order-details table.shop_table tfoot th { color: #aaa !important; font-weight: 400 !important; } .woocommerce-order-details table.shop_table tfoot tr:last-child th, .woocommerce-order-details table.shop_table tfoot tr:last-child td { color: #fff !important; } /* ========================================================== METADATOS DEL PRODUCTO ========================================================== */ .woocommerce-order-details .wc-item-meta { margin: 10px 0 0 !important; padding: 0 !important; } .woocommerce-order-details .wc-item-meta li { color: #ccc !important; font-size: 13px !important; line-height: 1.45 !important; margin: 3px 0 !important; } .woocommerce-order-details .wc-item-meta strong { color: #fff !important; font-weight: 400 !important; } /* ========================================================== DIRECCIONES ========================================================== */ .woocommerce-customer-details { margin-top: 35px !important; } .woocommerce-customer-details .woocommerce-columns { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 32px !important; } .woocommerce-customer-details .woocommerce-column { width: 100% !important; float: none !important; } .woocommerce-customer-details address { color: #ddd !important; background: transparent !important; border: 1px solid #333 !important; border-radius: 0 !important; padding: 20px !important; font-family: "Sahitya", serif !important; font-size: 14px !important; line-height: 1.5 !important; } /* TELÉFONO Y EMAIL */ .woocommerce-customer-details address p { color: #ddd !important; margin: 4px 0 !important; } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 767px) { .woocommerce-order-overview { display: block !important; } .woocommerce-order-overview li { width: 100% !important; border-right: 0 !important; border-bottom: 1px solid #333 !important; padding: 10px 0 !important; } .woocommerce-customer-details .woocommerce-columns { grid-template-columns: 1fr !important; gap: 24px !important; } }/* End custom CSS */