/** * futbol-mesa CSS — partial 5/6: 05-shop-grid-cart. Contiguous slice of the former style.css. * Product grid, pagination, checkout payment-trust block, and the cart page header + grid + line-item card (base rules). * Load order is load-bearing (LRN-020/TSK-034): enqueued 01->06 in functions.php, * before storefront-woocommerce. Do NOT reorder or move rules between partials. @package futbol-mesa */ /* PRODUCT GRID — shop/taxonomy archives AND the homepage featured loop. Both render the same Storefront markup (`ul.products li.product` from the `[products]` block / loop), so one shared rule gives identical cards on both, per the Claude Design mockup. The column COUNT is governed by container width, not by changing the rule: the homepage runs full-width (~1184px inner → 4-up), while the archive's main column is narrowed by the 280px sidebar (~872px → 3-up). auto-fill + the 1280px content cap keep those maxima stable on wide viewports. NOTE: selectors are keyed on `ul.products` (no `.woocommerce`): on this Storefront install the `woocommerce` class sits on , not on a wrapper around the loop, so a `.woocommerce ul.products` descendant selector never matches. The mid-band 2-up override below stays `body.archive`-only so the homepage holds at 4-up. */ :is(body.home, body.archive) ul.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: clamp(14px, 1.6vw, 22px); margin: 0; padding: 0; list-style: none; } /* Storefront's clearfix ::before/::after become stray grid cells — remove them. */ :is(body.home, body.archive) ul.products::before, :is(body.home, body.archive) ul.products::after { content: none; } /* Drop Storefront's float + 30.75% width so cards fill their grid tracks, and lay each card out as a flex column so the add-to-cart button can pin to the bottom edge. */ :is(body.home, body.archive) ul.products li.product { /* !important required: storefront-woocommerce's `.columns-N ul.products li.product` float/width/margin rule out-ranks this selector and prints after the child, so without it the card floats at ~30.75% inside its grid track and leaves dead space on the right (TSK-034 regression, verified via CDP computed styles). */ display: flex !important; flex-direction: column; width: auto !important; margin: 0 !important; float: none !important; min-width: 220px; max-width: 100%; border-radius: var(--radius-card); flex: 1 1 auto; } /* Sidebar-visible mid band: the 280px sidebar leaves a narrow main column where auto-fill still squeezes 3 cramped cards in. Force 2-up so cards breathe; ≥1240px has room for the auto-fill 3-up again, and ≤1024px the sidebar is collapsed. */ @media (min-width: 1025px) and (max-width: 1240px) { body.archive ul.products { grid-template-columns: repeat(2, 1fr); } } /* Loop link wraps image + title + price in Storefront markup — must NOT clip. Square-crop is applied to the image only; link is just the positioning context for the absolute ¡Oferta! badge. */ :is(body.home, body.archive) ul.products li.product .woocommerce-loop-product__link { display: block; position: relative; } /* Product image: aspect-ratio 1/1, radius 10px, cover */ :is(body.home, body.archive) ul.products li.product .woocommerce-loop-product__link img { width: 100%; height: auto; aspect-ratio: 1/1; object-fit: cover; object-position: center; border-radius: var(--radius-button); margin-bottom: 16px; } /* Sale badge: "¡Oferta!" terracotta, uppercase, positioned top-right */ :is(body.home, body.archive) ul.products li.product .onsale { position: absolute; top: 12px; right: 12px; background: var(--color-terracotta); color: #fff; font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-weight: 800; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 6px 11px; border-radius: var(--radius-sm); line-height: 1.2; } /* Product title: centered, Archivo 800, 1.05rem, hover terracotta */ :is(body.home, body.archive) ul.products li.product .woocommerce-loop-product__title { text-align: center; margin-top: 16px; /* (0,4,3) already dominates Storefront's title margin */ margin-bottom: 12px; color: var(--color-ink); transition: color 0.15s ease; } :is(body.home, body.archive) ul.products li.product:hover .woocommerce-loop-product__title { color: var(--color-terracotta); } /* Product price: struck + sale centered, terracotta active */ :is(body.home, body.archive) ul.products li.product .price { text-align: center; margin-bottom: 12px; color: var(--color-terracotta); } :is(body.home, body.archive) ul.products li.product .price del { /* a11y: Storefront's .price del{opacity:.65} blends any color toward the white card background; --color-footer-muted at .65 opacity computed ~3.1:1, failing AA. Reset opacity and use --color-muted (already used for on-white labels/captions), which clears 4.5:1 even before any opacity dimming (TSK-040). */ opacity: 1; color: var(--color-muted); text-decoration: line-through; font-size: 1rem; font-weight: 400; margin-right: 8px; } :is(body.home, body.archive) ul.products li.product .price ins { text-decoration: none; font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-weight: 900; font-size: 1.35rem; color: var(--color-terracotta); } /* Add-to-cart button: FULL WIDTH, ink bg, white text, Archivo 800, padding 14px 16px */ :is(body.home, body.archive) ul.products li.product .button.add_to_cart_button, :is(body.home, body.archive) ul.products li.product a.added_to_cart { width: 100%; display: block; margin-top: auto; /* bg/color/hover keep !important: they beat WooCommerce's button CSS (loads after the child) at (0,4,3); padding/border win on specificity alone (TSK-034). */ background-color: var(--color-ink) !important; color: #fff !important; font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-weight: 800; font-size: 0.95rem; padding: 14px 16px; border-radius: var(--radius-button); text-align: center; text-decoration: none; border: none; transition: background-color 0.15s ease; } :is(body.home, body.archive) ul.products li.product .button.add_to_cart_button:hover, :is(body.home, body.archive) ul.products li.product a.added_to_cart:hover { background-color: var(--color-terracotta) !important; } /* PAGINATION: pill row, current terracotta bg, others outline (per mockup). WooCommerce nests nav.woocommerce-pagination > ul.page-numbers > li > a.page-numbers. The pill styles MUST be scoped to the

children — the .page-numbers class is ALSO on the

container, so an unscoped .page-numbers turned the whole list into a single bordered 42px pill. Selectors are prefixed with `.woocommerce` to outrank Storefront's connected-box defaults (which add the ul/li borders). */ .woocommerce nav.woocommerce-pagination { display: flex; justify-content: center; /* Clear Storefront's float:right, which shrank the nav to its content width and pinned it to the right edge of #primary. Full width lets justify-center align the pills with the product grid (main content), not the floated right edge. */ float: none; width: 100%; padding: 0; margin-top: clamp(36px, 4vw, 52px); } .woocommerce nav.woocommerce-pagination ul, .woocommerce nav.woocommerce-pagination ul.page-numbers { display: flex; justify-content: center; gap: 8px; list-style: none; border: none; padding: 0; margin: 0; } .woocommerce nav.woocommerce-pagination ul li { display: inline-flex; border: none; margin: 0; overflow: visible; } .woocommerce nav.woocommerce-pagination ul li .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px; border-radius: var(--radius-button); font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-weight: 700; font-size: 0.9rem; text-decoration: none; transition: all 0.15s ease; } .woocommerce nav.woocommerce-pagination ul li .page-numbers.current { background: var(--color-terracotta); color: #fff; border: 1px solid var(--color-terracotta); font-weight: 800; } .woocommerce nav.woocommerce-pagination ul li .page-numbers:not(.current):not(.dots):not(.prev):not(.next) { background: #fff; border: 1px solid var(--color-hairline); color: var(--color-ink); } .woocommerce nav.woocommerce-pagination ul li .page-numbers:not(.current):not(.dots):not(.prev):not(.next):hover, .woocommerce nav.woocommerce-pagination ul li .page-numbers:not(.current):not(.dots):not(.prev):not(.next):focus { border-color: var(--color-terracotta); color: var(--color-terracotta); } /* Ellipsis: no box, just muted glyph */ .woocommerce nav.woocommerce-pagination ul li .page-numbers.dots { background: transparent; border: none; color: var(--color-footer-muted); min-width: 0; padding: 0 4px; } /* Prev/next arrows: filled ink at rest, terracotta on hover, glyph always white (mockup). */ .woocommerce nav.woocommerce-pagination ul li .page-numbers.prev, .woocommerce nav.woocommerce-pagination ul li .page-numbers.next { background: var(--color-ink); border: 1px solid var(--color-ink); color: #fff; } .woocommerce nav.woocommerce-pagination ul li .page-numbers.prev:hover, .woocommerce nav.woocommerce-pagination ul li .page-numbers.prev:focus, .woocommerce nav.woocommerce-pagination ul li .page-numbers.next:hover, .woocommerce nav.woocommerce-pagination ul li .page-numbers.next:focus { background: var(--color-terracotta); border-color: var(--color-terracotta); color: #fff; } /* Checkout payment trust block (TSK-028): card-brand icons, "pago seguro" line and a Bizum callout that doesn't rely on the dismissable store-notice banner. Sits between the payment-method list and the place-order button. */ .fm-checkout-trust { margin: 14px 0 18px; padding: 12px 14px; background: var(--color-cream); border: 1px solid var(--color-hairline); border-radius: var(--radius-md); } .fm-checkout-trust__row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; } .fm-checkout-trust__cards { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; } .fm-checkout-trust__card-icon svg { display: block; width: 38px; height: 24px; } .fm-checkout-trust__secure { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--color-pitch-green); font-weight: 700; font-size: 0.85rem; } .fm-checkout-trust__secure svg { width: 16px; height: 16px; flex-shrink: 0; } .fm-checkout-trust__bizum { margin: 8px 0 0; color: var(--color-muted); font-size: 0.85rem; line-height: 1.5; } .fm-checkout-trust__bizum .bizum-note { position: relative; cursor: help; font-weight: 700; color: var(--color-ink); } .fm-checkout-trust__bizum .bizum-note::after { content: attr(data-tip); position: absolute; bottom: 100%; left: 0; transform: translateY(-6px); z-index: 50; padding: 4px 8px; border-radius: 6px; background: var(--color-ink); color: #fff; font-weight: 600; font-size: 0.75rem; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.12s ease; } .fm-checkout-trust__bizum .bizum-note:hover::after, .fm-checkout-trust__bizum .bizum-note:focus::after { opacity: 1; } /* ============================================================================ CART PAGE (TSK-047) Per the Carro.dc.html / Carro-vacio.dc.html mockups. Div/grid rebuild of the classic [woocommerce_cart] shortcode output — see woocommerce/cart/*.php for why specific core classes (cart_item, product-remove, cart_totals, …) are kept alongside the new fm-cart-* ones: WooCommerce's classic-cart JS drives AJAX add/remove/update entirely off those selectors. ============================================================================ */ /* PAGE HEADING: replaces Storefront's entry-title (suppressed for is_cart(), see functions.php) so the copy can include a live item-count subtitle. */ .fm-cart-page__header { max-width: var(--content-max); margin: 0 auto; padding: clamp(12px, 2vw, 18px) 0 clamp(16px, 2vw, 24px); } .fm-cart-page__title { font-family: var(--font-heading); font-weight: 900; font-size: clamp(2rem, 4vw, 2.8rem); letter-spacing: -0.02em; margin: 0; } .fm-cart-page__count { margin: 8px 0 0; font-size: 0.95rem; color: var(--color-muted); } /* GRID: items left, summary right; summary follows the list and drops its sticky position under 900px (mirrors the mockup's two breakpoints). */ .fm-cart-grid { display: grid; grid-template-columns: 1fr 340px; gap: clamp(20px, 3vw, 40px); align-items: start; } .fm-cart-items-col { min-width: 0; } .fm-cart-items { display: flex; flex-direction: column; gap: 14px; } @media (max-width: 900px) { .fm-cart-grid { grid-template-columns: 1fr; } body.fm div.cart_totals.fm-cart-summary { position: static; /* (0,3,1) beats the later base div.cart_totals.fm-cart-summary (0,2,1) */ top: auto; } } /* LINE-ITEM CARD */ .fm-cart-item { display: grid; grid-template-columns: 96px 1fr auto auto; align-items: center; gap: 18px; background: #fff; border: 1px solid var(--color-hairline); border-radius: var(--radius-card); padding: 16px; transition: transform 0.15s ease, box-shadow 0.15s ease; } .fm-cart-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); } .fm-cart-item__thumb { display: block; width: 96px; height: 96px; border-radius: var(--radius-button); overflow: hidden; background: var(--color-cream); } .fm-cart-item__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } .fm-cart-item__name { min-width: 0; } .fm-cart-item__title { font-family: var(--font-heading); font-weight: 800; font-size: 1.05rem; line-height: 1.25; margin: 0; } /* Base link: ink + the h3's 800 weight. The full ancestor chain lifts this to (0,4,1) so it decisively outranks the global store link rule `.woocommerce a:not(.button):not(.contact-link)` (0,3,1) — otherwise the product name inherits terracotta + light 300 weight. Mockup wants ink text that only turns terracotta on hover. */ .woocommerce .fm-cart-item .fm-cart-item__name .fm-cart-item__title a { color: var(--color-ink); font-weight: 800; text-decoration: none; } .woocommerce .fm-cart-item .fm-cart-item__name .fm-cart-item__title a:hover, .woocommerce .fm-cart-item .fm-cart-item__name .fm-cart-item__title a:focus { color: var(--color-terracotta); } .fm-cart-item__stock { margin: 8px 0 0; display: inline-flex; align-items: center; gap: 7px; font-size: 0.82rem; color: var(--color-muted); } .fm-cart-item__stock-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-pitch-green); } .fm-cart-item__price-cell { text-align: right; } .fm-cart-item__price-label { font-size: 0.78rem; color: var(--color-muted); display: block; } .fm-cart-item__price-value { font-family: var(--font-heading); font-weight: 700; font-size: 1rem; } .fm-cart-item__controls { display: flex; align-items: center; gap: 18px; } /* Quantity stepper: the −/+ buttons are presentation only (see assets/js/cart-quantity-stepper.js); the real input keeps its core name/min/max/step attributes so "Actualizar carrito" still works. */ .fm-cart-item__stepper { display: inline-flex; align-items: center; border: 1px solid var(--color-hairline); border-radius: var(--radius-pill); padding: 3px; } /* `.fm-cart-item__stepper` prefix lifts this to (0,2,0) so it beats Storefront's `button { padding: 0.618em 1.41575em }` group rule, which otherwise inflates the buttons to ~50×30 and offsets the glyph. flex-centering + padding:0 keep a true 1:1 square with the − / + centered. */ .fm-cart-item__stepper .fm-cart-item__step { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; min-width: 30px; padding: 0; border: none; background: transparent; border-radius: 50%; color: var(--color-ink); font-size: 1.1rem; line-height: 1; cursor: pointer; } .fm-cart-item__step:hover, .fm-cart-item__step:focus { background: var(--color-cream); color: var(--color-terracotta); } /* Hide the native number spinner so the input reads as a plain qty digit between the −/+ buttons. */ .fm-cart-item__stepper .quantity { margin: 0; } .fm-cart-item__stepper input.qty { width: 32px; min-width: 0; border: none; /* Storefront's `.input-text` adds an inset box-shadow that reads as a border. */ box-shadow: none; background: transparent; padding: 0; text-align: center; font-family: var(--font-heading); font-weight: 700; font-size: 0.95rem; -moz-appearance: textfield; appearance: textfield; } .fm-cart-item__stepper input.qty::-webkit-outer-spin-button, .fm-cart-item__stepper input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .fm-cart-item__subtotal { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } .fm-cart-item__subtotal-value { font-family: var(--font-heading); font-weight: 900; font-size: 1.15rem; /* Tight line-height: Storefront's inherited 1.618 padded the value box with ~6px of leading, doubling the visual gap to the remove link below. */ line-height: 1.1; color: var(--color-ink); } /* line-height:1 kills the ~6px leading Storefront's 1.618 baked into the remove box, which otherwise doubled the visual gap under the line subtotal. Covers both the WooCommerce `.product-remove` wrapper and the link itself. */ .fm-cart-item__subtotal .product-remove, .fm-cart-item__remove { line-height: 1; font-size: 0.8rem; color: var(--color-muted); } .fm-cart-item__remove:hover, .fm-cart-item__remove:focus { color: var(--color-terracotta); }