/*! * Nana Nails Lugo - Tienda (WooCommerce) v7.1.0 * * Rediseno completo de la tienda con la MISMA paleta y la misma tipografia * que el resto del sitio. No toca la portada, el blog ni la FAQ: todas las * reglas cuelgan de .nana-shop o de las clases propias de WooCommerce. */ /* La clase .nana-shop la pone el tema en el de todas las paginas de la tienda, asi que estas variables llegan a todo: catalogo, ficha, carrito, pago y mi cuenta. */ .nana-shop { --n-pink: #ff6b9d; --n-pink-dark: #d94f7a; --n-salmon: #ff8a65; --n-ink: #2d1b22; --n-muted: #a85c7a; --n-border: #ffd9e5; --n-border-soft: #ffeef3; --n-wash: #fff6f8; --n-cream: #fffbf9; --n-grad: linear-gradient(135deg, #ff6b9d, #ff8a65); --n-radius: 1.5rem; --n-shadow: 0 10px 30px rgba(255, 107, 157, .10); --n-shadow-lg: 0 20px 48px rgba(255, 107, 157, .18); background: var(--n-cream); color: var(--n-ink); } .nana-shop__inner { max-width: 80rem; margin: 0 auto; padding: 0 1.25rem 4.5rem; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } .nana-shop *, .nana-shop *::before, .nana-shop *::after { box-sizing: border-box; } /* ======================================================================= * Cabecera de la tienda * ==================================================================== */ .nana-shop__hero { position: relative; text-align: center; padding: 3rem 1.25rem 2.5rem; margin: 0 -1.25rem 2.5rem; background: radial-gradient(60rem 22rem at 50% -8rem, rgba(255, 107, 157, .16), transparent 70%), var(--n-wash); border-bottom: 1px solid var(--n-border-soft); } .nana-shop__eyebrow { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1rem; margin-bottom: 1rem; border-radius: 9999px; background: #fff; border: 1px solid var(--n-border); box-shadow: 0 4px 14px rgba(255, 107, 157, .12); font-size: .8125rem; font-weight: 700; color: var(--n-ink); text-decoration: none; } .nana-shop__eyebrow--link:hover { color: var(--n-pink-dark); border-color: var(--n-pink); } .nana-shop__title { font-family: Fraunces, Georgia, serif; font-weight: 600; font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.1; margin: 0 0 .75rem; color: var(--n-ink); } .nana-shop__sub { max-width: 38rem; margin: 0 auto; color: var(--n-muted); line-height: 1.7; font-size: 1rem; } .nana-breadcrumb { margin-top: 1.25rem; font-size: .8125rem; color: var(--n-muted); } .nana-breadcrumb a { color: var(--n-muted); text-decoration: none; } .nana-breadcrumb a:hover { color: var(--n-pink-dark); text-decoration: underline; } .nana-breadcrumb__sep { margin: 0 .5rem; opacity: .5; } /* ======================================================================= * Barra de resultados y ordenacion * ==================================================================== */ .nana-shop .woocommerce-notices-wrapper:empty { display: none; } .nana-shop .woocommerce-result-count, .nana-shop .woocommerce-ordering { margin: 0; } .nana-shop .woocommerce-result-count { color: var(--n-muted); font-size: .875rem; } .nana-shop .woocommerce-ordering select, .nana-shop select { appearance: none; -webkit-appearance: none; padding: .7rem 2.5rem .7rem 1.1rem; border: 1px solid var(--n-border); border-radius: 9999px; background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23A85C7A'%3E%3Cpath d='M5.5 7.5 10 12l4.5-4.5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .85rem center; background-size: 1.1rem; color: var(--n-ink); font-size: .875rem; font-weight: 500; cursor: pointer; max-width: 100%; } .nana-shop select:focus { outline: none; border-color: var(--n-pink); box-shadow: 0 0 0 3px rgba(255, 107, 157, .18); } /* Recuento y ordenacion en una sola fila (los envuelve nana_nails_loop_bar). */ .nana-shop__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.75rem; } .nana-shop .woocommerce-result-count, .nana-shop .woocommerce-ordering { float: none; } /* ======================================================================= * Cuadricula de productos * ==================================================================== */ .nana-shop ul.products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem; margin: 0 0 3rem; padding: 0; list-style: none; clear: both; } .nana-shop ul.products::before, .nana-shop ul.products::after { content: none; } .nana-shop ul.products li.product { position: relative; display: flex; flex-direction: column; width: auto !important; margin: 0 !important; float: none !important; padding: 0; background: #fff; border: 1px solid var(--n-border-soft); border-radius: var(--n-radius); overflow: hidden; box-shadow: var(--n-shadow); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .nana-shop ul.products li.product:hover { transform: translateY(-4px); box-shadow: var(--n-shadow-lg); border-color: var(--n-border); } /* Imagen cuadrada y recortada: evita cuadriculas descuadradas. */ .nana-shop ul.products li.product a img, .nana-shop ul.products li.product img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; margin: 0; border-radius: 0; background: var(--n-wash); transition: transform .6s ease; } .nana-shop ul.products li.product:hover img { transform: scale(1.06); } .nana-shop ul.products li.product > a { display: block; overflow: hidden; text-decoration: none; } .nana-shop ul.products li.product .woocommerce-loop-product__link { display: block; } .nana-product__title, .nana-shop ul.products li.product h2.woocommerce-loop-product__title { font-family: Fraunces, Georgia, serif; font-size: 1.0625rem; font-weight: 600; line-height: 1.3; margin: 1rem 1.25rem .35rem; padding: 0; color: var(--n-ink); } .nana-product__title a { color: inherit; text-decoration: none; } .nana-product__title a:hover { color: var(--n-pink-dark); } .nana-shop ul.products li.product .price { display: block; margin: 0 1.25rem .35rem; color: var(--n-pink-dark); font-size: 1.125rem; font-weight: 700; font-family: Fraunces, Georgia, serif; } .nana-shop ul.products li.product .price del { color: var(--n-muted); opacity: .65; font-weight: 500; font-size: .9rem; margin-right: .4rem; } .nana-shop ul.products li.product .price ins { background: transparent; text-decoration: none; } .nana-shop ul.products li.product .woocommerce-product-details__short-description, .nana-shop ul.products li.product .star-rating { margin: 0 1.25rem .5rem; } /* El boton se pega abajo para que todas las tarjetas midan igual. */ .nana-shop ul.products li.product .button, .nana-shop ul.products li.product .added_to_cart { margin: auto 1.25rem 1.25rem; align-self: stretch; text-align: center; } .nana-shop ul.products li.product .added_to_cart { margin-top: -.5rem; font-size: .8125rem; color: var(--n-pink-dark); text-decoration: underline; background: none; padding: 0; box-shadow: none; } /* ----------------------------------------------------------------- * Tarjetas de categoria (las que salen en /tienda/) * -------------------------------------------------------------- */ .nana-shop ul.products li.product-category { position: relative; padding: 0; background: #fff; } .nana-shop ul.products li.product-category > a { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; } /* Mas especifico que la regla de la foto de producto, que usa recorte. Las imagenes de categoria suelen ser logotipos y no se pueden recortar. */ .nana-shop ul.products li.product-category > a img, .nana-shop ul.products li.product-category img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; padding: 1.5rem; background: var(--n-wash); transform: none; } .nana-shop ul.products li.product-category:hover > a img { transform: none; } .nana-cat__title { margin: 1.1rem 1.25rem .25rem; font-family: Fraunces, Georgia, serif; font-size: 1.15rem; font-weight: 600; line-height: 1.25; color: var(--n-ink); } .nana-cat__count { display: block; margin: 0 1.25rem 1.25rem; font-size: .8125rem; font-weight: 600; color: var(--n-pink-dark); } .nana-shop ul.products li.product-category:hover .nana-cat__title { color: var(--n-pink-dark); } /* Etiquetas sobre la imagen */ .nana-shop span.onsale, .nana-shop .nana-product__out { position: absolute; top: .875rem; left: .875rem; z-index: 2; min-height: 0; min-width: 0; margin: 0; padding: .35rem .75rem; border-radius: 9999px; background: var(--n-grad); color: #fff; font-size: .75rem; font-weight: 700; line-height: 1.4; letter-spacing: .02em; box-shadow: 0 6px 16px rgba(255, 107, 157, .35); } .nana-shop .nana-product__out { left: auto; right: .875rem; background: rgba(45, 27, 34, .82); box-shadow: none; } .nana-shop .star-rating { color: #f5a623; font-size: .8rem; } /* ======================================================================= * Botones * ==================================================================== */ .nana-shop .button, .nana-shop button.button, .nana-shop a.button, .nana-shop input.button, .nana-shop .woocommerce-Button, .nana-btn, .nana-shop #respond input#submit { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .8rem 1.5rem; border: 0; border-radius: 9999px; background: var(--n-grad); color: #fff !important; font-family: inherit; font-size: .9rem; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; box-shadow: 0 8px 20px rgba(255, 107, 157, .28); transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; } .nana-shop .button:hover, .nana-shop button.button:hover, .nana-shop a.button:hover, .nana-shop input.button:hover, .nana-btn:hover, .nana-shop #respond input#submit:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(255, 107, 157, .36); filter: brightness(1.03); } .nana-shop .button:focus-visible, .nana-shop a.button:focus-visible { outline: 3px solid rgba(255, 107, 157, .4); outline-offset: 2px; } .nana-shop .button:disabled, .nana-shop .button.disabled { opacity: .55; box-shadow: none; transform: none; cursor: not-allowed; } /* Boton secundario: contorno rosa. */ .nana-shop .button.alt ~ .button, .nana-shop a.button.wc-backward, .nana-shop .woocommerce-message a.button, .nana-shop .return-to-shop a.button { background: #fff; color: var(--n-pink-dark) !important; border: 1.5px solid var(--n-border); box-shadow: none; } .nana-shop a.button.wc-backward:hover, .nana-shop .return-to-shop a.button:hover { border-color: var(--n-pink); background: var(--n-wash); } /* ======================================================================= * Ficha de producto * ==================================================================== */ .nana-shop div.product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: start; margin-bottom: 3.5rem; } .nana-shop div.product .woocommerce-product-gallery { width: 100% !important; float: none !important; margin: 0; position: relative; border-radius: var(--n-radius); overflow: hidden; box-shadow: var(--n-shadow); background: #fff; } .nana-shop div.product .woocommerce-product-gallery__image img { display: block; width: 100%; height: auto; border-radius: 0; } .nana-shop div.product .flex-control-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr)); gap: .5rem; margin: .75rem; padding: 0; list-style: none; } .nana-shop div.product .flex-control-thumbs li { width: auto !important; margin: 0 !important; float: none !important; } .nana-shop div.product .flex-control-thumbs img { border-radius: .75rem; border: 2px solid transparent; aspect-ratio: 1 / 1; object-fit: cover; opacity: .7; transition: opacity .2s ease, border-color .2s ease; } .nana-shop div.product .flex-control-thumbs img.flex-active, .nana-shop div.product .flex-control-thumbs img:hover { opacity: 1; border-color: var(--n-pink); } .nana-shop div.product .summary { width: 100% !important; float: none !important; margin: 0; } .nana-shop div.product .product_title { font-family: Fraunces, Georgia, serif; font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 600; line-height: 1.15; margin: .5rem 0 1rem; color: var(--n-ink); } .nana-shop div.product p.price, .nana-shop div.product span.price { display: block; margin: 0 0 1.25rem; font-family: Fraunces, Georgia, serif; font-size: 1.9rem; font-weight: 700; color: var(--n-pink-dark); } .nana-shop div.product p.price del { font-size: 1.15rem; color: var(--n-muted); opacity: .6; margin-right: .5rem; } .nana-shop div.product p.price ins { background: none; text-decoration: none; } .nana-shop .woocommerce-product-details__short-description { color: var(--n-muted); line-height: 1.75; margin-bottom: 1.75rem; } /* Cantidad + anadir a la cesta */ .nana-shop form.cart { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 0 0 1.75rem; padding: 1.25rem; background: var(--n-wash); border: 1px solid var(--n-border); border-radius: var(--n-radius); } .nana-shop form.cart .quantity { display: inline-flex; margin: 0; } .nana-shop .quantity input.qty { width: 4.5rem; height: 3rem; padding: 0 .5rem; text-align: center; border: 1px solid var(--n-border); border-radius: 9999px; background: #fff; color: var(--n-ink); font-weight: 600; font-size: 1rem; } .nana-shop .quantity input.qty:focus { outline: none; border-color: var(--n-pink); box-shadow: 0 0 0 3px rgba(255, 107, 157, .18); } .nana-shop form.cart .single_add_to_cart_button { flex: 1 1 12rem; height: 3rem; font-size: .95rem; } .nana-shop .product_meta { font-size: .85rem; color: var(--n-muted); border-top: 1px solid var(--n-border-soft); padding-top: 1.25rem; } .nana-shop .product_meta > span { display: block; margin-bottom: .35rem; } .nana-shop .product_meta a { color: var(--n-pink-dark); text-decoration: none; } .nana-shop .product_meta a:hover { text-decoration: underline; } /* Variaciones */ .nana-shop table.variations { width: 100%; margin-bottom: 1rem; border: 0; } .nana-shop table.variations th, .nana-shop table.variations td { border: 0; padding: .35rem 0; background: none; text-align: left; vertical-align: middle; } .nana-shop table.variations th { font-weight: 600; color: var(--n-ink); width: 8rem; } .nana-shop .reset_variations { font-size: .8rem; color: var(--n-muted); } /* Pestanas de la ficha */ .nana-shop .woocommerce-tabs { grid-column: 1 / -1; margin-top: 1rem; } .nana-shop .woocommerce-tabs ul.tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.5rem; padding: 0; list-style: none; border: 0; } .nana-shop .woocommerce-tabs ul.tabs::before, .nana-shop .woocommerce-tabs ul.tabs::after, .nana-shop .woocommerce-tabs ul.tabs li::before, .nana-shop .woocommerce-tabs ul.tabs li::after { content: none !important; display: none !important; } .nana-shop .woocommerce-tabs ul.tabs li { margin: 0; padding: 0; background: #fff; border: 1px solid var(--n-border); border-radius: 9999px; box-shadow: none; } .nana-shop .woocommerce-tabs ul.tabs li a { display: block; padding: .65rem 1.35rem; color: var(--n-muted); font-weight: 600; font-size: .875rem; text-decoration: none; } .nana-shop .woocommerce-tabs ul.tabs li.active { background: var(--n-grad); border-color: transparent; box-shadow: 0 8px 20px rgba(255, 107, 157, .25); } .nana-shop .woocommerce-tabs ul.tabs li.active a { color: #fff; } .nana-shop .woocommerce-Tabs-panel { background: #fff; border: 1px solid var(--n-border-soft); border-radius: var(--n-radius); padding: 1.75rem; color: var(--n-ink); line-height: 1.75; } .nana-shop .woocommerce-Tabs-panel h2 { font-family: Fraunces, Georgia, serif; font-size: 1.35rem; margin: 0 0 1rem; } /* Productos relacionados / venta cruzada */ .nana-shop .related, .nana-shop .upsells, .nana-shop .cross-sells { grid-column: 1 / -1; margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--n-border-soft); } .nana-shop .related > h2, .nana-shop .upsells > h2, .nana-shop .cross-sells > h2 { font-family: Fraunces, Georgia, serif; font-size: 1.6rem; font-weight: 600; margin: 0 0 1.75rem; color: var(--n-ink); } /* ======================================================================= * Tablas: cesta, pedido, cuenta * ==================================================================== */ .nana-shop table.shop_table, .nana-shop table.woocommerce-orders-table, .nana-shop table.wishlist_table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--n-border-soft); border-radius: var(--n-radius); overflow: hidden; background: #fff; margin-bottom: 2rem; font-size: .9375rem; } .nana-shop table.shop_table th { background: var(--n-wash); color: var(--n-ink); font-weight: 700; font-size: .8125rem; letter-spacing: .04em; text-transform: uppercase; padding: 1rem 1.1rem; border: 0; text-align: left; } .nana-shop table.shop_table td { padding: 1.1rem; border: 0; border-top: 1px solid var(--n-border-soft); color: var(--n-ink); vertical-align: middle; } .nana-shop table.shop_table img { width: 4.5rem; height: 4.5rem; object-fit: cover; border-radius: .875rem; border: 1px solid var(--n-border-soft); } .nana-shop table.shop_table .product-name a { color: var(--n-ink); font-weight: 600; text-decoration: none; } .nana-shop table.shop_table .product-name a:hover { color: var(--n-pink-dark); } .nana-shop a.remove { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 9999px; background: var(--n-wash); color: var(--n-pink-dark) !important; font-size: 1.1rem; line-height: 1; text-decoration: none; } .nana-shop a.remove:hover { background: var(--n-pink); color: #fff !important; } .nana-shop .cart_totals h2, .nana-shop .cross-sells h2, .nana-shop #order_review_heading, .nana-shop .woocommerce-billing-fields h3, .nana-shop .woocommerce-additional-fields h3, .nana-shop .woocommerce-column__title, .nana-shop .woocommerce-Address-title h3 { font-family: Fraunces, Georgia, serif; font-size: 1.35rem; font-weight: 600; margin: 0 0 1.25rem; color: var(--n-ink); } .nana-shop .cart-collaterals { display: flex; justify-content: flex-end; } .nana-shop .cart_totals { width: 100%; max-width: 26rem; background: #fff; border: 1px solid var(--n-border); border-radius: var(--n-radius); padding: 1.75rem; box-shadow: var(--n-shadow); } .nana-shop .cart_totals table.shop_table { border: 0; margin: 0; box-shadow: none; } .nana-shop .cart_totals .order-total .amount { font-family: Fraunces, Georgia, serif; font-size: 1.4rem; color: var(--n-pink-dark); } .nana-shop .wc-proceed-to-checkout { padding: 1.25rem 0 0; } .nana-shop .wc-proceed-to-checkout .button { width: 100%; } /* Fila de acciones de la cesta: cupon a la izquierda, actualizar a la derecha. */ /* No se usa flex aqui: convertiria la celda en un bloque y perderia el colspan, dejando la fila a medio ancho. */ .nana-shop table.shop_table td.actions { background: var(--n-wash); overflow: hidden; } .nana-shop table.shop_table td.actions .coupon { float: left; max-width: 28rem; } .nana-shop table.shop_table td.actions > .button, .nana-shop table.shop_table td.actions > input.button { float: right; } .nana-shop .coupon { display: flex; gap: .5rem; flex-wrap: wrap; } .nana-shop .coupon input.input-text { flex: 1 1 10rem; width: auto; min-width: 0; } /* En el resumen de totales las cabeceras son etiquetas, no cabecera de tabla. */ .nana-shop .cart_totals table.shop_table th, .nana-shop #order_review table.shop_table th { background: transparent; text-transform: none; letter-spacing: 0; font-size: .9375rem; padding: .7rem 0; } .nana-shop .cart_totals table.shop_table td, .nana-shop #order_review table.shop_table td { padding: .7rem 0; text-align: right; border-top-color: var(--n-border-soft); } /* ======================================================================= * Formularios (finalizar compra, cuenta, comentarios) * ==================================================================== */ .nana-shop .form-row { margin: 0 0 1.1rem; padding: 0; } .nana-shop label { display: block; margin-bottom: .4rem; font-size: .875rem; font-weight: 600; color: var(--n-ink); } .nana-shop .required { color: var(--n-pink-dark); text-decoration: none; } .nana-shop input[type="text"], .nana-shop input[type="email"], .nana-shop input[type="tel"], .nana-shop input[type="password"], .nana-shop input[type="number"], .nana-shop input[type="search"], .nana-shop input[type="url"], .nana-shop textarea, .nana-shop .select2-container .select2-selection--single { width: 100%; min-height: 3rem; padding: .75rem 1.1rem; border: 1px solid var(--n-border); border-radius: 1rem; background: #fff; color: var(--n-ink); font-family: inherit; font-size: .95rem; line-height: 1.5; transition: border-color .2s ease, box-shadow .2s ease; } .nana-shop textarea { min-height: 8rem; resize: vertical; } .nana-shop input:focus, .nana-shop textarea:focus { outline: none; border-color: var(--n-pink); box-shadow: 0 0 0 3px rgba(255, 107, 157, .18); } .nana-shop input::placeholder, .nana-shop textarea::placeholder { color: rgba(168, 92, 122, .55); } .nana-shop .select2-container--default .select2-selection--single { height: auto; border-radius: 1rem; } .nana-shop .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 1.5; padding: 0; color: var(--n-ink); } .nana-shop .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; right: .75rem; } .nana-shop form.checkout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 2.5rem; align-items: start; } .nana-shop #customer_details { grid-column: 1; } .nana-shop #order_review_heading, .nana-shop #order_review { grid-column: 2; } .nana-shop #order_review { background: #fff; border: 1px solid var(--n-border); border-radius: var(--n-radius); padding: 1.75rem; box-shadow: var(--n-shadow); position: sticky; top: 7rem; } .nana-shop #order_review table.shop_table { border: 0; margin-bottom: 1.25rem; } .nana-shop #payment { background: var(--n-wash); border-radius: 1.25rem; padding: 1.25rem; } .nana-shop #payment ul.payment_methods { border: 0; padding: 0; margin: 0 0 1rem; list-style: none; } .nana-shop #payment ul.payment_methods li { margin-bottom: .5rem; } .nana-shop #payment div.payment_box { background: #fff; border-radius: 1rem; color: var(--n-muted); font-size: .875rem; padding: 1rem; } .nana-shop #payment div.payment_box::before { border-bottom-color: #fff; } .nana-shop #place_order { width: 100%; height: 3.25rem; font-size: 1rem; } /* ======================================================================= * Avisos * ==================================================================== */ .nana-shop .woocommerce-message, .nana-shop .woocommerce-info, .nana-shop .woocommerce-error, .nana-shop .woocommerce-noreviews, .nana-shop p.no-comments { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin: 0 0 1.75rem; padding: 1rem 1.25rem; border: 1px solid var(--n-border); border-left: 4px solid var(--n-pink); border-radius: 1rem; background: var(--n-wash); color: var(--n-ink); font-size: .9375rem; list-style: none; } .nana-shop .woocommerce-message::before, .nana-shop .woocommerce-info::before, .nana-shop .woocommerce-error::before { position: static; margin: 0; color: var(--n-pink); } .nana-shop .woocommerce-error { border-left-color: #e0245e; background: #fff2f5; } .nana-shop .woocommerce-message .button, .nana-shop .woocommerce-info .button { margin-left: auto; padding: .55rem 1.1rem; font-size: .8125rem; } /* ======================================================================= * Paginacion * ==================================================================== */ .nana-shop .woocommerce-pagination ul.page-numbers { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 2.5rem 0 0; padding: 0; border: 0; list-style: none; } .nana-shop .woocommerce-pagination ul.page-numbers li { border: 0; margin: 0; overflow: visible; } .nana-shop .woocommerce-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; height: 2.75rem; padding: 0 .75rem; border-radius: 9999px; background: #fff; border: 1px solid var(--n-border); color: var(--n-muted); font-weight: 600; font-size: .9rem; text-decoration: none; transition: all .2s ease; } .nana-shop .woocommerce-pagination .page-numbers:hover { border-color: var(--n-pink); color: var(--n-pink-dark); } .nana-shop .woocommerce-pagination .page-numbers.current { background: var(--n-grad); border-color: transparent; color: #fff; box-shadow: 0 8px 20px rgba(255, 107, 157, .28); } /* ======================================================================= * Mi cuenta * ==================================================================== */ .nana-shop .woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 2rem; padding: 0; list-style: none; } .nana-shop .woocommerce-MyAccount-navigation li a { display: block; padding: .65rem 1.25rem; border-radius: 9999px; background: #fff; border: 1px solid var(--n-border); color: var(--n-muted); font-weight: 600; font-size: .875rem; text-decoration: none; } .nana-shop .woocommerce-MyAccount-navigation li.is-active a { background: var(--n-grad); border-color: transparent; color: #fff; } .nana-shop .woocommerce-MyAccount-content { background: #fff; border: 1px solid var(--n-border-soft); border-radius: var(--n-radius); padding: 1.75rem; line-height: 1.75; } .nana-shop .woocommerce-form-login, .nana-shop .woocommerce-form-register { background: #fff; border: 1px solid var(--n-border); border-radius: var(--n-radius); padding: 1.75rem; box-shadow: var(--n-shadow); } /* ======================================================================= * Tienda vacia * ==================================================================== */ .nana-shop__empty { max-width: 34rem; margin: 2rem auto 3rem; padding: 2.5rem 2rem; text-align: center; background: #fff; border: 1px dashed var(--n-border); border-radius: var(--n-radius); color: var(--n-muted); line-height: 1.7; } .nana-shop__empty-title { font-family: Fraunces, Georgia, serif; font-size: 1.35rem; color: var(--n-ink); margin: 0 0 .5rem; } .nana-shop__empty .nana-btn { margin-top: 1.25rem; } /* ======================================================================= * Cesta en la cabecera * ==================================================================== */ .nana-cart-link { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 9999px; background: #fff; color: #2d1b22; box-shadow: 0 4px 12px rgba(255, 107, 157, .18); text-decoration: none; } .nana-cart-link svg { width: 1.2rem; height: 1.2rem; } .nana-cart-link__count { position: absolute; top: -.25rem; right: -.25rem; min-width: 1.25rem; height: 1.25rem; padding: 0 .3rem; border-radius: 9999px; background: linear-gradient(135deg, #ff6b9d, #ff8a65); color: #fff; font-size: .7rem; font-weight: 700; line-height: 1.25rem; text-align: center; } /* ======================================================================= * Responsive * ==================================================================== */ @media (max-width: 1024px) { .nana-shop div.product, .nana-shop form.checkout { grid-template-columns: minmax(0, 1fr); gap: 2rem; } .nana-shop #customer_details, .nana-shop #order_review_heading, .nana-shop #order_review { grid-column: 1; } .nana-shop #order_review { position: static; } } @media (max-width: 1023px) { .nana-shop ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .nana-shop { padding-bottom: 3rem; } .nana-shop__hero { padding: 2.25rem 1.25rem 1.75rem; margin-bottom: 1.75rem; } .nana-shop ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .nana-product__title, .nana-shop ul.products li.product h2.woocommerce-loop-product__title { font-size: .9375rem; margin: .75rem .875rem .25rem; } .nana-shop ul.products li.product .price { margin: 0 .875rem .25rem; font-size: 1rem; } .nana-shop ul.products li.product .button { margin: auto .875rem .875rem; padding: .7rem 1rem; font-size: .8125rem; } .nana-shop .cart-collaterals { display: block; } .nana-shop .cart_totals { max-width: none; } /* Tabla de la cesta apilada: en movil una tabla de 6 columnas no cabe. */ .nana-shop table.shop_table_responsive thead, .nana-shop table.shop_table_responsive .product-thumbnail { display: none; } .nana-shop table.shop_table_responsive tr { display: block; border-top: 1px solid var(--n-border-soft); } .nana-shop table.shop_table_responsive tr:first-child { border-top: 0; } .nana-shop table.shop_table_responsive td { display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: auto !important; border-top: 0; padding: .6rem 1rem; text-align: right; } .nana-shop table.shop_table_responsive td::before { content: attr(data-title) ": "; font-weight: 700; font-size: .8125rem; color: var(--n-muted); text-align: left; } .nana-shop table.shop_table_responsive td.actions::before { content: none; } .nana-shop table.shop_table_responsive td.actions { display: block; text-align: left; } /* Sin flotados en movil: cupon y boton a ancho completo. */ .nana-shop table.shop_table td.actions .coupon, .nana-shop table.shop_table td.actions > .button, .nana-shop table.shop_table td.actions > input.button { float: none; width: 100%; max-width: none; } .nana-shop .coupon input.input-text { flex: 1 1 100%; width: 100%; margin-bottom: .5rem; } .nana-shop .coupon .button { width: 100%; } } @media (max-width: 400px) { .nana-shop ul.products { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { .nana-shop *, .nana-shop *::before, .nana-shop *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }