/* =========================================================================
ECOBOX — theme.css
Sistema de diseño + integración visual con WooCommerce (por hooks, el
markup y las clases de WooCommerce se mantienen intactas).
La paleta sale del Manual de Marca ECOBOX (Uso Web y Packaging, v1.0,
sección 3). Verde Natural es el color corporativo principal; el resto son
colores de apoyo. Los tokens marcados como "derivado" no están en el
manual: son tintas y sombras calculadas a partir de los cinco oficiales,
necesarias para estados de interfaz (hover, fondos suaves, bordes).
========================================================================= */
:root {
/* --- Paleta corporativa (manual, sección 3) --------------------- */
--ik-green: #6aa84f; /* Verde Natural — principal */
--ik-forest: #1b5e3f; /* Verde Bosque — secundario/contraste */
--ik-sand: #c9b08a; /* Beige Tierra — apoyo/kraft */
--ik-charcoal: #4d4d4d; /* Gris Carbón — texto/documentos */
--ik-white: #ffffff; /* Blanco — fondos/negativo */
/* --- Derivados de interfaz (no son colores de marca) ------------ */
--ik-green-tint: #eef5e9;
--ik-sand-dark: #ab9068;
--ik-sand-tint: #f7f1e7;
--ik-ink: #2f2f2f;
--ik-gray-700: var(--ik-charcoal);
--ik-gray-500: #7b7b75;
--ik-gray-300: #ddd8cd;
--ik-gray-100: #f1eee7;
--ik-bg: #faf8f4; /* blanco cálido, lee como papel */
--ik-on-dark: #dde9d9; /* texto sobre Verde Bosque */
--ik-on-dark-soft: #b6cbb1;
/* --- Funcionales (interfaz, no marca) --------------------------- */
--ik-success: #2f7d4f;
--ik-warning: #b8862f;
--ik-danger: #c14b3f;
--ik-radius-sm: 8px;
--ik-radius: 14px;
--ik-radius-lg: 22px;
--ik-shadow: 0 1px 2px rgba(27, 94, 63, 0.06), 0 8px 24px rgba(27, 94, 63, 0.08);
--ik-shadow-lift: 0 12px 32px rgba(27, 94, 63, 0.16);
--ik-font-heading: "Poppins", "Inter", system-ui, sans-serif;
--ik-font-body: "Inter", system-ui, -apple-system, sans-serif;
--ik-container: 1220px;
}
/* ---------------------------------------------------------------------
Reset & base
------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--ik-font-body);
color: var(--ik-ink);
background: var(--ik-bg);
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 {
font-family: var(--ik-font-heading);
font-weight: 700;
line-height: 1.2;
margin: 0 0 0.5em;
color: var(--ik-forest);
}
p { margin: 0 0 1em; color: var(--ik-gray-700); }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; }
.screen-reader-text {
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
width: 1px; height: 1px; overflow: hidden;
}
.ik-skip-link {
position: absolute; left: 0; top: -60px; z-index: 999;
background: var(--ik-green); color: #fff; padding: 10px 18px;
transition: top .2s ease;
}
.ik-skip-link:focus { top: 0; }
.ik-container {
max-width: var(--ik-container);
margin: 0 auto;
padding: 0 20px;
}
/* ---------------------------------------------------------------------
Botones
------------------------------------------------------------------- */
.ik-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: var(--ik-font-heading);
font-weight: 600;
font-size: 0.95rem;
padding: 12px 22px;
border-radius: 999px;
border: 1.5px solid transparent;
cursor: pointer;
transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
white-space: nowrap;
}
.ik-btn svg { width: 18px; height: 18px; }
.ik-btn--primary { background: var(--ik-green); color: #fff; }
.ik-btn--primary:hover { background: var(--ik-forest); transform: translateY(-1px); box-shadow: var(--ik-shadow-lift); }
.ik-btn--outline { background: transparent; color: var(--ik-green); border-color: var(--ik-gray-300); }
.ik-btn--outline:hover { border-color: var(--ik-green); }
.ik-btn--ghost { background: transparent; color: var(--ik-green); }
.ik-btn--ghost:hover { background: var(--ik-green-tint); }
.ik-btn--light { background: #fff; color: var(--ik-green); }
.ik-btn--light:hover { background: var(--ik-sand-tint); }
.ik-btn--lg { padding: 15px 28px; font-size: 1rem; }
.ik-btn--sm { padding: 9px 16px; font-size: 0.85rem; }
.ik-btn--block { width: 100%; }
/* ---------------------------------------------------------------------
Topbar + header
------------------------------------------------------------------- */
.ik-topbar { background: var(--ik-forest); color: var(--ik-on-dark); font-size: 0.8rem; }
.ik-topbar__row { padding: 7px 20px; text-align: center; }
.ik-header {
position: sticky; top: 0; z-index: 50;
background: rgba(255,255,255,.92);
backdrop-filter: blur(8px);
border-bottom: 1px solid var(--ik-gray-100);
}
/* La barra de admin de WordPress es fixed y se comería el header pegajoso si no se le deja su alto. */
body.admin-bar .ik-header { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .ik-header { top: 46px; } }
.ik-header__row {
display: flex; align-items: center; gap: 14px; flex-wrap: nowrap;
padding: 14px 16px;
}
@media (min-width: 480px) { .ik-header__row { gap: 24px; padding: 14px 20px; } }
.ik-brand { display: flex; align-items: center; min-width: 0; flex-shrink: 1; }
/* El logotipo es un recurso gráfico cerrado: aquí solo se le da tamaño.
Nada de recolorear, recortar ni recomponer las hojas (manual, sección 2). */
/* Doble clase a propósito: WooCommerce trae `.woocommerce img { height:auto }`
(0,2,0) y con un solo selector de clase el logotipo se iba a su tamaño
nativo en catálogo, carrito y checkout. */
.ik-logo { width: auto; flex-shrink: 0; }
.ik-logo.ik-logo--header { height: 34px; }
.ik-logo.ik-logo--footer { height: 38px; }
.ik-logo.ik-logo--cta { height: 40px; margin-bottom: 14px; }
@media (min-width: 480px) { .ik-logo.ik-logo--header { height: 40px; } }
.ik-nav { display: none; flex: 1; }
.ik-nav-list { display: flex; gap: 28px; }
.ik-nav-list a {
font-weight: 600; font-size: 0.92rem; color: var(--ik-gray-700);
padding: 6px 0; border-bottom: 2px solid transparent;
transition: color .15s ease, border-color .15s ease;
}
.ik-nav-list a:hover, .ik-nav-list a:focus { color: var(--ik-green); border-color: var(--ik-sand); }
.ik-header__actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; }
.ik-header__cta { display: none; }
.ik-cart-link { position: relative; display: inline-flex; padding: 6px; color: var(--ik-forest); }
.ik-cart-link svg { width: 24px; height: 24px; }
.ik-cart-count {
position: absolute; top: -4px; right: -4px;
background: var(--ik-sand); color: #fff; font-size: 0.65rem; font-weight: 700;
min-width: 17px; height: 17px; border-radius: 999px;
display: flex; align-items: center; justify-content: center; padding: 0 3px;
}
.ik-nav-toggle {
background: none; border: none; padding: 6px; color: var(--ik-forest); cursor: pointer;
display: inline-flex;
}
.ik-nav-toggle svg { width: 26px; height: 26px; }
.ik-nav-toggle .ik-icon-close { display: none; }
.ik-nav-toggle[aria-expanded="true"] .ik-icon-open { display: none; }
.ik-nav-toggle[aria-expanded="true"] .ik-icon-close { display: block; }
.ik-mobile-nav {
display: none;
flex-direction: column;
gap: 18px;
padding: 20px;
border-top: 1px solid var(--ik-gray-100);
background: #fff;
}
.ik-mobile-nav.is-open { display: flex; }
.ik-mobile-nav .ik-nav-list { flex-direction: column; gap: 14px; }
.ik-mobile-nav .ik-nav-list a { display: block; font-size: 1rem; }
@media (min-width: 960px) {
.ik-nav { display: flex; justify-content: center; }
.ik-header__cta { display: inline-flex; }
.ik-nav-toggle { display: none; }
.ik-mobile-nav { display: none !important; }
}
/* ---------------------------------------------------------------------
Hero
------------------------------------------------------------------- */
.ik-hero { padding: 48px 0 64px; overflow: hidden; }
.ik-hero__grid { display: grid; gap: 40px; align-items: center; }
.ik-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
background: var(--ik-sand-tint); color: var(--ik-sand-dark);
font-weight: 700; font-size: 0.78rem; letter-spacing: .04em; text-transform: uppercase;
padding: 7px 14px; border-radius: 999px; margin-bottom: 18px;
}
.ik-eyebrow svg { width: 15px; height: 15px; }
.ik-hero__copy h1 { font-size: clamp(2rem, 4.5vw, 2.9rem); margin-bottom: 0.4em; }
.ik-hero__copy > p { font-size: 1.05rem; max-width: 46ch; }
.ik-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 28px 0; }
.ik-trust-row { display: flex; flex-wrap: wrap; gap: 20px; }
.ik-trust-row li { display: flex; align-items: center; gap: 7px; font-size: 0.85rem; font-weight: 600; color: var(--ik-gray-700); }
.ik-trust-row svg { width: 17px; height: 17px; color: var(--ik-success); flex-shrink: 0; }
.ik-trust-row--product { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--ik-gray-100); flex-direction: column; align-items: flex-start; gap: 10px; }
/* El hero entra por la foto de producto del manual, no por una ilustración. */
.ik-hero__photo { margin: 0; border-radius: var(--ik-radius-lg); overflow: hidden; box-shadow: var(--ik-shadow-lift); }
.ik-hero__photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 836 / 386; object-position: 70% center; }
@media (min-width: 960px) {
.ik-hero__grid { grid-template-columns: 1fr 1fr; }
}
/* ---------------------------------------------------------------------
Showcase: una foto grande + una lista corta, en lugar de cuatro párrafos
------------------------------------------------------------------- */
.ik-showcase { padding: 8px 0 56px; }
.ik-showcase__grid { display: grid; gap: 32px; align-items: center; }
.ik-showcase__photo { margin: 0; border-radius: var(--ik-radius-lg); overflow: hidden; box-shadow: var(--ik-shadow); }
.ik-showcase__photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 9; }
.ik-showcase__copy h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.ik-checklist { display: grid; gap: 14px; margin-top: 22px; }
.ik-checklist li { display: flex; align-items: center; gap: 12px; font-weight: 600; color: var(--ik-gray-700); }
.ik-checklist svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--ik-green); }
@media (min-width: 860px) {
.ik-showcase__grid { grid-template-columns: 5fr 6fr; gap: 48px; }
/* Foto a la derecha, para alternar con el showcase de arriba. */
.ik-showcase--reverse .ik-showcase__grid { grid-template-columns: 6fr 5fr; }
.ik-showcase--reverse .ik-showcase__photo { order: 2; }
}
.ik-showcase--reverse { padding-top: 56px; }
/* ---------------------------------------------------------------------
Respaldo IKUPESA: banner con el texto sobre el degradado blanco que la
propia foto trae a la izquierda.
------------------------------------------------------------------- */
.ik-backing__banner {
position: relative; border-radius: var(--ik-radius-lg); overflow: hidden; box-shadow: var(--ik-shadow);
background-color: #fff; background-repeat: no-repeat; background-size: auto 100%; background-position: right center;
min-height: 380px; display: flex; align-items: center;
}
/* La foto va pegada a la derecha; el texto queda sobre blanco y el
degradado funde el borde de la foto. */
.ik-backing__banner::before {
content: ""; position: absolute; inset: 0;
background: linear-gradient(90deg, #fff 0, #fff 36%, rgba(255,255,255,0) 50%);
}
.ik-backing__copy { position: relative; max-width: 440px; padding: 32px 36px; }
.ik-backing__copy h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.ik-backing__copy p { margin: 0; color: var(--ik-gray-700); }
/* En pantallas estrechas la foto se recorta y el degradado no basta: el
texto lleva su propio fondo. */
@media (max-width: 859px) {
.ik-backing__banner { min-height: 0; align-items: flex-end; padding-top: 190px; background-position: 72% top; background-size: auto 230px; }
.ik-backing__banner::before { background: linear-gradient(180deg, rgba(255,255,255,0) 150px, #fff 200px); }
.ik-backing__copy { max-width: none; padding: 4px 22px 24px; }
}
/* ---------------------------------------------------------------------
Secciones genéricas
------------------------------------------------------------------- */
.ik-section { padding: 56px 0; }
.ik-section--alt { background: var(--ik-green-tint); }
.ik-section__head { text-align: center; max-width: 560px; margin: 0 auto 36px; }
.ik-section__head h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
/* Formatos */
.ik-format-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
.ik-format-card {
background: #fff; border-radius: var(--ik-radius-lg); overflow: hidden;
box-shadow: var(--ik-shadow); display: block;
transition: transform .18s ease, box-shadow .18s ease;
border: 1px solid transparent;
}
.ik-format-card:hover { transform: translateY(-4px); box-shadow: var(--ik-shadow-lift); border-color: var(--ik-sand); }
.ik-format-card__photo { display: block; overflow: hidden; background: var(--ik-gray-100); }
/* Sin fotografía, el hueco lo llena el icono de línea en vez de un vacío. */
.ik-format-card__photo--icon {
display: flex; align-items: center; justify-content: center;
aspect-ratio: 4 / 3; background: var(--ik-green-tint); color: var(--ik-green);
}
.ik-format-card__photo--icon svg { width: 34%; height: auto; }
.ik-format-card__photo img {
width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3;
transition: transform .4s ease;
}
.ik-format-card:hover .ik-format-card__photo img { transform: scale(1.04); }
.ik-format-card__body { display: block; padding: 20px 22px 22px; }
.ik-format-card h3 { font-size: 1.15rem; margin: 0 0 6px; }
.ik-format-card__meta {
display: inline-flex; align-items: center; gap: 6px;
font-weight: 700; font-size: 0.85rem; color: var(--ik-green);
}
.ik-format-card__meta svg { width: 15px; height: 15px; }
@media (min-width: 720px) {
.ik-format-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
/* Cinco familias: tres arriba y dos abajo, ocupando el ancho completo. */
.ik-format-grid { grid-template-columns: repeat(6, 1fr); }
.ik-format-card { grid-column: span 2; }
.ik-format-card:nth-child(4), .ik-format-card:nth-child(5) { grid-column: span 3; }
}
/* Cómo funciona */
.ik-steps { display: grid; gap: 24px; grid-template-columns: 1fr; counter-reset: step; }
.ik-steps li { position: relative; padding-left: 54px; }
.ik-steps__num {
position: absolute; left: 0; top: 0;
width: 38px; height: 38px; border-radius: 50%;
background: var(--ik-green); color: #fff;
display: flex; align-items: center; justify-content: center;
font-family: var(--ik-font-heading); font-weight: 700;
}
.ik-steps h3 { font-size: 1rem; margin-bottom: 4px; }
.ik-steps p { font-size: 0.88rem; margin: 0; }
@media (min-width: 720px) {
.ik-steps { grid-template-columns: repeat(4, 1fr); }
.ik-steps li { padding-left: 0; padding-top: 54px; }
.ik-steps__num { left: 0; }
}
/* CTA banda */
.ik-cta { position: relative; isolation: isolate; background: var(--ik-forest); color: #fff; padding: 52px 0; overflow: hidden; }
/* Papel kraft de fondo: textura, no contenido. El recorte es de kraft liso a
propósito — sobre un fondo con el logo grabado, el logotipo en negativo de
encima dejaría de leerse (manual, sección 4: no colocar el logo sobre
fondos que reduzcan su legibilidad). */
.ik-cta__texture {
position: absolute; inset: 0; z-index: -1;
background-repeat: no-repeat; background-size: cover; background-position: center;
opacity: .16; filter: saturate(.5);
}
.ik-cta h2 { color: #fff; margin: 0; }
.ik-cta p { color: var(--ik-on-dark); margin: 0; }
.ik-cta__row { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
@media (min-width: 720px) {
.ik-cta__row { flex-direction: row; align-items: center; justify-content: space-between; }
}
/* ---------------------------------------------------------------------
Tarjetas de producto (home destacados + iconografía compartida)
------------------------------------------------------------------- */
.ik-product-card {
background: #fff; border-radius: var(--ik-radius); overflow: hidden;
box-shadow: var(--ik-shadow); display: flex; flex-direction: column;
transition: transform .18s ease, box-shadow .18s ease;
}
.ik-product-card:hover { transform: translateY(-3px); box-shadow: var(--ik-shadow-lift); }
.ik-product-card__visual {
display: flex; align-items: center; justify-content: center;
aspect-ratio: 1 / 1; background: var(--ik-bg); color: var(--ik-green);
padding: 22%;
}
.ik-product-card__visual img { width: 100%; height: 100%; object-fit: cover; }
.ik-product-card__body { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ik-product-card__title { font-weight: 700; font-size: 0.95rem; color: var(--ik-forest); }
.ik-product-card__price { font-weight: 700; color: var(--ik-sand-dark); font-size: 0.95rem; }
.ik-product-card__body .ik-btn { margin-top: auto; }
/* Carrusel de destacados: una fila con scroll-snap (se arrastra con el dedo
y con la rueda) y flechas que avanzan una página. Se ven 4 tarjetas en
escritorio, 3 en tablet y 2 y un trozo de la tercera en móvil, para que
se note que hay más. */
.ik-carousel { --ik-carousel-gap: 20px; --ik-carousel-cols: 2.25; position: relative; }
.ik-carousel__track {
display: grid; grid-auto-flow: column; gap: var(--ik-carousel-gap);
grid-auto-columns: calc((100% - (var(--ik-carousel-cols) - 1) * var(--ik-carousel-gap)) / var(--ik-carousel-cols));
overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain;
padding: 6px 4px 18px; margin: -6px -4px 0; scrollbar-width: none;
}
.ik-carousel__track::-webkit-scrollbar { display: none; }
.ik-carousel__track:focus-visible { outline: 2px solid var(--ik-green); outline-offset: 4px; border-radius: var(--ik-radius); }
.ik-carousel__track > * { scroll-snap-align: start; min-width: 0; }
.ik-carousel__nav {
position: absolute; top: 34%; z-index: 2; width: 44px; height: 44px; border-radius: 50%;
display: flex; align-items: center; justify-content: center; cursor: pointer;
background: #fff; color: var(--ik-forest); border: 1px solid var(--ik-gray-100); box-shadow: var(--ik-shadow-lift);
transition: background .15s ease, color .15s ease, opacity .15s ease;
}
.ik-carousel__nav[hidden] { display: none; }
.ik-carousel__nav:hover { background: var(--ik-green); color: #fff; }
.ik-carousel__nav:disabled { opacity: 0; pointer-events: none; }
.ik-carousel__nav svg { width: 20px; height: 20px; }
.ik-carousel__nav--prev { left: -18px; }
.ik-carousel__nav--prev svg { transform: rotate(180deg); }
.ik-carousel__nav--next { right: -18px; }
@media (min-width: 720px) { .ik-carousel { --ik-carousel-cols: 3; } }
@media (min-width: 1024px) { .ik-carousel { --ik-carousel-cols: 4; --ik-carousel-gap: 24px; } }
@media (max-width: 719px) { .ik-carousel__nav { display: none; } }
.ik-visual-fallback, .ik-visual-fallback--lg {
color: var(--ik-green); display: flex; align-items: center; justify-content: center;
}
.ik-visual-fallback svg, .ik-visual-fallback--lg svg { width: 100%; height: 100%; }
/* ---------------------------------------------------------------------
Footer
------------------------------------------------------------------- */
.ik-footer { background: var(--ik-forest); color: var(--ik-on-dark); padding: 56px 0 0; }
.ik-footer__grid { display: grid; gap: 32px; grid-template-columns: 1fr; padding-bottom: 40px; }
.ik-footer__brand p { color: var(--ik-on-dark-soft); font-size: 0.88rem; max-width: 32ch; margin-top: 12px; }
.ik-footer h3 { color: #fff; font-size: 0.95rem; margin-bottom: 14px; }
.ik-footer__col ul { display: flex; flex-direction: column; gap: 10px; }
.ik-footer__col a, .ik-footer__col span { color: var(--ik-on-dark-soft); font-size: 0.88rem; }
.ik-footer__col a:hover { color: #fff; }
.ik-footer__contact li { display: flex; align-items: center; gap: 10px; }
.ik-footer__contact svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--ik-sand); }
.ik-footer__bottom { border-top: 1px solid rgba(255,255,255,.12); padding: 18px 20px; font-size: 0.8rem; color: var(--ik-on-dark-soft); }
/* Sin esto el se queda con el gris de texto global y desaparece sobre el verde. */
.ik-footer__bottom p { color: inherit; margin: 0; }
@media (min-width: 720px) {
.ik-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}
/* =========================================================================
WooCommerce
========================================================================= */
.ik-page { padding: 40px 20px 64px; }
.ik-page--single { max-width: 760px; }
.ik-page__title { font-size: 1.8rem; }
/* Banner de catálogo / categoría */
.ik-shop-banner {
display: flex; align-items: center; gap: 18px;
background: linear-gradient(135deg, var(--ik-green), var(--ik-forest));
color: #fff; border-radius: var(--ik-radius-lg);
padding: 28px 26px; margin: 28px 20px 0;
}
.ik-shop-banner__icon {
flex-shrink: 0; width: 54px; height: 54px; padding: 10px;
background: rgba(255,255,255,.14); border-radius: 16px; color: #fff;
}
.ik-shop-banner__icon svg { width: 100%; height: 100%; }
.ik-shop-banner .page-title { color: #fff; margin: 0 0 4px; font-size: 1.5rem; }
.ik-shop-banner .term-description { color: var(--ik-on-dark); font-size: 0.9rem; margin: 0; }
.ik-shop-banner .term-description p { color: inherit; margin: 0; }
.ik-format-pills { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 20px; }
.ik-pill {
padding: 8px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--ik-gray-300);
font-size: 0.85rem; font-weight: 600; color: var(--ik-gray-700);
}
.ik-pill.is-active, .ik-pill:hover { background: var(--ik-green); color: #fff; border-color: var(--ik-green); }
.woocommerce-result-count, .woocommerce-ordering { margin: 0 20px 16px; }
.woocommerce-ordering select { border-radius: var(--ik-radius-sm); border: 1px solid var(--ik-gray-300); padding: 8px 12px; }
/* Grid de productos (catálogo) */
.woocommerce ul.products {
display: grid !important;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin: 0 20px 20px !important;
padding: 0 !important;
}
@media (min-width: 720px) { .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); } }
/*
* El CSS clásico de WooCommerce (woocommerce-layout.css, que se sigue
* cargando) pone un clearfix ::before/::after con content:' ' en ul.products
* para contener los
flotantes. Al convertir el listado en grid, esos
* pseudo-elementos con contenido pasan a contar como celdas del grid y
* corrían la primera tarjeta a la segunda columna. Se anulan explícitamente.
*/
.woocommerce ul.products::before, .woocommerce ul.products::after { content: none !important; display: none !important; }
.woocommerce ul.products li.product {
background: #fff; border-radius: var(--ik-radius); padding: 0 0 16px;
box-shadow: var(--ik-shadow); position: relative; overflow: hidden;
transition: transform .18s ease, box-shadow .18s ease;
list-style: none;
width: auto !important; float: none !important; margin: 0 !important; clear: none !important;
display: block !important;
}
.woocommerce ul.products li.product:hover { transform: translateY(-3px); box-shadow: var(--ik-shadow-lift); }
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product .ik-visual-fallback {
width: 100%; aspect-ratio: 1/1; object-fit: cover;
background: var(--ik-bg); padding: 18%; color: var(--ik-green);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-size: 0.92rem; font-weight: 700; color: var(--ik-forest);
padding: 14px 16px 4px; margin: 0;
}
.woocommerce ul.products li.product .price {
display: block; padding: 0 16px; font-weight: 700; color: var(--ik-sand-dark); font-size: 0.95rem;
}
.woocommerce ul.products li.product .price del { color: var(--ik-gray-500); font-weight: 400; opacity: .7; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.add_to_cart_button,
.woocommerce ul.products li.product a.pkgs-customise {
margin: 12px 16px 0; display: block; text-align: center;
background: var(--ik-green); color: #fff !important; border-radius: 999px;
padding: 10px 16px !important; font-weight: 600; font-size: 0.85rem;
transition: background-color .15s ease;
}
.woocommerce ul.products li.product .button:hover { background: var(--ik-forest); }
.ik-card-badge {
position: absolute; top: 12px; left: 12px; z-index: 2;
background: var(--ik-sand); color: #fff; font-size: 0.68rem; font-weight: 700;
padding: 4px 10px; border-radius: 999px; letter-spacing: .02em;
}
.onsale {
position: absolute; top: 12px; right: 12px; z-index: 2;
background: var(--ik-forest) !important; color: #fff; border-radius: 999px !important;
min-height: auto !important; min-width: auto !important; line-height: 1 !important;
padding: 6px 10px !important; font-size: 0.68rem !important; font-weight: 700 !important;
}
.ik-empty-state { text-align: center; padding: 60px 20px; margin: 0 20px; background: #fff; border-radius: var(--ik-radius); }
.ik-empty-state__icon { width: 64px; height: 64px; color: var(--ik-gray-300); margin: 0 auto 16px; }
/* Ficha de producto */
.woocommerce div.product {
display: grid; gap: 32px; grid-template-columns: 1fr;
max-width: var(--ik-container); margin: 28px auto 60px; padding: 0 20px;
}
@media (min-width: 900px) { .woocommerce div.product { grid-template-columns: 1fr 1fr; } }
/*
* WooCommerce trae del layout clásico a dos columnas flotantes:
* .images{float:left;width:48%} .summary{float:right;width:48%}. Dentro de
* un grid, ese 48% se resuelve contra el ancho de LA COLUMNA (no del
* contenedor), así que cada mitad quedaba a menos de la mitad de su propio
* espacio y sobraba un carril de aire entre imagen y texto. Se anula.
*/
.woocommerce div.product .images,
.woocommerce div.product .summary {
width: auto !important; float: none !important; margin: 0 !important;
}
.woocommerce div.product .woocommerce-product-gallery {
background: #fff; border-radius: var(--ik-radius-lg);
box-shadow: var(--ik-shadow); overflow: hidden;
/* Sin esto, el grid estira la columna de la imagen a la altura de la
columna de texto (siempre más alta) y el cuadrado queda flotando
arriba con un colchón de blanco debajo. */
align-self: start;
}
/* La imagen (o el icono, sin foto todavía) llena un cuadrado grande de borde
a borde en vez de flotar chica en medio de una tarjeta con mucho aire. */
.woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery__image,
.woocommerce-product-gallery__image--placeholder,
.ik-visual-fallback--lg {
aspect-ratio: 1 / 1;
display: flex; align-items: center; justify-content: center;
}
.woocommerce-product-gallery__image--placeholder,
.ik-visual-fallback--lg {
color: var(--ik-green);
background: linear-gradient(160deg, var(--ik-green-tint), var(--ik-sand-tint));
padding: 14%;
}
.ik-visual-fallback--lg svg { width: 100%; height: 100%; }
.woocommerce-product-gallery__wrapper img {
width: 100%; height: 100%; object-fit: cover;
}
/* Miniaturas, para cuando un producto tenga varias fotos. */
.flex-control-thumbs {
display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 12px 0 0; padding: 0;
}
.flex-control-thumbs li { list-style: none; }
.flex-control-thumbs img {
aspect-ratio: 1/1; object-fit: cover; border-radius: var(--ik-radius-sm);
border: 2px solid transparent; cursor: pointer; opacity: .7;
}
.flex-control-thumbs img.flex-active, .flex-control-thumbs img:hover { opacity: 1; border-color: var(--ik-sand); }
.woocommerce div.product .summary { max-width: none; }
.woocommerce div.product .product_title { font-size: 1.7rem; margin-bottom: 10px; }
.woocommerce div.product p.price, .woocommerce div.product .price {
font-size: 1.5rem; font-weight: 700; color: var(--ik-sand-dark); margin-bottom: 6px;
}
.woocommerce div.product .woocommerce-product-details__short-description p { font-size: 0.95rem; }
.ik-spec-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; }
.ik-spec-chips li {
background: var(--ik-green-tint); color: var(--ik-green); font-size: 0.78rem; font-weight: 600;
padding: 6px 12px; border-radius: 999px;
}
.woocommerce div.product form.cart { margin-bottom: 18px; }
.woocommerce div.product .quantity input.qty {
border: 1.5px solid var(--ik-gray-300); border-radius: var(--ik-radius-sm);
padding: 11px 12px; width: 70px; font-size: 1rem;
}
.woocommerce div.product .single_add_to_cart_button,
.woocommerce div.product a.pkgs-customise,
.woocommerce div.product .pkgs-customise-wrap a {
background: var(--ik-green); color: #fff !important; border: none; border-radius: 999px;
padding: 14px 28px !important; font-weight: 700; font-size: 1rem; cursor: pointer;
}
.woocommerce div.product .single_add_to_cart_button:hover,
.woocommerce div.product a.pkgs-customise:hover { background: var(--ik-forest); }
.pkgs-customise-wrap { margin: 4px 0 0; }
.ik-trust-row--product svg { color: var(--ik-sand-dark); }
/*
* WooCommerce imprime las pestañas, "Related products" y los upsells con
* woocommerce_after_single_product_summary — un hook que se dispara TODAVÍA
* DENTRO de , como tercer/cuarto hijo junto a .images y
* .summary. Como esa .product es un grid de 2 columnas, hay que decirles
* explícitamente que ocupen el ancho completo o WooCommerce los reparte como
* si fueran otra columna más.
*/
.woocommerce div.product > .woocommerce-tabs,
.woocommerce div.product > .related.products,
.woocommerce div.product > .up-sells.upsells {
grid-column: 1 / -1;
}
/* Pestañas de la ficha de producto.
*
* WooCommerce dibuja aquí unas solapas grises con esquinas redondeadas, y las
* arma con `::before` / `::after` sobre cada
y sobre el . Sus reglas
* son `.woocommerce div.product .woocommerce-tabs ul.tabs li` (0,3,2), así
* que hay que igualar esa especificidad y, además, apagar los pseudo-
* elementos: sin eso quedan los conectores curvos flotando sobre el subrayado.
*
* El resultado es un subrayado simple, del mismo tipo que la navegación del
* header, en vez de las solapas de serie. */
.woocommerce-tabs { margin-top: 8px; background: #fff; border-radius: var(--ik-radius); padding: 4px 24px 24px; box-shadow: var(--ik-shadow); }
.woocommerce div.product .woocommerce-tabs ul.tabs {
display: flex;
flex-wrap: wrap;
gap: 4px 28px;
list-style: none;
border-bottom: 1px solid var(--ik-gray-100);
margin: 0 0 22px;
padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active::after {
content: none;
display: none;
border: 0;
box-shadow: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
margin: 0;
padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
display: inline-block;
padding: 14px 0;
font-family: var(--ik-font-heading);
font-weight: 600;
font-size: 0.95rem;
color: var(--ik-gray-500);
border-bottom: 2px solid transparent;
/* El margen negativo monta el subrayado sobre la línea del . */
margin-bottom: -1px;
transition: color .15s ease, border-color .15s ease;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
color: var(--ik-forest);
border-bottom-color: var(--ik-gray-300);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
color: var(--ik-forest);
border-bottom-color: var(--ik-green);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:focus-visible {
outline: 2px solid var(--ik-green);
outline-offset: 3px;
}
.woocommerce div.product .woocommerce-tabs .panel {
margin: 0;
padding: 0;
border: 0;
box-shadow: none;
}
/* La pestaña activa ya dice de qué va el panel; el que imprime
WooCommerce dentro sólo repite esa misma palabra. */
.woocommerce div.product .woocommerce-tabs .panel > h2:first-child {
position: absolute;
width: 1px; height: 1px;
clip: rect(1px, 1px, 1px, 1px);
overflow: hidden;
}
.woocommerce div.product .woocommerce-tabs .panel p:last-child { margin-bottom: 0; }
.woocommerce div.product .woocommerce-tabs .panel table.shop_attributes {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
}
.woocommerce div.product .woocommerce-tabs .panel table.shop_attributes th,
.woocommerce div.product .woocommerce-tabs .panel table.shop_attributes td {
text-align: left;
padding: 10px 12px;
border: 0;
border-bottom: 1px solid var(--ik-gray-100);
}
.woocommerce div.product .woocommerce-tabs .panel table.shop_attributes th {
width: 30%;
font-weight: 600;
color: var(--ik-forest);
}
.woocommerce div.product .woocommerce-tabs .panel table.shop_attributes td { color: var(--ik-gray-700); font-style: normal; }
.woocommerce div.product .woocommerce-tabs .panel table.shop_attributes td p { margin: 0; }
@media (max-width: 520px) {
.woocommerce-tabs { padding: 4px 16px 20px; }
.woocommerce div.product .woocommerce-tabs ul.tabs { gap: 0 18px; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { font-size: 0.88rem; }
}
.related.products > h2, .up-sells.upsells > h2 { font-size: 1.4rem; margin: 8px 0 20px; }
.related.products ul.products, .up-sells.upsells ul.products { margin: 0 !important; }
.product_meta { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--ik-gray-100); font-size: 0.82rem; color: var(--ik-gray-500); }
.product_meta > span { display: block; margin-bottom: 4px; }
.product_meta a { color: var(--ik-gray-700); font-weight: 600; }
/* Notices */
.woocommerce-message, .woocommerce-error, .woocommerce-info, .woocommerce-noreviews {
background: #fff; border-radius: var(--ik-radius); box-shadow: var(--ik-shadow);
padding: 16px 20px; margin: 20px; list-style: none;
border-left: 4px solid var(--ik-sand);
}
.woocommerce-error { border-left-color: var(--ik-danger); }
.woocommerce-message .button, .woocommerce-error .button {
background: var(--ik-green); color: #fff; border-radius: 999px; padding: 8px 16px; font-size: 0.85rem; font-weight: 600;
}
/* Carrito */
.woocommerce-cart .woocommerce, .woocommerce-checkout .woocommerce {
max-width: var(--ik-container); margin: 28px auto 60px; padding: 0 20px;
display: grid; gap: 28px; grid-template-columns: 1fr;
}
@media (min-width: 960px) {
.woocommerce-cart form.woocommerce-cart-form { grid-column: 1; }
.woocommerce-cart .cart-collaterals { grid-column: 2; grid-row: 1; }
.woocommerce-cart .woocommerce { grid-template-columns: 1.6fr 1fr; }
}
table.shop_table {
width: 100%; border-collapse: separate; border-spacing: 0;
background: #fff; border-radius: var(--ik-radius); overflow: hidden;
box-shadow: var(--ik-shadow); border: none;
}
table.shop_table th {
background: var(--ik-bg); text-align: left; font-size: 0.8rem; text-transform: uppercase;
letter-spacing: .03em; color: var(--ik-gray-500); padding: 14px 16px; border: none;
}
table.shop_table td { padding: 16px; border-top: 1px solid var(--ik-gray-100); border-bottom: none; vertical-align: middle; }
table.shop_table td.product-thumbnail img { border-radius: var(--ik-radius-sm); width: 64px; height: 64px; object-fit: cover; }
table.shop_table td.product-name a { font-weight: 700; color: var(--ik-forest); }
.cart-collaterals .cart_totals { background: #fff; border-radius: var(--ik-radius); box-shadow: var(--ik-shadow); padding: 22px; }
.cart_totals h2 { font-size: 1.1rem; }
.cart_totals table { border: none; box-shadow: none; }
.cart_totals table th, .cart_totals table td { padding: 10px 0; border-top: 1px solid var(--ik-gray-100); }
.cart_totals .order-total .amount { color: var(--ik-sand-dark); font-weight: 800; font-size: 1.15rem; }
.wc-proceed-to-checkout a.checkout-button {
display: block; text-align: center; background: var(--ik-green); color: #fff !important;
border-radius: 999px; padding: 15px !important; font-weight: 700; margin-top: 14px;
}
.wc-proceed-to-checkout a.checkout-button:hover { background: var(--ik-forest); }
.woocommerce-cart-form .coupon { display: flex; gap: 10px; flex-wrap: wrap; }
.woocommerce-cart-form .coupon input#coupon_code {
border: 1.5px solid var(--ik-gray-300); border-radius: 999px; padding: 10px 16px;
}
.woocommerce-cart-form button[name="update_cart"],
.woocommerce-cart-form button[name="apply_coupon"] {
background: var(--ik-green); color: #fff; border: none; border-radius: 999px; padding: 10px 18px; font-weight: 600;
}
.woocommerce-cart-form td.actions { background: transparent; }
.woocommerce-cart-form .product-remove a { color: var(--ik-danger); font-weight: 700; font-size: 1.2rem; }
/* Checkout */
.woocommerce-checkout #customer_details { display: grid; gap: 20px; grid-template-columns: 1fr; }
.woocommerce-checkout .col2-set .col-1, .woocommerce-checkout .col2-set .col-2 {
background: #fff; border-radius: var(--ik-radius); padding: 22px; box-shadow: var(--ik-shadow); width: 100%; float: none;
}
.woocommerce-checkout form .form-row { margin-bottom: 14px; }
.woocommerce-checkout input.input-text, .woocommerce-checkout select, .woocommerce-checkout textarea {
border: 1.5px solid var(--ik-gray-300); border-radius: var(--ik-radius-sm); padding: 11px 14px; width: 100%;
}
.woocommerce-checkout input.input-text:focus, .woocommerce-checkout select:focus {
outline: none; border-color: var(--ik-sand);
}
#order_review, #order_review_heading {
background: #fff; border-radius: var(--ik-radius); padding: 22px; box-shadow: var(--ik-shadow);
}
.woocommerce-checkout-payment { background: var(--ik-bg) !important; border-radius: var(--ik-radius) !important; }
.woocommerce-checkout-payment ul.payment_methods { border: none !important; padding: 14px !important; }
#place_order {
background: var(--ik-sand-dark); color: #fff; border: none; border-radius: 999px;
padding: 16px !important; font-weight: 700; font-size: 1.05rem; width: 100%;
}
#place_order:hover { background: var(--ik-green); }
@media (min-width: 900px) {
.woocommerce-checkout #customer_details { grid-template-columns: 1fr 1fr; }
}
/* ---------------------------------------------------------------------
Mi cuenta
Panel a dos columnas: tarjeta del cliente y menú con iconos a la
izquierda, contenido a la derecha. En móvil el menú pasa a una fila de
pastillas que se desliza en horizontal, sin esconder ninguna opción.
------------------------------------------------------------------- */
.woocommerce-account .ik-page--single { max-width: var(--ik-container); }
.woocommerce-account .ik-page__title { margin-bottom: 24px; }
.woocommerce-account .ik-page__content > .woocommerce {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 16px;
align-items: start;
}
.woocommerce-account .woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-account .woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-account .woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-account .woocommerce-notices-wrapper .woocommerce-info { margin: 0 0 16px; }
/* Tarjeta del cliente */
.ik-account-card {
display: flex; align-items: center; gap: 12px;
background: var(--ik-forest); color: #fff;
padding: 16px 18px; border-radius: var(--ik-radius);
}
.ik-account-card__avatar {
width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%;
background: var(--ik-green); color: #fff;
display: flex; align-items: center; justify-content: center;
font-family: var(--ik-font-heading); font-weight: 700; font-size: 1.05rem;
}
.ik-account-card__text { display: flex; flex-direction: column; min-width: 0; }
.ik-account-card__text strong { font-family: var(--ik-font-heading); font-weight: 600; }
.ik-account-card__text span { color: var(--ik-on-dark-soft); font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Menú */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
display: flex; gap: 8px; margin: 0; padding: 2px 2px 6px;
overflow-x: auto; scrollbar-width: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul::-webkit-scrollbar { display: none; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
display: flex; align-items: center; gap: 10px; white-space: nowrap;
padding: 10px 14px; background: #fff; border-radius: 999px;
box-shadow: var(--ik-shadow); font-weight: 600; font-size: 0.88rem; color: var(--ik-charcoal);
transition: background-color .15s ease, color .15s ease;
}
/* Iconos por máscara: el SVG pone la forma y currentColor el color, así que
siguen al estado activo/hover sin duplicar los dibujos de inc/icons.php. */
.woocommerce-account .woocommerce-MyAccount-navigation li a::before {
content: ""; width: 18px; height: 18px; flex-shrink: 0; background: currentColor;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-size: contain; mask-size: contain;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { color: var(--ik-forest); background: var(--ik-green-tint); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--ik-green); color: #fff; }
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--ik-gray-500); }
.woocommerce-MyAccount-navigation-link--dashboard a::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11 12 4l9 7'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3Cpath d='M10 20v-5h4v5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11 12 4l9 7'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3Cpath d='M10 20v-5h4v5'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--mis-disenos a::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4.5 19.5 9.5 11 18l-5-5z'/%3E%3Cpath d='M6 13c-2 0-3 1.5-3 3.5 0 1 0 2.5-1 3.5 3 0 6-1 6-4.5'/%3E%3Cpath d='m14.5 4.5 2-2 5 5-2 2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4.5 19.5 9.5 11 18l-5-5z'/%3E%3Cpath d='M6 13c-2 0-3 1.5-3 3.5 0 1 0 2.5-1 3.5 3 0 6-1 6-4.5'/%3E%3Cpath d='m14.5 4.5 2-2 5 5-2 2'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--orders a::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 12H6z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 12H6z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--edit-address a::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.3 7-11.6A7 7 0 0 0 5 9.4C5 14.7 12 21 12 21Z'/%3E%3Ccircle cx='12' cy='9.4' r='2.4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.3 7-11.6A7 7 0 0 0 5 9.4C5 14.7 12 21 12 21Z'/%3E%3Ccircle cx='12' cy='9.4' r='2.4'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--edit-account a::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c.9-4 4.1-6 8-6s7.1 2 8 6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c.9-4 4.1-6 8-6s7.1 2 8 6'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--customer-logout a::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4h4a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-4'/%3E%3Cpath d='M10 17l-5-5 5-5'/%3E%3Cpath d='M5 12h11'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4h4a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-4'/%3E%3Cpath d='M10 17l-5-5 5-5'/%3E%3Cpath d='M5 12h11'/%3E%3C/svg%3E"); }
/* WooCommerce trae las dos columnas flotadas al 30 % y 68 %: aquí manda la rejilla. */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content { float: none; width: auto; }
/* Contenido */
.woocommerce-account .woocommerce-MyAccount-content {
margin: 0; background: #fff; padding: 24px;
border-radius: var(--ik-radius); box-shadow: var(--ik-shadow); min-width: 0;
}
@media (min-width: 900px) {
/* Tarjeta y menú en filas a su medida; la tercera fila se queda con el
alto sobrante del contenido para que no las separe. */
.woocommerce-account .ik-page__content > .woocommerce {
grid-template-columns: 270px minmax(0, 1fr);
grid-template-rows: auto auto 1fr;
gap: 16px 28px;
}
.woocommerce-account .ik-account-card { grid-column: 1; grid-row: 1; }
.woocommerce-account .woocommerce-MyAccount-navigation { grid-column: 1; grid-row: 2; }
.woocommerce-account .woocommerce-MyAccount-content { grid-column: 2; grid-row: 1 / -1; padding: 32px; }
.woocommerce-account .woocommerce-MyAccount-navigation ul {
flex-direction: column; gap: 4px; overflow: visible; padding: 8px;
background: #fff; border-radius: var(--ik-radius); box-shadow: var(--ik-shadow);
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
box-shadow: none; border-radius: var(--ik-radius-sm); padding: 11px 14px; font-size: 0.92rem;
}
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout {
margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--ik-gray-100);
}
}
/* Inicio de la cuenta */
.ik-dash { display: flex; flex-direction: column; gap: 24px; }
.ik-dash__hello { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.ik-dash__hello h2 { font-size: 1.6rem; margin: 0 0 4px; }
.ik-dash__hello p { margin: 0; }
.ik-dash__resume {
display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px 16px; align-items: center;
padding: 16px; border-radius: var(--ik-radius);
background: var(--ik-green-tint); border: 1px solid rgba(106, 168, 79, 0.25);
}
.ik-dash__resume-thumb {
width: 72px; height: 72px; border-radius: var(--ik-radius-sm); background: #fff; overflow: hidden;
display: flex; align-items: center; justify-content: center; color: var(--ik-green);
}
.ik-dash__resume-thumb img { width: 100%; height: 100%; object-fit: contain; }
.ik-dash__resume-thumb .ik-icon { width: 44px; height: 44px; }
.ik-dash__resume-text { display: flex; flex-direction: column; min-width: 0; }
.ik-dash__resume-text strong { color: var(--ik-forest); font-family: var(--ik-font-heading); font-weight: 600; }
.ik-dash__resume-text span:last-child { color: var(--ik-gray-500); font-size: 0.85rem; }
.ik-dash__eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ik-green); }
.ik-dash__resume-actions { grid-column: 1 / -1; display: flex; gap: 8px; }
.ik-dash__resume-actions .ik-btn { flex: 1; }
@media (min-width: 640px) {
.ik-dash__resume { grid-template-columns: 72px minmax(0, 1fr) auto; }
.ik-dash__resume-actions { grid-column: auto; }
.ik-dash__resume-actions .ik-btn { flex: none; }
}
.ik-dash__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ik-dash__stats a {
display: flex; flex-direction: column; gap: 2px; height: 100%;
padding: 16px; border-radius: var(--ik-radius); border: 1px solid var(--ik-gray-300);
transition: border-color .15s ease, box-shadow .15s ease;
}
.ik-dash__stats a:hover { border-color: var(--ik-green); box-shadow: var(--ik-shadow); }
.ik-dash__stat-icon { color: var(--ik-green); margin-bottom: 6px; }
.ik-dash__stat-icon svg { width: 22px; height: 22px; }
.ik-dash__stats strong { font-family: var(--ik-font-heading); font-size: 1.6rem; line-height: 1.1; color: var(--ik-forest); }
.ik-dash__stats span:last-child { color: var(--ik-gray-500); font-size: 0.85rem; }
.ik-dash__section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: -10px; }
.ik-dash__section-head h3 { font-size: 1.1rem; margin: 0; }
.ik-dash__section-head a { display: inline-flex; align-items: center; gap: 4px; color: var(--ik-green); font-weight: 600; font-size: 0.9rem; }
.ik-dash__section-head a svg { width: 16px; height: 16px; }
.ik-dash__links { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 720px) { .ik-dash__links { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ik-dash__links a {
display: flex; align-items: center; gap: 12px; height: 100%;
padding: 14px 16px; border-radius: var(--ik-radius); background: var(--ik-gray-100);
transition: background-color .15s ease;
}
.ik-dash__links a:hover { background: var(--ik-green-tint); }
.ik-dash__link-icon {
width: 38px; height: 38px; border-radius: 50%; background: #fff; color: var(--ik-green); flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
}
.ik-dash__link-icon svg { width: 20px; height: 20px; }
.ik-dash__link-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ik-dash__link-text strong { color: var(--ik-forest); font-size: 0.95rem; }
.ik-dash__link-text span { color: var(--ik-gray-500); font-size: 0.8rem; }
.ik-dash__link-chevron { width: 18px; height: 18px; color: var(--ik-gray-500); flex-shrink: 0; }
/* ---------------------------------------------------------------------
Acceso y registro (woocommerce/myaccount/form-login.php)
Sin sesión, «Mi cuenta» no lleva menú lateral: la rejilla de dos
columnas de arriba se apaga y manda el bloque .ik-auth.
------------------------------------------------------------------- */
body.woocommerce-account:not(.logged-in) .ik-page__content > .woocommerce { display: block; }
body.woocommerce-account:not(.logged-in) .ik-page__content > .woocommerce > :is(.woocommerce-info, .woocommerce-error, .woocommerce-message, .woocommerce-notices-wrapper) {
max-width: 1000px; margin-left: auto; margin-right: auto;
}
/* El título «Mi cuenta» sobra encima del panel: queda para lectores de pantalla. */
.woocommerce-account .ik-page:has(.ik-auth) .ik-page__title {
position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.ik-auth {
display: grid; grid-template-columns: minmax(0, 1fr); max-width: 1000px; margin: 0 auto;
background: #fff; border-radius: var(--ik-radius-lg); box-shadow: var(--ik-shadow-lift); overflow: hidden;
}
@media (min-width: 860px) { .ik-auth { grid-template-columns: 5fr 6fr; min-height: 560px; } }
.ik-auth__brand { position: relative; background: var(--ik-forest); color: var(--ik-on-dark); display: flex; flex-direction: column; }
.ik-auth__photo { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 70% center; display: block; }
.ik-auth__brand-body { padding: 26px 28px 30px; display: flex; flex-direction: column; gap: 16px; flex: 1; }
.ik-logo.ik-auth__logo { height: 36px; width: auto; align-self: flex-start; }
.ik-auth__brand h2 { color: #fff; font-size: clamp(1.3rem, 2.4vw, 1.65rem); line-height: 1.25; margin: 0; }
.ik-auth__perks { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ik-auth__perks li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.93rem; }
.ik-auth__perks svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--ik-green); background: #fff; border-radius: 50%; padding: 3px; }
@media (min-width: 860px) {
.ik-auth__photo { aspect-ratio: auto; flex: 1; min-height: 0; height: 0; }
.ik-auth__brand-body { flex: 0 0 auto; padding: 30px 34px 36px; }
}
/* En móvil el formulario tiene que asomar pronto: fuera la lista y el logo
(ya está en el header). */
@media (max-width: 859px) { .ik-auth__perks, .ik-logo.ik-auth__logo { display: none; } .ik-auth__photo { aspect-ratio: 21 / 9; } }
.ik-auth__card { padding: 28px 24px 32px; display: flex; flex-direction: column; }
@media (min-width: 860px) { .ik-auth__card { padding: 44px 52px; justify-content: center; } }
.ik-auth__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 26px; background: var(--ik-gray-100); border-radius: 999px; }
.ik-auth:not(.is-tabbed) .ik-auth__tabs { display: none; }
.ik-auth__tabs [role="tab"] {
border: 0; background: transparent; border-radius: 999px; padding: 10px 14px; cursor: pointer;
font-family: var(--ik-font-heading); font-weight: 600; font-size: 0.92rem; color: var(--ik-gray-500);
transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.ik-auth__tabs [role="tab"][aria-selected="true"] { background: #fff; color: var(--ik-forest); box-shadow: 0 1px 4px rgba(27, 94, 63, .14); }
.ik-auth__tabs [role="tab"]:focus-visible { outline: 2px solid var(--ik-green); outline-offset: 2px; }
.ik-auth:not(.is-tabbed) .ik-auth__pane + .ik-auth__pane { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--ik-gray-100); }
.ik-auth__pane[hidden] { display: none; }
.ik-auth__title { font-size: 1.55rem; margin: 0 0 4px; }
.ik-auth__lead { color: var(--ik-gray-500); margin: 0 0 22px; font-size: 0.95rem; }
.ik-auth__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 4px 0 20px; font-size: 0.88rem; }
.ik-auth__row label { display: inline-flex !important; align-items: center; gap: 8px; margin: 0 !important; font-weight: 500 !important; cursor: pointer; }
.ik-auth__row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--ik-green); }
.ik-auth__lost { color: var(--ik-forest); font-weight: 600; }
.ik-auth__lost:hover { color: var(--ik-green); }
.woocommerce-account form .ik-auth__submit { width: 100%; padding: 14px 22px; font-size: 1rem; }
.ik-auth__switch { text-align: center; margin: 20px 0 0; font-size: 0.9rem; color: var(--ik-gray-500); }
.ik-auth__switch a { color: var(--ik-forest); font-weight: 700; }
.ik-auth__note, .ik-auth .woocommerce-privacy-policy-text p { font-size: 0.8rem; color: var(--ik-gray-500); margin: 0 0 16px; }
.ik-auth .woocommerce-privacy-policy-text a { color: var(--ik-forest); }
.ik-auth .required { color: var(--ik-danger); text-decoration: none; }
.ik-auth .show-password-input { top: 50%; transform: translateY(-50%); }
/* WooCommerce enmarca cada formulario con borde y padding propios; aquí ya
va dentro de la tarjeta. */
.woocommerce .ik-auth form.login, .woocommerce .ik-auth form.register { border: 0; padding: 0; margin: 0; border-radius: 0; }
.woocommerce .ik-auth form .form-row { padding: 0; margin: 0 0 16px; }
.woocommerce .ik-auth form .form-row .input-text,
.woocommerce form.woocommerce-ResetPassword .form-row .input-text {
padding: 12px 14px; border: 1.5px solid var(--ik-gray-300); border-radius: var(--ik-radius-sm); background: var(--ik-bg); line-height: 1.4;
}
.woocommerce .ik-auth form .form-row .input-text:focus,
.woocommerce form.woocommerce-ResetPassword .form-row .input-text:focus { border-color: var(--ik-green); background: #fff; box-shadow: 0 0 0 3px var(--ik-green-tint); outline: none; }
/* «¿Olvidaste la contraseña?» y «Nueva contraseña»: la misma tarjeta, sola. */
body.woocommerce-account:not(.logged-in) .woocommerce-ResetPassword {
max-width: 480px; margin: 0 auto; background: #fff; padding: 32px;
border-radius: var(--ik-radius-lg); box-shadow: var(--ik-shadow-lift);
}
.woocommerce-account form .form-row { margin: 0 0 14px; }
.woocommerce-account form .form-row label { display: block; font-weight: 600; font-size: 0.88rem; margin-bottom: 6px; color: var(--ik-charcoal); }
.woocommerce-account form .input-text {
width: 100%; padding: 12px 14px; border: 1.5px solid var(--ik-gray-300); border-radius: var(--ik-radius-sm);
font: inherit; background: #fff; transition: border-color .15s ease, box-shadow .15s ease;
}
.woocommerce-account form .input-text:focus { outline: none; border-color: var(--ik-green); box-shadow: 0 0 0 3px var(--ik-green-tint); }
.woocommerce-account form .button,
.woocommerce-account .woocommerce-MyAccount-content .button:not(.pkgs-btn) {
background: var(--ik-green); color: #fff; border: 0; border-radius: 999px;
padding: 11px 22px; font-family: var(--ik-font-heading); font-weight: 600; cursor: pointer;
}
.woocommerce-account form .button:hover,
.woocommerce-account .woocommerce-MyAccount-content .button:not(.pkgs-btn):hover { background: var(--ik-forest); }
/* Tabla de pedidos */
.woocommerce-account .woocommerce-orders-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.woocommerce-account .woocommerce-orders-table th { text-align: left; color: var(--ik-gray-500); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: .04em; padding: 10px 12px; border-bottom: 1px solid var(--ik-gray-300); }
.woocommerce-account .woocommerce-orders-table td { padding: 14px 12px; border-bottom: 1px solid var(--ik-gray-100); }
/* Enlace de cuenta del header */
.ik-account-link {
display: inline-flex; align-items: center; gap: 8px; padding: 4px; color: var(--ik-forest);
border-radius: 999px; font-weight: 600; font-size: 0.9rem; transition: background-color .15s ease;
}
.ik-account-link svg { width: 24px; height: 24px; }
.ik-account-link:hover { background: var(--ik-green-tint); }
.ik-account-link__avatar {
width: 32px; height: 32px; border-radius: 50%; background: var(--ik-forest); color: #fff;
display: flex; align-items: center; justify-content: center;
font-family: var(--ik-font-heading); font-size: 0.8rem; font-weight: 700;
}
.ik-account-link__label { display: none; }
@media (min-width: 1100px) {
.ik-account-link { padding: 4px 12px 4px 4px; }
.ik-account-link:not(.is-logged-in) { padding: 6px 12px 6px 8px; }
.ik-account-link__label { display: inline; }
}
/* ---------------------------------------------------------------------
Carrito y checkout por bloques (WooCommerce Blocks)
El Cart/Checkout de esta instalación usan los bloques nativos de
WooCommerce en vez del shortcode clásico, así que se restylean por sus
propias clases en lugar de las de table.shop_table de más arriba.
------------------------------------------------------------------- */
.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout {
max-width: var(--ik-container); margin: 8px auto 60px; padding: 0 20px;
}
.wc-block-cart__empty-cart__title { font-size: 1.4rem; }
.wp-block-woocommerce-empty-cart-block { text-align: center; padding: 40px 0; }
.wp-block-woocommerce-empty-cart-block hr { border-color: var(--ik-gray-100); margin: 28px auto; max-width: 200px; }
.wc-block-grid__products, .wc-block-cart-cross-sells__products {
display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 18px;
list-style: none; padding: 0; margin: 24px 0 0;
}
@media (min-width: 720px) { .wc-block-grid__products, .wc-block-cart-cross-sells__products { grid-template-columns: repeat(4, 1fr); } }
.wc-block-grid__product {
background: #fff; border-radius: var(--ik-radius); box-shadow: var(--ik-shadow);
padding: 0 0 14px; text-align: left; list-style: none; display: block !important;
/* WC calcula esta tarjeta al 25% pensando en un layout flex de 4 columnas;
dentro de un grid ese % se resuelve contra el ancho de LA COLUMNA, no
del contenedor, y la deja en una fracción diminuta de sí misma. */
width: 100% !important; max-width: none !important; margin: 0 !important;
}
.wc-block-grid__product-image, .wc-block-grid__product-image .ik-visual-fallback {
background: var(--ik-bg); color: var(--ik-green); aspect-ratio: 1/1; padding: 18%;
display: flex; align-items: center; justify-content: center;
}
.wc-block-grid__product-title { font-weight: 700; font-size: 0.88rem; padding: 12px 14px 2px; color: var(--ik-forest); }
.wc-block-grid__product-price { padding: 0 14px; color: var(--ik-sand-dark); font-weight: 700; }
.wc-block-grid__product-add-to-cart { padding: 10px 14px 0; }
/* Botones de los bloques: cubre "Proceed to checkout", "Place order", cupón, cantidad. */
.wc-block-components-button,
.wc-block-grid__product-add-to-cart .wp-block-button__link,
.wp-block-woocommerce-empty-cart-block .wp-block-button__link {
background: var(--ik-green) !important; color: #fff !important; border: none !important;
border-radius: 999px !important; font-weight: 700 !important; box-shadow: none !important;
}
.wc-block-components-button:hover, .wc-block-grid__product-add-to-cart .wp-block-button__link:hover {
background: var(--ik-forest) !important;
}
.wc-block-components-button.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-container .wc-block-components-button {
background: var(--ik-sand-dark) !important; font-size: 1rem !important; padding: 15px 24px !important;
}
.wc-block-components-button.wc-block-components-checkout-place-order-button:hover { background: var(--ik-green) !important; }
.wc-block-cart-items, .wc-block-components-order-summary {
background: #fff; border-radius: var(--ik-radius); box-shadow: var(--ik-shadow); padding: 8px 18px;
}
.wc-block-cart-item__image img { border-radius: var(--ik-radius-sm); }
/* Móvil: WC pone las líneas en una rejilla de columnas fijas (80px + 132px +
huecos) con el total en una columna más; sumado al padding de la página,
del bloque y de la tarjeta, la tabla no cabía y se salía por la derecha.
Aquí el producto ocupa todo el ancho que queda y el total baja a la altura
del selector de cantidad. */
@media (max-width: 720px) {
.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout { padding: 0; }
.wc-block-cart-items { padding: 4px 14px; }
.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row { grid-template-columns: 64px minmax(0, 1fr); column-gap: 12px; }
.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image { padding-right: 0; }
.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product { grid-column: 2 / -1; }
.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
grid-row: 2; grid-column: 2 / -1; justify-self: end; align-self: end; margin-top: -40px;
}
}
.wc-block-cart-item__product-name { color: var(--ik-forest); font-weight: 700; }
.wc-block-components-product-price, .wc-block-components-totals-footer-item .wc-block-formatted-money-amount {
color: var(--ik-sand-dark); font-weight: 700;
}
.wc-block-cart__totals-title { font-family: var(--ik-font-heading); }
.wc-block-components-totals-wrapper, .wc-block-components-totals-item {
border-color: var(--ik-gray-100) !important;
}
.wc-block-components-quantity-selector { border-color: var(--ik-gray-300) !important; border-radius: var(--ik-radius-sm) !important; overflow: hidden; }
.wc-block-components-text-input input, .wc-block-components-textarea textarea, .wc-block-components-combobox input {
border-radius: var(--ik-radius-sm) !important; border-color: var(--ik-gray-300) !important;
}
.wc-block-components-text-input input:focus { border-color: var(--ik-sand) !important; box-shadow: none !important; }
.wc-block-components-checkout-step__title { font-family: var(--ik-font-heading); color: var(--ik-forest); }
.wc-block-components-checkout-step { background: #fff; border-radius: var(--ik-radius); box-shadow: var(--ik-shadow); padding: 20px; margin-bottom: 18px; }
.wc-block-components-radio-control__input:checked { accent-color: var(--ik-green); }
/* Breadcrumb */
.ik-breadcrumb { font-size: 0.82rem; color: var(--ik-gray-500); margin: 20px 20px 0; }
.ik-breadcrumb a { color: var(--ik-gray-500); }
.ik-breadcrumb a:hover { color: var(--ik-green); }
.ik-crumb-sep { margin: 0 6px; }