/* ============================================================ ANNY — TABS ============================================================ Pestañas del producto individual WooCommerce. RESPONSABILIDADES: - Navegación de pestañas - Estado activo - Hover - Contenido - Separadores - Información adicional - Reviews NO INCLUIR AQUÍ: - Responsive → anny-responsive.css - Producto general → anny-product.css - Botones → anny-buttons.css ============================================================ */ /* ============================================================ 01 — CONTENEDOR GENERAL ============================================================ */ .single-product .woocommerce-tabs { width: 100%; margin: 4rem 0 0; padding: 0; } /* ============================================================ 02 — LISTA DE PESTAÑAS ============================================================ */ .single-product .woocommerce-tabs ul.tabs { display: flex; align-items: stretch; flex-wrap: wrap; gap: 0; width: 100%; margin: 0; padding: 0; border-bottom: 1px solid var(--anny-border); list-style: none; } /* ============================================================ 03 — ELEMENTO DE PESTAÑA ============================================================ */ .single-product .woocommerce-tabs ul.tabs li { position: relative; display: flex; align-items: stretch; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; list-style: none; } /* ============================================================ 04 — LIMPIEZA WOOCOMMERCE ============================================================ */ .single-product .woocommerce-tabs ul.tabs li::before, .single-product .woocommerce-tabs ul.tabs li::after { display: none; } .single-product .woocommerce-tabs ul.tabs::before, .single-product .woocommerce-tabs ul.tabs::after { display: none; } /* ============================================================ 05 — ENLACE ============================================================ */ .single-product .woocommerce-tabs ul.tabs li a { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; margin: 0; padding: .75rem 1.25rem; border: 0; background: transparent; color: var(--anny-text); font-family: var(--anny-font-ui), sans-serif; font-size: .68rem; font-weight: var(--anny-weight-ui); letter-spacing: .08em; line-height: 1.2; text-align: center; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: color var(--anny-transition-fast), background-color var(--anny-transition-fast); } /* ============================================================ 06 — INDICADOR ============================================================ */ .single-product .woocommerce-tabs ul.tabs li a::after { content: ""; position: absolute; right: 1.25rem; bottom: -1px; left: 1.25rem; height: 2px; background-color: var(--anny-primary); transform: scaleX(0); transform-origin: center; transition: transform var(--anny-transition); } /* ============================================================ 07 — HOVER ============================================================ */ .single-product .woocommerce-tabs ul.tabs li a:hover { color: var(--anny-primary); background-color: transparent; } /* ============================================================ 08 — HOVER INDICADOR ============================================================ */ .single-product .woocommerce-tabs ul.tabs li a:hover::after { transform: scaleX(1); } /* ============================================================ 09 — PESTAÑA ACTIVA ============================================================ */ .single-product .woocommerce-tabs ul.tabs li.active a { color: var(--anny-secondary); font-weight: 600; } /* ============================================================ 10 — INDICADOR ACTIVO ============================================================ */ .single-product .woocommerce-tabs ul.tabs li.active a::after { transform: scaleX(1); } /* ============================================================ 11 — CONTENIDO ============================================================ */ .single-product .woocommerce-Tabs-panel { width: 100%; margin: 0; padding: 2rem 0 0; color: var(--anny-text); font-family: var(--anny-font-body), sans-serif; font-size: .9rem; font-weight: var(--anny-weight-body); line-height: 1.75; } /* ============================================================ 12 — TÍTULOS DEL CONTENIDO ============================================================ */ .single-product .woocommerce-Tabs-panel h2 { margin: 0 0 1rem; color: var(--anny-secondary); font-family: var(--anny-font-heading), sans-serif; font-size: 1.7rem; font-weight: var(--anny-weight-heading); line-height: 1.2; } /* ============================================================ 13 — PÁRRAFOS ============================================================ */ .single-product .woocommerce-Tabs-panel p { margin: 0 0 .9rem; } .single-product .woocommerce-Tabs-panel p:last-child { margin-bottom: 0; } /* ============================================================ 14 — LISTAS ============================================================ */ .single-product .woocommerce-Tabs-panel ul, .single-product .woocommerce-Tabs-panel ol { margin: 0 0 1rem; padding-left: 1.25rem; } .single-product .woocommerce-Tabs-panel li { margin-bottom: .4rem; } /* ============================================================ 15 — ENLACES ============================================================ */ .single-product .woocommerce-Tabs-panel a { color: var(--anny-primary); } .single-product .woocommerce-Tabs-panel a:hover { color: var(--anny-secondary); } /* ============================================================ 16 — TABLA DE ATRIBUTOS ============================================================ */ .single-product .woocommerce-Tabs-panel .shop_attributes { width: 100%; margin: 0; border-collapse: collapse; border-spacing: 0; } /* ============================================================ 17 — CELDAS ============================================================ */ .single-product .woocommerce-Tabs-panel .shop_attributes th, .single-product .woocommerce-Tabs-panel .shop_attributes td { padding: .8rem 1rem; border-bottom: 1px solid var(--anny-border); vertical-align: middle; text-align: left; } /* ============================================================ 18 — NOMBRE ATRIBUTO ============================================================ */ .single-product .woocommerce-Tabs-panel .shop_attributes th { width: 30%; color: var(--anny-secondary); font-family: var(--anny-font-ui), sans-serif; font-size: .72rem; font-weight: 600; letter-spacing: .03em; } /* ============================================================ 19 — VALOR ATRIBUTO ============================================================ */ .single-product .woocommerce-Tabs-panel .shop_attributes td { color: var(--anny-text); font-size: .82rem; } /* ============================================================ 20 — FILAS ALTERNAS ============================================================ */ .single-product .woocommerce-Tabs-panel .shop_attributes tr:nth-child(even) { background-color: var(--anny-cream-light); } /* ============================================================ 21 — REVIEWS ============================================================ */ .single-product .woocommerce-Tabs-panel #reviews { width: 100%; } /* ============================================================ 22 — LISTA DE RESEÑAS ============================================================ */ .single-product .woocommerce-Tabs-panel #reviews .commentlist { display: flex; flex-direction: column; gap: 1.25rem; margin: 0; padding: 0; list-style: none; } /* ============================================================ 23 — RESEÑA ============================================================ */ .single-product .woocommerce-Tabs-panel #reviews .commentlist li { margin: 0; padding: 1.25rem 0; border-bottom: 1px solid var(--anny-border); list-style: none; } /* ============================================================ 24 — AUTOR ============================================================ */ .single-product .woocommerce-Tabs-panel #reviews .comment-text .meta { margin: 0 0 .5rem; color: var(--anny-text); font-family: var(--anny-font-ui), sans-serif; font-size: .68rem; line-height: 1.4; } /* ============================================================ 25 — ESTRELLAS ============================================================ */ .single-product .woocommerce-Tabs-panel #reviews .star-rating { margin: 0 0 .6rem; } /* ============================================================ 26 — TEXTO DE RESEÑA ============================================================ */ .single-product .woocommerce-Tabs-panel #reviews .description { color: var(--anny-text); font-family: var(--anny-font-body), sans-serif; font-size: .84rem; line-height: 1.65; } /* ============================================================ 27 — FORMULARIO DE RESEÑA ============================================================ */ .single-product .woocommerce-Tabs-panel .comment-respond { margin-top: 2rem; } .single-product .woocommerce-Tabs-panel .comment-reply-title { display: block; margin: 0 0 1rem; color: var(--anny-secondary); font-family: var(--anny-font-heading), sans-serif; font-size: 1.5rem; font-weight: var(--anny-weight-heading); } /* ============================================================ 28 — CAMPOS DE RESEÑA ============================================================ */ .single-product .woocommerce-Tabs-panel .comment-form { display: grid; gap: 1rem; } .single-product .woocommerce-Tabs-panel .comment-form-comment, .single-product .woocommerce-Tabs-panel .comment-form-author, .single-product .woocommerce-Tabs-panel .comment-form-email { margin: 0; } /* ============================================================ 29 — LABELS FORMULARIO ============================================================ */ .single-product .woocommerce-Tabs-panel .comment-form label { display: block; margin-bottom: .4rem; color: var(--anny-secondary); font-family: var(--anny-font-ui), sans-serif; font-size: .68rem; font-weight: var(--anny-weight-ui); letter-spacing: .04em; } /* ============================================================ 30 — CAMPOS ============================================================ */ .single-product .woocommerce-Tabs-panel .comment-form input[type="text"], .single-product .woocommerce-Tabs-panel .comment-form input[type="email"], .single-product .woocommerce-Tabs-panel .comment-form textarea { width: 100%; } /* ============================================================ 31 — TEXTAREA ============================================================ */ .single-product .woocommerce-Tabs-panel .comment-form textarea { min-height: 140px; resize: vertical; } /* ============================================================ 32 — AVISO ============================================================ */ .single-product .woocommerce-Tabs-panel .woocommerce-noreviews { margin: 0 0 1rem; padding: 1rem 1.1rem; border: 1px solid var(--anny-border); border-radius: var(--anny-radius); background-color: var(--anny-cream-light); color: var(--anny-text); font-size: .82rem; } /* ============================================================ 33 — ESTADO VACÍO ============================================================ */ .single-product .woocommerce-tabs:empty { display: none; } /* ============================================================ 34 — FOCUS ============================================================ */ .single-product .woocommerce-tabs a:focus-visible { outline: 2px solid var(--anny-accent); outline-offset: 3px; } .single-product .woocommerce-tabs a:focus:not(:focus-visible) { outline: none; } /* ============================================================ 35 — REDUCIR MOVIMIENTO ============================================================ */ @media (prefers-reduced-motion: reduce) { .single-product .woocommerce-tabs a, .single-product .woocommerce-tabs a::after { transition: none; } }