/* ===================================================================== Suministrosinkjet — tema WordPress/WooCommerce independiente Puerto 1:1 de outputs/web-dev/assets/css/styles.css (prototipo aprobado). Mismos tokens, mismos componentes; anade las clases reales que genera WooCommerce (mini-carrito, ficha, variaciones, carrito, checkout, mi cuenta) donde el prototipo usaba markup/JS propios. ===================================================================== */ /* --------------------------------------------------------------------- 1. Tokens --------------------------------------------------------------------- */ :root{ --c-ink:#0a0a0a; --c-paper:#ffffff; --c-surface:#f2f2f2; --c-studio:#e9e9ea; --c-raised:#ffffff; --c-line:#e2e2e3; --c-line-strong:#8e8e93; --c-mute:#6b6b6e; --c-mute-2:#8e8e93; --c-signal:#e4002b; --c-signal-strong:#b8001f; --c-signal-tint:#fbe3e8; --c-on-signal:#ffffff; --font-display:'Inter', system-ui, sans-serif; --font-body:'Inter', system-ui, sans-serif; --font-mono:'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace; --font-dot:'DotGothic16', var(--font-mono); --fs-000:.75rem; --fs-00:.8125rem; --fs-0:1rem; --fs-1:1.25rem; --fs-2:1.75rem; --fs-3:2.5rem; --fs-4:3.25rem; --fs-5:4.25rem; --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem; --sp-6:2rem; --sp-7:3rem; --sp-8:4rem; --sp-9:6rem; --sp-10:8rem; --bw:1px; --radius-sharp:0; --radius-pill:999px; --radius-soft:2px; --content-max:1280px; --ease-out:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.77,0,.175,1); --dur-fast:140ms; --dur-base:180ms; --dur-slow:240ms; --focus-ring:0 0 0 2px var(--c-paper), 0 0 0 4px var(--c-signal); } [data-theme="dark"]{ --c-ink:#f2f2f2; --c-paper:#0a0a0a; --c-surface:#1c1c1e; --c-studio:#1c1c1e; --c-raised:#141414; --c-line:#2c2c2e; --c-line-strong:#8e8e93; --c-mute:#a3a3a6; --c-mute-2:#8e8e93; --c-signal:#ff4d6d; --c-signal-strong:#ff7189; --c-signal-tint:#3a1319; --c-on-signal:#0a0a0a; --focus-ring:0 0 0 2px var(--c-paper), 0 0 0 4px var(--c-signal); } /* --------------------------------------------------------------------- 2. Reset --------------------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box;} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden;scroll-padding-top:140px;-webkit-tap-highlight-color:transparent;} body{margin:0;overflow-x:hidden;} img,svg{display:block;max-width:100%;} ul,ol{list-style:none;margin:0;padding:0;} h1,h2,h3,h4,p,figure{margin:0;} h1,h2,h3{text-wrap:balance;} p{text-wrap:pretty;} a{color:inherit;text-decoration:none;} button,input,select,textarea{font:inherit;color:inherit;} button{cursor:pointer;background:none;border:none;padding:0;} table{border-collapse:collapse;width:100%;} button,a,input,select,summary{touch-action:manipulation;} .mono,.price,.sij-price-tax,.specs-table td,.compat-box td,.price-amount, .woocommerce-tabs table.shop_attributes td,.woocommerce-cart-form td.product-price, .woocommerce-cart-form td.product-subtotal{font-variant-numeric:tabular-nums;} #categorias,#finder{scroll-margin-top:120px;} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;} } /* --------------------------------------------------------------------- 3. Base --------------------------------------------------------------------- */ body{ font-family:var(--font-body); font-size:var(--fs-0); line-height:1.55; color:var(--c-ink); background:var(--c-paper); transition:background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); } h1,h2,h3,.font-display{font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;line-height:1.08;} .mono,.sku,code{font-family:var(--font-mono);} .dot{font-family:var(--font-dot);} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{ outline:none; box-shadow:var(--focus-ring); border-radius:var(--radius-soft); } .skip-link{ position:absolute;left:var(--sp-4);top:-100px;z-index:200; background:var(--c-ink);color:var(--c-paper); padding:var(--sp-3) var(--sp-4); transition:top var(--dur-base) var(--ease-out); } .skip-link:focus{top:var(--sp-4);} .visually-hidden{ position:absolute;width:1px;height:1px;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px; } /** * .screen-reader-text — clase estandar de WordPress/WooCommerce (no la * anadimos nosotros: la generan de fabrica cosas como el precio de rango de * un producto variable, "Este producto tiene multiples variantes…" o la * etiqueta del input de cantidad). Al quitar por completo el CSS de * WooCommerce (`woocommerce_enqueue_styles` -> `__return_empty_array`) esta * regla desaparecio con el, dejando ese texto pensado solo para lectores de * pantalla visible de golpe en medio del precio/las tarjetas. Misma tecnica * que `.visually-hidden` de arriba, mas el :focus visible estandar de WP * para que un enlace con esta clase (p. ej. "saltar al contenido" de otro * plugin) siga siendo utilizable con teclado. */ .screen-reader-text{ border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%); height:1px;width:1px;overflow:hidden;position:absolute !important; word-wrap:normal !important;margin:-1px;padding:0; } .screen-reader-text:focus{ background-color:var(--c-paper);border-radius:var(--radius-soft); box-shadow:var(--focus-ring);clip:auto !important;clip-path:none; color:var(--c-ink);display:block;font-family:var(--font-body); font-size:var(--fs-00);font-weight:600;height:auto;line-height:normal; padding:var(--sp-3) var(--sp-4);text-decoration:none; top:var(--sp-2);left:var(--sp-2);width:auto;z-index:100000; } .container{max-width:var(--content-max);margin-inline:auto;padding-inline:var(--sp-5);} @media (min-width:900px){ .container{padding-inline:var(--sp-8);} } section{padding-block:var(--sp-8);} .section-border{border-top:var(--bw) solid var(--c-line);} .dot-field{ background-image:radial-gradient(circle, var(--c-line-strong) 1px, transparent 1.3px); background-size:18px 18px; } [data-theme="dark"] .dot-field{ opacity:.5; } .eyebrow{ font-family:var(--font-mono); font-size:var(--fs-000); color:var(--c-mute); display:flex;align-items:center;gap:var(--sp-2); } .eyebrow .tag-code{ border:var(--bw) solid var(--c-line-strong); padding:1px 6px; color:var(--c-ink); } /* --------------------------------------------------------------------- 4. Header --------------------------------------------------------------------- */ .site-header{ position:sticky;top:0;z-index:100; background:color-mix(in srgb, var(--c-paper) 92%, transparent); backdrop-filter:blur(6px); border-bottom:var(--bw) solid var(--c-line); } .topbar{ display:flex;align-items:center;justify-content:space-between; gap:var(--sp-4); padding-block:var(--sp-3); font-size:var(--fs-000); color:var(--c-mute); border-bottom:var(--bw) solid var(--c-line); } .topbar-msg{display:flex;gap:var(--sp-5);flex-wrap:wrap;} .topbar-msg span{white-space:nowrap;} .header-main{display:flex;align-items:center;gap:var(--sp-6);padding-block:var(--sp-4);} .logo{display:flex;align-items:center;gap:var(--sp-2);font-family:var(--font-display);font-weight:700;font-size:var(--fs-1);} .logo-mark{width:20px;height:20px;flex:none;} .logo-mark svg{width:100%;height:100%;} .logo-sub{font-family:var(--font-mono);font-size:9px;color:var(--c-mute);letter-spacing:.06em;display:block;font-weight:400;} .custom-logo-wrap img{height:32px;width:auto;display:block;} .main-nav{display:none;gap:var(--sp-4);margin-inline-start:var(--sp-3);flex-wrap:nowrap;align-items:center;} .main-nav a{ font-size:var(--fs-00); padding-block:var(--sp-2); border-bottom:2px solid transparent; white-space:nowrap; transition:border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); } .main-nav li{list-style:none;} .main-nav a:hover{border-color:var(--c-line-strong);} .main-nav a[aria-current="page"]{border-color:var(--c-signal);color:var(--c-ink);} @media (min-width:1280px){ .main-nav{gap:var(--sp-6);margin-inline-start:var(--sp-4);} } .header-actions{display:flex;align-items:center;gap:var(--sp-3);margin-inline-start:auto;} @media (min-width:1280px){ .header-actions{gap:var(--sp-4);} } .iva-toggle-label span{display:none;} @media (min-width:1360px){ .iva-toggle-label span{display:block;} } .icon-btn{ width:44px;height:44px;display:flex;align-items:center;justify-content:center; border:var(--bw) solid var(--c-line); transition:border-color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out); position:relative;background:var(--c-paper);color:var(--c-ink); } .icon-btn:hover{border-color:var(--c-ink);} .icon-btn:active{transform:scale(.97);} .icon-btn svg{width:18px;height:18px;} .cart-count{ position:absolute;top:-8px;right:-8px; background:var(--c-signal);color:var(--c-on-signal); font-family:var(--font-mono);font-size:10px;font-weight:600; min-width:18px;height:18px;border-radius:var(--radius-pill); display:flex;align-items:center;justify-content:center;padding-inline:3px; transition:transform var(--dur-fast) var(--ease-out); } .cart-count[hidden]{display:none;} .cart-count[data-bump="true"]{ animation:cart-bump 320ms var(--ease-out); } @keyframes cart-bump{ 0%{transform:scale(1);} 35%{transform:scale(1.35);} 100%{transform:scale(1);} } .nav-toggle{display:flex;} @media (min-width:960px){ .main-nav{display:flex;} .nav-toggle{display:none;} } .mobile-nav{ border-top:var(--bw) solid var(--c-line); padding:var(--sp-4) 0; display:none; flex-direction:column; gap:var(--sp-1); } .mobile-nav.is-open{display:flex;} .mobile-nav li{list-style:none;} .mobile-nav a{display:block;padding:var(--sp-3) 0;font-size:var(--fs-1);font-family:var(--font-display);border-bottom:var(--bw) solid var(--c-line);} @media (min-width:960px){ .mobile-nav{display:none !important;} } /* --- interruptor IVA --- */ .iva-toggle{ display:flex;align-items:center;gap:var(--sp-2); font-family:var(--font-mono);font-size:var(--fs-000); } .iva-toggle .switch{ width:42px;height:24px;border:var(--bw) solid var(--c-line-strong); border-radius:var(--radius-pill);position:relative;flex:none; background:var(--c-surface); transition:background-color var(--dur-base) ease, border-color var(--dur-base) ease, transform var(--dur-fast) var(--ease-out); } .iva-toggle .switch::after{ content:"";position:absolute;top:2px;left:2px; width:18px;height:18px;background:var(--c-ink);border-radius:50%; transition:transform var(--dur-base) var(--ease-out); } .iva-toggle[aria-checked="true"] .switch{background:var(--c-signal-tint);border-color:var(--c-signal);} .iva-toggle[aria-checked="true"] .switch::after{transform:translateX(18px);background:var(--c-signal);} .iva-toggle .switch:active{transform:scale(.97);} .iva-toggle-label{display:flex;flex-direction:column;line-height:1.2;text-align:left;} .iva-toggle-label b{color:var(--c-ink);} .theme-toggle svg{width:16px;height:16px;} /* --- buscador por referencia OEM, SKU propio, modelo o marca --- */ .site-search{position:relative;} .search-panel{ position:absolute;top:calc(100% + 10px);right:0; width:min(360px, 90vw); background:var(--c-paper);border:var(--bw) solid var(--c-line-strong); padding:var(--sp-4); transform-origin:top right; visibility:hidden;opacity:0;transform:scale(.97); transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base); z-index:150;margin:0; } .search-panel.is-open{ visibility:visible;opacity:1;transform:scale(1); transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear 0s; } .search-panel input[type="search"]{ width:100%;border:var(--bw) solid var(--c-line-strong);padding:var(--sp-3); font-family:var(--font-mono);font-size:var(--fs-00);background:var(--c-paper); appearance:none;border-radius:var(--radius-sharp); } .search-panel input[type="search"]::-webkit-search-cancel-button{display:none;} .search-hint{font-size:10px;color:var(--c-mute-2);margin-top:var(--sp-3);font-family:var(--font-mono);display:block;} /* --- mini-carrito: woocommerce_mini_cart() dentro de .widget_shopping_cart_content --- */ .mini-cart{position:relative;} .mini-cart-panel{ position:absolute;top:calc(100% + 10px);right:0; width:min(360px, 90vw); background:var(--c-paper);border:var(--bw) solid var(--c-line-strong); padding:var(--sp-4); transform-origin:top right; visibility:hidden;opacity:0;transform:scale(.97);pointer-events:none; transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base); z-index:150; } .mini-cart:focus-within .mini-cart-panel{ visibility:visible;opacity:1;transform:scale(1);pointer-events:auto; transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear 0s; } @media (hover:hover) and (pointer:fine){ .mini-cart:hover .mini-cart-panel{ visibility:visible;opacity:1;transform:scale(1);pointer-events:auto; transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear 0s; } } .widget_shopping_cart_content .woocommerce-mini-cart{ display:flex;flex-direction:column;gap:var(--sp-3);max-height:320px;overflow-y:auto;overscroll-behavior:contain; list-style:none;margin:0;padding:0; } .widget_shopping_cart_content .woocommerce-mini-cart-item{ display:grid;grid-template-columns:44px 1fr auto;gap:var(--sp-3);align-items:start;position:relative;padding:0;border:0; } .widget_shopping_cart_content .woocommerce-mini-cart-item img{width:44px;height:44px;object-fit:contain;background:var(--c-studio);} .widget_shopping_cart_content .woocommerce-mini-cart-item a.remove{position:absolute;top:0;right:0;color:var(--c-mute);width:20px;height:20px;display:flex;align-items:center;justify-content:center;} .widget_shopping_cart_content .woocommerce-mini-cart-item a.remove:hover{color:var(--c-signal);} .widget_shopping_cart_content .quantity{display:block;font-family:var(--font-mono);font-size:var(--fs-000);color:var(--c-mute);} .widget_shopping_cart_content .total{ display:flex;justify-content:space-between;border-top:var(--bw) solid var(--c-line);margin-top:var(--sp-3);padding-top:var(--sp-3);font-size:var(--fs-00); } .widget_shopping_cart_content .total strong{font-family:var(--font-mono);} .widget_shopping_cart_content .woocommerce-mini-cart__empty-message{font-size:var(--fs-000);color:var(--c-mute);padding:var(--sp-3) 0;margin:0;} .widget_shopping_cart_content .woocommerce-mini-cart__buttons{display:flex;flex-direction:column;gap:var(--sp-2);margin-top:var(--sp-3);} .widget_shopping_cart_content .woocommerce-mini-cart__buttons a{width:100%;} /* --------------------------------------------------------------------- 5. Breadcrumb — nativo de WooCommerce (WC_Breadcrumb), ver sij_breadcrumb() --------------------------------------------------------------------- */ .woocommerce-breadcrumb{ padding-block:var(--sp-4); font-family:var(--font-mono);font-size:var(--fs-000);color:var(--c-mute); border-bottom:var(--bw) solid var(--c-line); } .woocommerce-breadcrumb a:hover{color:var(--c-ink);} .woocommerce-breadcrumb .sep{margin-inline:var(--sp-2);color:var(--c-line-strong);} /* --------------------------------------------------------------------- 6. Botones — cubre .btn propio y los botones nativos de WooCommerce --------------------------------------------------------------------- */ .btn, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce-cart .checkout-button, .woocommerce-page .wc-proceed-to-checkout a.checkout-button{ display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2); border:var(--bw) solid var(--c-ink);border-radius:var(--radius-sharp); padding:var(--sp-3) var(--sp-5); font-size:var(--fs-00);font-weight:600;font-family:var(--font-body); background:var(--c-ink);color:var(--c-paper); transition:transform var(--dur-fast) var(--ease-out), background-color var(--dur-base) ease, border-color var(--dur-base) ease, color var(--dur-base) ease; } .btn:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover{background:var(--c-paper);color:var(--c-ink);} .btn:active, .woocommerce a.button:active, .woocommerce button.button:active{transform:scale(.97);} .btn-outline{background:transparent;color:var(--c-ink);} .btn-outline:hover{background:var(--c-ink);color:var(--c-paper);} .btn-signal, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce #respond input#submit.alt, .single_add_to_cart_button{ background:var(--c-signal);border-color:var(--c-signal);color:var(--c-on-signal); } .btn-signal:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .single_add_to_cart_button:hover{background:var(--c-signal-strong);border-color:var(--c-signal-strong);color:var(--c-on-signal);} .btn-block{width:100%;} .btn[disabled]{opacity:.45;cursor:not-allowed;} .btn[disabled]:hover{background:var(--c-ink);color:var(--c-paper);} .btn-outline[disabled]:hover{background:transparent;color:var(--c-ink);} .woocommerce button.button:disabled, .woocommerce button.button.disabled, .woocommerce a.button.disabled{opacity:.45;} .woocommerce a.added_to_cart{margin-left:var(--sp-2);font-family:var(--font-mono);font-size:var(--fs-000);text-decoration:underline;align-self:center;} /* Campos de formulario (checkout, cupon, cuenta, valoraciones) */ .woocommerce form .form-row label{font-size:var(--fs-000);font-family:var(--font-mono);color:var(--c-mute);display:block;margin-bottom:var(--sp-1);} .woocommerce form .input-text, .woocommerce form select, .woocommerce form textarea, .woocommerce table.shop_table td select, .select2-container--default .select2-selection--single{ border:var(--bw) solid var(--c-line-strong);border-radius:var(--radius-sharp); padding:var(--sp-2) var(--sp-3);background:var(--c-paper);color:var(--c-ink); font-family:var(--font-body);width:100%;min-height:44px; } .select2-container--default .select2-selection--single .select2-selection__rendered{line-height:2.2;color:var(--c-ink);} .select2-container--default .select2-selection--single .select2-selection__arrow{height:42px;} .select2-dropdown{border-color:var(--c-line-strong);border-radius:var(--radius-sharp);} .woocommerce form textarea{min-height:100px;} .woocommerce-input-wrapper{display:block;} /* Avisos nativos de WooCommerce (anadido al carrito, errores de checkout…) */ .woocommerce-message,.woocommerce-error,.woocommerce-info,.woocommerce-noreviews{ border:var(--bw) solid var(--c-line-strong);border-left:3px solid var(--c-signal); background:var(--c-surface);color:var(--c-ink);padding:var(--sp-4) var(--sp-5); list-style:none;border-radius:var(--radius-sharp);margin-bottom:var(--sp-5); display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center;justify-content:space-between; } .woocommerce-message::before,.woocommerce-error::before,.woocommerce-info::before{display:none;} .woocommerce-error li{list-style:none;} /* --------------------------------------------------------------------- 7. Hero --------------------------------------------------------------------- */ .hero{ border-bottom:var(--bw) solid var(--c-line); padding-block:var(--sp-9) var(--sp-8); position:relative; overflow:hidden; } .hero-grid{ display:grid;gap:var(--sp-7); grid-template-columns:1fr; } @media (min-width:960px){ .hero-grid{grid-template-columns:1.15fr .85fr;align-items:center;} } .hero-eyebrow{margin-bottom:var(--sp-5);} .hero h1{ font-size:var(--fs-3); max-width:14ch; } @media (min-width:640px){ .hero h1{font-size:var(--fs-4);} } @media (min-width:1200px){ .hero h1{font-size:var(--fs-5);} } .hero-line{display:block;overflow:hidden;} .hero-line span{display:block;opacity:0;transform:translateY(100%);animation:hero-line-in 620ms var(--ease-out) forwards;} .hero-line:nth-child(1) span{animation-delay:60ms;} .hero-line:nth-child(2) span{animation-delay:140ms;} .hero-line:nth-child(3) span{animation-delay:220ms;} @keyframes hero-line-in{ to{opacity:1;transform:translateY(0);} } @media (prefers-reduced-motion: reduce){ .hero-line span{animation:hero-fade-in 300ms ease forwards;transform:none;} @keyframes hero-fade-in{ to{opacity:1;} } } .hero p.lede{ margin-top:var(--sp-5); max-width:52ch; color:var(--c-mute); font-size:var(--fs-1); opacity:0; animation:fade-up-once 500ms var(--ease-out) 420ms forwards; } @keyframes fade-up-once{ from{opacity:0;transform:translateY(6px);} to{opacity:1;transform:translateY(0);} } @media (prefers-reduced-motion: reduce){ .hero p.lede{animation:hero-fade-in 300ms ease 200ms forwards;} } .hero-actions{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin-top:var(--sp-6); opacity:0;animation:fade-up-once 500ms var(--ease-out) 520ms forwards;} @media (prefers-reduced-motion: reduce){ .hero-actions{animation:hero-fade-in 300ms ease 260ms forwards;} } .hero-stats{display:flex;flex-wrap:wrap;gap:var(--sp-7);margin-top:var(--sp-8); padding-top:var(--sp-6);border-top:var(--bw) solid var(--c-line); opacity:0;animation:fade-up-once 500ms var(--ease-out) 600ms forwards;} @media (prefers-reduced-motion: reduce){ .hero-stats{animation:hero-fade-in 300ms ease 300ms forwards;} } .hero-stat b{display:block;font-family:var(--font-mono);font-size:var(--fs-2);} .hero-stat span{font-size:var(--fs-000);color:var(--c-mute);} .hero-visual{ position:relative; aspect-ratio:4/3; border:var(--bw) solid var(--c-line); background:var(--c-studio); display:flex;align-items:center;justify-content:center; clip-path:inset(0 100% 0 0); animation:reveal-panel 700ms var(--ease-in-out) 100ms forwards; overflow:hidden; } @keyframes reveal-panel{ to{clip-path:inset(0 0 0 0);} } @media (prefers-reduced-motion: reduce){ .hero-visual{clip-path:inset(0 0 0 0);animation:hero-fade-in 300ms ease forwards;} } .hero-visual .dot-field{position:absolute;inset:0;} .hero-visual svg{position:relative;width:46%;color:var(--c-ink);} .hero-visual .corner{position:absolute;width:10px;height:10px;border:var(--bw) solid var(--c-ink);} .hero-visual .corner.tl{top:-1px;left:-1px;border-right:0;border-bottom:0;} .hero-visual .corner.br{bottom:-1px;right:-1px;border-left:0;border-top:0;} .hero-visual img.hero-photo{width:100%;height:100%;object-fit:cover;object-position:62% 50%;} /* --------------------------------------------------------------------- 8. Categorias --------------------------------------------------------------------- */ .cat-grid{ display:grid;grid-template-columns:1fr;gap:0; border:var(--bw) solid var(--c-line); border-bottom:0; } @media (min-width:640px){ .cat-grid{grid-template-columns:1fr 1fr;} } @media (min-width:960px){ .cat-grid{grid-template-columns:repeat(3,1fr);} } .cat-card{ padding:var(--sp-6); border-right:var(--bw) solid var(--c-line); border-bottom:var(--bw) solid var(--c-line); display:flex;flex-direction:column;gap:var(--sp-4); transition:background-color var(--dur-base) ease; min-height:230px; } .cat-card:hover{background:var(--c-surface);} .cat-card .cat-code{font-family:var(--font-mono);font-size:var(--fs-000);color:var(--c-mute);} .cat-card svg{width:34px;height:34px;color:var(--c-ink);} .cat-card h3{font-size:var(--fs-1);margin-top:auto;} .cat-card p{color:var(--c-mute);font-size:var(--fs-00);} .cat-card .cat-link{ margin-top:var(--sp-2);font-family:var(--font-mono);font-size:var(--fs-000); display:flex;align-items:center;gap:var(--sp-1); } .cat-card .cat-link svg{width:12px;height:12px;transition:transform var(--dur-base) var(--ease-out);} .cat-card:hover .cat-link svg{transform:translateX(3px);} /* Todas las tarjetas (normales y "Marcadoras") envuelven su contenido principal en dentro de
, en vez de que el propio
raiz sea el (como antes): asi la tarjeta "Marcadoras" puede anadir una fila de DESPUES del link principal sin anidar un dentro de otro. Se descarto `display:contents` en `.cat-card__link` (evitaria escribir el padding dos veces) porque en algunos navegadores un elemento `display:contents` no dibuja bien el anillo de foco de teclado al no generar caja propia — mejor un foco fiable que ahorrarse unas lineas. Para una tarjeta NORMAL (sin chips), `.cat-card__link` no lleva padding propio: como es el UNICO hijo flex de `.cat-card`, `flex:1` ya lo estira para rellenar toda la caja con el padding de `.cat-card` de siempre — el click y el hover cubren la tarjeta entera, igual que antes. */ .cat-card__link{display:flex;flex-direction:column;gap:var(--sp-4);flex:1;} /* El fondo de :hover ya lo pone `.cat-card:hover` (regla base, arriba): `.cat-card__link` no tiene fondo propio, asi que ese tinte se ve igual a traves suyo — solo hace falta un foco de teclado propio aqui. */ .cat-card__link:focus-visible{outline:none;box-shadow:inset var(--focus-ring);} .cat-card__chips{display:flex;flex-wrap:wrap;gap:var(--sp-2);} /* Tarjeta "Marcadoras" (agrupa Marcadoras TIJ/CIJ/Laser, ver sij_get_home_categories()): el padding se mueve de `.cat-card` (que aqui se pone a 0) a `.cat-card__link` y `.cat-card__chips` por separado, para que cada zona (link principal / fila de chips) tenga su propio respiro sin duplicar el de la otra. */ .cat-card--group{padding:0;} .cat-card--group .cat-card__link{padding:var(--sp-6);} .cat-card--group .cat-card__chips{padding:0 var(--sp-6) var(--sp-6);} .reconditioned-banner{ display:flex;flex-direction:column;gap:var(--sp-4); margin-top:var(--sp-5); border:var(--bw) solid var(--c-line-strong); border-left:3px solid var(--c-signal); padding:var(--sp-6); transition:border-color var(--dur-base) ease, background-color var(--dur-base) ease; } @media (min-width:768px){ .reconditioned-banner{flex-direction:row;align-items:center;justify-content:space-between;gap:var(--sp-6);} .reconditioned-banner p{max-width:52ch;} } .reconditioned-banner:hover{background:var(--c-surface);border-left-color:var(--c-signal-strong);} .reconditioned-banner__img{width:56px;height:56px;flex:none;} .reconditioned-banner h3{font-size:var(--fs-1);margin-top:var(--sp-2);} .reconditioned-banner p{color:var(--c-mute);font-size:var(--fs-00);margin-top:var(--sp-2);} .reconditioned-banner .cat-link{ font-family:var(--font-mono);font-size:var(--fs-000); display:flex;align-items:center;gap:var(--sp-1);white-space:nowrap; } .reconditioned-banner .cat-link svg{width:12px;height:12px;transition:transform var(--dur-base) var(--ease-out);} .reconditioned-banner:hover .cat-link svg{transform:translateX(3px);} /* --------------------------------------------------------------------- 9. Buscador por impresora --------------------------------------------------------------------- */ .finder{ border:var(--bw) solid var(--c-line); padding:var(--sp-7); display:grid;gap:var(--sp-6); } @media (min-width:900px){ .finder{grid-template-columns:1fr 1fr;align-items:start;} } .finder h2{font-size:var(--fs-2);} .brand-picker{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-5);} .brand-chip{ border:var(--bw) solid var(--c-line-strong); padding:var(--sp-2) var(--sp-4); font-family:var(--font-mono);font-size:var(--fs-00); transition:border-color var(--dur-base) ease, background-color var(--dur-base) ease, color var(--dur-base) ease; display:inline-flex;align-items:center;min-height:44px; } .brand-chip:hover{background:var(--c-ink);color:var(--c-paper);border-color:var(--c-ink);} /* --------------------------------------------------------------------- 10. Rejilla de producto (.products / .product) — woocommerce/content-product.php --------------------------------------------------------------------- */ /* * Selector con etiqueta (`ul.products`, no `.products` a secas) a * proposito: el `
` que WooCommerce pone alrededor de * "Productos relacionados"/"Productos que tambien te pueden interesar" * (single-product/related.php, single-product/up-sells.php) lleva las * clases `class="related products"` / `class="upsells products"` — es * decir, ESE section tambien tiene la clase "products", ademas del * `
    ` de dentro con las tarjetas. Si esta regla fuera * `.products{display:grid;...}` a secas, convertia tambien el `
    ` * exterior en una rejilla de 2/3/4 columnas, metiendo el `

    ` del * titulo y el `
      ` entero como si fueran 2 celdas de esa rejilla — de * ahi que "Productos relacionados" saliera con el titulo aplastado a la * izquierda y las tarjetas estrujadas en columnas de ~40px. Anclar el * selector a `ul` evita que la regla toque el `
      `. */ ul.products{ display:grid !important;gap:0; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:var(--bw) solid var(--c-line); border-left:var(--bw) solid var(--c-line); margin:0 !important;padding:0;list-style:none; } @media (min-width:640px){ ul.products{grid-template-columns:repeat(3,minmax(0,1fr)) !important;} } @media (min-width:1024px){ ul.products{grid-template-columns:repeat(4,minmax(0,1fr)) !important;} } ul.products .product{ border-right:var(--bw) solid var(--c-line); border-bottom:var(--bw) solid var(--c-line); padding:var(--sp-5) !important; display:flex;flex-direction:column;gap:var(--sp-3); position:relative;width:100% !important;margin:0 !important; transition:border-color var(--dur-base) ease; list-style:none; } @media (hover:hover) and (pointer:fine){ .product:hover{border-color:var(--c-ink);z-index:1;} .product:hover .product-thumb-img--main{transform:scale(1.035);} .product:hover .product-thumb-img--hover{opacity:1;transform:translate(-50%,-50%) scale(1.035);} .product:hover .product-view{opacity:1;transform:translateY(0);} } .product-thumb-link{display:block;} .product-thumb{ aspect-ratio:1/1;background:var(--c-studio); display:flex;align-items:center;justify-content:center; overflow:hidden;position:relative; } .product-thumb img{width:70%;height:70%;object-fit:contain;transition:transform var(--dur-slow) var(--ease-out);} /* * Imagen de "hover" (segunda foto de la galeria, ver * sij_get_card_hover_image_html() en inc/product-card.php): superpuesta * con position:absolute y centrada a mano (un hijo absoluto dentro de un * contenedor flex no se centra con align/justify-content), oculta con * opacity:0 hasta que el puntero pasa por encima de la tarjeta. Solo se * imprime en el HTML cuando el producto tiene una foto de galeria real * (nunca se usa el placeholder como imagen de hover). * * Selector `.product-thumb .product-thumb-img--hover` (dos clases) a * proposito, no `.product-thumb-img--hover` a secas: tiene que ganarle en * especificidad a `.product-thumb img` (una clase + una etiqueta) de * arriba, que ya declara su propio `transition` (solo `transform`) — sin * el empate roto a nuestro favor, esa regla se quedaria con el `transition` * final y la opacidad cambiaria de golpe en vez de con un fundido. */ .product-thumb .product-thumb-img--hover{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); opacity:0;transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-slow) var(--ease-out); } .product-flags{position:absolute;top:var(--sp-2);left:var(--sp-2);display:flex;gap:var(--sp-1);flex-wrap:wrap;z-index:2;} .tag{ font-family:var(--font-mono);font-size:10px;letter-spacing:.02em; padding:2px 6px;border:var(--bw) solid var(--c-line-strong);background:var(--c-paper); } .tag-example{color:var(--c-mute);} .tag-signal{background:var(--c-signal);border-color:var(--c-signal);color:var(--c-on-signal);position:absolute;top:var(--sp-2);right:var(--sp-2);z-index:2;} /* .onsale: badge nativo de WooCommerce (woocommerce_show_product_loop_sale_flash en tarjetas, woocommerce_show_product_sale_flash en ficha) — sin CSS propio se quedaba en el flujo normal del documento en vez de superpuesto. Arriba a la IZQUIERDA (junto a los badges de Tipo en .product-flags) a proposito: ".tag-signal" (aviso de pocas unidades) ya ocupa la esquina superior derecha y ambos podrian coincidir en el mismo producto. */ .onsale{ position:absolute;top:var(--sp-2);left:var(--sp-2);z-index:2; background:var(--c-signal);color:var(--c-on-signal); font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.02em; padding:3px 8px;line-height:1.3;border:var(--bw) solid var(--c-signal); } /* Cuando hay badges de Tipo (.product-flags, tambien arriba a la izquierda), el onsale se apila debajo del primero en vez de superponerse. */ .product-flags + .onsale{top:calc(var(--sp-2) + 22px);} .single-product div.product .onsale{position:static;display:inline-block;margin-bottom:var(--sp-3);} /* .star-rating: WooCommerce dibuja las estrellas con una fuente de iconos propia que solo se cargaba junto al CSS que hemos quitado (woocommerce_enqueue_styles). En vez de reintroducir esa fuente, pintamos las estrellas con el caracter Unicode "★": una capa muda de fondo y otra en color recortada al ancho que WooCommerce ya calcula (el que genera de fabrica). */ .star-rating{ position:relative;display:inline-block;overflow:hidden; font-family:var(--font-body);font-size:var(--fs-00);line-height:1; height:1.1em;width:5.4em;color:var(--c-line-strong);letter-spacing:.15em; } .star-rating::before{content:"★★★★★";position:absolute;top:0;left:0;} .star-rating span{position:absolute;top:0;left:0;height:100%;overflow:hidden;} .star-rating span::before{content:"★★★★★";position:absolute;top:0;left:0;color:var(--c-signal);} /* --------------------------------------------------------------------- Badges de Tipo/Estado — ORIGINAL / COMPATIBLE / REACONDICIONADO --------------------------------------------------------------------- */ .badge{ display:inline-flex;align-items:center;gap:4px; font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.02em; padding:3px 7px;line-height:1.3; border:var(--bw) solid transparent; white-space:nowrap; } .badge svg{width:9px;height:9px;flex:none;} .badge-original{background:var(--c-ink);color:var(--c-paper);border-color:var(--c-ink);} .badge-compatible{background:transparent;color:var(--c-ink);border-color:var(--c-ink);} .badge-nuevo{background:transparent;color:var(--c-mute);border-color:var(--c-line-strong);} .badge-reacondicionado{ position:relative;overflow:hidden;isolation:isolate; background:var(--c-signal-tint);color:var(--c-signal-strong);border-color:var(--c-signal); } .badge-reacondicionado::before{ content:"";position:absolute;inset:0;z-index:-1; background-image:radial-gradient(circle, currentColor .5px, transparent 1.2px); background-size:4px 4px;opacity:.3; } .badge-reacondicionado--hint{font-weight:500;} .badge-tipo,.badge-estado{transition:background-color var(--dur-base) ease, color var(--dur-base) ease, border-color var(--dur-base) ease;} .product-badges{display:flex;flex-wrap:wrap;gap:var(--sp-2);} .product-view{ position:absolute;bottom:var(--sp-2);right:var(--sp-2); width:32px;height:32px;background:var(--c-ink);color:var(--c-paper); display:flex;align-items:center;justify-content:center; opacity:0;transform:translateY(4px); transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); pointer-events:none; } .product-view svg{width:14px;height:14px;} .product-sku{font-family:var(--font-mono);font-size:10px;color:var(--c-mute-2);} .product h3,.product-title{font-size:var(--fs-00);font-family:var(--font-body);font-weight:600;line-height:1.35; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-width:0;} .product-title a{position:relative;} .product-title a::after{content:"";position:absolute;inset:-4px -4px -60px -4px;z-index:1;} .product-meta-row{font-size:var(--fs-000);color:var(--c-mute);} .price{font-family:var(--font-mono);font-weight:600;font-size:var(--fs-1);} .price .price-tax-note{display:block;font-family:var(--font-body);font-weight:400;font-size:10px;color:var(--c-mute);margin-top:2px;} .price del{color:var(--c-mute);font-weight:400;opacity:.7;text-decoration:line-through;} .price ins{text-decoration:none;} .product-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);position:relative;z-index:2;flex-wrap:wrap;} .product-foot .button, .product-foot a.button, .product-foot .add_to_cart_button{ padding:var(--sp-2) var(--sp-4);font-size:var(--fs-000);white-space:nowrap; } .sij-price-tax-toggle{display:inline-flex;flex-direction:column;gap:2px;} .sij-price-tax{font-family:var(--font-mono);} .sij-price-tax .price-tax-note{display:block;font-family:var(--font-body);font-weight:400;font-size:11px;color:var(--c-mute);} /* --------------------------------------------------------------------- 11. Ventajas B2B --------------------------------------------------------------------- */ .advantages{display:grid;grid-template-columns:1fr;gap:0;border-top:var(--bw) solid var(--c-line);} @media (min-width:768px){ .advantages{grid-template-columns:repeat(3,1fr);} } .advantage{ padding:var(--sp-7) var(--sp-6); border-bottom:var(--bw) solid var(--c-line); border-right:var(--bw) solid var(--c-line); } @media (min-width:768px){ .advantage:last-child{border-right:0;} } .advantage svg{width:28px;height:28px;margin-bottom:var(--sp-4);} .advantage h3{font-size:var(--fs-1);margin-bottom:var(--sp-2);} .advantage p{color:var(--c-mute);font-size:var(--fs-00);} /* --------------------------------------------------------------------- 12. Layout de catalogo (woocommerce/archive-product.php) --------------------------------------------------------------------- */ .catalog-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--sp-4);padding-block:var(--sp-6);} .catalog-head h1{font-size:var(--fs-3);} .catalog-head p,.sij-catalog-desc{color:var(--c-mute);max-width:60ch;margin-top:var(--sp-2);} .catalog-layout{display:grid;grid-template-columns:1fr;gap:var(--sp-7);padding-bottom:var(--sp-9);} @media (min-width:960px){ .catalog-layout{grid-template-columns:260px 1fr;align-items:start;} } .filters{border:var(--bw) solid var(--c-line);} .filters-head{ display:flex;align-items:center;justify-content:space-between; padding:var(--sp-4);border-bottom:var(--bw) solid var(--c-line); font-family:var(--font-mono);font-size:var(--fs-000); } .filters-head a,.filters-head button{color:var(--c-mute);text-decoration:underline;text-underline-offset:2px;} .filters-head a:hover,.filters-head button:hover{color:var(--c-ink);} .filter-group{border-bottom:var(--bw) solid var(--c-line);} .filter-group summary{ padding:var(--sp-4);cursor:pointer;list-style:none; display:flex;align-items:center;justify-content:space-between; font-weight:600;font-size:var(--fs-00); } .filter-group summary::-webkit-details-marker{display:none;} .filter-group summary::after{content:"+";font-family:var(--font-mono);color:var(--c-mute);} .filter-group[open] summary::after{content:"–";} .filter-body{padding:0 var(--sp-4) var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-3);} .check-row{display:flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-00);cursor:pointer;min-height:32px;padding:var(--sp-1) var(--sp-2);margin-inline:calc(var(--sp-2) * -1);transition:background-color var(--dur-fast) ease;} .check-row:hover{background:var(--c-surface);} .check-row .check-box{ width:16px;height:16px;flex:none;border:var(--bw) solid var(--c-line-strong); display:flex;align-items:center;justify-content:center;color:var(--c-paper); transition:background-color var(--dur-fast) ease, border-color var(--dur-fast) ease; } .check-row .check-box svg{width:11px;height:11px;} .check-row.is-active .check-box{background:var(--c-ink);border-color:var(--c-ink);} .check-row .count{margin-inline-start:auto;color:var(--c-mute-2);font-family:var(--font-mono);font-size:var(--fs-000);} /* Enlaces de navegacion (Marca -> subcategoria) reutilizan .check-row por layout/hover, pero llevan una flecha en vez de una casilla: no son un filtro que se activa/desactiva, son un enlace a otra pagina. */ .check-row--nav .nav-arrow{width:14px;height:14px;flex:none;color:var(--c-mute-2);transition:transform var(--dur-base) var(--ease-out);} .check-row--nav:hover .nav-arrow{transform:translateX(2px);color:var(--c-ink);} .active-filters{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:var(--sp-5);min-height:1px;} .chip{ display:inline-flex;align-items:center;gap:var(--sp-2); border:var(--bw) solid var(--c-line-strong);padding:var(--sp-1) var(--sp-3); font-family:var(--font-mono);font-size:var(--fs-000);border-radius:var(--radius-pill); } .chip a,.chip button{display:flex;transition:color var(--dur-fast) ease;} .chip a:hover,.chip button:hover{color:var(--c-signal);} .chip a svg,.chip button svg{width:10px;height:10px;} .toolbar{ display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center;justify-content:space-between; margin-bottom:var(--sp-5); padding-bottom:var(--sp-4);border-bottom:var(--bw) solid var(--c-line); } .result-count,.woocommerce-result-count{font-family:var(--font-mono);font-size:var(--fs-00);color:var(--c-mute);margin:0;} .select-sort, .woocommerce-ordering{margin:0;} .woocommerce-ordering select.orderby, .select-sort{ border:var(--bw) solid var(--c-line-strong); padding:var(--sp-2) var(--sp-4); background:var(--c-paper); font-size:var(--fs-00); min-height:44px; } .empty-state{ border:var(--bw) dashed var(--c-line-strong); padding:var(--sp-9);text-align:center;color:var(--c-mute); } .empty-state .dot-field{width:80px;height:80px;margin:0 auto var(--sp-5);} nav.woocommerce-pagination,nav.navigation.pagination,nav.pagination{margin-top:var(--sp-7);display:flex;justify-content:center;} .page-numbers{display:flex;gap:var(--sp-2);list-style:none;padding:0;margin:0;flex-wrap:wrap;} a.page-numbers,span.page-numbers{ display:flex;align-items:center;justify-content:center;min-width:44px;height:44px; border:var(--bw) solid var(--c-line);font-family:var(--font-mono);font-size:var(--fs-00);padding-inline:var(--sp-2); } span.page-numbers.current{background:var(--c-ink);color:var(--c-paper);border-color:var(--c-ink);} a.page-numbers:hover{border-color:var(--c-ink);} /* --------------------------------------------------------------------- 13. Ficha de producto — marcado nativo de WooCommerce, ver woocommerce/single-product.php + inc/badges.php + inc/oem-compat.php --------------------------------------------------------------------- */ .single-product div.product{ display:grid;grid-template-columns:1fr;gap:var(--sp-6) var(--sp-8);padding-block:var(--sp-7) var(--sp-9); max-width:var(--content-max);margin-inline:auto;padding-inline:var(--sp-5); } @media (min-width:900px){ .single-product div.product{grid-template-columns:1fr 1fr;padding-inline:var(--sp-8);} /* * WooCommerce pinta la galeria, el resumen (.summary) Y (via nuestros * propios hooks + los de fabrica en woocommerce_after_single_product_summary) * la tabla de compatibilidades, las pestañas de descripcion y los * productos relacionados como HERMANOS, todos dentro de este mismo * `div.product` (ver woocommerce/single-product.php). Con el grid de 2 * columnas de arriba y SIN esta regla, el auto-colocado de CSS Grid mete * cada hermano en la siguiente celda libre en orden de lectura — el aviso * "Imagen orientativa" (que sale entre la galeria y el resumen, hook * `woocommerce_before_single_product_summary` prioridad 25) se cuela en la * fila 1 columna 2 y empuja el resumen entero a la fila 2 columna 1, es * decir DEBAJO de la imagen — exactamente el fallo detectado en capturas. * * Fijamos explicitamente columna en los elementos que reconocemos; el * resto (pestañas de descripcion, relacionados, upsells — cualquier cosa * que no sea galeria/aviso/resumen/tabla de compatibilidades) ocupa las * dos columnas para no romper la rejilla si WooCommerce o un plugin anade * algo mas aqui en el futuro. */ .single-product div.product > *{grid-column:1 / -1;} .single-product div.product > .woocommerce-product-gallery, .single-product div.product > .sij-image-notice{grid-column:1;} .single-product div.product > .summary, .single-product div.product > .compat-box{grid-column:2;} /* Filas fijas: galeria (fila 1) + aviso (fila 2) a la izquierda; resumen ocupa filas 1-2 a la derecha, tabla de compatibilidades debajo (fila 3). Sin esto el aviso empujaba el resumen a la fila 2. */ .single-product div.product > .woocommerce-product-gallery{grid-row:1;} .single-product div.product > .sij-image-notice{grid-row:2;align-self:start;} .single-product div.product > .summary{grid-row:1 / span 2;align-self:start;} .single-product div.product > .compat-box{grid-row:3;margin-top:0;} .single-product div.product{grid-template-rows:auto auto auto;align-items:start;} } .single-product div.product .woocommerce-product-gallery__image img{width:100%;height:auto;display:block;} .single-product div.product .woocommerce-product-gallery{ position:relative; border:var(--bw) solid var(--c-line);background:var(--c-studio); } /* * WooCommerce (assets/js/frontend/single-product.js, `wc_product_gallery`) * pone la galeria a `opacity:0` antes de inicializar flexslider/zoom y la * sube a 1 cuando termina. Es un estilo en linea puesto por JS: al quitar * por completo el CSS de WooCommerce (`woocommerce_enqueue_styles` -> * `__return_empty_array`) tambien se fue la logica/CSS que WooCommerce * asume que ya esta cargada para que ese "pop-in" funcione, y la galeria se * quedaba invisible (recuadro gris vacio) tanto con JS como sin el. Una * regla con !important en nuestra hoja gana SIEMPRE a un estilo en linea * sin !important, asi que esto la fuerza visible pase lo que pase. */ .single-product div.product .woocommerce-product-gallery, .single-product div.product .woocommerce-product-gallery__wrapper{opacity:1 !important;} .single-product div.product .woocommerce-product-gallery__wrapper{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden;} .single-product div.product .woocommerce-product-gallery__image{width:100%;height:100%;display:flex;align-items:center;justify-content:center;} .single-product div.product .woocommerce-product-gallery img{width:70%;height:70%;object-fit:contain;} .single-product div.product .flex-control-thumbs{display:flex;gap:var(--sp-3);margin-top:var(--sp-3);list-style:none;padding:0;flex-wrap:wrap;} .single-product div.product .flex-control-thumbs li{width:64px;height:64px;} .single-product div.product .flex-control-thumbs img{ width:100%;height:100%;object-fit:contain;border:var(--bw) solid var(--c-line);background:var(--c-studio); transition:border-color var(--dur-base) ease; } .single-product div.product .flex-control-thumbs img.flex-active{border-color:var(--c-ink);} .woocommerce-product-gallery__trigger{ position:absolute;top:var(--sp-3);left:var(--sp-3);z-index:3; width:36px;height:36px;display:flex;align-items:center;justify-content:center; background:var(--c-paper);border:var(--bw) solid var(--c-line-strong);color:var(--c-ink); transition:background-color var(--dur-fast) ease,color var(--dur-fast) ease,transform var(--dur-fast) var(--ease-out); } .woocommerce-product-gallery__trigger:hover{background:var(--c-ink);color:var(--c-paper);} .woocommerce-product-gallery__trigger:active{transform:scale(.94);} .woocommerce-product-gallery__trigger img, .woocommerce-product-gallery__trigger svg{width:16px;height:16px;} .sij-image-notice{font-size:var(--fs-000);color:var(--c-mute);margin:var(--sp-2) 0 0;} .single-product div.product .summary{max-width:100%;} .single-product div.product .product_title{font-size:var(--fs-2);margin-bottom:0;font-family:var(--font-display);} .single-product div.product .sku_wrapper, .single-product div.product .posted_in{font-family:var(--font-mono);font-size:var(--fs-000);color:var(--c-mute-2);display:block;margin-top:var(--sp-2);} .single-product div.product .sku_wrapper .sku{color:var(--c-ink);} .single-product div.product .woocommerce-product-rating{margin-top:var(--sp-3);display:flex;align-items:center;gap:var(--sp-2);} #sij-badge-tipo{margin-top:var(--sp-3);} #sij-badge-estado{margin-top:var(--sp-3);min-height:22px;} .single-product div.product p.price, .single-product div.product span.price{ font-size:var(--fs-3);display:block;margin-top:var(--sp-5);font-family:var(--font-mono);font-weight:600;color:var(--c-ink); } /* .trust-row es compartido con woocommerce/archive-product.php (fila de confianza bajo el H1 de categoria/tienda) — la regla NO va scopeada a ".single-product div.product" para que aplique en ambos sitios; sin este cambio los SVG (carrito/camion/escudo) del catalogo salian sin tamano fijado (300x150 por defecto del navegador) y gigantes. Ver tambien assets/css/styles.css del prototipo (misma regla, sin scope). */ .trust-row{display:flex;flex-wrap:wrap;gap:var(--sp-5);margin-top:var(--sp-4);list-style:none;padding:0;} .trust-row li{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-000);color:var(--c-mute);} .trust-row svg{width:16px;height:16px;flex:none;color:var(--c-ink);} .single-product div.product p.stock{ display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-00);margin-top:var(--sp-3);font-family:var(--font-body); } .single-product div.product p.stock::before{ content:"";width:8px;height:8px;border-radius:50%;background:var(--c-ink);flex:none; } .single-product div.product p.stock.out-of-stock::before, .single-product div.product p.stock.available-on-backorder::before{background:var(--c-signal);} .state-notice, .woocommerce-variation-description{ margin-top:var(--sp-4);padding:var(--sp-4);border:var(--bw) solid var(--c-line); font-size:var(--fs-000);line-height:1.5;color:var(--c-mute);max-width:52ch; } .woocommerce-variation-description p{margin:0;} .state-notice--compatible, .woocommerce-variation-description.state-notice--compatible{border-color:var(--c-ink);color:var(--c-ink);} .state-notice--reacondicionado, .woocommerce-variation-description.state-notice--reacondicionado{ position:relative;isolation:isolate;overflow:hidden;border-color:var(--c-signal);background:var(--c-signal-tint);color:var(--c-ink); } .state-notice--reacondicionado::before, .woocommerce-variation-description.state-notice--reacondicionado::before{ content:"";position:absolute;inset:0;z-index:-1; background-image:radial-gradient(circle, var(--c-signal) .6px, transparent 1.3px);background-size:6px 6px;opacity:.14; } .woocommerce-variation .woocommerce-variation-price, .woocommerce-variation .woocommerce-variation-description, .woocommerce-variation .woocommerce-variation-availability, #sij-badge-estado{transition:filter 160ms ease, opacity 160ms ease;} .woocommerce-variation.sij-is-swapping .woocommerce-variation-price, .woocommerce-variation.sij-is-swapping .woocommerce-variation-description, .woocommerce-variation.sij-is-swapping .woocommerce-variation-availability, #sij-badge-estado.sij-is-swapping{filter:blur(3px);opacity:.5;transition:filter 130ms ease, opacity 130ms ease;} /* Tabla de variaciones: el nativo se marca `.visually-hidden` por JS (no display:none) solo cuando assets/js/main.js logra construir el grupo de botones "segmented" — si JS fallara, el de comercio generico. */ .model-picker{padding-block:var(--sp-6) var(--sp-8);} .model-picker__intro{max-width:60ch;margin-bottom:var(--sp-6);} .model-search{position:relative;margin-bottom:var(--sp-7);max-width:480px;} .model-search svg{position:absolute;left:var(--sp-4);top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--c-mute-2);pointer-events:none;} .model-search input{ width:100%;border:var(--bw) solid var(--c-line-strong); padding:var(--sp-3) var(--sp-4) var(--sp-3) calc(var(--sp-4) * 2 + 18px); font-family:var(--font-mono);font-size:var(--fs-00);background:var(--c-paper);color:var(--c-ink); min-height:48px;border-radius:var(--radius-sharp);appearance:none; transition:border-color var(--dur-base) ease; } .model-search input:focus-visible{border-color:var(--c-ink);outline:none;box-shadow:var(--focus-ring);} .model-search input::-webkit-search-cancel-button{display:none;} .model-search__empty{font-family:var(--font-mono);font-size:var(--fs-00);color:var(--c-mute);margin:calc(var(--sp-7) * -1) 0 var(--sp-6);} .model-group{margin-bottom:var(--sp-7);} .model-group[hidden]{display:none;} .model-group__title{ font-size:var(--fs-000);color:var(--c-mute);font-weight:500;letter-spacing:0; margin-bottom:var(--sp-3);padding-bottom:var(--sp-2);border-bottom:var(--bw) solid var(--c-line); } .model-tile-grid{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); border-top:var(--bw) solid var(--c-line);border-left:var(--bw) solid var(--c-line); } @media (min-width:640px){ .model-tile-grid{grid-template-columns:repeat(3,minmax(0,1fr));} } @media (min-width:960px){ .model-tile-grid{grid-template-columns:repeat(4,minmax(0,1fr));} } @media (min-width:1200px){ .model-tile-grid{grid-template-columns:repeat(6,minmax(0,1fr));} } .model-tile{ position:relative; border-right:var(--bw) solid var(--c-line);border-bottom:var(--bw) solid var(--c-line); padding:var(--sp-5) var(--sp-4);min-height:104px; display:flex;flex-direction:column;justify-content:space-between;gap:var(--sp-3); transition:background-color var(--dur-base) ease, border-color var(--dur-base) ease, transform var(--dur-fast) var(--ease-out); } .model-tile__code{font-size:var(--fs-1);line-height:1.1;letter-spacing:-.01em;padding-right:var(--sp-5);} .model-tile__count{font-family:var(--font-mono);font-size:var(--fs-000);color:var(--c-mute);} .model-tile__arrow{ position:absolute;top:var(--sp-4);right:var(--sp-4);width:14px;height:14px;color:var(--c-mute-2); transition:transform var(--dur-base) var(--ease-out), color var(--dur-base) ease; } .model-tile__arrow svg{width:100%;height:100%;} @media (hover:hover) and (pointer:fine){ .model-tile:hover{background:var(--c-surface);border-color:var(--c-ink);z-index:1;} .model-tile:hover .model-tile__arrow{transform:translate(2px,-2px);color:var(--c-ink);} } .model-tile:focus-visible{background:var(--c-surface);border-color:var(--c-ink);z-index:1;outline:none;box-shadow:inset var(--focus-ring);} .model-tile:active{transform:scale(.98);} /* El filtrado instantaneo (assets/js/main.js initModelSearch()) oculta con el atributo `hidden` sin transicion: es una accion de teclado que se repite en cada pulsacion, y animar algo que cambia varias veces por segundo lo hace sentir mas lento, no mas cuidado. */ .model-tile[hidden]{display:none;} .model-picker__all{ display:inline-flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-2); font-size:var(--fs-00);text-decoration:underline;text-underline-offset:3px; } .model-picker__all svg{width:12px;height:12px;transition:transform var(--dur-base) var(--ease-out);} .model-picker__all:hover svg{transform:translateX(3px);} /* --------------------------------------------------------------------- 22. Cambiador de modelo (pagina de taxonomia pa_modelo-cij) — inc/model-archive.php `sij_render_model_switcher()` --------------------------------------------------------------------- */ .model-switcher{ display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4); padding-block:var(--sp-4);border-bottom:var(--bw) solid var(--c-line);margin-bottom:var(--sp-6); } .model-switcher__back{ display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-00);flex:none; padding:var(--sp-2) var(--sp-3);border:var(--bw) solid var(--c-line-strong); transition:background-color var(--dur-base) ease, color var(--dur-base) ease, border-color var(--dur-base) ease; } .model-switcher__back svg{width:12px;height:12px;} .model-switcher__back:hover{background:var(--c-ink);color:var(--c-paper);border-color:var(--c-ink);} .model-switcher__chips{display:flex;flex-wrap:wrap;gap:var(--sp-2);} /* .chip--nav reutiliza el mismo bloque visual que .chip (filtros activos, ver §12) pero como enlace de navegacion sin boton de quitar: distinto proposito (saltar a otro modelo), mismo lenguaje visual. */ .chip--nav{text-decoration:none;transition:background-color var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease;} .chip--nav:hover{border-color:var(--c-ink);} .chip--nav.is-active{background:var(--c-ink);color:var(--c-paper);border-color:var(--c-ink);} /* Movil: el buscador de modelo se mantiene comodo de pulsar (min-height ya es 48px arriba) y la rejilla de tiles ya nace en 2 columnas por defecto (ver .model-tile-grid), sin necesitar una regla adicional aqui. */ @media (max-width:520px){ .model-tile{padding:var(--sp-4) var(--sp-3);min-height:88px;} .model-switcher{gap:var(--sp-3);} } /* --------------------------------------------------------------------- 23. Desplegables de cabecera "Repuestos CIJ" y "Marcadoras" — inc/mega-menu.php --------------------------------------------------------------------- Dos paneles independientes que comparten la misma base `.mega-menu` (posicion/animacion) y solo difieren en el contenido interior: `.mega-menu__layout` (tablist marca->modelo, "Repuestos CIJ") o `.mega-menu--simple` (`.marcadoras-menu__grid`, "Marcadoras"). Generados en servidor, ocultos por defecto (visibility/opacity, no `display`, para poder animar la entrada) y anclados a .site-header (que ya es `position:sticky`, valida como bloque contenedor para un descendiente `position:absolute`, sin necesitar anadir un `position:relative` propio). La entrada/salida reutiliza los mismos tokens que .search-panel/.mini-cart (--dur-base, --ease-out) y el mismo truco de `visibility` con `transition-delay` para poder animar y no dejar el panel "clicable" mientras esta invisible. La reduccion de movimiento ya la cubre la regla global `prefers-reduced-motion` del principio de este archivo (fuerza todas las duraciones a .001ms), no hace falta repetirla aqui. Solo un desplegable a la vez (ver assets/js/main.js `initDropdownMenus()`), asi que ambos pueden compartir z-index sin pisarse. */ .mega-menu{ position:absolute;top:100%;left:0;right:0; background:var(--c-paper); border-bottom:var(--bw) solid var(--c-line); visibility:hidden;opacity:0;pointer-events:none; transform:translateY(-8px); transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base); z-index:120; } .mega-menu.is-open{ visibility:visible;opacity:1;pointer-events:auto;transform:translateY(0); transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear 0s; } @media (max-width:959px){ .mega-menu{display:none !important;} } .mega-menu__inner{padding-block:var(--sp-6) var(--sp-7);} .mega-menu__layout{display:grid;grid-template-columns:220px 1fr;} .mega-menu__tabs{ border-right:var(--bw) solid var(--c-line); display:flex;flex-direction:column; max-height:min(56vh, 460px);overflow-y:auto;overscroll-behavior:contain; padding-right:var(--sp-4); } .mega-menu__tab{ display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3); width:100%;text-align:left;padding:var(--sp-3) var(--sp-3); border-bottom:var(--bw) solid var(--c-line); border-left:2px solid transparent; font-size:var(--fs-00);color:var(--c-ink); transition:background-color var(--dur-fast) ease, border-color var(--dur-fast) ease; } .mega-menu__tabs .mega-menu__tab:last-child{border-bottom:0;} /* min-width:0 en un hijo flex es lo que le permite truncar en vez de empujar el ancho del boton cuando el nombre de marca es largo. */ .mega-menu__tab > span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .mega-menu__tab-count{color:var(--c-mute);font-size:var(--fs-000);flex:none;} @media (hover:hover) and (pointer:fine){ .mega-menu__tab:hover{background:var(--c-surface);} } .mega-menu__tab.is-active{background:var(--c-surface);border-left-color:var(--c-signal);} .mega-menu__tab:focus-visible{outline:none;box-shadow:inset var(--focus-ring);} .mega-menu__panels{ padding-left:var(--sp-6); max-height:min(56vh, 460px);overflow-y:auto;overscroll-behavior:contain; } .mega-menu__panel[hidden]{display:none;} .mega-menu__group{margin-bottom:var(--sp-5);} .mega-menu__group:last-of-type{margin-bottom:0;} .mega-menu__group-title{font-size:var(--fs-000);color:var(--c-mute);margin-bottom:var(--sp-3);} .mega-menu__model-list{ display:grid;grid-template-columns:repeat(auto-fill, minmax(132px, 1fr)); gap:var(--sp-2); } .mega-menu__model-link{ display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2); padding:var(--sp-2) var(--sp-3);border:var(--bw) solid var(--c-line); font-size:var(--fs-00);min-width:0; transition:background-color var(--dur-fast) ease, border-color var(--dur-fast) ease; } .mega-menu__model-link > span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .mega-menu__model-count{color:var(--c-mute);font-size:var(--fs-000);flex:none;} @media (hover:hover) and (pointer:fine){ .mega-menu__model-link:hover{background:var(--c-surface);border-color:var(--c-ink);} } .mega-menu__model-link:focus-visible{outline:none;box-shadow:var(--focus-ring);border-color:var(--c-ink);} .mega-menu__empty{font-size:var(--fs-00);padding-block:var(--sp-2);} .mega-menu__panel-footer{margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:var(--bw) solid var(--c-line);} .mega-menu__footer-link{display:flex;justify-content:flex-end;padding-top:var(--sp-4);border-top:var(--bw) solid var(--c-line);margin-top:var(--sp-2);} /* --- "Marcadoras": 3 tarjetas en fila (icono + nombre + texto breve), sin tablist --- */ .marcadoras-menu__grid{ display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:var(--sp-4); padding-block:var(--sp-2) var(--sp-5); } .marcadoras-menu__item{ display:flex;flex-direction:column;gap:var(--sp-3); padding:var(--sp-5);border:var(--bw) solid var(--c-line); transition:background-color var(--dur-fast) ease, border-color var(--dur-fast) ease; } .marcadoras-menu__item-icon{width:28px;height:28px;color:var(--c-ink);} .marcadoras-menu__item-title{font-size:var(--fs-0);font-weight:600;} .marcadoras-menu__item-desc{font-size:var(--fs-00);color:var(--c-mute);} @media (hover:hover) and (pointer:fine){ .marcadoras-menu__item:hover{background:var(--c-surface);border-color:var(--c-ink);} } .marcadoras-menu__item:focus-visible{outline:none;box-shadow:inset var(--focus-ring);border-color:var(--c-ink);} /* --------------------------------------------------------------------- 24. Acordeon de marca en el sidebar de "Repuestos CIJ" — inc/shop-filters.php `sij_render_sidebar_brand_accordion()`. Reutiliza .filter-group para el bloque exterior "Marca" y .check-row/.check-row--nav para cada enlace (mismo lenguaje visual que el resto del sidebar); solo hacen falta reglas propias para la
      anidada de cada marca. --------------------------------------------------------------------- */ .brand-accordion__item{border-top:var(--bw) solid var(--c-line);} .brand-accordion__item:first-child{border-top:0;} .brand-accordion__item summary{ padding:var(--sp-3) 0;cursor:pointer;list-style:none; display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3); font-size:var(--fs-00);font-weight:600; } .brand-accordion__item summary::-webkit-details-marker{display:none;} .brand-accordion__item summary::after{content:"+";font-family:var(--font-mono);color:var(--c-mute);} .brand-accordion__item[open] summary::after{content:"–";} .brand-accordion__item summary .count{color:var(--c-mute-2);} @media (hover:hover) and (pointer:fine){ .brand-accordion__item summary:hover{color:var(--c-signal);} } .brand-accordion__body{display:flex;flex-direction:column;gap:var(--sp-1);padding-bottom:var(--sp-3);} .brand-accordion__group-title{font-size:var(--fs-000);color:var(--c-mute);margin:var(--sp-2) 0 0 var(--sp-6);} /* --------------------------------------------------------------------- 25. Acordeon movil "Repuestos CIJ" — inc/mega-menu.php `sij_get_mobile_mega_accordion_html()`.
      anidadas, sin JS. --------------------------------------------------------------------- */ .mobile-mega{border-bottom:var(--bw) solid var(--c-line);} .mobile-mega > summary{ display:flex;align-items:center;justify-content:space-between; padding:var(--sp-3) 0;font-size:var(--fs-1);font-family:var(--font-display); cursor:pointer;list-style:none; } .mobile-mega > summary::-webkit-details-marker{display:none;} .mobile-mega > summary::after{content:"+";font-family:var(--font-mono);font-size:var(--fs-0);color:var(--c-mute);} .mobile-mega[open] > summary::after{content:"–";} .mobile-mega__body{display:flex;flex-direction:column;gap:var(--sp-1);padding-bottom:var(--sp-4);} .mobile-mega__brand{border-top:var(--bw) solid var(--c-line);} .mobile-mega__brand summary{ display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3); padding:var(--sp-3) 0;font-size:var(--fs-00);font-weight:600;cursor:pointer;list-style:none; } .mobile-mega__brand summary::-webkit-details-marker{display:none;} .mobile-mega__brand summary::after{content:"+";font-family:var(--font-mono);color:var(--c-mute);} .mobile-mega__brand[open] summary::after{content:"–";} @media (hover:hover) and (pointer:fine){ .mobile-mega > summary:hover, .mobile-mega__brand summary:hover{color:var(--c-signal);} } .mobile-mega__models{display:flex;flex-direction:column;gap:var(--sp-3);padding-bottom:var(--sp-4);} .mobile-mega__group-title{font-size:var(--fs-000);color:var(--c-mute);} .mobile-mega__model-link{ display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2); padding:var(--sp-2) 0;font-size:var(--fs-00);border-bottom:var(--bw) solid var(--c-line); } .mobile-mega__model-link span:last-child{color:var(--c-mute);font-size:var(--fs-000);} .mobile-mega__empty{font-size:var(--fs-00);padding-block:var(--sp-2);} .mobile-mega__all,.mobile-mega__all-brands{ display:inline-block;font-size:var(--fs-00);text-decoration:underline;text-underline-offset:3px;padding-block:var(--sp-2); } /* Variante "simple" (acordeon movil de "Marcadoras"): icono + titulo + descripcion en vez de "nombre ... recuento" — mismos datos que .marcadoras-menu__item de escritorio, en formato de lista movil. */ .mobile-mega__model-link--simple{ align-items:flex-start;justify-content:flex-start;gap:var(--sp-3); padding-block:var(--sp-3); } .mobile-mega__model-icon{width:22px;height:22px;color:var(--c-ink);flex:none;margin-top:2px;} .mobile-mega__model-link--simple .mobile-mega__model-link-title{display:block;font-weight:600;} .mobile-mega__model-link--simple .mobile-mega__group-title{display:block;margin-top:var(--sp-1);} /* --------------------------------------------------------------------- 26. "Busca por tu impresora" de la home, 2 pasos — inc/home-content.php `sij_render_home_finder()` --------------------------------------------------------------------- */ .finder-form{display:flex;flex-direction:column;gap:var(--sp-5);} .finder-step{display:flex;flex-direction:column;gap:var(--sp-2);} .finder-step__label{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-000);color:var(--c-mute);} .finder-step__num{ display:flex;align-items:center;justify-content:center;flex:none; width:18px;height:18px;border:var(--bw) solid var(--c-line-strong); font-size:10px;color:var(--c-ink); } .finder-form select{ width:100%;min-height:48px;border:var(--bw) solid var(--c-line-strong); padding:var(--sp-3);background:var(--c-paper);color:var(--c-ink);font-family:var(--font-body); } .finder-form select:disabled{opacity:.5;cursor:not-allowed;} .finder-submit{align-self:flex-start;} /* Iconos de flecha en los pies de los desplegables: tamano fijo (sin esto el SVG crecia a ~100px) */ .mega-menu__footer-link a{display:inline-flex;align-items:center;gap:var(--sp-1);} .mega-menu__footer-link svg,.mega-menu a > svg{width:14px;height:14px;flex:none;} .mega-menu--simple{--mm-cols:3;} /* --------------------------------------------------------------------- Galeria con VARIAS fotos (flexslider de WooCommerce). Al quitar el CSS de WooCommerce faltaban sus reglas base: flexslider pone el wrapper a 800% de ancho y el aspect-ratio 1:1 del wrapper lo convertia en un cuadrado de ~17.000px. El 1:1 pasa a cada diapositiva; el wrapper queda en bloque. --------------------------------------------------------------------- */ .single-product div.product > .woocommerce-product-gallery{min-width:0;overflow:hidden;} .single-product div.product .woocommerce-product-gallery__wrapper{display:block;aspect-ratio:auto;margin:0;padding:0;} .single-product div.product .woocommerce-product-gallery__image{height:auto;aspect-ratio:1/1;} .single-product div.product .flex-viewport{overflow:hidden;} .single-product div.product .flex-viewport .woocommerce-product-gallery__image{float:left;} .single-product div.product .woocommerce-product-gallery__image img{width:70%;height:70%;object-fit:contain;} .single-product div.product .flex-control-thumbs{list-style:none;margin:0;padding:var(--sp-2);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-2);border-top:var(--bw) solid var(--c-line);background:var(--c-paper);} .single-product div.product .flex-control-thumbs li{margin:0;} .single-product div.product .flex-control-thumbs img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;background:var(--c-studio);border:var(--bw) solid var(--c-line);cursor:pointer;opacity:.55;transition:opacity var(--dur-base) ease,border-color var(--dur-base) ease;} .single-product div.product .flex-control-thumbs img:hover, .single-product div.product .flex-control-thumbs img.flex-active{opacity:1;border-color:var(--c-ink);} /* Tabla de especificaciones de maquinas (descripcion importada) */ .sij-spec-table{width:100%;border-collapse:collapse;margin:var(--sp-3) 0 var(--sp-5);font-size:var(--fs-00);} .sij-spec-table th,.sij-spec-table td{text-align:left;padding:var(--sp-2) var(--sp-3);border-bottom:var(--bw) solid var(--c-line);vertical-align:top;} .sij-spec-table th{font-family:var(--font-mono);font-weight:500;color:var(--c-mute);width:38%;}