/*
Theme Name: NACTEC
Theme URI:
Description: Child theme de Divi 5 para NACTEC.
Author: NACTEC
Template: Divi
Version: 1.0.34
Text Domain: nactec
*/
/* =========================================================
NACTEC — BASE CARDS
========================================================= */
.nactec-card {
box-sizing: border-box;
background-color: #ffffff;
padding: 32px;
border: 1px solid #e2e2e8;
border-radius: 16px;
box-shadow: 0 4px 16px rgba(26, 26, 26, 0.06);
}
/* =========================================================
NACTEC — CATEGORY CARDS
========================================================= */
.nactec-card--category {
padding: 24px;
text-align: center;
cursor: pointer;
transition:
border-color 0.2s ease,
box-shadow 0.2s ease;
}
.nactec-card--category:hover {
border-color: #0044ff;
box-shadow:
0 8px 22px rgba(26, 26, 26, 0.11);
}
/* ---------------------------------------------------------
Category icon
--------------------------------------------------------- */
.nactec-category-icon {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
}
.nactec-category-icon .et_pb_image_wrap {
width: 88px !important;
height: 88px !important;
min-width: 88px;
min-height: 88px;
max-width: 88px;
aspect-ratio: 1 / 1;
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0 !important;
background-color: #e2e2e8;
border-radius: 50%;
box-sizing: border-box;
}
.nactec-category-icon img {
width: 48px;
height: 48px;
object-fit: contain;
}
/* ---------------------------------------------------------
Category title
--------------------------------------------------------- */
.nactec-category-title,
.nactec-category-title * {
transition: color 0.2s ease;
}
.nactec-card--category:hover .nactec-category-title,
.nactec-card--category:hover .nactec-category-title * {
color: #0044ff !important;
}
/* =========================================================
NACTEC — PRODUCT CARDS
========================================================= */
.nactec-card--product {
position: relative;
height: 100%;
min-width: 0;
padding: 0;
overflow: hidden;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
justify-content: flex-start !important;
gap: 0 !important;
row-gap: 0 !important;
column-gap: 0 !important;
transition:
border-color 0.2s ease,
box-shadow 0.2s ease;
}
.nactec-card--product:hover {
border-color: #0044ff;
box-shadow:
0 8px 22px rgba(26, 26, 26, 0.11);
}
/* =========================================================
PRODUCT CARD — RESET DIVI
========================================================= */
:where(.nactec-card--product .et_pb_module) {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
:where(.nactec-card--product p) {
margin: 0 !important;
padding: 0 !important;
}
/* =========================================================
PRODUCT CARD — IMAGE
========================================================= */
.nactec-product-image {
width: 100%;
height: 180px;
flex: 0 0 180px;
margin: 0 !important;
padding: 20px;
display: flex;
align-items: center;
justify-content: center;
background-color: #f5f5f7;
box-sizing: border-box;
}
.nactec-product-image .et_pb_image_wrap {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.nactec-product-image img {
width: 100%;
height: 100%;
max-width: 160px;
max-height: 140px;
object-fit: contain;
}
/* =========================================================
PRODUCT CARD — COMMON CONTENT WIDTH
========================================================= */
.nactec-product-brand,
.nactec-product-title,
.nactec-product-stock,
.nactec-product-price,
.nactec-product-installments,
.nactec-product-shipping,
.nactec-product-button {
margin-left: 16px !important;
margin-right: 16px !important;
}
/* =========================================================
PRODUCT CARD — BRAND
========================================================= */
.nactec-product-brand {
min-height: 15px;
margin-top: 18px !important;
margin-bottom: 8px !important;
font-size: 12px;
line-height: 1.25;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #0044ff;
}
/* =========================================================
PRODUCT CARD — TITLE
========================================================= */
.nactec-product-title {
min-height: 63px;
margin-top: 0 !important;
margin-bottom: 8px !important;
}
.nactec-product-title h6,
.nactec-product-title h6 * {
margin: 0 !important;
padding: 0 !important;
line-height: 1.3em;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
/* =========================================================
PRODUCT CARD — STOCK
========================================================= */
.nactec-product-stock {
min-height: 17px;
margin-top: 0 !important;
margin-bottom: 8px !important;
font-size: 12px;
line-height: 1.4;
color: #77777d;
}
/* =========================================================
PRODUCT CARD — PRICE
========================================================= */
.nactec-product-price {
margin-top: auto !important;
margin-bottom: 4px !important;
min-height: 48px;
display: flex;
flex-direction: column;
justify-content: flex-end;
font-size: clamp(16px, 1.7vw, 20px);
line-height: 1.25;
font-weight: 700;
color: #c75105;
}
/* Precio normal WooCommerce */
.nactec-product-price .woocommerce-Price-amount,
.nactec-product-price .woocommerce-Price-amount *,
.nactec-product-price > span {
font-size: clamp(16px, 1.7vw, 20px) !important;
line-height: 1.25 !important;
font-weight: 700 !important;
color: #c75105 !important;
white-space: nowrap !important;
}
/* Precio anterior cuando hay oferta */
.nactec-product-price del {
display: block;
margin: 0 0 2px 0 !important;
font-size: 12px !important;
line-height: 1.3 !important;
font-weight: 400 !important;
color: #77777d !important;
opacity: 1 !important;
}
.nactec-product-price del .woocommerce-Price-amount,
.nactec-product-price del .woocommerce-Price-amount * {
font-size: 12px !important;
line-height: 1.3 !important;
font-weight: 400 !important;
color: #77777d !important;
}
/* Precio actual cuando hay oferta */
.nactec-product-price ins {
display: block;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
text-decoration: none !important;
}
.nactec-product-price ins .woocommerce-Price-amount,
.nactec-product-price ins .woocommerce-Price-amount * {
font-size: clamp(16px, 1.7vw, 20px) !important;
line-height: 1.25 !important;
font-weight: 700 !important;
color: #c75105 !important;
text-decoration: none !important;
white-space: nowrap !important;
}
/* =========================================================
PRODUCT CARD — INSTALLMENTS
========================================================= */
.nactec-product-installments {
min-height: 17px;
margin-top: 0 !important;
margin-bottom: 2px !important;
font-size: 12px;
line-height: 1.4;
color: #168447;
}
/* =========================================================
PRODUCT CARD — FREE SHIPPING
========================================================= */
.nactec-product-shipping {
min-height: 17px;
margin-top: 0 !important;
margin-bottom: 10px !important;
font-size: 12px;
line-height: 1.4;
font-weight: 400;
color: #168447;
}
/* =========================================================
PRODUCT CARD — ADD TO CART
========================================================= */
.nactec-product-button {
margin-top: 0 !important;
margin-bottom: 14px !important;
}
.nactec-product-button .et_pb_button,
.nactec-product-button .button,
.nactec-product-button button,
.nactec-product-button a.button {
width: 100%;
min-height: 48px;
display: flex !important;
align-items: center;
justify-content: center;
box-sizing: border-box;
margin: 0 !important;
padding: 12px 16px !important;
background-color: #0033cc !important;
border: 0 !important;
border-radius: 8px !important;
color: #ffffff !important;
font-size: 15px !important;
line-height: 1.2 !important;
font-weight: 600 !important;
text-align: center;
text-decoration: none !important;
transition:
background-color 0.2s ease,
color 0.2s ease !important;
}
.nactec-product-button .et_pb_button:hover,
.nactec-product-button .button:hover,
.nactec-product-button button:hover,
.nactec-product-button a.button:hover {
background-color: #0044ff !important;
color: #ffffff !important;
}
/* =========================================================
PRODUCT CARD — PRODUCT LINKS
========================================================= */
.nactec-product-title,
.nactec-product-title * {
transition: color 0.2s ease;
}
.nactec-product-title:hover,
.nactec-product-title:hover * {
color: #0044ff !important;
}
/* =========================================================
PRODUCT CARD — DISCOUNT BADGE
========================================================= */
.nactec-product-discount {
position: absolute !important;
top: 12px;
left: 12px;
z-index: 5;
margin: 0 !important;
padding: 0 !important;
}
.nactec-product-discount-badge {
min-height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 8px;
background-color: #c75105;
color: #ffffff;
border-radius: 6px;
font-size: 11px;
line-height: 1;
font-weight: 700;
white-space: nowrap;
}
/* =========================================================
NACTEC — PROMO CARDS
========================================================= */
.nactec-promo {
position: relative;
isolation: isolate;
min-height: 280px;
padding: 32px;
overflow: hidden;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: stretch !important;
gap: 0 !important;
row-gap: 0 !important;
background-size: cover;
background-position: center;
border: 1px solid #e2e2e8;
border-radius: 16px;
box-sizing: border-box;
}
/* =========================================================
PROMO CARD — DIVI RESET
========================================================= */
:where(.nactec-promo .et_pb_module) {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
:where(.nactec-promo p) {
margin: 0 !important;
padding: 0 !important;
}
/* =========================================================
PROMO CARD — OVERLAYS
========================================================= */
.nactec-promo::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
pointer-events: none;
}
/* Dark */
.nactec-promo--dark::before {
background:
linear-gradient(
90deg,
rgba(10, 10, 12, 0.96) 0%,
rgba(10, 10, 12, 0.82) 45%,
rgba(10, 10, 12, 0.28) 100%
);
}
/* Light */
.nactec-promo--light::before {
background:
linear-gradient(
90deg,
rgba(255, 255, 255, 0.98) 0%,
rgba(255, 255, 255, 0.92) 48%,
rgba(255, 255, 255, 0.48) 100%
);
}
/* =========================================================
PROMO CARD — TAG
========================================================= */
.nactec-promo-tag {
margin: 0 0 10px 0 !important;
font-size: 12px;
line-height: 1.2;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #c75105 !important;
}
.nactec-promo-tag * {
color: #c75105 !important;
}
/* =========================================================
PROMO CARD — TITLE
========================================================= */
.nactec-promo-title {
max-width: 440px;
margin: 0 0 14px 0 !important;
}
.nactec-promo-title,
.nactec-promo-title *,
.nactec-promo-title h1,
.nactec-promo-title h2,
.nactec-promo-title h3,
.nactec-promo-title h4,
.nactec-promo-title h5,
.nactec-promo-title h6 {
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
line-height: 1.2em !important;
}
/* =========================================================
PROMO CARD — DESCRIPTION
========================================================= */
.nactec-promo-description {
max-width: 400px;
margin: 0 0 24px 0 !important;
font-size: 15px;
line-height: 1.55;
}
.nactec-promo--dark .nactec-promo-description,
.nactec-promo--dark .nactec-promo-description * {
color: rgba(255, 255, 255, 0.86) !important;
}
.nactec-promo--light .nactec-promo-description,
.nactec-promo--light .nactec-promo-description * {
color: #4a4a4f !important;
}
/* =========================================================
PROMO CARD — CTA
========================================================= */
.nactec-promo-link {
margin: 0 !important;
}
.nactec-promo-link a {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 14px;
line-height: 1.3;
font-weight: 700;
text-decoration: none !important;
transition:
gap 0.2s ease,
color 0.2s ease;
}
/* Dark CTA */
.nactec-promo--dark .nactec-promo-link a,
.nactec-promo--dark .nactec-promo-link a * {
color: #ffffff !important;
}
/* Light CTA */
.nactec-promo--light .nactec-promo-link a,
.nactec-promo--light .nactec-promo-link a * {
color: #0044ff !important;
}
.nactec-promo-link a:hover {
gap: 10px;
}
/* =========================================================
NACTEC — BENEFITS
========================================================= */
/*
* Estructura esperada:
*
* .nactec-benefit
* └── .nactec-benefit-row
* ├── .nactec-benefit-icon-col
* │ └── .nactec-benefit-icon
* └── .nactec-benefit-content
* ├── .nactec-benefit-title
* └── .nactec-benefit-text
*/
/* ---------------------------------------------------------
Benefit outer card
--------------------------------------------------------- */
.nactec-benefit {
width: 100%;
min-width: 0;
min-height: 84px;
padding: 14px 16px;
display: flex !important;
align-items: center !important;
background-color: #ffffff;
border: 1px solid #e2e2e8;
border-radius: 12px;
box-shadow:
0 3px 12px rgba(26, 26, 26, 0.05);
box-sizing: border-box;
}
/* ---------------------------------------------------------
Nested row
--------------------------------------------------------- */
/*
* Neutralizamos el ancho, padding y distribución propios
* de una Row de Divi y la usamos como grid compacto.
*/
.nactec-benefit-row {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
display: grid !important;
grid-template-columns:
48px
minmax(0, 1fr) !important;
/* Alinear ambas columnas desde arriba */
align-items: start !important;
column-gap: 14px !important;
row-gap: 0 !important;
}
/* Neutralizar geometría de las dos columnas internas */
.nactec-benefit-row > .et_pb_column,
.nactec-benefit-icon-col,
.nactec-benefit-content {
width: auto !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
}
/* ---------------------------------------------------------
Icon column
--------------------------------------------------------- */
.nactec-benefit-icon-col {
display: flex !important;
align-items: flex-start !important;
justify-content: center !important;
/* Pequeña compensación óptica respecto al título */
padding-top: 2px !important;
}
/* ---------------------------------------------------------
Icon
--------------------------------------------------------- */
.nactec-benefit-icon {
width: 44px !important;
max-width: 44px !important;
margin: 0 !important;
padding: 0 !important;
}
.nactec-benefit-icon .et_pb_image_wrap {
width: 44px !important;
height: 44px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.nactec-benefit-icon img {
width: 44px !important;
height: 44px !important;
display: block;
object-fit: contain;
}
/* ---------------------------------------------------------
Text column
--------------------------------------------------------- */
.nactec-benefit-content {
min-width: 0;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: center !important;
gap: 4px !important;
text-align: left;
}
/* Reset Divi module spacing */
:where(.nactec-benefit .et_pb_module) {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
:where(.nactec-benefit p) {
margin: 0 !important;
padding: 0 !important;
}
/* ---------------------------------------------------------
Benefit title
--------------------------------------------------------- */
.nactec-benefit-title {
width: 100%;
margin: 0 !important;
padding: 0 !important;
}
.nactec-benefit-title,
.nactec-benefit-title * {
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
font-size: 15px !important;
line-height: 1.25 !important;
font-weight: 700 !important;
color: #1a1a1a;
}
/* ---------------------------------------------------------
Benefit description
--------------------------------------------------------- */
.nactec-benefit-text {
width: 100%;
margin: 0 !important;
padding: 0 !important;
}
.nactec-benefit-text,
.nactec-benefit-text * {
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
font-size: 12px !important;
line-height: 1.4 !important;
font-weight: 400 !important;
color: #4a4a4f !important;
}
/* =========================================================
BENEFITS — RESPONSIVE
========================================================= */
@media (max-width: 980px) {
.nactec-benefit {
min-height: 80px;
padding: 12px 14px;
}
.nactec-benefit-row {
grid-template-columns:
44px
minmax(0, 1fr) !important;
column-gap: 12px !important;
}
.nactec-benefit-icon,
.nactec-benefit-icon .et_pb_image_wrap,
.nactec-benefit-icon img {
width: 40px !important;
height: 40px !important;
}
}
@media (max-width: 767px) {
.nactec-benefit {
padding: 10px 8px;
}
.nactec-benefit-title,
.nactec-benefit-title * {
font-size: 14px !important;
}
.nactec-benefit-text,
.nactec-benefit-text * {
font-size: 12px !important;
}
}
/* =========================================================
NACTEC — BRAND CARDS / KEYCAP STYLE
========================================================= */
.nactec-brand-card {
position: relative;
min-height: 120px;
padding: 20px;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background:
linear-gradient(
180deg,
#ffffff 0%,
#f7f7f9 100%
);
border: 1px solid #d8d8de;
border-bottom-color: #b8b8bf;
border-radius: 18px;
box-sizing: border-box;
/* Efecto tecla */
box-shadow:
0 6px 0 #b7b7bd,
0 10px 18px rgba(26, 26, 26, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.95),
inset 0 -2px 0 rgba(0, 0, 0, 0.03);
cursor: pointer;
transition:
padding 0.15s ease,
border-color 0.15s ease,
background 0.15s ease,
box-shadow 0.15s ease;
}
/* ---------------------------------------------------------
Brand logo
--------------------------------------------------------- */
.nactec-brand-logo {
width: 100%;
margin: 0 !important;
padding: 0 !important;
display: flex;
align-items: center;
justify-content: center;
}
.nactec-brand-logo .et_pb_image_wrap {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.nactec-brand-logo img {
width: auto !important;
height: auto !important;
max-width: 150px;
max-height: 60px;
object-fit: contain;
}
/* =========================================================
BRAND CARDS — RESPONSIVE
========================================================= */
@media (max-width: 980px) {
.nactec-brand-card {
min-height: 110px;
padding: 18px;
box-shadow:
0 5px 0 #b7b7bd,
0 8px 16px rgba(26, 26, 26, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.95),
inset 0 -2px 0 rgba(0, 0, 0, 0.03);
}
.nactec-brand-logo img {
max-width: 135px;
max-height: 54px;
}
}
@media (max-width: 767px) {
.nactec-brand-card {
min-height: 100px;
padding: 16px;
border-radius: 16px;
box-shadow:
0 4px 0 #b7b7bd,
0 7px 14px rgba(26, 26, 26, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.95),
inset 0 -2px 0 rgba(0, 0, 0, 0.03);
}
.nactec-brand-logo img {
max-width: 115px;
max-height: 48px;
}
}
/* =========================================================
BRAND CARD — KEY PRESS HOVER
========================================================= */
.nactec-brand-card:hover {
/*
* La base pasa de 6px a 2px:
* visualmente parece que la tecla fue presionada.
*/
box-shadow:
0 2px 0 #a9a9b0,
1px 5px 10px rgba(26, 26, 26, 0.08),
inset 0 2px 4px rgba(26, 26, 26, 0.05);
border-color: #0044ff;
background:
linear-gradient(
180deg,
#f8f8fa 0%,
#f2f2f5 100%
);
/*
* Movemos solamente el contenido 3px hacia abajo.
* El tamaño exterior de la card permanece estable.
*/
padding-top: 23px;
padding-bottom: 17px;
}
/* =========================================================
NACTEC — HERO
========================================================= */
.nactec-hero {
align-items: stretch !important;
}
/* =========================================================
HERO — MAIN
========================================================= */
.nactec-hero-main {
position: relative;
isolation: isolate;
min-height: 448px;
padding: 48px;
overflow: hidden;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
border-radius: 16px;
box-sizing: border-box;
}
/* Overlay principal */
.nactec-hero-main::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background:
linear-gradient(
90deg,
rgba(0, 35, 110, 0.92) 0%,
rgba(0, 35, 110, 0.72) 48%,
rgba(0, 35, 110, 0.30) 100%
);
pointer-events: none;
}
/* Contenido siempre por encima del overlay */
.nactec-hero-main > * {
position: relative;
z-index: 1;
}
/* Reset Divi */
:where(.nactec-hero-main .et_pb_module) {
margin-top: 0 !important;
}
/* Main title */
.nactec-hero-title {
max-width: 430px;
margin-bottom: 20px !important;
}
/* Main description */
.nactec-hero-description {
max-width: 410px;
margin-bottom: 28px !important;
font-size: 15px;
line-height: 1.6;
}
.nactec-hero-description,
.nactec-hero-description * {
color: rgba(255, 255, 255, 0.92) !important;
}
/* Main CTA */
.nactec-hero-button {
margin: 0 !important;
}
/* =========================================================
HERO — SIDE COLUMN
========================================================= */
.nactec-hero-side {
min-height: 448px;
display: flex !important;
flex-direction: column !important;
gap: 28px !important;
}
/* =========================================================
HERO — SECONDARY CARDS
========================================================= */
.nactec-hero-card {
position: relative;
isolation: isolate;
/*
* Ambas comparten equitativamente la altura
* disponible de la columna derecha.
*/
flex: 1 1 0 !important;
width: 100% !important;
max-width: none !important;
min-height: 0 !important;
margin: 0 !important;
padding: 32px !important;
overflow: hidden;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: flex-start !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
border: 1px solid #e2e2e8;
border-radius: 16px;
box-shadow:
0 4px 16px rgba(26, 26, 26, 0.06);
box-sizing: border-box;
}
/*
* Overlay por encima del background pero
* por debajo del contenido.
*/
.nactec-hero-card::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
border-radius: inherit;
pointer-events: none;
}
/* Todo el contenido sobre el overlay */
.nactec-hero-card > * {
position: relative;
z-index: 1;
}
/* =========================================================
HERO — SECONDARY OVERLAYS
========================================================= */
/* Repuestos */
.nactec-hero-card--light::before {
background:
linear-gradient(
90deg,
rgba(255, 255, 255, 0.98) 0%,
rgba(255, 255, 255, 0.94) 40%,
rgba(255, 255, 255, 0.65) 62%,
rgba(255, 255, 255, 0.12) 100%
);
}
/* PC y Hardware */
.nactec-hero-card--dark::before {
background:
linear-gradient(
90deg,
rgba(8, 8, 10, 0.94) 0%,
rgba(8, 8, 10, 0.82) 42%,
rgba(8, 8, 10, 0.45) 66%,
rgba(8, 8, 10, 0.12) 100%
);
}
/* =========================================================
HERO — SECONDARY RESET
========================================================= */
:where(.nactec-hero-card .et_pb_module) {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
:where(.nactec-hero-card p) {
margin: 0 !important;
padding: 0 !important;
}
/* =========================================================
HERO — SECONDARY TAG
========================================================= */
.nactec-hero-tag {
margin: 0 0 12px 0 !important;
font-size: 12px;
line-height: 1.2;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #c75105 !important;
}
.nactec-hero-tag * {
color: #c75105 !important;
}
/* =========================================================
HERO — SECONDARY TITLE
========================================================= */
.nactec-hero-card-title {
max-width: 360px;
margin: 0 0 10px 0 !important;
}
.nactec-hero-card-title,
.nactec-hero-card-title * {
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
line-height: 1.2em !important;
}
/* =========================================================
HERO — SECONDARY DESCRIPTION
========================================================= */
.nactec-hero-card-description {
max-width: 350px;
margin: 0 !important;
font-size: 14px;
line-height: 1.5;
}
/* =========================================================
HERO — LIGHT VARIANT
========================================================= */
.nactec-hero-card--light .nactec-hero-card-description,
.nactec-hero-card--light .nactec-hero-card-description * {
color: #4a4a4f !important;
}
/* =========================================================
HERO — DARK VARIANT
========================================================= */
.nactec-hero-card--dark .nactec-hero-card-description,
.nactec-hero-card--dark .nactec-hero-card-description * {
color: rgba(255, 255, 255, 0.86) !important;
}
/* =========================================================
NACTEC — HERO RESPONSIVE
========================================================= */
/* ---------------------------------------------------------
TABLET
--------------------------------------------------------- */
@media (max-width: 980px) {
/* Hero general: una sola columna */
.nactec-hero {
width: 100% !important;
max-width: none !important;
display: grid !important;
grid-template-columns: 1fr !important;
gap: 24px !important;
}
.nactec-hero > .et_pb_column,
.nactec-hero-main,
.nactec-hero-side {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
}
/* Hero principal */
.nactec-hero-main {
min-height: 400px;
padding: 40px;
background-position: center !important;
}
/* Cards secundarias en paralelo */
.nactec-hero-side {
min-height: 0;
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 20px !important;
}
.nactec-hero-card {
width: 100% !important;
max-width: none !important;
min-height: 210px !important;
padding: 28px !important;
margin: 0 !important;
}
}
/* ---------------------------------------------------------
MOBILE
--------------------------------------------------------- */
@media (max-width: 767px) {
.nactec-hero {
gap: 16px !important;
}
/* Hero principal */
.nactec-hero-main {
min-height: 410px;
padding: 32px 24px;
background-position: center !important;
}
/*
* En pantallas angostas aumentamos el overlay
* para garantizar legibilidad.
*/
.nactec-hero-main::before {
background:
linear-gradient(
90deg,
rgba(0, 35, 110, 0.96) 0%,
rgba(0, 35, 110, 0.88) 55%,
rgba(0, 35, 110, 0.58) 100%
);
}
.nactec-hero-title {
max-width: 100%;
}
.nactec-hero-description {
max-width: 100%;
}
/* Cards secundarias apiladas */
.nactec-hero-side {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 16px !important;
}
.nactec-hero-card {
min-height: 190px !important;
padding: 24px !important;
}
/* Overlay claro más fuerte en móvil */
.nactec-hero-card--light::before {
background:
linear-gradient(
90deg,
rgba(255, 255, 255, 0.98) 0%,
rgba(255, 255, 255, 0.94) 58%,
rgba(255, 255, 255, 0.58) 100%
);
}
/* Overlay oscuro más fuerte en móvil */
.nactec-hero-card--dark::before {
background:
linear-gradient(
90deg,
rgba(8, 8, 10, 0.96) 0%,
rgba(8, 8, 10, 0.88) 58%,
rgba(8, 8, 10, 0.55) 100%
);
}
.nactec-hero-card-title,
.nactec-hero-card-description {
max-width: 100%;
}
}
/* =========================================================
NACTEC — HEADER BASE
========================================================= */
.nactec-header {
margin: 0 !important;
padding: 0 !important;
}
.nactec-header .et_pb_row {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Main row
*
* Refactor: logo + buscador + acciones ocupan la primera
* línea y la navegación vive en una cuarta columna 24/24
* que baja a la segunda línea.
*/
.nactec-header-main {
width: 90% !important;
max-width: 1200px !important;
margin: 0 auto !important;
padding-top: 16px !important;
padding-bottom: 0 !important;
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: center !important;
}
/* =========================================================
NACTEC — HEADER SEARCH
========================================================= */
.nactec-header-search {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
box-shadow: none !important;
}
/* Form */
.nactec-header-search form {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
/* Contenedor visual */
.nactec-header-search form > div {
display: flex !important;
align-items: center !important;
width: 100% !important;
height: 48px !important;
margin: 0 !important;
padding: 4px 4px 4px 20px !important;
background: #f1f2f5 !important;
border: 0 !important;
border-radius: 999px !important;
outline: 0 !important;
box-shadow: none !important;
box-sizing: border-box;
transition: background-color 0.2s ease;
}
/* =========================================================
INPUT
========================================================= */
.nactec-header-search input.et_pb_s {
position: static !important;
flex: 1 1 auto !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
height: 40px !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
outline: none !important;
box-shadow: none !important;
font-family: "Manrope", sans-serif;
font-size: 14px;
font-weight: 400;
color: #4a4a4f !important;
box-sizing: border-box;
}
/* Placeholder */
.nactec-header-search input.et_pb_s::placeholder {
color: #66666c !important;
opacity: 1;
}
/* =========================================================
BOTÓN
========================================================= */
.nactec-header-search input.et_pb_searchsubmit {
position: static !important;
flex: 0 0 40px !important;
width: 40px !important;
min-width: 40px !important;
height: 40px !important;
margin: 0 !important;
padding: 0 !important;
background-color: #0044ff !important;
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 19px 19px !important;
border: 0 !important;
border-radius: 50% !important;
color: transparent !important;
font-size: 0 !important;
text-indent: -9999px;
cursor: pointer;
box-sizing: border-box;
transition:
background-color 0.2s ease,
box-shadow 0.2s ease;
}
/* Hover */
.nactec-header-search input.et_pb_searchsubmit:hover {
background-color: #0033cc !important;
}
/* =========================================================
SEARCH — FOCUS
========================================================= */
/* Estado normal */
.nactec-header-search form > div {
background: #f1f2f5 !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
}
/* Al escribir: solamente aclaramos el fondo */
.nactec-header-search form > div:focus-within {
background: #f7f7f9 !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
}
/* Elimina cualquier focus agregado por Divi o el navegador */
.nactec-header-search input.et_pb_s,
.nactec-header-search input.et_pb_s:focus,
.nactec-header-search input.et_pb_s:focus-visible,
.nactec-header-search input.et_pb_s:active {
background: transparent !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
}
/* También evitamos outline sobre el formulario */
.nactec-header-search form,
.nactec-header-search form:focus,
.nactec-header-search form:focus-within {
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
}
/* =========================================================
NACTEC — HEADER ACTIONS
========================================================= */
/*
* La columna de acciones contiene una Row anidada por cada
* estado de cuenta (guest / logged). El estado visible se
* resolverá luego con condiciones de Divi.
*/
.nactec-header-actions-col {
min-width: 0;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: stretch !important;
margin: 0 !important;
padding: 0 !important;
}
/* Neutralizar la geometría de las Rows anidadas de cuenta */
.nactec-header-actions-col > .et_pb_row {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* =========================================================
HEADER — ACCOUNT
Base
========================================================= */
.nactec-account {
display: grid !important;
align-items: center !important;
column-gap: 6px;
row-gap: 4px;
width: max-content !important;
max-width: 100%;
margin-left: auto !important;
margin-right: 0 !important;
padding: 0 !important;
white-space: nowrap;
}
/* ---------------------------------------------------------
Guest state
[icono] Ingresar | Crear cuenta
Carrito (n)
--------------------------------------------------------- */
.nactec-account--guest {
grid-template-columns:
28px
max-content
max-content
max-content;
grid-template-areas:
"icon login separator register"
"icon cart cart cart";
}
/* ---------------------------------------------------------
Reset de módulos internos
--------------------------------------------------------- */
.nactec-account > .et_pb_module,
.nactec-account .et_pb_module {
width: auto !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
.nactec-account p {
margin: 0 !important;
padding: 0 !important;
}
/* ---------------------------------------------------------
Icono
--------------------------------------------------------- */
.nactec-account-icon {
grid-area: icon;
align-self: center;
justify-self: center;
margin: 0 !important;
padding: 0 !important;
}
/* ---------------------------------------------------------
Guest — Ingresar
--------------------------------------------------------- */
.nactec-account-login {
grid-area: login;
}
/* ---------------------------------------------------------
Separador
--------------------------------------------------------- */
.nactec-account-separator {
grid-area: separator;
}
/* ---------------------------------------------------------
Guest — Crear cuenta
--------------------------------------------------------- */
.nactec-account-register {
grid-area: register;
}
/* ---------------------------------------------------------
Carrito
--------------------------------------------------------- */
.nactec-account-cart {
grid-area: cart;
justify-self: end !important;
align-self: center !important;
text-align: right !important;
}
.nactec-account-cart,
.nactec-account-cart .et_pb_text_inner,
.nactec-account-cart p,
.nactec-account-cart a {
text-align: right !important;
}
/* ---------------------------------------------------------
Enlaces de cuenta
--------------------------------------------------------- */
.nactec-account a {
color: inherit !important;
text-decoration: none !important;
transition: color 0.2s ease;
}
.nactec-account a:hover {
color: #0044ff !important;
}
/* =========================================================
NACTEC — HEADER NAVIGATION
========================================================= */
/*
* La navegación ya no vive en una Row independiente.
* Esta columna 24/24 pertenece a .nactec-header-main y
* ocupa toda la segunda línea del flex-wrap.
*/
.nactec-header-nav-col {
flex: 0 0 100% !important;
width: 100% !important;
max-width: 100% !important;
margin: 16px 0 0 !important;
padding: 0 !important;
float: none !important;
border-top: 1px solid #e2e2e8;
box-sizing: border-box;
}
/* Neutralizar márgenes que Divi pueda aplicar al módulo
* dentro de la nueva columna de navegación.
*/
.nactec-header-nav-col > .et_pb_module {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* =========================================================
MENU MODULE
========================================================= */
.nactec-header-menu {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
}
/* Fondo interno que puede agregar Divi */
.nactec-header-menu .et_pb_menu_inner_container {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
}
/* Ocultamos cualquier logo del Menu Module */
.nactec-header-menu .et_pb_menu__logo-wrap,
.nactec-header-menu .et_pb_menu__logo {
display: none !important;
}
/* =========================================================
CONTENEDOR DEL MENÚ
========================================================= */
.nactec-header-menu .et_pb_menu__wrap {
justify-content: flex-start !important;
margin: 0 !important;
padding: 0 !important;
}
.nactec-header-menu .et_pb_menu__menu {
display: flex !important;
justify-content: flex-start !important;
}
/* Lista principal */
.nactec-header-menu nav > ul {
display: flex !important;
align-items: center !important;
gap: 32px !important;
margin: 0 !important;
padding: 0 !important;
}
/* Items */
.nactec-header-menu nav > ul > li {
margin: 0 !important;
padding: 0 !important;
}
/* =========================================================
LINKS
========================================================= */
.nactec-header-menu nav > ul > li > a {
display: flex !important;
align-items: center !important;
min-height: 48px;
margin: 0 !important;
padding: 0 !important;
font-family: "Manrope", sans-serif;
font-size: 14px;
line-height: 1.2;
font-weight: 600;
color: #1a1a1a !important;
text-decoration: none !important;
transition: color 0.2s ease;
}
/* Hover */
.nactec-header-menu nav > ul > li > a:hover {
color: #0044ff !important;
}
/* Página actual */
.nactec-header-menu nav > ul > li.current-menu-item > a,
.nactec-header-menu nav > ul > li.current-menu-ancestor > a {
color: #0044ff !important;
}
/* =========================================================
HEADER NAV — DROPDOWN ARROWS
========================================================= */
/* Links que poseen submenú */
.nactec-header-menu
nav > ul > li.menu-item-has-children > a {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
gap: 7px;
padding-right: 0 !important;
}
/* Flecha generada por Divi */
.nactec-header-menu
nav > ul > li.menu-item-has-children > a::after {
position: static !important;
display: inline-block !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
font-size: 14px !important;
line-height: 1 !important;
color: currentColor !important;
vertical-align: middle;
}
/* =========================================================
NACTEC — HEADER DROPDOWNS
========================================================= */
.nactec-header-menu
nav > ul > li.menu-item-has-children {
position: relative !important;
}
/* Dropdown card */
.nactec-header-menu
nav > ul > li > ul.sub-menu {
top: 100% !important;
left: 0 !important;
width: 240px !important;
margin: 0 !important;
padding: 8px !important;
transform: none !important;
background: #ffffff !important;
border: 1px solid #e2e2e8 !important;
border-radius: 12px !important;
box-shadow:
0 10px 30px rgba(26, 26, 26, 0.10) !important;
box-sizing: border-box;
overflow: hidden;
z-index: 9999 !important;
}
/* Items */
.nactec-header-menu
ul.sub-menu > li {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
}
/* Links */
.nactec-header-menu
ul.sub-menu > li > a {
display: flex !important;
align-items: center !important;
width: 100% !important;
min-height: 40px;
margin: 0 !important;
padding: 9px 12px !important;
background: transparent !important;
border-radius: 8px !important;
font-family: "Manrope", sans-serif;
font-size: 13px !important;
line-height: 1.3;
font-weight: 500 !important;
color: #1a1a1a !important;
text-decoration: none !important;
box-sizing: border-box;
transition:
background-color 0.15s ease,
color 0.15s ease;
}
/* Hover */
.nactec-header-menu
ul.sub-menu > li > a:hover {
background: #f5f5f7 !important;
color: #0044ff !important;
}
/* Current page */
.nactec-header-menu
ul.sub-menu > li.current-menu-item > a {
background: #f5f5f7 !important;
color: #0044ff !important;
font-weight: 600 !important;
}
/* =========================================================
HEADER — TABLET: KEEP DESKTOP NAV
========================================================= */
@media (min-width: 768px) and (max-width: 980px) {
/* Mantener visible el menú horizontal */
.nactec-header-menu .et_pb_menu__menu {
display: flex !important;
}
/* Ocultar menú/hamburger móvil de Divi */
.nactec-header-menu .et_mobile_nav_menu {
display: none !important;
}
/* Por seguridad, ocultar también el botón */
.nactec-header-menu .mobile_menu_bar {
display: none !important;
}
/* Mantener navegación alineada a la izquierda */
.nactec-header-menu .et_pb_menu__wrap {
justify-content: flex-start !important;
}
}
/* =========================================================
HEADER — MOBILE
========================================================= */
@media (max-width: 767px) {
/* =====================================================
TOPBAR
===================================================== */
.nactec-header-topbar {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 7px 5% !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
box-sizing: border-box;
}
.nactec-topbar-desktop-extra {
display: none !important;
}
.nactec-header-topbar > .et_pb_column {
width: auto !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
flex: 0 0 auto !important;
}
.nactec-header-topbar-left,
.nactec-header-topbar-right {
width: auto !important;
margin: 0 !important;
padding: 0 !important;
font-size: 11px !important;
line-height: 1.3 !important;
white-space: nowrap;
}
.nactec-header-topbar-left p,
.nactec-header-topbar-right p {
margin: 0 !important;
padding: 0 !important;
}
.nactec-header-topbar-left {
text-align: left !important;
}
.nactec-header-topbar-right {
text-align: right !important;
}
/* =====================================================
MAIN HEADER GRID
===================================================== */
.nactec-header-main {
position: relative;
width: 90% !important;
max-width: none !important;
margin: 0 auto !important;
padding: 12px 0 14px !important;
display: grid !important;
grid-template-columns:
auto
minmax(0, 1fr)
auto
auto !important;
grid-template-areas:
"logo spacer actions nav"
"search search search search" !important;
align-items: center !important;
column-gap: 10px !important;
row-gap: 14px !important;
overflow: visible !important;
}
.nactec-header-main > .et_pb_column {
width: auto !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
flex: none !important;
float: none !important;
}
/* =====================================================
LOGO
===================================================== */
.nactec-header-logo-col {
grid-area: logo;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
min-width: 0;
}
.nactec-header-logo {
width: 78px !important;
max-width: 78px !important;
margin: 0 !important;
padding: 0 !important;
}
/* =====================================================
SEARCH
===================================================== */
.nactec-header-search-col {
grid-area: search;
width: 100% !important;
max-width: none !important;
min-width: 0;
}
.nactec-header-search {
width: 100% !important;
}
.nactec-header-search form > div {
height: 46px !important;
}
.nactec-header-search input.et_pb_searchsubmit {
width: 38px !important;
min-width: 38px !important;
height: 38px !important;
flex: 0 0 38px !important;
}
/* =====================================================
ACCOUNT — MOBILE
===================================================== */
.nactec-header-actions-col {
grid-area: actions;
justify-self: end !important;
width: max-content !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
white-space: nowrap;
}
/*
* Se conserva el mismo contenido que en desktop.
* En mobile solo compactamos levemente los espacios.
*/
.nactec-account {
column-gap: 5px;
row-gap: 3px;
}
/* =====================================================
NAV / HAMBURGER
===================================================== */
.nactec-header-nav-col {
grid-area: nav;
width: auto !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
border-top: 0 !important;
overflow: visible !important;
}
.nactec-header-menu .et_pb_menu__menu {
display: none !important;
}
.nactec-header-menu .et_mobile_nav_menu {
display: flex !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
}
.nactec-header-menu .mobile_menu_bar {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 40px !important;
height: 40px !important;
margin: 0 !important;
padding: 0 !important;
background: #f1f2f5 !important;
border: 0 !important;
border-radius: 8px !important;
box-shadow: none !important;
cursor: pointer;
box-sizing: border-box;
transition:
background-color 0.15s ease,
color 0.15s ease;
}
.nactec-header-menu .mobile_menu_bar::before {
position: static !important;
margin: 0 !important;
padding: 0 !important;
color: #1a1a1a !important;
font-size: 28px !important;
line-height: 1 !important;
}
.nactec-header-menu .mobile_menu_bar:hover {
background: #f7f7f9 !important;
}
.nactec-header-menu .mobile_menu_bar:hover::before {
color: #0044ff !important;
}
.nactec-header-menu .mobile_nav.opened .mobile_menu_bar {
background: #0044ff !important;
}
.nactec-header-menu .mobile_nav.opened .mobile_menu_bar::before {
color: #ffffff !important;
}
/* =====================================================
MOBILE MENU — POSICIONAMIENTO
===================================================== */
.nactec-header-nav-col,
.nactec-header-menu,
.nactec-header-menu .et_pb_menu_inner_container,
.nactec-header-menu .et_pb_menu__wrap,
.nactec-header-menu .et_mobile_nav_menu {
position: static !important;
}
/* =====================================================
MOBILE MENU — PANEL
===================================================== */
.nactec-header-menu .et_mobile_menu {
position: absolute !important;
top: calc(100% + 8px) !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 8px !important;
background: #ffffff !important;
border: 1px solid #e2e2e8 !important;
border-radius: 12px !important;
box-shadow:
0 14px 34px rgba(26, 26, 26, 0.14) !important;
box-sizing: border-box;
overflow: hidden;
z-index: 99999 !important;
}
.nactec-header-menu .et_mobile_menu,
.nactec-header-menu .et_mobile_menu ul {
list-style: none !important;
}
.nactec-header-menu .et_mobile_menu li {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
}
/* =====================================================
MOBILE MENU — LINKS PRINCIPALES
===================================================== */
.nactec-header-menu .et_mobile_menu > li > a {
display: flex !important;
align-items: center !important;
width: 100% !important;
min-height: 46px;
margin: 0 !important;
padding: 11px 14px !important;
background: transparent !important;
border: 0 !important;
border-radius: 8px !important;
font-family: "Manrope", sans-serif !important;
font-size: 15px !important;
line-height: 1.25 !important;
font-weight: 600 !important;
color: #1a1a1a !important;
text-decoration: none !important;
opacity: 1 !important;
box-sizing: border-box;
transition:
background-color 0.15s ease,
color 0.15s ease;
}
.nactec-header-menu .et_mobile_menu > li > a:hover {
background: #f5f5f7 !important;
color: #0044ff !important;
}
.nactec-header-menu
.et_mobile_menu > li.current-menu-item > a,
.nactec-header-menu
.et_mobile_menu > li.current-menu-ancestor > a {
color: #0044ff !important;
}
/* =====================================================
MOBILE MENU — SUBMENÚS
===================================================== */
.nactec-header-menu .et_mobile_menu .sub-menu {
width: 100% !important;
margin: 0 !important;
padding: 2px 0 6px 12px !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
.nactec-header-menu .et_mobile_menu .sub-menu li {
width: 100% !important;
}
.nactec-header-menu .et_mobile_menu .sub-menu li a {
display: flex !important;
align-items: center !important;
width: 100% !important;
min-height: 40px;
margin: 0 !important;
padding: 9px 12px !important;
background: transparent !important;
border: 0 !important;
border-radius: 8px !important;
font-family: "Manrope", sans-serif !important;
font-size: 13px !important;
line-height: 1.3 !important;
font-weight: 500 !important;
color: #4a4a4f !important;
text-decoration: none !important;
opacity: 1 !important;
box-sizing: border-box;
}
.nactec-header-menu .et_mobile_menu .sub-menu li a:hover {
background: #f5f5f7 !important;
color: #0044ff !important;
}
}
/* =========================================================
NACTEC — FOOTER
========================================================= */
.nactec-footer {
width: 100%;
margin: 0 !important;
padding: 64px 0 24px !important;
background:
linear-gradient(
105deg,
#002a9e 0%,
#0033cc 38%,
#7f3609 72%,
#a94204 100%
) !important;
overflow: hidden;
}
/* =========================================================
FOOTER — MAIN ROW
========================================================= */
.nactec-footer-main {
width: 90% !important;
max-width: 1200px !important;
margin: 0 auto !important;
padding: 0 !important;
display: grid !important;
grid-template-columns:
minmax(0, 1.2fr)
minmax(0, 0.85fr)
minmax(0, 1.25fr)
minmax(0, 1fr) !important;
column-gap: 48px !important;
row-gap: 40px !important;
align-items: start !important;
}
.nactec-footer-main > .et_pb_column {
width: auto !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
min-width: 0;
}
/* =========================================================
FOOTER — RESET DIVI
========================================================= */
:where(.nactec-footer .et_pb_module) {
margin-top: 0 !important;
}
:where(.nactec-footer p) {
margin-top: 0 !important;
}
/* =========================================================
FOOTER — LOGO
========================================================= */
.nactec-footer-logo {
width: 100px !important;
max-width: 100px !important;
margin: 0 0 24px 0 !important;
padding: 0 !important;
}
.nactec-footer-logo .et_pb_image_wrap {
display: block;
width: 100% !important;
margin: 0 !important;
}
.nactec-footer-logo img {
display: block;
width: 100% !important;
height: auto !important;
object-fit: contain;
}
/* =========================================================
FOOTER — DESCRIPTION
========================================================= */
.nactec-footer-description {
max-width: 280px;
margin: 0 !important;
padding: 0 !important;
font-family: "Manrope", sans-serif !important;
font-size: 14px !important;
line-height: 1.65 !important;
font-weight: 400 !important;
}
.nactec-footer-description,
.nactec-footer-description .et_pb_text_inner,
.nactec-footer-description p,
.nactec-footer-description span {
color: rgba(255, 255, 255, 0.84) !important;
}
/* =========================================================
FOOTER — TITLES
========================================================= */
.nactec-footer-title {
margin: 0 0 18px 0 !important;
padding: 0 !important;
}
.nactec-footer-title h1,
.nactec-footer-title h2,
.nactec-footer-title h3,
.nactec-footer-title h4,
.nactec-footer-title h5,
.nactec-footer-title h6,
.nactec-footer-title h1 *,
.nactec-footer-title h2 *,
.nactec-footer-title h3 *,
.nactec-footer-title h4 *,
.nactec-footer-title h5 *,
.nactec-footer-title h6 * {
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
font-family: "Manrope", sans-serif !important;
font-size: 16px !important;
line-height: 1.3 !important;
font-weight: 700 !important;
}
/* =========================================================
FOOTER — LINK LISTS
========================================================= */
.nactec-footer-links {
margin: 0 !important;
padding: 0 !important;
}
.nactec-footer-links ul {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.nactec-footer-links li {
margin: 0 0 10px 0 !important;
padding: 0 !important;
list-style: none !important;
font-family: "Manrope", sans-serif !important;
font-size: 14px !important;
line-height: 1.45 !important;
font-weight: 400 !important;
}
.nactec-footer-links li:last-child {
margin-bottom: 0 !important;
}
.nactec-footer-links a {
color: rgba(255, 255, 255, 0.84) !important;
text-decoration: none !important;
transition: color 0.15s ease;
}
.nactec-footer-links a:hover {
color: #ffffff !important;
}
/* =========================================================
FOOTER — CONTACT
========================================================= */
.nactec-footer-contact {
margin: 0 !important;
padding: 0 !important;
}
.nactec-footer-contact-list {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.nactec-footer-contact-list li {
margin: 0 0 12px 0 !important;
padding: 0 !important;
list-style: none !important;
font-family: "Manrope", sans-serif !important;
font-size: 14px !important;
line-height: 1.5 !important;
font-weight: 400 !important;
color: rgba(255, 255, 255, 0.84) !important;
}
.nactec-footer-contact-list li:last-child {
margin-bottom: 0 !important;
}
.nactec-footer-contact-list a {
color: rgba(255, 255, 255, 0.84) !important;
text-decoration: none !important;
transition: color 0.15s ease;
}
.nactec-footer-contact-list a:hover {
color: #ffffff !important;
}
/* =========================================================
FOOTER — BOTTOM
========================================================= */
.nactec-footer-bottom {
width: 90% !important;
max-width: 1200px !important;
margin: 32px auto 0 !important;
padding: 20px 0 0 !important;
border-top: 1px solid rgba(255, 255, 255, 0.24);
box-sizing: border-box;
}
.nactec-footer-bottom > .et_pb_column {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* =========================================================
FOOTER — COPYRIGHT
========================================================= */
.nactec-footer-copyright {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
font-family: "Manrope", sans-serif !important;
font-size: 12px !important;
line-height: 1.5 !important;
font-weight: 400 !important;
text-align: center !important;
}
/* =========================================================
FOOTER — TABLET
========================================================= */
@media (max-width: 980px) {
.nactec-footer {
padding: 56px 0 24px !important;
}
.nactec-footer-main {
grid-template-columns:
repeat(2, minmax(0, 1fr)) !important;
column-gap: 48px !important;
row-gap: 40px !important;
}
.nactec-footer-description {
max-width: 320px;
}
.nactec-footer-bottom {
margin-top: 36px !important;
}
}
/* =========================================================
FOOTER — MOBILE
========================================================= */
@media (max-width: 767px) {
.nactec-footer {
padding: 48px 0 20px !important;
}
.nactec-footer-main {
grid-template-columns: 1fr !important;
column-gap: 0 !important;
row-gap: 32px !important;
}
.nactec-footer-logo {
width: 92px !important;
max-width: 92px !important;
margin-bottom: 18px !important;
}
.nactec-footer-description {
max-width: 100%;
font-size: 13px !important;
}
.nactec-footer-title {
margin-bottom: 14px !important;
}
.nactec-footer-title h1,
.nactec-footer-title h2,
.nactec-footer-title h3,
.nactec-footer-title h4,
.nactec-footer-title h5,
.nactec-footer-title h6,
.nactec-footer-title h1 *,
.nactec-footer-title h2 *,
.nactec-footer-title h3 *,
.nactec-footer-title h4 *,
.nactec-footer-title h5 *,
.nactec-footer-title h6 * {
font-size: 15px !important;
}
.nactec-footer-links li,
.nactec-footer-contact-list li {
font-size: 13px !important;
}
.nactec-footer-bottom {
margin-top: 32px !important;
padding-top: 18px !important;
}
.nactec-footer-copyright {
font-size: 11px !important;
}
}
/* =========================================================
SECTION TITLES
========================================================= */
.nactec-section-title {
position: relative;
padding-left: 14px;
}
.nactec-section-title::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 5px;
height: 22px;
border-radius: 999px;
background: #C75105;
}
.nactec-section-title h1,
.nactec-section-title h2,
.nactec-section-title h3,
.nactec-section-title h4,
.nactec-section-title h5,
.nactec-section-title h6 {
margin: 0 !important;
padding: 0 !important;
}
/* =========================================================
HEADER ACCOUNT — SMALL MOBILE
========================================================= */
@media (max-width: 380px) {
.nactec-account {
column-gap: 4px;
row-gap: 2px;
}
/* -----------------------------------------------------
Tipografía compacta
----------------------------------------------------- */
.nactec-account-login,
.nactec-account-register,
.nactec-account-greeting,
.nactec-account-favorites,
.nactec-account-separator,
.nactec-account-cart,
.nactec-account-login *,
.nactec-account-register *,
.nactec-account-greeting *,
.nactec-account-favorites *,
.nactec-account-separator *,
.nactec-account-cart * {
font-size: 12px !important;
}
/* -----------------------------------------------------
Header general
----------------------------------------------------- */
.nactec-header-main {
column-gap: 8px !important;
}
.nactec-header-logo {
width: 70px !important;
max-width: 70px !important;
}
/* -----------------------------------------------------
Ocultar icono
----------------------------------------------------- */
.nactec-account-icon {
display: none !important;
}
/* -----------------------------------------------------
Guest
Ingresar | Crear cuenta
Carrito (n)
----------------------------------------------------- */
.nactec-account--guest {
grid-template-columns:
max-content
max-content
max-content;
grid-template-areas:
"login separator register"
"cart cart cart";
}
/* -----------------------------------------------------
Logged
¡Hola, Nombre!
Favoritos (n) | Carrito (n)
----------------------------------------------------- */
.nactec-account--logged {
grid-template-columns:
max-content
max-content
max-content;
grid-template-areas:
"greeting greeting greeting"
"favorites separator cart";
}
}
/* ---------------------------------------------------------
Logged state
[icono] ¡Hola, Nombre!
Favoritos (n) | Carrito (n)
--------------------------------------------------------- */
.nactec-account--logged {
grid-template-columns:
28px
max-content
max-content
max-content;
grid-template-areas:
"icon greeting greeting greeting"
"icon favorites separator cart";
}
/* ---------------------------------------------------------
Logged — Saludo
--------------------------------------------------------- */
.nactec-account-greeting {
grid-area: greeting;
}
/* ---------------------------------------------------------
Logged — Favoritos
--------------------------------------------------------- */
.nactec-account-favorites {
grid-area: favorites;
}
/* =========================================================
SHOP — SIDEBAR + RESULTADOS
========================================================= */
.nactec-shop-main-row {
display: flex !important;
align-items: flex-start !important;
gap: 24px !important;
}
/* Sidebar compacto */
.nactec-shop-sidebar {
position: relative;
flex: 0 0 220px !important;
width: 220px !important;
max-width: 220px !important;
padding: 18px !important;
background: #ffffff;
border: 1px solid #e2e2e8;
border-radius: 12px;
box-sizing: border-box;
}
/* La grilla utiliza todo el espacio restante */
.nactec-shop-results {
flex: 1 1 auto !important;
width: auto !important;
min-width: 0;
}
/* =========================================================
SHOP — POST FILTER
========================================================= */
.nactec-shop-filters {
position: static !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
}
/* =========================================================
SHOP — TÍTULO "FILTROS"
========================================================= */
.nactec-shop-filter-title {
position: relative;
/*
* Conservamos la separación visual que ya estaba
* funcionando antes de estilizar los radio buttons.
*/
margin: 0 0 8px !important;
padding: 0 42px 0 14px !important;
border: 0 !important;
}
/* Acento naranja */
.nactec-shop-filter-title::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 5px;
height: 22px;
border-radius: 999px;
background: #c75105;
}
/* Separador inferior */
.nactec-shop-filter-title::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -10px;
height: 1px;
background: #e2e2e8;
}
/* =========================================================
SHOP — LABELS / SUBTÍTULOS
========================================================= */
.nactec-shop-filters .et_pb_post_filter__item-label {
margin-bottom: 6px !important;
color: #1a1a1a !important;
font-weight: 700 !important;
}
/* =========================================================
SHOP — MARCAS
========================================================= */
.nactec-filter-brands
.et_pb_post_filter__item-option {
margin: 0 0 4px !important;
}
/* Texto + alineación */
.nactec-filter-brands
.et_pb_post_filter__item-option label {
display: flex !important;
align-items: center !important;
gap: 7px !important;
color: #4a4a4f !important;
font-size: 14px !important;
line-height: 1.35 !important;
font-weight: 400 !important;
cursor: pointer;
}
/* Checkbox visual que genera Divi */
.nactec-filter-brands
.et_pb_post_filter__item-option label i {
position: relative !important;
display: inline-block !important;
flex: 0 0 15px !important;
width: 15px !important;
height: 15px !important;
margin: 0 !important;
box-sizing: border-box !important;
background: #ffffff !important;
border: 1px solid #c9c9cf !important;
border-radius: 4px !important;
transition:
background-color 0.15s ease,
border-color 0.15s ease !important;
}
/* Hover */
.nactec-filter-brands
.et_pb_post_filter__item-option label:hover {
color: #0044ff !important;
}
.nactec-filter-brands
.et_pb_post_filter__item-option label:hover i {
border-color: #0044ff !important;
}
/* Checkbox seleccionado */
.nactec-filter-brands
input.et_pb_post_filter__item-control-checkbox:checked
+ label i {
background: #0044ff !important;
border-color: #0044ff !important;
}
/* Tildecito */
.nactec-filter-brands
input.et_pb_post_filter__item-control-checkbox:checked
+ label i::after {
content: "";
position: absolute;
left: 4px;
top: 1px;
width: 4px;
height: 8px;
border-right: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
transform: rotate(45deg);
}
/* Foco de teclado */
.nactec-filter-brands
input.et_pb_post_filter__item-control-checkbox:focus-visible
+ label i {
outline: 2px solid #0044ff;
outline-offset: 2px;
}
/* =========================================================
SHOP — RESET COMO ICONO
========================================================= */
.nactec-filter-reset,
.nactec-shop-filters [data-type="reset"] {
position: absolute !important;
top: 11px;
right: 12px;
width: 32px !important;
max-width: 32px !important;
margin: 0 !important;
padding: 0 !important;
z-index: 5;
}
.nactec-filter-reset button,
.nactec-filter-reset input[type="reset"],
.nactec-filter-reset input[type="button"],
.nactec-filter-reset a,
.nactec-shop-filters [data-type="reset"] button,
.nactec-shop-filters [data-type="reset"] input[type="reset"],
.nactec-shop-filters [data-type="reset"] input[type="button"],
.nactec-shop-filters [data-type="reset"] a {
width: 26px !important;
min-width: 26px !important;
max-width: 26px !important;
height: 26px !important;
min-height: 26px !important;
max-height: 26px !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
overflow: hidden;
background-color: #ffffff !important;
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230044ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 14px 14px !important;
border: 1px solid #e2e2e8 !important;
border-radius: 50% !important;
color: transparent !important;
font-size: 0 !important;
line-height: 0 !important;
text-indent: -9999px !important;
cursor: pointer;
}
.nactec-filter-reset button:hover,
.nactec-filter-reset input[type="reset"]:hover,
.nactec-filter-reset input[type="button"]:hover,
.nactec-filter-reset a:hover,
.nactec-shop-filters [data-type="reset"] button:hover,
.nactec-shop-filters [data-type="reset"] input[type="reset"]:hover,
.nactec-shop-filters [data-type="reset"] input[type="button"]:hover,
.nactec-shop-filters [data-type="reset"] a:hover {
background-color: #f7f7f9 !important;
border-color: #0044ff !important;
}
/* =========================================================
SHOP — CATEGORÍAS COMO SELECTOR
========================================================= */
/*
* El radio nativo permanece en el DOM para conservar
* accesibilidad y el comportamiento de Divi, pero no se
* dibuja visualmente.
*/
.nactec-filter-categories
input[type="radio"][name*="[product_cat]"] {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: 0 !important;
padding: 0 !important;
opacity: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
/* Divi agrega un indicador visual propio dentro del label */
.nactec-filter-categories
.et_pb_post_filter__item-option label i {
display: none !important;
}
/*
* Algunos builds de Divi aplican gap al contenedor de
* opciones. Lo neutralizamos solo dentro de Categorías.
*/
.nactec-filter-categories
.et_pb_post_filter__item-control-surface,
.nactec-filter-categories
.et_pb_post_filter__item-options {
gap: 0 !important;
row-gap: 0 !important;
}
/* Cada categoría ocupa una línea compacta */
.nactec-filter-categories
.et_pb_post_filter__item-option {
margin: 0 0 1px !important;
padding: 0 !important;
}
/*
* No definimos padding-inline-start porque esa propiedad
* la genera NACTEC Core según la profundidad jerárquica.
*/
.nactec-filter-categories
.et_pb_post_filter__item-option label {
display: block !important;
width: 100%;
box-sizing: border-box;
padding-block: 2px !important;
padding-inline-start: 4px !important;
padding-inline-end: 8px !important;
border: 1px solid transparent;
border-radius: 7px;
color: #4a4a4f;
font-size: 14px !important;
line-height: 1.30 !important;
font-weight: 400;
cursor: pointer;
transition:
background-color 0.15s ease,
border-color 0.15s ease,
color 0.15s ease;
}
/* Hover */
.nactec-filter-categories
.et_pb_post_filter__item-option label:hover {
background-color: #f5f7ff;
color: #0044ff;
}
/* Categoría seleccionada */
.nactec-filter-categories
input[type="radio"][name*="[product_cat]"]:checked + label {
background-color: rgba(0, 68, 255, 0.08);
border-color: rgba(0, 68, 255, 0.18);
color: #0033cc;
font-weight: 600;
}
/* Hover sobre la opción seleccionada */
.nactec-filter-categories
input[type="radio"][name*="[product_cat]"]:checked + label:hover {
background-color: rgba(0, 68, 255, 0.12);
}
/* Accesibilidad con teclado */
.nactec-filter-categories
input[type="radio"][name*="[product_cat]"]:focus-visible + label {
outline: 2px solid #0044ff;
outline-offset: 2px;
}
/* =========================================================
SHOP — RANGO DE PRECIOS
========================================================= */
.nactec-filter-price
.et_pb_post_filter__item-range-values {
display: grid !important;
grid-template-columns:
minmax(0, 1fr)
minmax(0, 1fr);
gap: 8px;
width: 100%;
margin-top: 8px;
}
.nactec-filter-price
.et_pb_post_filter__item-range-value {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
box-sizing: border-box !important;
margin: 0 !important;
padding: 7px 4px !important;
background: #f7f7f9 !important;
color: #4a4a4f !important;
border: 1px solid #e2e2e8 !important;
border-radius: 6px !important;
font-size: 10px !important;
line-height: 1.2 !important;
text-align: center;
}
/* =========================================================
SHOP — ORDENAMIENTO
========================================================= */
.nactec-filter-orderby {
margin-top: 0 !important;
margin-bottom: 14px !important;
}
.nactec-filter-direction {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.nactec-filter-orderby select,
.nactec-filter-direction select {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
height: 36px !important;
min-height: 36px !important;
box-sizing: border-box !important;
margin: 0 !important;
padding: 6px 28px 6px 9px !important;
background-color: #f7f7f9 !important;
color: #4a4a4f !important;
border: 1px solid #e2e2e8 !important;
border-radius: 6px !important;
font-size: 11px !important;
line-height: 1.2 !important;
cursor: pointer;
}
/* =========================================================
SHOP — PAGINACIÓN
========================================================= */
.nactec-shop-pagination-row {
border-top: 0 !important;
}
/* Contenedor */
.nactec-shop-pagination-row .wp-pagenavi {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 6px;
margin-top: 28px;
border-top: 0 !important;
}
/* Ocultamos "Página X de Y" */
.nactec-shop-pagination-row
.wp-pagenavi .pages {
display: none !important;
}
/* Botones generales */
.nactec-shop-pagination-row
.wp-pagenavi a,
.nactec-shop-pagination-row
.wp-pagenavi .current {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 36px;
height: 36px;
box-sizing: border-box;
margin: 0 !important;
padding: 0 10px !important;
background: #ffffff;
border: 1px solid #e2e2e8 !important;
border-radius: 8px;
color: #4a4a4f !important;
font-size: 14px !important;
line-height: 1 !important;
font-weight: 500 !important;
text-decoration: none !important;
opacity: 1 !important;
visibility: visible !important;
text-indent: 0 !important;
transition:
background-color 0.15s ease,
border-color 0.15s ease,
color 0.15s ease;
}
/* Hover */
.nactec-shop-pagination-row
.wp-pagenavi a:hover {
background: #f5f7ff;
border-color: #0033cc !important;
color: #0033cc !important;
}
/* Página actual */
.nactec-shop-pagination-row
.wp-pagenavi .current {
background: #0033cc !important;
border-color: #0033cc !important;
color: #ffffff !important;
font-size: 14px !important;
line-height: 1 !important;
font-weight: 600 !important;
opacity: 1 !important;
visibility: visible !important;
text-indent: 0 !important;
}
/* Puntos suspensivos */
.nactec-shop-pagination-row
.wp-pagenavi .extend {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
height: 36px;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
color: #77777d;
font-size: 14px;
line-height: 1;
}
/* Anterior / siguiente */
.nactec-shop-pagination-row
.wp-pagenavi .previouspostslink,
.nactec-shop-pagination-row
.wp-pagenavi .nextpostslink {
min-width: 36px;
padding-left: 10px !important;
padding-right: 10px !important;
}
/* Forzar texto blanco en página activa */
.nactec-shop-pagination-row
.wp-pagenavi .current,
.nactec-shop-pagination-row
.wp-pagenavi .current *,
.nactec-shop-pagination-row
.wp-pagenavi .current a {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
opacity: 1 !important;
}
/* =========================================================
SHOP — RESPONSIVE
Modo compacto completo: <= 1200px
========================================================= */
@media (max-width: 1200px) {
/* Layout general */
.nactec-shop-main-row {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 20px !important;
}
/*
* Divi aplica un gap vertical de 30px a las columnas flex.
* Lo neutralizamos aquí y controlamos nosotros todos los
* espacios del panel.
*/
.nactec-shop-sidebar {
flex: none !important;
width: 100% !important;
max-width: 100% !important;
min-height: 0 !important;
margin: 0 !important;
/*
* Cabecera colapsada:
* 14px + 32px + 14px = ~60px de alto.
*/
padding: 14px 16px !important;
gap: 0 !important;
row-gap: 0 !important;
column-gap: 0 !important;
box-sizing: border-box;
}
.nactec-shop-results,
.nactec-shop-products-row,
.nactec-shop-pagination-row {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
.nactec-shop-results {
flex: none !important;
}
.nactec-shop-products-row,
.nactec-shop-pagination-row {
margin-left: 0 !important;
margin-right: 0 !important;
}
.nactec-shop-pagination-row .wp-pagenavi {
margin-top: 22px;
}
/* Cabecera plegable */
.nactec-shop-filter-title {
position: relative;
flex: 0 0 auto !important;
height: 32px !important;
min-height: 32px !important;
margin: 0 !important;
padding: 0 44px 0 14px !important;
display: flex !important;
align-items: center !important;
box-sizing: border-box !important;
cursor: pointer;
user-select: none;
}
.nactec-shop-filter-title
.et_pb_heading_container {
height: 32px !important;
min-height: 32px !important;
display: flex !important;
align-items: center !important;
}
.nactec-shop-filter-title
.et_pb_module_header,
.nactec-shop-filter-title h2 {
margin: 0 !important;
padding: 0 !important;
font-size: clamp(
18px,
calc(16px + 0.35vw),
21px
) !important;
line-height: 1.2 !important;
font-weight: 700 !important;
}
/*
* En responsive ::after deja de ser el separador
* horizontal y pasa a ser el chevron.
*/
.nactec-shop-filter-title::after {
content: "";
position: absolute;
top: 50%;
right: 4px;
bottom: auto;
left: auto;
width: 18px;
height: 18px;
transform:
translateY(-50%)
rotate(0deg);
background-color: transparent;
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 18px 18px;
transition: transform 0.2s ease;
}
/* Post Filter colapsado */
.nactec-shop-filters {
display: block !important;
flex: 0 0 auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
}
.nactec-shop-filters
.et_pb_post_filter__form {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.nactec-shop-sidebar:not(.is-open)
.nactec-shop-filters {
height: 0 !important;
max-height: 0 !important;
flex-basis: 0 !important;
overflow: visible !important;
}
/*
* Cerrado: ocultamos todos los filtros excepto Reset.
*/
.nactec-shop-sidebar:not(.is-open)
.nactec-shop-filters
.et_pb_post_filter__controls
> .et_pb_post_filter_item:not(.nactec-filter-reset) {
display: none !important;
}
/* Reset siempre visible */
.nactec-shop-sidebar
.nactec-filter-reset,
.nactec-shop-sidebar
.nactec-shop-filters [data-type="reset"] {
position: absolute !important;
top: 14px !important;
left: 96px !important;
right: auto !important;
bottom: auto !important;
width: 26px !important;
max-width: 26px !important;
height: 26px !important;
min-height: 26px !important;
max-height: 26px !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
float: none !important;
z-index: 8 !important;
}
/* Estado abierto */
.nactec-shop-sidebar.is-open
.nactec-shop-filters {
height: auto !important;
max-height: none !important;
margin-top: 18px !important;
overflow: visible !important;
}
.nactec-shop-sidebar.is-open
.nactec-shop-filter-title::after {
transform:
translateY(-50%)
rotate(180deg);
}
/*
* Neutralizamos geometría residual de Divi.
*/
.nactec-shop-filters
.et_pb_post_filter__controls
> .et_pb_post_filter_item {
min-width: 0 !important;
float: none !important;
}
}
/* =========================================================
SHOP — FILTROS ABIERTOS
581px — 1200px
========================================================= */
@media (min-width: 581px) and (max-width: 1200px) {
.nactec-shop-sidebar.is-open
.nactec-shop-filters
.et_pb_post_filter__controls {
display: grid !important;
grid-template-columns:
minmax(0, 1fr)
minmax(0, 1fr) !important;
column-gap: 32px !important;
row-gap: 18px !important;
align-items: start !important;
width: 100% !important;
max-width: 100% !important;
}
.nactec-shop-sidebar.is-open
.nactec-shop-filters
.et_pb_post_filter__controls
> .et_pb_post_filter_item:not(.nactec-filter-reset) {
width: auto !important;
max-width: none !important;
margin: 0 !important;
flex: none !important;
float: none !important;
}
.nactec-filter-categories {
grid-column: 1 !important;
grid-row: 1 !important;
}
.nactec-filter-brands {
grid-column: 2 !important;
grid-row: 1 !important;
}
.nactec-filter-price {
grid-column: 1 / -1 !important;
grid-row: 2 !important;
}
.nactec-filter-orderby {
grid-column: 1 !important;
grid-row: 3 !important;
margin-bottom: 0 !important;
}
.nactec-filter-direction {
grid-column: 2 !important;
grid-row: 3 !important;
}
}
/* =========================================================
SHOP — FILTROS ABIERTOS
Mobile: <= 580px
========================================================= */
@media (max-width: 580px) {
.nactec-shop-sidebar.is-open
.nactec-shop-filters
.et_pb_post_filter__controls {
display: block !important;
}
.nactec-shop-sidebar.is-open
.nactec-shop-filters
.et_pb_post_filter__controls
> .et_pb_post_filter_item:not(.nactec-filter-reset) {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
}
/* =========================================================
CATEGORY ARCHIVE — HEADER
========================================================= */
.nactec-category-header {
padding: 28px 0 !important;
}
.nactec-category-breadcrumb-row {
padding: 0 0 10px !important;
}
.nactec-category-breadcrumb {
margin: 0 !important;
font-size: 14px;
line-height: 1.6;
}
.nactec-category-title-row {
position: relative !important;
display: flex !important;
align-items: center !important;
padding: 0 0 20px !important;
}
.nactec-category-title.nactec-section-title {
position: relative !important;
margin: 0 !important;
padding-left: 14px !important;
}
.nactec-category-title-row
.nactec-category-title.nactec-section-title::before {
content: "" !important;
position: absolute !important;
top: 8px !important;
left: 0 !important;
width: 5px !important;
height: 38px !important;
transform: none !important;
display: block !important;
background: #c75105 !important;
border-radius: 999px !important;
}
.nactec-category-title-row
.nactec-category-shop-col {
position: absolute !important;
top: 50% !important;
right: 0 !important;
width: auto !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
transform: translateY(-50%) !important;
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
}
.nactec-category-title-row
.nactec-category-shop-col
> .et_pb_button_module_wrapper {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
text-align: right !important;
}
.nactec-category-title-row
.nactec-category-shop-button {
flex: 0 0 auto !important;
width: auto !important;
max-width: none !important;
margin: 0 !important;
}
.nactec-category-description-row {
margin-top: 24px !important;
padding: 0 !important;
}
.nactec-category-description {
max-width: 1100px;
margin: 0 !important;
line-height: 1.7;
}
/* =========================================================
CATEGORY ARCHIVE — RESPONSIVE
========================================================= */
@media (max-width: 1200px) {
.nactec-category-header {
padding: 24px 0 !important;
}
.nactec-category-title-row {
flex-wrap: wrap !important;
gap: 16px !important;
}
.nactec-category-title-row > .et_pb_column {
width: 100% !important;
max-width: 100% !important;
margin-right: 0 !important;
}
/* En tablet y mobile el acceso a Tienda queda únicamente en el filtro. */
.nactec-category-title-row
.nactec-category-shop-col {
display: none !important;
}
}
@media (max-width: 767px) {
.nactec-category-header {
padding: 16px 0 24px !important;
}
.nactec-category-breadcrumb-row {
padding-bottom: 8px !important;
}
.nactec-category-breadcrumb {
font-size: 12px !important;
line-height: 1.55 !important;
overflow-wrap: anywhere;
}
.nactec-category-title-row {
display: block !important;
padding: 0 !important;
}
.nactec-category-title-row > .et_pb_column {
margin-left: 0 !important;
margin-right: 0 !important;
}
.nactec-category-title.nactec-section-title {
width: 100% !important;
padding-left: 12px !important;
}
.nactec-category-title-row
.nactec-category-title.nactec-section-title::before {
top: 6px !important;
width: 4px !important;
height: 28px !important;
}
.nactec-category-description-row {
margin-top: 16px !important;
}
.nactec-category-description {
width: 100% !important;
max-width: 100% !important;
line-height: 1.6 !important;
}
.nactec-shop-main-row {
gap: 16px !important;
}
.nactec-shop-sidebar {
border-radius: 10px;
}
}
/* =========================================================
SHOP — VER TODAS LAS CATEGORÍAS
========================================================= */
.nactec-filter-all-categories {
margin: 0 !important;
padding: 0 !important;
}
.nactec-filter-all-categories.nactec-filter-all-categories--mounted {
display: none !important;
}
.nactec-filter-all-categories p {
margin: 0 !important;
padding: 0 !important;
}
.nactec-filter-all-categories-option {
margin: 0 0 1px !important;
padding: 0 !important;
}
.nactec-filter-all-categories a,
.nactec-filter-all-categories-link {
display: block !important;
width: 100% !important;
box-sizing: border-box;
padding: 2px 8px 2px 4px !important;
background: transparent !important;
border: 1px solid transparent !important;
border-radius: 7px !important;
color: #4a4a4f !important;
font-size: 14px !important;
line-height: 1.3 !important;
font-weight: 400 !important;
text-decoration: none !important;
cursor: pointer;
transition:
background-color 0.15s ease,
border-color 0.15s ease,
color 0.15s ease;
}
.nactec-filter-all-categories a:hover,
.nactec-filter-all-categories-link:hover {
background-color: #f5f7ff !important;
color: #0044ff !important;
}
.nactec-filter-all-categories a:focus-visible,
.nactec-filter-all-categories-link:focus-visible {
outline: 2px solid #0044ff;
outline-offset: 2px;
}
/* =========================================================
NACTEC — 404
========================================================= */
.nactec-404 {
min-height: 440px;
padding: 64px 0 80px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Contenedor principal
--------------------------------------------------------- */
.nactec-404-row {
width: 90% !important;
max-width: 760px !important;
margin: 0 auto !important;
padding: 0 !important;
text-align: center !important;
}
.nactec-404-row > .et_pb_column {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
text-align: center !important;
}
/* =========================================================
404 — CÓDIGO
========================================================= */
.nactec-404-code {
width: 100% !important;
margin: 0 0 28px !important;
padding: 0 !important;
text-align: center !important;
}
.nactec-404-code .et_pb_heading_container {
width: 100% !important;
text-align: center !important;
}
.nactec-404-code .et_pb_module_header,
.nactec-404-code h1,
.nactec-404-code h2,
.nactec-404-code h3,
.nactec-404-code h4,
.nactec-404-code h5,
.nactec-404-code h6,
.nactec-404-code .et_pb_module_header * {
margin: 0 !important;
padding: 0 !important;
font-family: "Manrope", sans-serif !important;
font-size: clamp(96px, 12vw, 156px) !important;
line-height: 0.9 !important;
font-weight: 800 !important;
letter-spacing: -0.055em !important;
color: #0044ff !important;
-webkit-text-fill-color: #0044ff !important;
opacity: 0.12 !important;
text-align: center !important;
}
/* =========================================================
404 — TÍTULO
========================================================= */
.nactec-404-title {
position: relative !important;
width: fit-content !important;
max-width: 100% !important;
margin: 0 auto 22px !important;
padding-left: 16px !important;
text-align: center !important;
}
/*
* Al darle width: fit-content al módulo,
* el acento naranja queda junto al texto y no
* en el extremo izquierdo de toda la Row.
*/
.nactec-404-title.nactec-section-title::before {
content: "" !important;
position: absolute !important;
left: 0 !important;
top: 50% !important;
width: 5px !important;
height: 32px !important;
transform: translateY(-50%) !important;
background: #c75105 !important;
border-radius: 999px !important;
}
.nactec-404-title .et_pb_heading_container,
.nactec-404-title .et_pb_module_header {
text-align: center !important;
}
/* =========================================================
404 — DESCRIPCIÓN
========================================================= */
.nactec-404-text {
width: 100% !important;
max-width: 650px !important;
margin: 0 auto 32px !important;
padding: 0 !important;
text-align: center !important;
}
.nactec-404-text,
.nactec-404-text p,
.nactec-404-text .et_pb_text_inner {
font-size: 16px !important;
line-height: 1.7 !important;
color: #4a4a4f !important;
text-align: center !important;
}
.nactec-404-text p {
margin: 0 !important;
padding: 0 !important;
}
/* =========================================================
404 — BOTÓN
========================================================= */
.nactec-404-row .et_pb_button_module_wrapper {
width: 100% !important;
margin: 0 !important;
text-align: center !important;
}
.nactec-404-button {
margin-left: auto !important;
margin-right: auto !important;
}
/* =========================================================
404 — TABLET
========================================================= */
@media (max-width: 980px) {
.nactec-404 {
min-height: 400px;
padding: 52px 0 64px !important;
}
.nactec-404-code {
margin-bottom: 24px !important;
}
.nactec-404-code .et_pb_module_header,
.nactec-404-code h1,
.nactec-404-code h2,
.nactec-404-code h3,
.nactec-404-code h4,
.nactec-404-code h5,
.nactec-404-code h6 {
font-size: clamp(88px, 15vw, 130px) !important;
}
}
/* =========================================================
404 — MOBILE
========================================================= */
@media (max-width: 767px) {
.nactec-404 {
min-height: 360px;
padding: 40px 0 52px !important;
}
.nactec-404-row {
width: 90% !important;
max-width: none !important;
}
/* 404 grande también en teléfono */
.nactec-404-code {
margin-bottom: 22px !important;
}
.nactec-404-code .et_pb_module_header,
.nactec-404-code h1,
.nactec-404-code h2,
.nactec-404-code h3,
.nactec-404-code h4,
.nactec-404-code h5,
.nactec-404-code h6 {
font-size: clamp(76px, 25vw, 108px) !important;
line-height: 0.9 !important;
}
/* Título */
.nactec-404-title {
margin-bottom: 18px !important;
padding-left: 12px !important;
}
.nactec-404-title.nactec-section-title::before {
width: 4px !important;
height: 26px !important;
}
/* Descripción */
.nactec-404-text {
margin-bottom: 26px !important;
}
.nactec-404-text,
.nactec-404-text p,
.nactec-404-text .et_pb_text_inner {
font-size: 14px !important;
line-height: 1.65 !important;
}
/* Botón cómodo pero no exagerado */
.nactec-404-button {
min-width: 180px;
}
}
/* =========================================================
SHOP — VER TODAS LAS MARCAS
========================================================= */
.nactec-filter-all-brands {
display: block !important;
width: 100% !important;
box-sizing: border-box;
margin: 22px 0 6px !important;
padding: 2px 8px 2px 4px !important;
background: transparent !important;
border: 1px solid transparent !important;
border-radius: 7px !important;
color: #4a4a4f !important;
font-size: 14px !important;
line-height: 1.3 !important;
font-weight: 400 !important;
cursor: pointer;
transition:
background-color 0.15s ease,
border-color 0.15s ease,
color 0.15s ease;
}
.nactec-filter-all-brands .et_pb_text_inner,
.nactec-filter-all-brands p {
margin: 0 !important;
padding: 0 !important;
color: inherit !important;
font-size: inherit !important;
line-height: inherit !important;
font-weight: inherit !important;
}
/* Hover igual a las categorías */
.nactec-filter-all-brands:hover {
background-color: #f5f7ff !important;
color: #0044ff !important;
}
/* =========================================================
VER TODAS LAS MARCAS — RESPONSIVE
========================================================= */
@media (max-width: 1200px) {
/*
* Si los filtros están cerrados, este módulo también
* debe desaparecer aunque esté fuera del Post Filter.
*/
.nactec-shop-sidebar:not(.is-open)
.nactec-filter-all-brands {
display: none !important;
}
/*
* Al abrir los filtros vuelve a aparecer arriba
* del bloque Categorías.
*/
.nactec-shop-sidebar.is-open
.nactec-filter-all-brands {
display: block !important;
margin-top: 18px !important;
margin-bottom: 0 !important;
}
/*
* Como ahora existe un elemento entre el título
* y el Post Filter, reducimos el margen propio
* del Post Filter para evitar demasiado espacio.
*/
.nactec-shop-sidebar.is-open
.nactec-filter-all-brands
+ .nactec-shop-filters {
margin-top: 8px !important;
}
}
/* =========================================================
SHOP — SIDEBAR MODULE SPACING
========================================================= */
.nactec-shop-sidebar {
gap: 0 !important;
row-gap: 0 !important;
column-gap: 0 !important;
}
/* Filtros -> enlace */
.nactec-filter-all-brands {
margin-top: 22px !important;
margin-bottom: 8px !important;
}
/* Enlace -> Post Filter */
.nactec-filter-all-brands + .nactec-shop-filters {
margin-top: 0 !important;
}
/* =========================================================
SHOP — FINAL TITLE + FIRST FILTER SPACING
========================================================= */
/*
* Tienda principal:
* el primer bloque del Post Filter necesita aire respecto
* del encabezado "Filtros" y su separador.
*
* Se aplica solo en desktop porque en <=1200px el panel
* plegable ya controla su propio espaciado.
*/
@media (min-width: 1201px) {
body.post-type-archive-product
.nactec-shop-filters
.nactec-filter-categories {
margin-top: 20px !important;
}
}
/*
* Unificamos el título principal de Tienda con los títulos
* de Categorías / Marcas.
*
* El :not() evita tocar el Heading "Filtros", que también
* utiliza .nactec-section-title.
*/
body.post-type-archive-product
.nactec-section-title:not(.nactec-shop-filter-title) {
position: relative !important;
margin: 0 !important;
padding-left: 14px !important;
}
/* Misma tipografía para Tienda + Categorías + Marcas */
body.post-type-archive-product
.nactec-section-title:not(.nactec-shop-filter-title)
.et_pb_module_header,
body.post-type-archive-product
.nactec-section-title:not(.nactec-shop-filter-title)
h1,
body.post-type-archive-product
.nactec-section-title:not(.nactec-shop-filter-title)
h2,
.nactec-category-title
.et_pb_module_header,
.nactec-category-title
h1,
.nactec-category-title
h2 {
margin: 0 !important;
padding: 0 !important;
font-size: 48px !important;
line-height: 1.12 !important;
font-weight: 700 !important;
}
/* Mismo acento naranja para Tienda + Categorías + Marcas */
body.post-type-archive-product
.nactec-section-title:not(.nactec-shop-filter-title)::before,
.nactec-category-title-row
.nactec-category-title.nactec-section-title::before {
content: "" !important;
position: absolute !important;
top: 8px !important;
left: 0 !important;
width: 5px !important;
height: 38px !important;
transform: none !important;
display: block !important;
background: #c75105 !important;
border-radius: 999px !important;
}
/* =========================================================
CATALOG TITLES — TABLET
========================================================= */
@media (max-width: 1200px) {
body.post-type-archive-product
.nactec-section-title:not(.nactec-shop-filter-title)
.et_pb_module_header,
body.post-type-archive-product
.nactec-section-title:not(.nactec-shop-filter-title)
h1,
body.post-type-archive-product
.nactec-section-title:not(.nactec-shop-filter-title)
h2,
.nactec-category-title
.et_pb_module_header,
.nactec-category-title
h1,
.nactec-category-title
h2 {
font-size: 40px !important;
}
}
/* =========================================================
CATALOG TITLES — MOBILE
========================================================= */
@media (max-width: 767px) {
body.post-type-archive-product
.nactec-section-title:not(.nactec-shop-filter-title) {
padding-left: 12px !important;
}
body.post-type-archive-product
.nactec-section-title:not(.nactec-shop-filter-title)
.et_pb_module_header,
body.post-type-archive-product
.nactec-section-title:not(.nactec-shop-filter-title)
h1,
body.post-type-archive-product
.nactec-section-title:not(.nactec-shop-filter-title)
h2,
.nactec-category-title
.et_pb_module_header,
.nactec-category-title
h1,
.nactec-category-title
h2 {
font-size: 32px !important;
line-height: 1.15 !important;
}
body.post-type-archive-product
.nactec-section-title:not(.nactec-shop-filter-title)::before,
.nactec-category-title-row
.nactec-category-title.nactec-section-title::before {
top: 6px !important;
width: 4px !important;
height: 28px !important;
}
}
/* =========================================================
SHOP — FINAL LAYOUT SPACING 1.0.5
========================================================= */
/*
* TIENDA:
* reduce el espacio superior antes del título principal.
* Se actúa sobre la Section/Row que contiene el H1 de tienda
* sin afectar "Filtros" ni otros headings.
*/
body.post-type-archive-product
.et_pb_section:has(
.nactec-section-title:not(.nactec-shop-filter-title)
) {
padding-top: 24px !important;
}
body.post-type-archive-product
.et_pb_row:has(
.nactec-section-title:not(.nactec-shop-filter-title)
) {
padding-top: 0 !important;
}
/*
* CATEGORÍAS / MARCAS:
* cuando la descripción dinámica está realmente vacía,
* eliminamos por completo la Row para que no reserve altura.
*
* Cubrimos los formatos vacíos más habituales que genera Divi:
* - .et_pb_text_inner vacío
* -
* -
*/
.nactec-category-description-row:has(
.nactec-category-description .et_pb_text_inner:empty
),
.nactec-category-description-row:has(
.nactec-category-description
.et_pb_text_inner > p:only-child:empty
),
.nactec-category-description-row:has(
.nactec-category-description
.et_pb_text_inner > p:only-child > br:only-child
) {
display: none !important;
height: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
/* =========================================================
SHOP — TOP SPACING RESPONSIVE
========================================================= */
@media (max-width: 1200px) {
body.post-type-archive-product
.et_pb_section:has(
.nactec-section-title:not(.nactec-shop-filter-title)
) {
padding-top: 20px !important;
}
}
@media (max-width: 767px) {
body.post-type-archive-product
.et_pb_section:has(
.nactec-section-title:not(.nactec-shop-filter-title)
) {
padding-top: 16px !important;
}
}
/* =========================================================
TAXONOMY ARCHIVES — FINAL SPACING 1.0.6
Categorías + Marcas
========================================================= */
/*
* Ambos templates comparten exactamente la misma separación
* inferior. De esta forma, una categoría y una marca sin
* descripción terminan a la misma distancia de la grilla.
*/
body.tax-product_cat .nactec-category-header,
body.tax-product_brand .nactec-category-header,
body.tax-product_cat .nactec-brand-header,
body.tax-product_brand .nactec-brand-header {
padding-bottom: 28px !important;
}
/*
* Normalizamos también las posibles Rows de descripción.
* Si existe contenido real, conserva su separación normal.
*/
.nactec-category-description-row,
.nactec-brand-description-row {
margin-top: 24px !important;
margin-bottom: 0 !important;
padding: 0 !important;
}
/* =========================================================
TAXONOMY DESCRIPTION — EMPTY STATE
========================================================= */
/*
* Divi puede dejar whitespace dentro de .et_pb_text_inner.
* En ese caso :empty no alcanza, pero :not(:has(*)) sí:
* significa que el contenedor no tiene ningún elemento hijo.
*/
.nactec-category-description-row:has(
.nactec-category-description
.et_pb_text_inner:not(:has(*))
),
.nactec-brand-description-row:has(
.nactec-brand-description
.et_pb_text_inner:not(:has(*))
),
/*
* También cubrimos los formatos:
*
*
*/
.nactec-category-description-row:has(
.nactec-category-description
.et_pb_text_inner > p:only-child:empty
),
.nactec-brand-description-row:has(
.nactec-brand-description
.et_pb_text_inner > p:only-child:empty
),
.nactec-category-description-row:has(
.nactec-category-description
.et_pb_text_inner > p:only-child > br:only-child
),
.nactec-brand-description-row:has(
.nactec-brand-description
.et_pb_text_inner > p:only-child > br:only-child
) {
display: none !important;
width: 0 !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
/*
* Fallback para templates de Marca que todavía conservan
* las clases nactec-category-* heredadas al duplicarlos.
*/
body.tax-product_brand
.nactec-category-description-row:has(
.nactec-category-description
.et_pb_text_inner:not(:has(*))
),
body.tax-product_brand
.nactec-category-description-row:has(
.nactec-category-description
.et_pb_text_inner > p:only-child:empty
),
body.tax-product_brand
.nactec-category-description-row:has(
.nactec-category-description
.et_pb_text_inner > p:only-child > br:only-child
) {
display: none !important;
width: 0 !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
/* =========================================================
TAXONOMY ARCHIVES — RESPONSIVE SPACING
========================================================= */
@media (max-width: 1200px) {
body.tax-product_cat .nactec-category-header,
body.tax-product_brand .nactec-category-header,
body.tax-product_cat .nactec-brand-header,
body.tax-product_brand .nactec-brand-header {
padding-bottom: 24px !important;
}
}
@media (max-width: 767px) {
.nactec-category-description-row,
.nactec-brand-description-row {
margin-top: 16px !important;
}
}
/* =========================================================
CATALOG — SPACING NORMALIZATION 1.0.7
Tienda + Categorías + Marcas
========================================================= */
/*
* El sidebar no depende del Vertical Gap de Divi.
* Todos los espacios entre módulos quedan controlados aquí.
*/
.nactec-shop-sidebar {
gap: 0 !important;
row-gap: 0 !important;
column-gap: 0 !important;
}
/* =========================================================
FILTROS — DESKTOP
========================================================= */
@media (min-width: 1201px) {
/*
* Título "Filtros":
* el separador queda a 10px del título y dejamos
* una separación uniforme antes del primer contenido.
*/
.nactec-shop-filter-title {
margin-bottom: 0 !important;
}
/*
* Tienda + Categorías:
* el Post Filter comienza siempre a la misma distancia.
*/
.nactec-shop-sidebar
.nactec-shop-filters {
margin-top: 22px !important;
}
/*
* Eliminamos cualquier margen previo acumulado sobre
* el item Categorías. El espacio lo controla el módulo.
*/
.nactec-shop-filters
.nactec-filter-categories {
margin-top: 0 !important;
}
/*
* Marcas:
* "Ver todas las marcas" ocupa el lugar del primer
* contenido del panel, con la misma distancia inicial.
*/
.nactec-shop-sidebar
.nactec-filter-all-brands {
margin-top: 22px !important;
margin-bottom: 0 !important;
}
/*
* Después del enlace dejamos un espacio compacto
* antes de "Categorías".
*/
.nactec-shop-sidebar
.nactec-filter-all-brands
+ .nactec-shop-filters {
margin-top: 8px !important;
}
}
/* =========================================================
FILTROS — TABLET / MOBILE
========================================================= */
@media (max-width: 1200px) {
/*
* Tienda + Categorías:
* panel abierto con separación uniforme.
*/
.nactec-shop-sidebar.is-open
.nactec-shop-filters {
margin-top: 18px !important;
}
.nactec-shop-filters
.nactec-filter-categories {
margin-top: 0 !important;
}
/*
* Marcas:
* el enlace aparece en el mismo punto visual donde
* comienza el contenido en los otros dos filtros.
*/
.nactec-shop-sidebar.is-open
.nactec-filter-all-brands {
margin-top: 18px !important;
margin-bottom: 0 !important;
}
.nactec-shop-sidebar.is-open
.nactec-filter-all-brands
+ .nactec-shop-filters {
margin-top: 8px !important;
}
}
/* =========================================================
TAXONOMY HEADER — CATEGORÍAS + MARCAS
========================================================= */
/*
* El título no reserva padding inferior propio.
* La distancia hacia la grilla la controla exclusivamente
* el padding inferior del header.
*/
body.tax-product_cat
.nactec-category-title-row,
body.tax-product_brand
.nactec-category-title-row,
body.tax-product_cat
.nactec-brand-title-row,
body.tax-product_brand
.nactec-brand-title-row {
padding-bottom: 0 !important;
}
/*
* Misma geometría del header en ambos archivos.
*/
body.tax-product_cat
.nactec-category-header,
body.tax-product_brand
.nactec-category-header,
body.tax-product_cat
.nactec-brand-header,
body.tax-product_brand
.nactec-brand-header {
padding-bottom: 28px !important;
}
/*
* La sección que contiene filtros + productos no agrega
* otro padding superior. Así la distancia final es idéntica.
*/
body.tax-product_cat
.et_pb_section:has(.nactec-shop-main-row),
body.tax-product_brand
.et_pb_section:has(.nactec-shop-main-row) {
padding-top: 0 !important;
}
body.tax-product_cat
.nactec-shop-main-row,
body.tax-product_brand
.nactec-shop-main-row {
margin-top: 0 !important;
}
/* =========================================================
TAXONOMY DESCRIPTION — CONTENIDO REAL / VACÍO
========================================================= */
/*
* Estrategia inversa:
* la Row de descripción queda oculta por defecto y solo
* reaparece cuando Divi genera contenido textual real.
*
* Esto evita que un módulo dinámico vacío reserve altura.
*/
.nactec-category-description-row,
.nactec-brand-description-row {
display: none !important;
margin: 0 !important;
padding: 0 !important;
}
/*
* Descripción real en un párrafo.
* Excluimos el caso habitual
.
*/
.nactec-category-description-row:has(
.nactec-category-description
.et_pb_text_inner > p:not(:empty):not(:has(> br:only-child))
),
.nactec-brand-description-row:has(
.nactec-brand-description
.et_pb_text_inner > p:not(:empty):not(:has(> br:only-child))
),
/*
* También permitimos listas u otros bloques HTML reales
* dentro de la descripción.
*/
.nactec-category-description-row:has(
.nactec-category-description
.et_pb_text_inner > ul
),
.nactec-category-description-row:has(
.nactec-category-description
.et_pb_text_inner > ol
),
.nactec-brand-description-row:has(
.nactec-brand-description
.et_pb_text_inner > ul
),
.nactec-brand-description-row:has(
.nactec-brand-description
.et_pb_text_inner > ol
) {
display: block !important;
margin-top: 24px !important;
margin-bottom: 0 !important;
padding: 0 !important;
}
/*
* Fallback para el template de Marca si todavía conserva
* las clases nactec-category-* heredadas del template original.
*/
body.tax-product_brand
.nactec-category-description-row:has(
.nactec-category-description
.et_pb_text_inner > p:not(:empty):not(:has(> br:only-child))
) {
display: block !important;
margin-top: 24px !important;
}
/* =========================================================
TAXONOMY HEADER — RESPONSIVE
========================================================= */
@media (max-width: 1200px) {
body.tax-product_cat
.nactec-category-header,
body.tax-product_brand
.nactec-category-header,
body.tax-product_cat
.nactec-brand-header,
body.tax-product_brand
.nactec-brand-header {
padding-bottom: 24px !important;
}
}
@media (max-width: 767px) {
.nactec-category-description-row:has(
.nactec-category-description
.et_pb_text_inner > p:not(:empty):not(:has(> br:only-child))
),
.nactec-brand-description-row:has(
.nactec-brand-description
.et_pb_text_inner > p:not(:empty):not(:has(> br:only-child))
) {
margin-top: 16px !important;
}
}
/* =========================================================
CATALOG — HOTFIX 1.0.8
========================================================= */
/*
* TIENDA:
* neutraliza la regla antigua más específica que agregaba
* 20px directamente sobre el bloque Categorías.
*
* No afecta archivos product_cat ni product_brand.
*/
@media (min-width: 1201px) {
body.woocommerce-shop
.nactec-shop-filters
.nactec-filter-categories {
margin-top: 0 !important;
}
}
/*
* DESCRIPCIONES DE TAXONOMÍAS:
* restauramos el comportamiento normal.
*
* No intentamos detectar "texto vacío" con CSS porque Divi
* puede dejar wrappers/whitespace y CSS no puede evaluar de
* forma robusta el contenido textual real.
*/
.nactec-category-description-row,
.nactec-brand-description-row {
display: block !important;
width: auto !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
}
/*
* Si existe una descripción real, conserva el espaciado
* visual que ya estaba aprobado.
*/
.nactec-category-description-row,
.nactec-brand-description-row {
margin-top: 24px !important;
margin-bottom: 0 !important;
padding: 0 !important;
}
@media (max-width: 767px) {
.nactec-category-description-row,
.nactec-brand-description-row {
margin-top: 16px !important;
}
}
/* =========================================================
NACTEC — MY ACCOUNT 1.0.9
========================================================= */
.nactec-account-page {
padding: 40px 0 72px !important;
}
.nactec-account-row {
width: 90% !important;
max-width: 1200px !important;
margin: 0 auto !important;
padding: 0 !important;
}
/* =========================================================
MY ACCOUNT — PAGE TITLE
========================================================= */
.nactec-account-title {
position: relative !important;
margin: 0 0 32px !important;
padding-left: 14px !important;
}
.nactec-account-title::before {
content: "" !important;
position: absolute !important;
top: 8px !important;
left: 0 !important;
width: 5px !important;
height: 38px !important;
transform: none !important;
background: #c75105 !important;
border-radius: 999px !important;
}
.nactec-account-title .et_pb_module_header,
.nactec-account-title h1 {
margin: 0 !important;
padding: 0 !important;
font-size: 48px !important;
line-height: 1.12 !important;
font-weight: 700 !important;
}
/* =========================================================
MY ACCOUNT — BASE
========================================================= */
.nactec-my-account {
margin: 0 !important;
padding: 0 !important;
}
.nactec-my-account .et_pb_text_inner {
margin: 0 !important;
padding: 0 !important;
}
.nactec-my-account .woocommerce {
width: 100%;
margin: 0 !important;
padding: 0 !important;
}
.nactec-my-account a {
color: #0044ff;
text-decoration: none;
transition: color 0.15s ease;
}
.nactec-my-account a:hover {
color: #0033cc;
}
/* =========================================================
MY ACCOUNT — LOGGED IN SHELL
========================================================= */
body.logged-in
.nactec-my-account
.woocommerce {
display: grid;
grid-template-columns:
230px
minmax(0, 1fr);
width: 100%;
background: #ffffff;
border: 1px solid #e2e2e8;
border-radius: 16px;
box-shadow:
0 4px 16px rgba(26, 26, 26, 0.05);
overflow: hidden;
}
/* =========================================================
MY ACCOUNT — NAVIGATION
========================================================= */
.nactec-my-account
.woocommerce-MyAccount-navigation {
width: auto !important;
margin: 0 !important;
padding: 24px 16px !important;
float: none !important;
background: #f7f7f9;
border-right: 1px solid #e2e2e8;
box-sizing: border-box;
}
.nactec-my-account
.woocommerce-MyAccount-navigation ul {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.nactec-my-account
.woocommerce-MyAccount-navigation li {
margin: 0 0 4px !important;
padding: 0 !important;
list-style: none !important;
}
.nactec-my-account
.woocommerce-MyAccount-navigation li:last-child {
margin-bottom: 0 !important;
}
.nactec-my-account
.woocommerce-MyAccount-navigation a {
display: flex;
align-items: center;
width: 100%;
min-height: 42px;
box-sizing: border-box;
margin: 0;
padding: 10px 12px;
border-radius: 8px;
color: #4a4a4f !important;
font-size: 14px;
line-height: 1.3;
font-weight: 500;
text-decoration: none !important;
transition:
background-color 0.15s ease,
color 0.15s ease;
}
.nactec-my-account
.woocommerce-MyAccount-navigation a:hover {
background: #ffffff;
color: #0044ff !important;
}
.nactec-my-account
.woocommerce-MyAccount-navigation
.is-active > a {
background: rgba(0, 68, 255, 0.08);
color: #0033cc !important;
font-weight: 600;
}
/* Cerrar sesión separado visualmente */
.nactec-my-account
.woocommerce-MyAccount-navigation-link--customer-logout {
margin-top: 16px !important;
padding-top: 16px !important;
border-top: 1px solid #e2e2e8;
}
/* =========================================================
MY ACCOUNT — CONTENT
========================================================= */
.nactec-my-account
.woocommerce-MyAccount-content {
width: auto !important;
min-width: 0;
margin: 0 !important;
padding: 32px !important;
float: none !important;
box-sizing: border-box;
}
.nactec-my-account
.woocommerce-MyAccount-content > :first-child {
margin-top: 0 !important;
}
.nactec-my-account
.woocommerce-MyAccount-content > :last-child {
margin-bottom: 0 !important;
}
.nactec-my-account
.woocommerce-MyAccount-content p {
color: #4a4a4f;
font-size: 15px;
line-height: 1.65;
}
/* =========================================================
MY ACCOUNT — HEADINGS
========================================================= */
.nactec-my-account
.woocommerce h2,
.nactec-my-account
.woocommerce h3 {
margin-top: 0;
color: #1a1a1a;
font-family: "Manrope", sans-serif;
font-weight: 700;
}
.nactec-my-account
.woocommerce h2 {
margin-bottom: 22px;
font-size: 24px;
line-height: 1.25;
}
.nactec-my-account
.woocommerce h3 {
margin-bottom: 16px;
font-size: 18px;
line-height: 1.3;
}
/* =========================================================
MY ACCOUNT — GUEST LOGIN / REGISTER
========================================================= */
body:not(.logged-in)
.nactec-my-account
#customer_login {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 24px;
width: 100%;
margin: 0 !important;
}
body:not(.logged-in)
.nactec-my-account
#customer_login > .u-column1,
body:not(.logged-in)
.nactec-my-account
#customer_login > .u-column2 {
width: 100% !important;
margin: 0 !important;
padding: 28px !important;
float: none !important;
background: #ffffff;
border: 1px solid #e2e2e8;
border-radius: 16px;
box-shadow:
0 4px 16px rgba(26, 26, 26, 0.05);
box-sizing: border-box;
}
/* =========================================================
MY ACCOUNT — FORMS
========================================================= */
.nactec-my-account
.woocommerce form {
margin: 0 !important;
}
.nactec-my-account
.woocommerce form .form-row {
margin: 0 0 16px !important;
padding: 0 !important;
}
.nactec-my-account
.woocommerce form .form-row:last-child {
margin-bottom: 0 !important;
}
.nactec-my-account
.woocommerce form label {
display: block;
margin: 0 0 6px !important;
color: #4a4a4f;
font-size: 14px;
line-height: 1.35;
font-weight: 500;
}
.nactec-my-account
.woocommerce input.input-text,
.nactec-my-account
.woocommerce input[type="text"],
.nactec-my-account
.woocommerce input[type="email"],
.nactec-my-account
.woocommerce input[type="password"],
.nactec-my-account
.woocommerce input[type="tel"],
.nactec-my-account
.woocommerce select,
.nactec-my-account
.woocommerce textarea {
width: 100% !important;
min-height: 48px;
box-sizing: border-box;
margin: 0 !important;
padding: 11px 12px !important;
background: #ffffff !important;
border: 1px solid #d8d8de !important;
border-radius: 8px !important;
outline: none !important;
color: #1a1a1a !important;
font-family: "Manrope", sans-serif !important;
font-size: 14px !important;
line-height: 1.4 !important;
transition:
border-color 0.15s ease,
box-shadow 0.15s ease;
}
.nactec-my-account
.woocommerce textarea {
min-height: 120px;
resize: vertical;
}
.nactec-my-account
.woocommerce input:focus,
.nactec-my-account
.woocommerce select:focus,
.nactec-my-account
.woocommerce textarea:focus {
border-color: #0044ff !important;
box-shadow:
0 0 0 3px rgba(0, 68, 255, 0.10) !important;
}
/* =========================================================
MY ACCOUNT — BUTTONS
========================================================= */
.nactec-my-account
.woocommerce button.button,
.nactec-my-account
.woocommerce a.button,
.nactec-my-account
.woocommerce input.button {
min-height: 46px;
box-sizing: border-box;
margin: 0 !important;
padding: 11px 18px !important;
background: #0033cc !important;
border: 1px solid #0033cc !important;
border-radius: 8px !important;
color: #ffffff !important;
font-family: "Manrope", sans-serif !important;
font-size: 14px !important;
line-height: 1.2 !important;
font-weight: 600 !important;
text-decoration: none !important;
cursor: pointer;
transition:
background-color 0.15s ease,
border-color 0.15s ease;
}
.nactec-my-account
.woocommerce button.button:hover,
.nactec-my-account
.woocommerce a.button:hover,
.nactec-my-account
.woocommerce input.button:hover {
background: #0044ff !important;
border-color: #0044ff !important;
color: #ffffff !important;
}
/* =========================================================
MY ACCOUNT — LOGIN EXTRAS
========================================================= */
.nactec-my-account
.woocommerce-form-login__rememberme {
display: inline-flex !important;
align-items: center;
gap: 6px;
margin: 0 12px 0 0 !important;
}
.nactec-my-account
.woocommerce-form-login__rememberme input {
width: 15px;
height: 15px;
margin: 0 !important;
}
.nactec-my-account
.woocommerce-LostPassword {
margin: 14px 0 0 !important;
font-size: 13px;
}
/* =========================================================
MY ACCOUNT — TABLES
========================================================= */
.nactec-my-account
.woocommerce table.shop_table {
width: 100%;
margin: 0 !important;
border: 1px solid #e2e2e8 !important;
border-radius: 10px !important;
border-collapse: separate !important;
border-spacing: 0 !important;
overflow: hidden;
}
.nactec-my-account
.woocommerce table.shop_table th,
.nactec-my-account
.woocommerce table.shop_table td {
padding: 12px 14px !important;
border-color: #e2e2e8 !important;
font-size: 14px;
line-height: 1.4;
}
.nactec-my-account
.woocommerce table.shop_table th {
background: #f7f7f9;
color: #1a1a1a;
font-weight: 600;
}
/* =========================================================
MY ACCOUNT — ADDRESSES
========================================================= */
.nactec-my-account
.woocommerce-Addresses {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 20px;
}
.nactec-my-account
.woocommerce-Address {
width: auto !important;
margin: 0 !important;
padding: 20px !important;
float: none !important;
background: #f7f7f9;
border: 1px solid #e2e2e8;
border-radius: 10px;
box-sizing: border-box;
}
/* =========================================================
MY ACCOUNT — NOTICES
========================================================= */
.nactec-my-account
.woocommerce-message,
.nactec-my-account
.woocommerce-info,
.nactec-my-account
.woocommerce-error {
margin: 0 0 20px !important;
padding: 14px 16px !important;
background: #f7f7f9;
border: 1px solid #e2e2e8;
border-left: 4px solid #0044ff;
border-radius: 8px;
color: #4a4a4f;
}
/* =========================================================
MY ACCOUNT — TABLET
========================================================= */
@media (max-width: 980px) {
.nactec-account-page {
padding: 32px 0 56px !important;
}
.nactec-account-title {
margin-bottom: 26px !important;
}
.nactec-account-title .et_pb_module_header,
.nactec-account-title h1 {
font-size: 40px !important;
}
body.logged-in
.nactec-my-account
.woocommerce {
grid-template-columns:
200px
minmax(0, 1fr);
}
.nactec-my-account
.woocommerce-MyAccount-navigation {
padding: 20px 12px !important;
}
.nactec-my-account
.woocommerce-MyAccount-content {
padding: 26px !important;
}
body:not(.logged-in)
.nactec-my-account
#customer_login {
gap: 20px;
}
body:not(.logged-in)
.nactec-my-account
#customer_login > .u-column1,
body:not(.logged-in)
.nactec-my-account
#customer_login > .u-column2 {
padding: 24px !important;
}
}
/* =========================================================
MY ACCOUNT — MOBILE
========================================================= */
@media (max-width: 767px) {
.nactec-account-page {
padding: 24px 0 48px !important;
}
.nactec-account-row {
width: 90% !important;
}
.nactec-account-title {
margin-bottom: 22px !important;
padding-left: 12px !important;
}
.nactec-account-title::before {
top: 6px !important;
width: 4px !important;
height: 28px !important;
}
.nactec-account-title .et_pb_module_header,
.nactec-account-title h1 {
font-size: 32px !important;
line-height: 1.15 !important;
}
/* Logged */
body.logged-in
.nactec-my-account
.woocommerce {
display: block;
}
.nactec-my-account
.woocommerce-MyAccount-navigation {
padding: 14px !important;
border-right: 0;
border-bottom: 1px solid #e2e2e8;
}
.nactec-my-account
.woocommerce-MyAccount-content {
padding: 22px 18px !important;
}
/* Guest */
body:not(.logged-in)
.nactec-my-account
#customer_login {
grid-template-columns: 1fr;
gap: 16px;
}
body:not(.logged-in)
.nactec-my-account
#customer_login > .u-column1,
body:not(.logged-in)
.nactec-my-account
#customer_login > .u-column2 {
padding: 22px 18px !important;
}
/* Addresses */
.nactec-my-account
.woocommerce-Addresses {
grid-template-columns: 1fr;
gap: 14px;
}
/* Tables */
.nactec-my-account
.woocommerce table.shop_table {
display: block;
overflow-x: auto;
}
}
/* =========================================================
MY ACCOUNT — WOOCOMMERCE CLEARFIX FIX 1.0.10
========================================================= */
/*
* WooCommerce usa ::before / ::after como clearfix en varios
* contenedores. Al convertir esos contenedores en CSS Grid,
* dichos pseudo-elementos pasan a ocupar celdas del grid y
* desplazan la navegación, el contenido, login y registro.
*
* Los anulamos únicamente dentro de Mi Cuenta.
*/
.nactec-my-account
.woocommerce::before,
.nactec-my-account
.woocommerce::after,
.nactec-my-account
#customer_login::before,
.nactec-my-account
#customer_login::after {
content: none !important;
display: none !important;
}
/* =========================================================
MY ACCOUNT — LOGGED GRID PLACEMENT
========================================================= */
/*
* Explicitamos columnas para que incluso si WooCommerce
* introduce otros nodos auxiliares, navegación y contenido
* permanezcan en la posición correcta.
*/
body.logged-in
.nactec-my-account
.woocommerce-MyAccount-navigation {
grid-column: 1 !important;
grid-row: 1 !important;
}
body.logged-in
.nactec-my-account
.woocommerce-MyAccount-content {
grid-column: 2 !important;
grid-row: 1 !important;
}
/*
* Notices de WooCommerce, si aparecen, ocupan ambas columnas
* sin alterar la geometría principal.
*/
body.logged-in
.nactec-my-account
.woocommerce-notices-wrapper:not(:empty) {
grid-column: 1 / -1 !important;
}
/* =========================================================
MY ACCOUNT — GUEST GRID PLACEMENT
========================================================= */
body:not(.logged-in)
.nactec-my-account
#customer_login > .u-column1 {
grid-column: 1 !important;
grid-row: 1 !important;
}
body:not(.logged-in)
.nactec-my-account
#customer_login > .u-column2 {
grid-column: 2 !important;
grid-row: 1 !important;
}
/* =========================================================
MY ACCOUNT — MOBILE GRID RESET
========================================================= */
@media (max-width: 767px) {
body.logged-in
.nactec-my-account
.woocommerce-MyAccount-navigation,
body.logged-in
.nactec-my-account
.woocommerce-MyAccount-content,
body:not(.logged-in)
.nactec-my-account
#customer_login > .u-column1,
body:not(.logged-in)
.nactec-my-account
#customer_login > .u-column2 {
grid-column: auto !important;
grid-row: auto !important;
}
}
/* =========================================================
MY ACCOUNT — POLISH 1.0.11
========================================================= */
/* ---------------------------------------------------------
Guest — Remember me below login button
--------------------------------------------------------- */
/*
* WooCommerce places the button and "Recordarme" on the
* same form row. We turn that row into a flex container so
* the button stays first and the checkbox drops below it.
*/
.nactec-my-account
.woocommerce-form-login
.form-row:has(.woocommerce-form-login__submit) {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 10px !important;
}
.nactec-my-account
.woocommerce-form-login
.woocommerce-form-login__submit {
order: 1;
}
.nactec-my-account
.woocommerce-form-login
.woocommerce-form-login__rememberme {
order: 2;
margin: 0 !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
}
/* ---------------------------------------------------------
Pedidos / Descargas — empty state
--------------------------------------------------------- */
/*
* WooCommerce uses .woocommerce-info for "no orders" /
* "no downloads" messages. We keep the CTA button intact
* but replace the strong blue panel with a quiet neutral card.
*/
.nactec-my-account
.woocommerce-MyAccount-content
.woocommerce-info {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 16px !important;
margin: 0 !important;
padding: 14px 16px !important;
background: #f7f7f9 !important;
border: 1px solid #e2e2e8 !important;
border-left: 4px solid #c75105 !important;
border-radius: 8px !important;
color: #1a1a1a !important;
font-size: 15px !important;
line-height: 1.45 !important;
}
.nactec-my-account
.woocommerce-MyAccount-content
.woocommerce-info::before {
display: none !important;
}
.nactec-my-account
.woocommerce-MyAccount-content
.woocommerce-info,
.nactec-my-account
.woocommerce-MyAccount-content
.woocommerce-info *:not(.button) {
color: #1a1a1a !important;
}
/* ---------------------------------------------------------
Direcciones — aligned cards
--------------------------------------------------------- */
/*
* WooCommerce can output billing/shipping columns in different
* document order/flow. We force both cards into the same grid row
* and make them stretch to equal height.
*/
.nactec-my-account
.woocommerce-Addresses {
display: grid !important;
grid-template-columns:
repeat(2, minmax(0, 1fr)) !important;
gap: 20px !important;
align-items: stretch !important;
}
.nactec-my-account
.woocommerce-Address {
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 20px !important;
float: none !important;
display: flex !important;
flex-direction: column !important;
box-sizing: border-box;
}
.nactec-my-account
.woocommerce-Address-title {
width: 100% !important;
margin: 0 0 14px !important;
}
.nactec-my-account
.woocommerce-Address address {
margin-top: auto !important;
margin-bottom: 0 !important;
}
/* ---------------------------------------------------------
Account details — password section
--------------------------------------------------------- */
/*
* WooCommerce wraps the password fields in a fieldset and uses
* its legend as "Cambio de contraseña".
*/
.nactec-my-account
.woocommerce-EditAccountForm
fieldset {
margin: 24px 0 0 !important;
padding: 0 !important;
border: 0 !important;
}
.nactec-my-account
.woocommerce-EditAccountForm
fieldset legend {
width: 100% !important;
margin: 0 0 14px !important;
padding: 0 !important;
color: #1a1a1a !important;
font-size: 16px !important;
line-height: 1.35 !important;
font-weight: 700 !important;
}
/*
* Extra breathing room between the final password field
* and "Guardar los cambios".
*/
.nactec-my-account
.woocommerce-EditAccountForm
fieldset + .clear + p,
.nactec-my-account
.woocommerce-EditAccountForm
fieldset + p {
margin-top: 18px !important;
}
/* =========================================================
MY ACCOUNT — POLISH RESPONSIVE
========================================================= */
@media (max-width: 767px) {
.nactec-my-account
.woocommerce-MyAccount-content
.woocommerce-info {
flex-direction: column !important;
align-items: flex-start !important;
}
.nactec-my-account
.woocommerce-Addresses {
grid-template-columns: 1fr !important;
}
}
/* =========================================================
MY ACCOUNT — POLISH 1.0.12
========================================================= */
/* ---------------------------------------------------------
Pedidos / Descargas — CTA limpio
--------------------------------------------------------- */
/*
* Divi puede agregar un icono/flechita mediante pseudo-elementos
* a enlaces con clase .button. Dentro de Mi Cuenta no lo usamos.
*/
.nactec-my-account
.woocommerce-MyAccount-content
.woocommerce-info
.button::before,
.nactec-my-account
.woocommerce-MyAccount-content
.woocommerce-info
.button::after {
content: none !important;
display: none !important;
margin: 0 !important;
padding: 0 !important;
}
/*
* El botón queda anclado a la derecha con un pequeño margen
* interior respecto del borde del aviso.
*/
.nactec-my-account
.woocommerce-MyAccount-content
.woocommerce-info
.button {
margin-left: auto !important;
margin-right: 8px !important;
flex: 0 0 auto !important;
}
/* ---------------------------------------------------------
Direcciones — grid corregido
--------------------------------------------------------- */
/*
* WooCommerce también usa ::before / ::after como clearfix
* dentro de .woocommerce-Addresses. Al convertirlo en grid,
* esos pseudo-elementos ocupaban celdas y desplazaban las cards.
*/
.nactec-my-account
.woocommerce-Addresses::before,
.nactec-my-account
.woocommerce-Addresses::after {
content: none !important;
display: none !important;
}
/*
* Forzamos ambas direcciones a la misma fila y a columnas fijas.
*/
.nactec-my-account
.woocommerce-Addresses
> .woocommerce-Address:nth-of-type(1),
.nactec-my-account
.woocommerce-Addresses
> .u-column1 {
grid-column: 1 !important;
grid-row: 1 !important;
}
.nactec-my-account
.woocommerce-Addresses
> .woocommerce-Address:nth-of-type(2),
.nactec-my-account
.woocommerce-Addresses
> .u-column2 {
grid-column: 2 !important;
grid-row: 1 !important;
}
/*
* Ambas cards ocupan toda la altura disponible de la fila.
*/
.nactec-my-account
.woocommerce-Addresses
> .woocommerce-Address {
align-self: stretch !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
}
/* =========================================================
MY ACCOUNT — POLISH RESPONSIVE
========================================================= */
@media (max-width: 767px) {
.nactec-my-account
.woocommerce-MyAccount-content
.woocommerce-info
.button {
margin-left: 0 !important;
margin-right: 0 !important;
}
.nactec-my-account
.woocommerce-Addresses
> .woocommerce-Address:nth-of-type(1),
.nactec-my-account
.woocommerce-Addresses
> .u-column1,
.nactec-my-account
.woocommerce-Addresses
> .woocommerce-Address:nth-of-type(2),
.nactec-my-account
.woocommerce-Addresses
> .u-column2 {
grid-column: 1 !important;
grid-row: auto !important;
}
}
/* =========================================================
MY ACCOUNT — ADDRESSES POLISH 1.0.13
========================================================= */
/* ---------------------------------------------------------
Address cards — same visual language as empty-state notices
--------------------------------------------------------- */
.nactec-my-account
.woocommerce-Addresses
> .woocommerce-Address {
background: #f7f7f9 !important;
border: 1px solid #e2e2e8 !important;
border-left: 4px solid #c75105 !important;
border-radius: 8px !important;
box-shadow: none !important;
}
/* ---------------------------------------------------------
Address title + edit link
--------------------------------------------------------- */
/*
* WooCommerce floats the title and the edit link by default.
* We turn the header into a vertical stack so the action link
* sits directly below the heading, aligned to the left.
*/
.nactec-my-account
.woocommerce-Address-title {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 8px !important;
width: 100% !important;
margin: 0 0 14px !important;
padding: 0 !important;
}
.nactec-my-account
.woocommerce-Address-title h2,
.nactec-my-account
.woocommerce-Address-title h3 {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
text-align: left !important;
}
.nactec-my-account
.woocommerce-Address-title .edit {
display: inline-block !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
align-self: flex-start !important;
text-align: left !important;
font-size: 14px !important;
line-height: 1.35 !important;
}
/*
* The address text follows naturally below the edit link.
* We no longer use margin-top:auto because that pushed
* content toward the bottom of equal-height cards.
*/
.nactec-my-account
.woocommerce-Address address {
margin: 0 !important;
text-align: left !important;
}
/* ---------------------------------------------------------
Edit address forms — space before save button
--------------------------------------------------------- */
/*
* WooCommerce renders both billing and shipping address forms
* inside .woocommerce-address-fields. The save-button paragraph
* comes immediately after the field wrapper.
*/
.nactec-my-account
.woocommerce-address-fields__field-wrapper
+ p {
margin-top: 18px !important;
margin-bottom: 0 !important;
}
/*
* Extra fallback for WooCommerce/plugin variations where
* the button paragraph is not an immediate sibling.
*/
.nactec-my-account
.woocommerce-address-fields
> p:last-child {
margin-top: 18px !important;
margin-bottom: 0 !important;
}
/* Keep the save button itself free from inherited spacing. */
.nactec-my-account
.woocommerce-address-fields
button.button {
margin-top: 0 !important;
}
/* =========================================================
MY ACCOUNT — FORM BUTTON ICON FIX 1.0.14
========================================================= */
/*
* Divi agrega un icono animado mediante ::after a algunos
* botones WooCommerce. Lo neutralizamos en:
* - Guardar dirección de facturación
* - Guardar dirección de envío
* - Guardar los cambios de Detalles de la cuenta
*/
.nactec-my-account
.woocommerce-address-fields
button.button::before,
.nactec-my-account
.woocommerce-address-fields
button.button::after,
.nactec-my-account
.woocommerce-EditAccountForm
button.button::before,
.nactec-my-account
.woocommerce-EditAccountForm
button.button::after {
content: none !important;
display: none !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
opacity: 0 !important;
}
/*
* Evitamos también el desplazamiento lateral que Divi suele
* aplicar en hover cuando reserva espacio para el icono.
*/
.nactec-my-account
.woocommerce-address-fields
button.button,
.nactec-my-account
.woocommerce-address-fields
button.button:hover,
.nactec-my-account
.woocommerce-EditAccountForm
button.button,
.nactec-my-account
.woocommerce-EditAccountForm
button.button:hover {
padding: 11px 18px !important;
}
/* =========================================================
WOOCOMMERCE — GLOBAL NOTICES 1.0.15
========================================================= */
/*
* Unificamos todos los avisos WooCommerce con la misma
* estética aprobada en Pedidos / Descargas:
*
* - fondo gris suave
* - texto oscuro
* - borde izquierdo naranja
* - sin iconos automáticos
*
* Cubre WooCommerce clásico y WooCommerce Blocks.
*/
/* ---------------------------------------------------------
WooCommerce clásico
--------------------------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce
.woocommerce-message,
.woocommerce
.woocommerce-info,
.woocommerce
.woocommerce-error {
box-sizing: border-box;
width: 100%;
margin: 0 0 20px !important;
padding: 14px 16px !important;
background: #f7f7f9 !important;
border: 1px solid #e2e2e8 !important;
border-left: 4px solid #c75105 !important;
border-radius: 8px !important;
box-shadow: none !important;
color: #1a1a1a !important;
font-size: 15px !important;
line-height: 1.45 !important;
}
/* WooCommerce errors are often rendered as a . */
.woocommerce-error {
list-style: none !important;
}
.woocommerce-error li {
margin: 0 !important;
padding: 0 !important;
}
/* Remove WooCommerce / theme notice icons. */
.woocommerce-message::before,
.woocommerce-message::after,
.woocommerce-info::before,
.woocommerce-info::after,
.woocommerce-error::before,
.woocommerce-error::after {
content: none !important;
display: none !important;
}
/* Dark text inside notices, except actual CTA buttons. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-message *:not(.button),
.woocommerce-info *:not(.button),
.woocommerce-error *:not(.button) {
color: #1a1a1a !important;
}
/* Links remain recognisable as links. */
.woocommerce-message a:not(.button),
.woocommerce-info a:not(.button),
.woocommerce-error a:not(.button) {
color: #0044ff !important;
text-decoration: none !important;
}
.woocommerce-message a:not(.button):hover,
.woocommerce-info a:not(.button):hover,
.woocommerce-error a:not(.button):hover {
color: #0033cc !important;
}
/*
* CTA buttons keep the NACTEC primary-button treatment.
* We also suppress Divi's animated pseudo-icon globally
* inside WooCommerce notices.
*/
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
margin-left: auto !important;
flex: 0 0 auto !important;
}
.woocommerce-message .button::before,
.woocommerce-message .button::after,
.woocommerce-info .button::before,
.woocommerce-info .button::after,
.woocommerce-error .button::before,
.woocommerce-error .button::after {
content: none !important;
display: none !important;
}
/* ---------------------------------------------------------
WooCommerce Blocks
Cart / Checkout / other block notices
--------------------------------------------------------- */
.wc-block-components-notice-banner {
box-sizing: border-box !important;
width: 100% !important;
margin: 0 0 20px !important;
padding: 14px 16px !important;
background: #f7f7f9 !important;
border: 1px solid #e2e2e8 !important;
border-left: 4px solid #c75105 !important;
border-radius: 8px !important;
box-shadow: none !important;
color: #1a1a1a !important;
font-size: 15px !important;
line-height: 1.45 !important;
}
/* Remove block notice status icon. */
.wc-block-components-notice-banner
> svg {
display: none !important;
}
/* Remove space reserved for the hidden icon. */
.wc-block-components-notice-banner
.wc-block-components-notice-banner__content {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
color: #1a1a1a !important;
}
.wc-block-components-notice-banner
.wc-block-components-notice-banner__content
*:not(.wc-block-components-button) {
color: #1a1a1a !important;
}
/* Links inside block notices. */
.wc-block-components-notice-banner a:not(.wc-block-components-button) {
color: #0044ff !important;
text-decoration: none !important;
}
.wc-block-components-notice-banner a:not(.wc-block-components-button):hover {
color: #0033cc !important;
}
/* ---------------------------------------------------------
Notices wrapper
--------------------------------------------------------- */
.woocommerce-notices-wrapper:empty {
display: none !important;
}
.woocommerce-notices-wrapper
> :last-child {
margin-bottom: 20px !important;
}
/* =========================================================
WOOCOMMERCE NOTICES — MOBILE
========================================================= */
@media (max-width: 767px) {
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
padding: 12px 14px !important;
font-size: 14px !important;
}
/*
* If a classic notice contains a CTA, allow it to wrap
* below the message rather than compressing the text.
*/
.woocommerce-message:has(.button),
.woocommerce-info:has(.button),
.woocommerce-error:has(.button) {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 12px !important;
}
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
margin-left: 0 !important;
}
}
/* =========================================================
MY ACCOUNT — ORDERS POLISH 1.0.16
========================================================= */
/* ---------------------------------------------------------
Orders list — "Ver" button without Divi animated icon
--------------------------------------------------------- */
.nactec-my-account
.woocommerce-orders-table
.woocommerce-button.view::before,
.nactec-my-account
.woocommerce-orders-table
.woocommerce-button.view::after {
content: none !important;
display: none !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
opacity: 0 !important;
}
.nactec-my-account
.woocommerce-orders-table
.woocommerce-button.view,
.nactec-my-account
.woocommerce-orders-table
.woocommerce-button.view:hover {
padding: 11px 18px !important;
}
/* ---------------------------------------------------------
Order detail — intro line
--------------------------------------------------------- */
.nactec-my-account
.woocommerce-order-details
+ .woocommerce-customer-details,
.nactec-my-account
.woocommerce-order-details {
margin-top: 0 !important;
}
.nactec-my-account
.woocommerce-MyAccount-content
> p:first-child {
margin-bottom: 10px !important;
color: #4a4a4f !important;
font-size: 14px !important;
line-height: 1.55 !important;
}
/* ---------------------------------------------------------
Order detail — section titles
--------------------------------------------------------- */
.nactec-my-account
.woocommerce-order-details__title,
.nactec-my-account
.woocommerce-customer-details
.woocommerce-column__title {
position: relative;
margin: 0 0 18px !important;
padding-left: 12px !important;
color: #1a1a1a !important;
font-size: 22px !important;
line-height: 1.25 !important;
font-weight: 700 !important;
}
.nactec-my-account
.woocommerce-order-details__title::before,
.nactec-my-account
.woocommerce-customer-details
.woocommerce-column__title::before {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 4px;
height: 24px;
transform: translateY(-50%);
background: #c75105;
border-radius: 999px;
}
/* ---------------------------------------------------------
Order detail — product / totals table
--------------------------------------------------------- */
.nactec-my-account
.woocommerce-order-details
table.shop_table {
margin-bottom: 28px !important;
background: #ffffff !important;
border: 1px solid #e2e2e8 !important;
border-radius: 10px !important;
box-shadow: none !important;
}
.nactec-my-account
.woocommerce-order-details
table.shop_table thead th {
background: #f7f7f9 !important;
color: #1a1a1a !important;
font-weight: 600 !important;
}
.nactec-my-account
.woocommerce-order-details
table.shop_table tbody td {
background: #ffffff !important;
}
.nactec-my-account
.woocommerce-order-details
table.shop_table tfoot th,
.nactec-my-account
.woocommerce-order-details
table.shop_table tfoot td {
background: #f7f7f9 !important;
color: #1a1a1a !important;
}
.nactec-my-account
.woocommerce-order-details
table.shop_table tfoot th {
font-weight: 600 !important;
}
.nactec-my-account
.woocommerce-order-details
table.shop_table tfoot tr:last-child th,
.nactec-my-account
.woocommerce-order-details
table.shop_table tfoot tr:last-child td {
font-weight: 700 !important;
}
/* Product links */
.nactec-my-account
.woocommerce-order-details
.woocommerce-table__product-name
a {
color: #0044ff !important;
text-decoration: none !important;
}
.nactec-my-account
.woocommerce-order-details
.woocommerce-table__product-name
a:hover {
color: #0033cc !important;
}
/* ---------------------------------------------------------
Order detail — customer/address card
--------------------------------------------------------- */
.nactec-my-account
.woocommerce-customer-details {
margin-top: 0 !important;
}
.nactec-my-account
.woocommerce-customer-details
address {
box-sizing: border-box;
margin: 0 !important;
padding: 18px 20px !important;
background: #f7f7f9 !important;
border: 1px solid #e2e2e8 !important;
border-left: 4px solid #c75105 !important;
border-radius: 8px !important;
color: #4a4a4f !important;
font-style: normal !important;
line-height: 1.6 !important;
}
/* Phone / email rows inside customer details */
.nactec-my-account
.woocommerce-customer-details
.woocommerce-customer-details--phone,
.nactec-my-account
.woocommerce-customer-details
.woocommerce-customer-details--email {
margin: 8px 0 0 !important;
color: #4a4a4f !important;
}
/* ---------------------------------------------------------
Orders list — table polish
--------------------------------------------------------- */
.nactec-my-account
.woocommerce-orders-table {
background: #ffffff !important;
}
.nactec-my-account
.woocommerce-orders-table
th {
background: #f7f7f9 !important;
color: #1a1a1a !important;
font-weight: 600 !important;
}
.nactec-my-account
.woocommerce-orders-table
td {
vertical-align: middle !important;
}
.nactec-my-account
.woocommerce-orders-table
.woocommerce-orders-table__cell-order-actions {
text-align: right !important;
}
/* =========================================================
MY ACCOUNT — ORDERS RESPONSIVE
========================================================= */
@media (max-width: 767px) {
.nactec-my-account
.woocommerce-order-details__title,
.nactec-my-account
.woocommerce-customer-details
.woocommerce-column__title {
font-size: 20px !important;
}
.nactec-my-account
.woocommerce-customer-details
address {
padding: 16px !important;
}
}
/* =========================================================
MY ACCOUNT — GLOBAL BUTTON ICON RESET 1.0.17
========================================================= */
/*
* En Mi Cuenta no usamos los iconos animados que Divi agrega
* mediante ::before / ::after a los botones WooCommerce.
*
* Esta regla centraliza los fixes anteriores y cubre también:
* - Ingresar
* - Registrarme
* - Wordfence 2FA
* - Ver pedido
* - Guardar dirección
* - Guardar cambios
* - futuros botones WooCommerce dentro de Mi Cuenta
*/
.nactec-my-account
.woocommerce button.button::before,
.nactec-my-account
.woocommerce button.button::after,
.nactec-my-account
.woocommerce a.button::before,
.nactec-my-account
.woocommerce a.button::after,
.nactec-my-account
.woocommerce .woocommerce-button::before,
.nactec-my-account
.woocommerce .woocommerce-button::after {
content: none !important;
display: none !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
opacity: 0 !important;
}
/*
* Divi también suele modificar el padding al hacer hover para
* reservar espacio al icono. Lo mantenemos estable.
*/
.nactec-my-account
.woocommerce button.button,
.nactec-my-account
.woocommerce button.button:hover,
.nactec-my-account
.woocommerce a.button,
.nactec-my-account
.woocommerce a.button:hover,
.nactec-my-account
.woocommerce .woocommerce-button,
.nactec-my-account
.woocommerce .woocommerce-button:hover {
padding: 11px 18px !important;
}
/* =========================================================
NACTEC CART — 1.0.18
========================================================= */
/*
* Estructura Divi esperada:
*
* .nactec-cart-page
*
* .nactec-cart-header-row
* .nactec-cart-title
* .nactec-cart-notices
*
* .nactec-cart-main-row
* .nactec-cart-products-col
* .nactec-cart-products
*
* .nactec-cart-summary-col
* .nactec-cart-totals
*
* .nactec-cart-cross-sells-row
* .nactec-cart-cross-sells-title
* .nactec-cart-cross-sells
*/
/* =========================================================
CART — PAGE / ROWS
========================================================= */
.nactec-cart-page {
padding-top: 52px !important;
padding-bottom: 80px !important;
}
.nactec-cart-page
.nactec-cart-header-row,
.nactec-cart-page
.nactec-cart-main-row,
.nactec-cart-page
.nactec-cart-cross-sells-row {
width: 90% !important;
max-width: 1200px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.nactec-cart-header-row {
padding-top: 0 !important;
padding-bottom: 32px !important;
}
.nactec-cart-main-row {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.nactec-cart-cross-sells-row {
padding-top: 64px !important;
padding-bottom: 0 !important;
}
/* =========================================================
CART — TITLE
========================================================= */
.nactec-cart-title.nactec-section-title {
position: relative !important;
margin: 0 0 24px !important;
padding-left: 14px !important;
}
.nactec-cart-title.nactec-section-title
.et_pb_module_header,
.nactec-cart-title.nactec-section-title
h1 {
margin: 0 !important;
padding: 0 !important;
color: #1a1a1a !important;
font-size: 48px !important;
line-height: 1.12 !important;
font-weight: 700 !important;
}
.nactec-cart-title.nactec-section-title::before {
content: "" !important;
position: absolute !important;
top: 8px !important;
left: 0 !important;
width: 5px !important;
height: 38px !important;
transform: none !important;
display: block !important;
background: #c75105 !important;
border-radius: 999px !important;
}
/* =========================================================
CART — NOTICES
========================================================= */
.nactec-cart-notices {
margin: 0 !important;
}
.nactec-cart-notices
.woocommerce-notices-wrapper
> :last-child {
margin-bottom: 0 !important;
}
/*
* Divi mantiene el módulo aunque WooCommerce no tenga ningún
* aviso para mostrar. Lo retiramos del flujo en ese caso.
*/
.nactec-cart-notices:not(
:has(
.woocommerce-message,
.woocommerce-info,
.woocommerce-error
)
) {
display: none !important;
}
/* =========================================================
CART — MAIN LAYOUT
========================================================= */
.nactec-cart-products-col,
.nactec-cart-summary-col {
min-width: 0 !important;
}
.nactec-cart-summary-col {
align-self: flex-start !important;
}
/* Sticky solo en escritorio */
@media (min-width: 981px) {
.nactec-cart-summary-col {
position: sticky !important;
top: 132px !important;
z-index: 4;
}
}
/* =========================================================
CART — PRODUCTS TABLE
========================================================= */
.nactec-cart-products {
margin: 0 !important;
}
.nactec-cart-products
.woocommerce-cart-form {
margin: 0 !important;
}
.nactec-cart-products
table.shop_table.cart {
width: 100% !important;
margin: 0 !important;
border-collapse: separate !important;
border-spacing: 0 !important;
overflow: hidden;
background: #ffffff !important;
border: 1px solid #e2e2e8 !important;
border-radius: 12px !important;
box-shadow:
0 8px 24px rgba(26, 26, 26, 0.04) !important;
}
/* Cabecera */
.nactec-cart-products
table.shop_table.cart
thead th {
padding: 16px 14px !important;
background: #f7f7f9 !important;
border: 0 !important;
border-bottom: 1px solid #e2e2e8 !important;
color: #1a1a1a !important;
font-size: 14px !important;
line-height: 1.35 !important;
font-weight: 600 !important;
vertical-align: middle !important;
}
/* Celdas */
.nactec-cart-products
table.shop_table.cart
tbody td {
padding: 18px 14px !important;
background: #ffffff !important;
border: 0 !important;
border-bottom: 1px solid #ececf0 !important;
color: #4a4a4f !important;
font-size: 14px !important;
line-height: 1.45 !important;
vertical-align: middle !important;
}
.nactec-cart-products
table.shop_table.cart
tbody tr:last-child td {
border-bottom: 0 !important;
}
/* ---------------------------------------------------------
Remove
--------------------------------------------------------- */
.nactec-cart-products
.product-remove {
width: 42px !important;
padding-left: 12px !important;
padding-right: 4px !important;
text-align: center !important;
}
.nactec-cart-products
.product-remove
a.remove {
width: 30px !important;
height: 30px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
background: #f7f7f9 !important;
border: 1px solid #e2e2e8 !important;
border-radius: 999px !important;
color: #77777d !important;
font-size: 20px !important;
line-height: 1 !important;
font-weight: 400 !important;
text-decoration: none !important;
transition:
color 0.2s ease,
border-color 0.2s ease,
background-color 0.2s ease !important;
}
.nactec-cart-products
.product-remove
a.remove:hover {
background: #fff7f1 !important;
border-color: #c75105 !important;
color: #c75105 !important;
}
/* ---------------------------------------------------------
Thumbnail
--------------------------------------------------------- */
.nactec-cart-products
.product-thumbnail {
width: 96px !important;
text-align: center !important;
}
.nactec-cart-products
.product-thumbnail
a {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 72px !important;
height: 72px !important;
padding: 6px !important;
background: #ffffff !important;
border: 1px solid #ececf0 !important;
border-radius: 10px !important;
}
.nactec-cart-products
.product-thumbnail
img {
width: 100% !important;
max-width: 60px !important;
height: 60px !important;
margin: 0 !important;
object-fit: contain !important;
}
/* ---------------------------------------------------------
Product name
--------------------------------------------------------- */
.nactec-cart-products
.product-name {
min-width: 180px !important;
}
.nactec-cart-products
.product-name
a {
color: #1a1a1a !important;
font-size: 15px !important;
line-height: 1.4 !important;
font-weight: 600 !important;
text-decoration: none !important;
transition: color 0.2s ease !important;
}
.nactec-cart-products
.product-name
a:hover {
color: #0044ff !important;
}
/* Variaciones / meta */
.nactec-cart-products
.product-name
dl.variation {
margin: 7px 0 0 !important;
color: #77777d !important;
font-size: 12px !important;
line-height: 1.4 !important;
}
.nactec-cart-products
.product-name
dl.variation
dt,
.nactec-cart-products
.product-name
dl.variation
dd {
margin: 0 4px 0 0 !important;
padding: 0 !important;
color: #77777d !important;
font-size: 12px !important;
line-height: 1.4 !important;
}
.nactec-cart-products
.product-name
dl.variation
p {
margin: 0 !important;
padding: 0 !important;
}
/* ---------------------------------------------------------
Price / subtotal
--------------------------------------------------------- */
.nactec-cart-products
.product-price,
.nactec-cart-products
.product-subtotal {
white-space: nowrap !important;
}
.nactec-cart-products
.product-price
.woocommerce-Price-amount {
color: #4a4a4f !important;
font-weight: 500 !important;
}
.nactec-cart-products
.product-subtotal
.woocommerce-Price-amount {
color: #1a1a1a !important;
font-weight: 700 !important;
}
/* ---------------------------------------------------------
Quantity
--------------------------------------------------------- */
.nactec-cart-products
.product-quantity {
width: 96px !important;
}
.nactec-cart-products
.quantity {
display: inline-flex !important;
margin: 0 !important;
}
.nactec-cart-products
.quantity
input.qty {
width: 64px !important;
min-width: 64px !important;
height: 44px !important;
margin: 0 !important;
padding: 8px 6px !important;
background: #ffffff !important;
border: 1px solid #d8d8de !important;
border-radius: 8px !important;
box-shadow: none !important;
outline: none !important;
color: #1a1a1a !important;
font-size: 14px !important;
line-height: 1 !important;
font-weight: 500 !important;
text-align: center !important;
}
.nactec-cart-products
.quantity
input.qty:focus {
border-color: #0044ff !important;
box-shadow:
0 0 0 3px rgba(0, 68, 255, 0.10) !important;
}
/* =========================================================
CART — ACTIONS / COUPON
========================================================= */
.nactec-cart-products
table.shop_table.cart
td.actions {
padding: 14px !important;
background: #fafafd !important;
border-bottom: 0 !important;
}
.nactec-cart-products
td.actions
.coupon {
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
float: left !important;
}
.nactec-cart-products
td.actions
.coupon
.input-text {
width: 180px !important;
height: 48px !important;
margin: 0 !important;
padding: 0 14px !important;
background: #ffffff !important;
border: 1px solid #d8d8de !important;
border-radius: 8px !important;
box-shadow: none !important;
outline: none !important;
color: #1a1a1a !important;
font-size: 14px !important;
line-height: 1.2 !important;
}
.nactec-cart-products
td.actions
.coupon
.input-text:focus {
border-color: #0044ff !important;
box-shadow:
0 0 0 3px rgba(0, 68, 255, 0.10) !important;
}
.nactec-cart-products
td.actions
.coupon
.input-text::placeholder {
color: #96969c !important;
opacity: 1 !important;
}
/* =========================================================
CART — BUTTONS
========================================================= */
/*
* Quitamos el icono animado de Divi en todos los botones
* pertenecientes al carrito.
*/
.nactec-cart-page
.woocommerce
button.button::before,
.nactec-cart-page
.woocommerce
button.button::after,
.nactec-cart-page
.woocommerce
a.button::before,
.nactec-cart-page
.woocommerce
a.button::after,
.nactec-cart-page
.woocommerce
.checkout-button::before,
.nactec-cart-page
.woocommerce
.checkout-button::after {
content: none !important;
display: none !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
opacity: 0 !important;
}
/* Base */
.nactec-cart-page
.woocommerce
button.button,
.nactec-cart-page
.woocommerce
a.button {
min-height: 48px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
margin: 0 !important;
padding: 11px 18px !important;
border-radius: 8px !important;
font-size: 15px !important;
line-height: 1.2 !important;
font-weight: 600 !important;
text-decoration: none !important;
transition:
background-color 0.2s ease,
border-color 0.2s ease,
color 0.2s ease !important;
}
/* Cupón — secundario azul */
.nactec-cart-products
.coupon
button.button {
background: #ffffff !important;
border: 1px solid #0044ff !important;
color: #0044ff !important;
}
.nactec-cart-products
.coupon
button.button:hover {
background: #f4f7ff !important;
border-color: #0033cc !important;
color: #0033cc !important;
}
/* Actualizar carrito — neutral */
.nactec-cart-products
td.actions
> button.button {
float: right !important;
background: #ffffff !important;
border: 1px solid #b9b9c0 !important;
color: #4a4a4f !important;
}
.nactec-cart-products
td.actions
> button.button:hover:not(:disabled) {
background: #f7f7f9 !important;
border-color: #77777d !important;
color: #1a1a1a !important;
}
.nactec-cart-products
td.actions
> button.button:disabled,
.nactec-cart-products
td.actions
> button.button:disabled[disabled] {
background: #f4f4f6 !important;
border-color: #ddddE2 !important;
color: #a0a0a6 !important;
opacity: 1 !important;
cursor: not-allowed !important;
}
/* =========================================================
CART — TOTALS CARD
========================================================= */
.nactec-cart-totals {
margin: 0 !important;
}
.nactec-cart-totals
.cart_totals {
width: 100% !important;
box-sizing: border-box !important;
margin: 0 !important;
padding: 24px !important;
background: #ffffff !important;
border: 1px solid #e2e2e8 !important;
border-radius: 12px !important;
box-shadow:
0 10px 28px rgba(26, 26, 26, 0.06) !important;
}
.nactec-cart-totals
.cart_totals
> h2 {
position: relative;
margin: 0 0 20px !important;
padding: 0 0 0 12px !important;
color: #1a1a1a !important;
font-size: 24px !important;
line-height: 1.25 !important;
font-weight: 700 !important;
}
.nactec-cart-totals
.cart_totals
> h2::before {
content: "";
position: absolute;
top: 3px;
left: 0;
width: 4px;
height: 24px;
background: #c75105;
border-radius: 999px;
}
/* Tabla de totales */
.nactec-cart-totals
.cart_totals
table.shop_table {
width: 100% !important;
margin: 0 !important;
border: 0 !important;
border-collapse: collapse !important;
background: transparent !important;
}
.nactec-cart-totals
.cart_totals
table.shop_table
tr {
border-bottom: 1px solid #ececf0 !important;
}
.nactec-cart-totals
.cart_totals
table.shop_table
tr:last-child {
border-bottom: 0 !important;
}
.nactec-cart-totals
.cart_totals
table.shop_table
th,
.nactec-cart-totals
.cart_totals
table.shop_table
td {
padding: 14px 0 !important;
background: transparent !important;
border: 0 !important;
vertical-align: top !important;
}
.nactec-cart-totals
.cart_totals
table.shop_table
th {
width: 42% !important;
color: #4a4a4f !important;
font-size: 14px !important;
line-height: 1.45 !important;
font-weight: 600 !important;
text-align: left !important;
}
.nactec-cart-totals
.cart_totals
table.shop_table
td {
color: #1a1a1a !important;
font-size: 14px !important;
line-height: 1.45 !important;
text-align: right !important;
}
/* Envío */
.nactec-cart-totals
.woocommerce-shipping-methods {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.nactec-cart-totals
.woocommerce-shipping-methods
li {
margin: 0 0 8px !important;
padding: 0 !important;
}
.nactec-cart-totals
.woocommerce-shipping-methods
li:last-child {
margin-bottom: 0 !important;
}
.nactec-cart-totals
.woocommerce-shipping-destination {
margin: 8px 0 !important;
color: #77777d !important;
font-size: 12px !important;
line-height: 1.45 !important;
}
.nactec-cart-totals
.woocommerce-shipping-calculator {
margin-top: 8px !important;
}
.nactec-cart-totals
.shipping-calculator-button {
color: #0044ff !important;
font-size: 13px !important;
font-weight: 500 !important;
text-decoration: none !important;
}
.nactec-cart-totals
.shipping-calculator-button:hover {
color: #0033cc !important;
}
/* Total principal */
.nactec-cart-totals
.cart_totals
.order-total
th,
.nactec-cart-totals
.cart_totals
.order-total
td {
padding-top: 18px !important;
color: #1a1a1a !important;
font-size: 16px !important;
font-weight: 700 !important;
}
.nactec-cart-totals
.cart_totals
.order-total
.woocommerce-Price-amount {
color: #1a1a1a !important;
font-size: 20px !important;
font-weight: 700 !important;
}
/* Checkout */
.nactec-cart-totals
.wc-proceed-to-checkout {
margin: 22px 0 0 !important;
padding: 0 !important;
}
.nactec-cart-totals
.wc-proceed-to-checkout
.checkout-button {
width: 100% !important;
min-height: 52px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 13px 18px !important;
background: #0033cc !important;
border: 1px solid #0033cc !important;
border-radius: 8px !important;
color: #ffffff !important;
font-size: 16px !important;
line-height: 1.2 !important;
font-weight: 600 !important;
text-align: center !important;
}
.nactec-cart-totals
.wc-proceed-to-checkout
.checkout-button:hover {
background: #0044ff !important;
border-color: #0044ff !important;
color: #ffffff !important;
}
/* =========================================================
CART — EMPTY STATE
========================================================= */
.nactec-cart-page
.cart-empty.woocommerce-info {
margin-bottom: 18px !important;
}
.nactec-cart-page
.return-to-shop {
margin: 0 !important;
}
.nactec-cart-page
.return-to-shop
.button {
min-height: 48px !important;
padding: 12px 20px !important;
background: #0033cc !important;
border: 1px solid #0033cc !important;
color: #ffffff !important;
}
.nactec-cart-page
.return-to-shop
.button:hover {
background: #0044ff !important;
border-color: #0044ff !important;
color: #ffffff !important;
}
/* =========================================================
CART — CROSS SELLS
========================================================= */
/*
* La Row completa desaparece cuando WooCommerce no devuelve
* productos Cross Sell. Así el Heading manual no queda solo.
*/
.nactec-cart-cross-sells-row:not(
:has(
.nactec-cart-cross-sells
ul.products
li.product
)
) {
display: none !important;
}
.nactec-cart-cross-sells-title.nactec-section-title {
position: relative !important;
margin: 0 0 24px !important;
padding-left: 14px !important;
}
.nactec-cart-cross-sells-title.nactec-section-title
.et_pb_module_header,
.nactec-cart-cross-sells-title.nactec-section-title
h2 {
margin: 0 !important;
padding: 0 !important;
color: #1a1a1a !important;
font-size: 32px !important;
line-height: 1.2 !important;
font-weight: 700 !important;
}
.nactec-cart-cross-sells-title.nactec-section-title::before {
width: 4px !important;
height: 28px !important;
background: #c75105 !important;
}
/* Ocultamos el heading nativo del módulo, porque ya usamos
* nuestro Heading Divi.
*/
.nactec-cart-cross-sells
.cross-sells
> h2 {
display: none !important;
}
/* Grid */
.nactec-cart-cross-sells
ul.products {
display: grid !important;
grid-template-columns:
repeat(4, minmax(0, 1fr)) !important;
gap: 20px !important;
margin: 0 !important;
padding: 0 !important;
}
.nactec-cart-cross-sells
ul.products::before,
.nactec-cart-cross-sells
ul.products::after {
content: none !important;
display: none !important;
}
.nactec-cart-cross-sells
ul.products
li.product {
width: auto !important;
float: none !important;
box-sizing: border-box !important;
margin: 0 !important;
padding: 16px !important;
background: #ffffff !important;
border: 1px solid #e2e2e8 !important;
border-radius: 12px !important;
box-shadow:
0 6px 20px rgba(26, 26, 26, 0.04) !important;
transition:
transform 0.2s ease,
border-color 0.2s ease,
box-shadow 0.2s ease !important;
}
.nactec-cart-cross-sells
ul.products
li.product:hover {
transform: translateY(-2px);
border-color: #c8d4ff !important;
box-shadow:
0 10px 26px rgba(26, 26, 26, 0.08) !important;
}
.nactec-cart-cross-sells
ul.products
li.product
a
img {
width: 100% !important;
height: 170px !important;
margin: 0 0 14px !important;
object-fit: contain !important;
}
.nactec-cart-cross-sells
ul.products
li.product
.woocommerce-loop-product__title {
margin: 0 0 8px !important;
padding: 0 !important;
color: #1a1a1a !important;
font-size: 15px !important;
line-height: 1.4 !important;
font-weight: 600 !important;
}
.nactec-cart-cross-sells
ul.products
li.product
.price {
margin: 0 0 14px !important;
color: #1a1a1a !important;
font-size: 16px !important;
font-weight: 700 !important;
}
.nactec-cart-cross-sells
ul.products
li.product
.button {
width: 100% !important;
background: #0033cc !important;
border: 1px solid #0033cc !important;
color: #ffffff !important;
}
.nactec-cart-cross-sells
ul.products
li.product
.button:hover {
background: #0044ff !important;
border-color: #0044ff !important;
color: #ffffff !important;
}
/* =========================================================
CART — TABLET
========================================================= */
@media (max-width: 980px) {
.nactec-cart-page {
padding-top: 42px !important;
padding-bottom: 64px !important;
}
.nactec-cart-title.nactec-section-title
.et_pb_module_header,
.nactec-cart-title.nactec-section-title
h1 {
font-size: 40px !important;
}
.nactec-cart-title.nactec-section-title::before {
top: 6px !important;
width: 5px !important;
height: 32px !important;
}
/*
* En tablet hacemos explícito el apilado aunque la Row
* provenga de una estructura 2/3 + 1/3 de Divi.
*/
.nactec-cart-main-row {
display: flex !important;
flex-direction: column !important;
gap: 28px !important;
}
.nactec-cart-main-row
.nactec-cart-products-col,
.nactec-cart-main-row
.nactec-cart-summary-col {
width: 100% !important;
margin: 0 !important;
}
.nactec-cart-summary-col {
position: static !important;
}
.nactec-cart-totals
.cart_totals {
padding: 22px !important;
}
.nactec-cart-cross-sells
ul.products {
grid-template-columns:
repeat(2, minmax(0, 1fr)) !important;
}
}
/* =========================================================
CART — MOBILE
========================================================= */
@media (max-width: 767px) {
.nactec-cart-page {
padding-top: 32px !important;
padding-bottom: 48px !important;
}
.nactec-cart-header-row {
padding-bottom: 24px !important;
}
.nactec-cart-title.nactec-section-title {
margin-bottom: 18px !important;
}
.nactec-cart-title.nactec-section-title
.et_pb_module_header,
.nactec-cart-title.nactec-section-title
h1 {
font-size: 32px !important;
line-height: 1.15 !important;
}
.nactec-cart-title.nactec-section-title::before {
top: 4px !important;
width: 4px !important;
height: 28px !important;
}
/* -----------------------------------------------------
Responsive cart table
----------------------------------------------------- */
.nactec-cart-products
table.shop_table.cart {
border-radius: 10px !important;
}
.nactec-cart-products
table.shop_table.cart
tbody tr {
display: block !important;
padding: 16px !important;
background: #ffffff !important;
border-bottom: 1px solid #e2e2e8 !important;
}
.nactec-cart-products
table.shop_table.cart
tbody tr:last-child {
border-bottom: 0 !important;
}
.nactec-cart-products
table.shop_table.cart
tbody td {
box-sizing: border-box !important;
border-bottom: 0 !important;
}
/* El remove queda arriba a la derecha del producto */
.nactec-cart-products
.product-remove {
width: 100% !important;
padding: 0 0 8px !important;
text-align: right !important;
}
/* Imagen centrada y más grande */
.nactec-cart-products
.product-thumbnail {
width: 100% !important;
padding: 0 0 12px !important;
text-align: center !important;
}
.nactec-cart-products
.product-thumbnail
a {
width: 96px !important;
height: 96px !important;
}
.nactec-cart-products
.product-thumbnail
img {
max-width: 82px !important;
height: 82px !important;
}
.nactec-cart-products
.product-name {
min-width: 0 !important;
}
.nactec-cart-products
.product-name
a {
font-size: 15px !important;
}
/* Cantidad */
.nactec-cart-products
.product-quantity {
width: 100% !important;
}
/* -----------------------------------------------------
Actions
----------------------------------------------------- */
.nactec-cart-products
table.shop_table.cart
td.actions {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
padding: 14px !important;
}
.nactec-cart-products
td.actions
.coupon {
width: 100% !important;
display: grid !important;
grid-template-columns: 1fr !important;
gap: 10px !important;
float: none !important;
}
.nactec-cart-products
td.actions
.coupon
.input-text {
width: 100% !important;
}
.nactec-cart-products
td.actions
.coupon
button.button,
.nactec-cart-products
td.actions
> button.button {
width: 100% !important;
float: none !important;
}
/* -----------------------------------------------------
Totals
----------------------------------------------------- */
.nactec-cart-totals
.cart_totals {
padding: 18px !important;
}
.nactec-cart-totals
.cart_totals
> h2 {
font-size: 22px !important;
}
.nactec-cart-totals
.cart_totals
table.shop_table
th {
width: 38% !important;
}
/* -----------------------------------------------------
Cross sells
----------------------------------------------------- */
.nactec-cart-cross-sells-row {
padding-top: 48px !important;
}
.nactec-cart-cross-sells-title.nactec-section-title
.et_pb_module_header,
.nactec-cart-cross-sells-title.nactec-section-title
h2 {
font-size: 26px !important;
}
.nactec-cart-cross-sells
ul.products {
grid-template-columns:
1fr !important;
gap: 16px !important;
}
.nactec-cart-cross-sells
ul.products
li.product
a
img {
height: 200px !important;
}
}
/* =========================================================
NACTEC CART — POLISH 1.0.19
========================================================= */
/*
* Segunda pasada visual del carrito:
* - menor separación bajo el título
* - mejor proporción entre productos y resumen
* - imagen de producto más protagonista
* - barra de acciones inferior más integrada
*/
/* ---------------------------------------------------------
Menor espacio entre encabezado y contenido
--------------------------------------------------------- */
.nactec-cart-header-row {
padding-bottom: 22px !important;
}
/* ---------------------------------------------------------
Mejor proporción del layout principal en escritorio
--------------------------------------------------------- */
@media (min-width: 981px) {
.nactec-cart-main-row {
display: grid !important;
grid-template-columns:
minmax(0, 2.2fr)
minmax(300px, 0.95fr) !important;
gap: 32px !important;
align-items: start !important;
}
.nactec-cart-main-row
.nactec-cart-products-col,
.nactec-cart-main-row
.nactec-cart-summary-col {
width: auto !important;
margin: 0 !important;
float: none !important;
}
}
/* ---------------------------------------------------------
Imagen de producto con mayor presencia
--------------------------------------------------------- */
.nactec-cart-products
.product-thumbnail {
width: 112px !important;
}
.nactec-cart-products
.product-thumbnail
a {
width: 84px !important;
height: 84px !important;
padding: 7px !important;
}
.nactec-cart-products
.product-thumbnail
img {
max-width: 70px !important;
height: 70px !important;
}
/* ---------------------------------------------------------
Un poco más de aire en la fila del producto
--------------------------------------------------------- */
.nactec-cart-products
table.shop_table.cart
tbody td {
padding-top: 20px !important;
padding-bottom: 20px !important;
}
/* ---------------------------------------------------------
Barra inferior de acciones más integrada
--------------------------------------------------------- */
.nactec-cart-products
table.shop_table.cart
td.actions {
padding: 16px !important;
background: #f7f7f9 !important;
border-top: 0 !important;
}
.nactec-cart-products
td.actions
.coupon {
gap: 8px !important;
}
.nactec-cart-products
td.actions
.coupon
.input-text {
width: 190px !important;
background: #ffffff !important;
}
.nactec-cart-products
td.actions
.coupon
button.button,
.nactec-cart-products
td.actions
> button.button {
min-height: 48px !important;
}
/* Actualizar carrito: mismo lenguaje visual que el resto */
.nactec-cart-products
td.actions
> button.button {
background: #ffffff !important;
border-color: #c9c9cf !important;
color: #4a4a4f !important;
}
.nactec-cart-products
td.actions
> button.button:hover:not(:disabled) {
background: #f2f2f5 !important;
border-color: #9d9da4 !important;
}
.nactec-cart-products
td.actions
> button.button:disabled,
.nactec-cart-products
td.actions
> button.button:disabled[disabled] {
background: #f1f1f3 !important;
border-color: #ddddE2 !important;
color: #a4a4aa !important;
}
/* ---------------------------------------------------------
Resumen — pequeño ajuste de proporciones
--------------------------------------------------------- */
.nactec-cart-totals
.cart_totals {
padding: 24px 24px 22px !important;
}
.nactec-cart-totals
.cart_totals
> h2 {
margin-bottom: 18px !important;
}
.nactec-cart-totals
.wc-proceed-to-checkout {
margin-top: 20px !important;
}
/* ---------------------------------------------------------
Tablet y móvil
--------------------------------------------------------- */
@media (max-width: 980px) {
.nactec-cart-header-row {
padding-bottom: 20px !important;
}
}
@media (max-width: 767px) {
.nactec-cart-products
.product-thumbnail
a {
width: 104px !important;
height: 104px !important;
}
.nactec-cart-products
.product-thumbnail
img {
max-width: 88px !important;
height: 88px !important;
}
.nactec-cart-products
table.shop_table.cart
td.actions {
padding: 14px !important;
}
.nactec-cart-products
td.actions
.coupon
.input-text {
width: 100% !important;
}
}
/* =========================================================
NACTEC CART — MOBILE THUMBNAIL FIX 1.0.20
========================================================= */
/*
* WooCommerce oculta .product-thumbnail en tablas responsive.
* En NACTEC queremos mantener la imagen visible en mobile.
*/
@media (max-width: 767px) {
.nactec-cart-products
table.shop_table_responsive
tr
td.product-thumbnail,
.nactec-cart-products
table.shop_table.cart
tr
td.product-thumbnail,
.woocommerce
.nactec-cart-products
table.shop_table_responsive
tr
td.product-thumbnail,
.woocommerce-page
.nactec-cart-products
table.shop_table_responsive
tr
td.product-thumbnail {
display: flex !important;
width: 100% !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
padding: 4px 0 16px !important;
text-align: center !important;
}
/* WooCommerce genera etiquetas móviles vía ::before.
La miniatura no necesita ninguna. */
.nactec-cart-products
td.product-thumbnail::before {
content: none !important;
display: none !important;
}
.nactec-cart-products
.product-thumbnail
a {
display: flex !important;
width: 112px !important;
height: 112px !important;
align-items: center !important;
justify-content: center !important;
margin: 0 auto !important;
padding: 8px !important;
background: #ffffff !important;
border: 1px solid #ececf0 !important;
border-radius: 10px !important;
}
.nactec-cart-products
.product-thumbnail
img {
display: block !important;
width: 100% !important;
max-width: 94px !important;
height: 94px !important;
margin: 0 auto !important;
object-fit: contain !important;
}
}
/* =========================================================
NACTEC CART — MOBILE COMPACT PRODUCT CARD 1.0.21
========================================================= */
/*
* En mobile convertimos cada producto en una card compacta:
*
* [ imagen ] Nombre del producto
* Precio $...
* Cantidad [ 1 ]
* Subtotal $...
*
* El botón eliminar queda flotando arriba a la derecha.
*/
@media (max-width: 767px) {
/* -----------------------------------------------------
Card de producto
----------------------------------------------------- */
.nactec-cart-products
table.shop_table.cart
tbody
tr.woocommerce-cart-form__cart-item.cart_item {
position: relative !important;
display: grid !important;
grid-template-columns:
96px minmax(0, 1fr) !important;
grid-template-areas:
"thumb name"
"thumb price"
"thumb qty"
"thumb subtotal" !important;
column-gap: 16px !important;
row-gap: 10px !important;
align-items: start !important;
padding: 18px !important;
background: #ffffff !important;
border-bottom: 1px solid #e2e2e8 !important;
}
/* -----------------------------------------------------
Eliminar
----------------------------------------------------- */
.nactec-cart-products
table.shop_table.cart
tbody
tr.cart_item
td.product-remove {
position: absolute !important;
top: 12px !important;
right: 12px !important;
z-index: 3 !important;
width: 30px !important;
padding: 0 !important;
text-align: right !important;
}
.nactec-cart-products
table.shop_table.cart
tbody
tr.cart_item
td.product-remove::before {
content: none !important;
display: none !important;
}
/* -----------------------------------------------------
Imagen
----------------------------------------------------- */
.nactec-cart-products
table.shop_table.cart
tbody
tr.cart_item
td.product-thumbnail {
grid-area: thumb !important;
display: flex !important;
width: 96px !important;
align-items: flex-start !important;
justify-content: flex-start !important;
align-self: start !important;
padding: 2px 0 0 !important;
text-align: left !important;
}
.nactec-cart-products
table.shop_table.cart
tbody
tr.cart_item
td.product-thumbnail
a {
width: 88px !important;
height: 88px !important;
margin: 0 !important;
padding: 7px !important;
flex: 0 0 88px !important;
}
.nactec-cart-products
table.shop_table.cart
tbody
tr.cart_item
td.product-thumbnail
img {
width: 100% !important;
max-width: 74px !important;
height: 74px !important;
margin: 0 !important;
}
/* -----------------------------------------------------
Nombre
----------------------------------------------------- */
.nactec-cart-products
table.shop_table.cart
tbody
tr.cart_item
td.product-name {
grid-area: name !important;
display: block !important;
width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
padding: 2px 38px 2px 0 !important;
text-align: left !important;
}
/*
* En desktop "Producto" existe como encabezado.
* En mobile no hace falta repetir "Producto:" delante
* del nombre.
*/
.nactec-cart-products
table.shop_table.cart
tbody
tr.cart_item
td.product-name::before {
content: none !important;
display: none !important;
}
.nactec-cart-products
table.shop_table.cart
tbody
tr.cart_item
td.product-name
a {
display: inline !important;
font-size: 15px !important;
line-height: 1.4 !important;
font-weight: 600 !important;
text-align: left !important;
}
/* -----------------------------------------------------
Precio / cantidad / subtotal
----------------------------------------------------- */
.nactec-cart-products
table.shop_table.cart
tbody
tr.cart_item
td.product-price {
grid-area: price !important;
}
.nactec-cart-products
table.shop_table.cart
tbody
tr.cart_item
td.product-quantity {
grid-area: qty !important;
}
.nactec-cart-products
table.shop_table.cart
tbody
tr.cart_item
td.product-subtotal {
grid-area: subtotal !important;
}
.nactec-cart-products
table.shop_table.cart
tbody
tr.cart_item
td.product-price,
.nactec-cart-products
table.shop_table.cart
tbody
tr.cart_item
td.product-quantity,
.nactec-cart-products
table.shop_table.cart
tbody
tr.cart_item
td.product-subtotal {
display: flex !important;
width: 100% !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
box-sizing: border-box !important;
padding: 0 !important;
text-align: right !important;
}
/* Etiquetas WooCommerce mobile */
.nactec-cart-products
table.shop_table.cart
tbody
tr.cart_item
td.product-price::before,
.nactec-cart-products
table.shop_table.cart
tbody
tr.cart_item
td.product-quantity::before,
.nactec-cart-products
table.shop_table.cart
tbody
tr.cart_item
td.product-subtotal::before {
flex: 0 0 auto !important;
margin: 0 !important;
color: #4a4a4f !important;
font-size: 13px !important;
line-height: 1.35 !important;
font-weight: 600 !important;
text-align: left !important;
}
/* Cantidad más compacta dentro de la ficha */
.nactec-cart-products
table.shop_table.cart
tbody
tr.cart_item
td.product-quantity
.quantity {
margin-left: auto !important;
}
.nactec-cart-products
table.shop_table.cart
tbody
tr.cart_item
td.product-quantity
input.qty {
width: 58px !important;
min-width: 58px !important;
height: 42px !important;
}
/* Subtotal ligeramente más destacado */
.nactec-cart-products
table.shop_table.cart
tbody
tr.cart_item
td.product-subtotal {
padding-top: 2px !important;
}
/* -----------------------------------------------------
Acciones / cupón
----------------------------------------------------- */
.nactec-cart-products
table.shop_table.cart
tbody
tr:not(.cart_item)
td.actions {
margin: 0 !important;
}
}
/* =========================================================
NACTEC CART — VERY SMALL MOBILE
========================================================= */
@media (max-width: 420px) {
.nactec-cart-products
table.shop_table.cart
tbody
tr.woocommerce-cart-form__cart-item.cart_item {
grid-template-columns:
82px minmax(0, 1fr) !important;
column-gap: 12px !important;
padding: 14px !important;
}
.nactec-cart-products
table.shop_table.cart
tbody
tr.cart_item
td.product-thumbnail {
width: 82px !important;
}
.nactec-cart-products
table.shop_table.cart
tbody
tr.cart_item
td.product-thumbnail
a {
width: 76px !important;
height: 76px !important;
flex-basis: 76px !important;
}
.nactec-cart-products
table.shop_table.cart
tbody
tr.cart_item
td.product-thumbnail
img {
max-width: 62px !important;
height: 62px !important;
}
}
/* =========================================================
NACTEC CART — MOBILE ACTIONS EDGE FIX 1.0.22
========================================================= */
/*
* La fila de acciones (cupón / actualizar carrito) heredaba
* el padding general aplicado a las filas responsive.
* Eso generaba un marco blanco alrededor del fondo gris.
*
* Quitamos ese padding únicamente en la fila de acciones.
*/
@media (max-width: 767px) {
.nactec-cart-products
table.shop_table.cart
tbody
tr:not(.cart_item) {
display: block !important;
margin: 0 !important;
padding: 0 !important;
background: #f7f7f9 !important;
border-bottom: 0 !important;
}
.nactec-cart-products
table.shop_table.cart
tbody
tr:not(.cart_item)
td.actions {
display: flex !important;
width: 100% !important;
box-sizing: border-box !important;
margin: 0 !important;
padding: 18px 14px !important;
background: #f7f7f9 !important;
border: 0 !important;
border-radius: 0 0 10px 10px !important;
}
}
/* =========================================================
NACTEC CART — CHECKOUT BUTTON ICON FIX 1.0.23
========================================================= */
/*
* Divi puede volver a inyectar el icono animado del botón
* mediante pseudo-elementos y ajustar el padding al hacer hover.
* Lo anulamos de forma específica en el CTA de checkout.
*/
.nactec-cart-page
.nactec-cart-totals
.wc-proceed-to-checkout
a.checkout-button::before,
.nactec-cart-page
.nactec-cart-totals
.wc-proceed-to-checkout
a.checkout-button::after,
.nactec-cart-page
.nactec-cart-totals
.wc-proceed-to-checkout
a.checkout-button:hover::before,
.nactec-cart-page
.nactec-cart-totals
.wc-proceed-to-checkout
a.checkout-button:hover::after {
content: none !important;
display: none !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
opacity: 0 !important;
}
/*
* Evitamos que Divi modifique el ancho útil del botón
* al reservar espacio para el icono en hover.
*/
.nactec-cart-page
.nactec-cart-totals
.wc-proceed-to-checkout
a.checkout-button,
.nactec-cart-page
.nactec-cart-totals
.wc-proceed-to-checkout
a.checkout-button:hover {
padding: 13px 18px !important;
letter-spacing: normal !important;
}
/* =========================================================
NACTEC CART — TOP SPACING MATCH SHOP 1.0.24
========================================================= */
/*
* La Tienda utiliza 24px de padding superior en la Section
* que contiene su H1. Igualamos el Carrito para que ambos
* títulos arranquen a la misma distancia del header.
*/
.nactec-cart-page {
padding-top: 24px !important;
}
/* Mantener exactamente la misma separación en responsive. */
@media (max-width: 980px) {
.nactec-cart-page {
padding-top: 24px !important;
}
}
@media (max-width: 767px) {
.nactec-cart-page {
padding-top: 24px !important;
}
}
/* =========================================================
NACTEC CHECKOUT — 1.0.25
========================================================= */
/*
* Theme Builder esperado:
*
* .nactec-checkout-page
*
* .nactec-checkout-header-row
* .nactec-checkout-title
* .nactec-checkout-notices
*
* .nactec-checkout-main-row
* .nactec-checkout-form-col
* .nactec-checkout-billing
* .nactec-checkout-shipping
* .nactec-checkout-information
*
* .nactec-checkout-summary-col
* .nactec-checkout-details
* .nactec-checkout-payment
*/
/* =========================================================
CHECKOUT — PAGE / ROWS
========================================================= */
.nactec-checkout-page {
padding-top: 24px !important;
padding-bottom: 80px !important;
}
.nactec-checkout-page
.nactec-checkout-header-row,
.nactec-checkout-page
.nactec-checkout-main-row {
width: 90% !important;
max-width: 1200px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.nactec-checkout-header-row {
padding-top: 0 !important;
padding-bottom: 28px !important;
}
.nactec-checkout-main-row {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* =========================================================
CHECKOUT — TITLE
========================================================= */
.nactec-checkout-title.nactec-section-title {
position: relative !important;
margin: 0 0 24px !important;
padding-left: 14px !important;
}
.nactec-checkout-title.nactec-section-title
.et_pb_module_header,
.nactec-checkout-title.nactec-section-title
h1 {
margin: 0 !important;
padding: 0 !important;
color: #1a1a1a !important;
font-size: 48px !important;
line-height: 1.12 !important;
font-weight: 700 !important;
}
.nactec-checkout-title.nactec-section-title::before {
content: "" !important;
position: absolute !important;
top: 8px !important;
left: 0 !important;
display: block !important;
width: 5px !important;
height: 38px !important;
background: #c75105 !important;
border-radius: 999px !important;
}
/* =========================================================
CHECKOUT — NOTICES / COUPON / LOGIN
========================================================= */
.nactec-checkout-notices {
margin: 0 !important;
}
.nactec-checkout-notices
.woocommerce-notices-wrapper
> :last-child {
margin-bottom: 0 !important;
}
/* Formularios desplegables de cupón / login */
.woocommerce-checkout
form.checkout_coupon,
.woocommerce-checkout
form.woocommerce-form-login {
box-sizing: border-box !important;
margin: 14px 0 22px !important;
padding: 18px !important;
background: #ffffff !important;
border: 1px solid #e2e2e8 !important;
border-radius: 10px !important;
box-shadow: none !important;
}
.woocommerce-checkout
form.checkout_coupon {
display: flex !important;
flex-wrap: wrap !important;
align-items: flex-end !important;
gap: 10px !important;
}
.woocommerce-checkout
form.checkout_coupon
.form-row {
margin: 0 !important;
}
.woocommerce-checkout
form.checkout_coupon
.form-row-first {
flex: 1 1 240px !important;
width: auto !important;
}
.woocommerce-checkout
form.checkout_coupon
.form-row-last {
flex: 0 0 auto !important;
width: auto !important;
}
/* =========================================================
CHECKOUT — MAIN LAYOUT
========================================================= */
.nactec-checkout-main-row::before,
.nactec-checkout-main-row::after {
content: none !important;
display: none !important;
}
.nactec-checkout-main-row {
display: grid !important;
grid-template-columns:
minmax(0, 1.5fr)
minmax(340px, 1fr) !important;
gap: 32px !important;
align-items: start !important;
}
.nactec-checkout-form-col,
.nactec-checkout-summary-col {
width: auto !important;
min-width: 0 !important;
margin: 0 !important;
float: none !important;
}
.nactec-checkout-form-col {
display: flex !important;
flex-direction: column !important;
gap: 20px !important;
}
.nactec-checkout-summary-col {
display: flex !important;
flex-direction: column !important;
gap: 20px !important;
align-self: start !important;
}
/* Sticky del resumen solo en escritorio */
@media (min-width: 981px) {
.nactec-checkout-summary-col {
position: sticky !important;
top: 132px !important;
z-index: 4;
}
}
/* =========================================================
CHECKOUT — FORM CARDS
========================================================= */
.nactec-checkout-billing,
.nactec-checkout-shipping,
.nactec-checkout-information {
box-sizing: border-box !important;
margin: 0 !important;
padding: 24px !important;
background: #ffffff !important;
border: 1px solid #e2e2e8 !important;
border-radius: 12px !important;
box-shadow:
0 8px 24px rgba(26, 26, 26, 0.04) !important;
}
/* =========================================================
CHECKOUT — FORM TITLES
========================================================= */
.nactec-checkout-billing
h3,
.nactec-checkout-information
h3 {
position: relative !important;
margin: 0 0 20px !important;
padding: 0 0 0 12px !important;
color: #1a1a1a !important;
font-size: 22px !important;
line-height: 1.25 !important;
font-weight: 700 !important;
}
.nactec-checkout-billing
h3::before,
.nactec-checkout-information
h3::before {
content: "" !important;
position: absolute !important;
top: 2px !important;
left: 0 !important;
width: 4px !important;
height: 24px !important;
background: #c75105 !important;
border-radius: 999px !important;
}
/* Shipping title contains the checkbox/label */
.nactec-checkout-shipping
#ship-to-different-address {
margin: 0 !important;
padding: 0 !important;
}
.nactec-checkout-shipping
#ship-to-different-address
label {
display: flex !important;
align-items: center !important;
gap: 9px !important;
margin: 0 !important;
color: #1a1a1a !important;
font-size: 20px !important;
line-height: 1.3 !important;
font-weight: 700 !important;
cursor: pointer !important;
}
.nactec-checkout-shipping
#ship-to-different-address-checkbox {
width: 17px !important;
height: 17px !important;
margin: 0 !important;
accent-color: #0044ff !important;
}
/* Campos del shipping desplegado */
.nactec-checkout-shipping
.shipping_address {
margin-top: 20px !important;
}
/* =========================================================
CHECKOUT — FORM FIELDS
========================================================= */
.nactec-checkout-page
.woocommerce-billing-fields__field-wrapper,
.nactec-checkout-page
.woocommerce-shipping-fields__field-wrapper,
.nactec-checkout-page
.woocommerce-additional-fields__field-wrapper {
display: flow-root !important;
}
.nactec-checkout-page
.form-row {
box-sizing: border-box !important;
margin: 0 0 16px !important;
padding: 0 !important;
}
.nactec-checkout-page
.form-row:last-child {
margin-bottom: 0 !important;
}
.nactec-checkout-page
.form-row
label {
display: block !important;
margin: 0 0 7px !important;
color: #3f3f44 !important;
font-size: 14px !important;
line-height: 1.35 !important;
font-weight: 600 !important;
}
.nactec-checkout-page
.form-row
label
.optional {
color: #85858b !important;
font-size: 12px !important;
font-weight: 400 !important;
}
.nactec-checkout-page
.form-row
.required {
color: #c75105 !important;
}
.nactec-checkout-page
.woocommerce-input-wrapper {
display: block !important;
width: 100% !important;
}
/* Text inputs / native selects / textarea */
.nactec-checkout-page
.input-text,
.nactec-checkout-page
select,
.nactec-checkout-page
textarea {
width: 100% !important;
box-sizing: border-box !important;
margin: 0 !important;
background: #ffffff !important;
border: 1px solid #d8d8de !important;
border-radius: 8px !important;
box-shadow: none !important;
outline: none !important;
color: #1a1a1a !important;
font-family: inherit !important;
font-size: 14px !important;
line-height: 1.35 !important;
transition:
border-color 0.2s ease,
box-shadow 0.2s ease !important;
}
.nactec-checkout-page
input.input-text,
.nactec-checkout-page
select {
min-height: 48px !important;
padding: 0 14px !important;
}
.nactec-checkout-page
textarea {
min-height: 118px !important;
padding: 13px 14px !important;
resize: vertical !important;
}
.nactec-checkout-page
.input-text:focus,
.nactec-checkout-page
select:focus,
.nactec-checkout-page
textarea:focus {
border-color: #0044ff !important;
box-shadow:
0 0 0 3px rgba(0, 68, 255, 0.10) !important;
}
/* Placeholder */
.nactec-checkout-page
.input-text::placeholder,
.nactec-checkout-page
textarea::placeholder {
color: #96969c !important;
opacity: 1 !important;
}
/* Select2 */
.nactec-checkout-page
.select2-container {
width: 100% !important;
}
.nactec-checkout-page
.select2-container
.select2-selection--single {
height: 48px !important;
background: #ffffff !important;
border: 1px solid #d8d8de !important;
border-radius: 8px !important;
box-shadow: none !important;
}
.nactec-checkout-page
.select2-container
.select2-selection--single
.select2-selection__rendered {
padding-left: 14px !important;
padding-right: 38px !important;
color: #1a1a1a !important;
font-size: 14px !important;
line-height: 46px !important;
}
.nactec-checkout-page
.select2-container
.select2-selection--single
.select2-selection__arrow {
top: 10px !important;
right: 10px !important;
}
/* Validación */
.nactec-checkout-page
.woocommerce-invalid
.input-text,
.nactec-checkout-page
.woocommerce-invalid
select,
.nactec-checkout-page
.woocommerce-invalid
.select2-selection {
border-color: #c93a3a !important;
}
/* =========================================================
CHECKOUT — ORDER DETAILS CARD
========================================================= */
.nactec-checkout-details {
box-sizing: border-box !important;
margin: 0 !important;
padding: 24px !important;
background: #ffffff !important;
border: 1px solid #e2e2e8 !important;
border-radius: 12px !important;
box-shadow:
0 10px 28px rgba(26, 26, 26, 0.06) !important;
}
.nactec-checkout-details
h3,
.nactec-checkout-details
#order_review_heading {
position: relative !important;
margin: 0 0 18px !important;
padding: 0 0 0 12px !important;
color: #1a1a1a !important;
font-size: 24px !important;
line-height: 1.25 !important;
font-weight: 700 !important;
}
.nactec-checkout-details
h3::before,
.nactec-checkout-details
#order_review_heading::before {
content: "" !important;
position: absolute !important;
top: 3px !important;
left: 0 !important;
width: 4px !important;
height: 24px !important;
background: #c75105 !important;
border-radius: 999px !important;
}
/* Tabla del pedido */
.nactec-checkout-details
table.shop_table {
width: 100% !important;
margin: 0 !important;
border: 0 !important;
border-collapse: collapse !important;
background: transparent !important;
}
.nactec-checkout-details
table.shop_table
th,
.nactec-checkout-details
table.shop_table
td {
padding: 12px 0 !important;
background: transparent !important;
border: 0 !important;
border-bottom: 1px solid #ececf0 !important;
color: #4a4a4f !important;
font-size: 14px !important;
line-height: 1.45 !important;
vertical-align: top !important;
}
.nactec-checkout-details
table.shop_table
thead
th {
padding-top: 0 !important;
color: #1a1a1a !important;
font-weight: 600 !important;
}
.nactec-checkout-details
table.shop_table
th:last-child,
.nactec-checkout-details
table.shop_table
td:last-child {
text-align: right !important;
}
.nactec-checkout-details
table.shop_table
.product-name {
padding-right: 16px !important;
}
.nactec-checkout-details
table.shop_table
.product-quantity {
color: #77777d !important;
font-weight: 600 !important;
}
.nactec-checkout-details
table.shop_table
tfoot
th {
color: #1a1a1a !important;
font-weight: 600 !important;
}
.nactec-checkout-details
table.shop_table
tfoot
.order-total
th,
.nactec-checkout-details
table.shop_table
tfoot
.order-total
td {
padding-top: 16px !important;
padding-bottom: 0 !important;
border-bottom: 0 !important;
color: #1a1a1a !important;
font-size: 16px !important;
font-weight: 700 !important;
}
.nactec-checkout-details
table.shop_table
tfoot
.order-total
.woocommerce-Price-amount {
font-size: 19px !important;
font-weight: 700 !important;
}
/* Shipping methods */
.nactec-checkout-details
.woocommerce-shipping-methods {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.nactec-checkout-details
.woocommerce-shipping-methods
li {
margin: 0 0 8px !important;
padding: 0 !important;
}
.nactec-checkout-details
.woocommerce-shipping-methods
li:last-child {
margin-bottom: 0 !important;
}
/* =========================================================
CHECKOUT — PAYMENT CARD
========================================================= */
.nactec-checkout-payment {
box-sizing: border-box !important;
margin: 0 !important;
padding: 24px !important;
background: #ffffff !important;
border: 1px solid #e2e2e8 !important;
border-radius: 12px !important;
box-shadow:
0 10px 28px rgba(26, 26, 26, 0.06) !important;
}
/* WooCommerce payment container */
.nactec-checkout-payment
#payment {
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
}
.nactec-checkout-payment
#payment
ul.payment_methods {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
list-style: none !important;
}
.nactec-checkout-payment
#payment
ul.payment_methods
li {
margin: 0 !important;
padding: 0 !important;
}
.nactec-checkout-payment
#payment
ul.payment_methods
li
> label {
color: #1a1a1a !important;
font-size: 15px !important;
line-height: 1.4 !important;
font-weight: 600 !important;
}
.nactec-checkout-payment
#payment
input[type="radio"] {
accent-color: #0044ff !important;
}
/* Descripción del método */
.nactec-checkout-payment
#payment
div.payment_box {
box-sizing: border-box !important;
margin: 14px 0 0 !important;
padding: 14px 16px !important;
background: #f7f7f9 !important;
border: 1px solid #ececf0 !important;
border-left: 4px solid #c75105 !important;
border-radius: 8px !important;
color: #4a4a4f !important;
font-size: 13px !important;
line-height: 1.5 !important;
}
.nactec-checkout-payment
#payment
div.payment_box::before {
content: none !important;
display: none !important;
}
.nactec-checkout-payment
#payment
div.payment_box
p:last-child {
margin-bottom: 0 !important;
}
/* Place order */
.nactec-checkout-payment
#payment
.place-order {
margin: 22px 0 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
}
/* =========================================================
CHECKOUT — BUTTONS
========================================================= */
.nactec-checkout-page
.woocommerce
button.button::before,
.nactec-checkout-page
.woocommerce
button.button::after,
.nactec-checkout-page
.woocommerce
a.button::before,
.nactec-checkout-page
.woocommerce
a.button::after,
.nactec-checkout-page
#place_order::before,
.nactec-checkout-page
#place_order::after {
content: none !important;
display: none !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
opacity: 0 !important;
}
/* Base Woo buttons */
.nactec-checkout-page
.woocommerce
button.button,
.nactec-checkout-page
.woocommerce
a.button {
min-height: 48px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
margin: 0 !important;
padding: 11px 18px !important;
border-radius: 8px !important;
font-size: 15px !important;
line-height: 1.2 !important;
font-weight: 600 !important;
text-decoration: none !important;
}
/* Cupón / login secondary buttons */
.woocommerce-checkout
form.checkout_coupon
button.button,
.woocommerce-checkout
form.woocommerce-form-login
button.button {
background: #ffffff !important;
border: 1px solid #0044ff !important;
color: #0044ff !important;
}
.woocommerce-checkout
form.checkout_coupon
button.button:hover,
.woocommerce-checkout
form.woocommerce-form-login
button.button:hover {
background: #f4f7ff !important;
border-color: #0033cc !important;
color: #0033cc !important;
}
/* Primary CTA */
.nactec-checkout-payment
#place_order,
.nactec-checkout-payment
#place_order:hover {
width: 100% !important;
min-height: 52px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 13px 18px !important;
background: #0033cc !important;
border: 1px solid #0033cc !important;
border-radius: 8px !important;
color: #ffffff !important;
font-size: 16px !important;
line-height: 1.2 !important;
font-weight: 600 !important;
letter-spacing: normal !important;
text-align: center !important;
}
.nactec-checkout-payment
#place_order:hover {
background: #0044ff !important;
border-color: #0044ff !important;
}
/* =========================================================
CHECKOUT — PRIVACY / TERMS
========================================================= */
.nactec-checkout-payment
.woocommerce-privacy-policy-text,
.nactec-checkout-payment
.woocommerce-terms-and-conditions-wrapper {
color: #66666c !important;
font-size: 12px !important;
line-height: 1.5 !important;
}
.nactec-checkout-payment
.woocommerce-privacy-policy-text
a,
.nactec-checkout-payment
.woocommerce-terms-and-conditions-wrapper
a {
color: #0044ff !important;
text-decoration: none !important;
}
/* =========================================================
CHECKOUT — TABLET
========================================================= */
@media (max-width: 980px) {
.nactec-checkout-page {
padding-top: 24px !important;
padding-bottom: 64px !important;
}
.nactec-checkout-title.nactec-section-title
.et_pb_module_header,
.nactec-checkout-title.nactec-section-title
h1 {
font-size: 40px !important;
}
.nactec-checkout-title.nactec-section-title::before {
top: 6px !important;
height: 32px !important;
}
.nactec-checkout-main-row {
grid-template-columns: 1fr !important;
gap: 24px !important;
}
.nactec-checkout-summary-col {
position: static !important;
}
}
/* =========================================================
CHECKOUT — MOBILE
========================================================= */
@media (max-width: 767px) {
.nactec-checkout-page {
padding-top: 24px !important;
padding-bottom: 48px !important;
}
.nactec-checkout-header-row {
padding-bottom: 22px !important;
}
.nactec-checkout-title.nactec-section-title {
margin-bottom: 18px !important;
}
.nactec-checkout-title.nactec-section-title
.et_pb_module_header,
.nactec-checkout-title.nactec-section-title
h1 {
font-size: 32px !important;
line-height: 1.15 !important;
}
.nactec-checkout-title.nactec-section-title::before {
top: 4px !important;
width: 4px !important;
height: 28px !important;
}
.nactec-checkout-billing,
.nactec-checkout-shipping,
.nactec-checkout-information,
.nactec-checkout-details,
.nactec-checkout-payment {
padding: 18px !important;
border-radius: 10px !important;
}
/* Campos 50/50 pasan a ancho completo */
.nactec-checkout-page
.form-row-first,
.nactec-checkout-page
.form-row-last {
width: 100% !important;
float: none !important;
}
.nactec-checkout-billing
h3,
.nactec-checkout-information
h3 {
font-size: 20px !important;
}
.nactec-checkout-shipping
#ship-to-different-address
label {
font-size: 18px !important;
}
.nactec-checkout-details
h3,
.nactec-checkout-details
#order_review_heading {
font-size: 22px !important;
}
/* Coupon / login forms stack */
.woocommerce-checkout
form.checkout_coupon,
.woocommerce-checkout
form.woocommerce-form-login {
padding: 14px !important;
}
.woocommerce-checkout
form.checkout_coupon {
flex-direction: column !important;
align-items: stretch !important;
}
.woocommerce-checkout
form.checkout_coupon
.form-row-first,
.woocommerce-checkout
form.checkout_coupon
.form-row-last {
width: 100% !important;
flex: 1 1 auto !important;
}
.woocommerce-checkout
form.checkout_coupon
button.button,
.woocommerce-checkout
form.woocommerce-form-login
button.button {
width: 100% !important;
}
/* Order table */
.nactec-checkout-details
table.shop_table
th,
.nactec-checkout-details
table.shop_table
td {
font-size: 13px !important;
}
.nactec-checkout-details
table.shop_table
.product-name {
padding-right: 10px !important;
}
}
/* =========================================================
NACTEC CHECKOUT — POLISH 1.0.26
========================================================= */
/* ---------------------------------------------------------
H1 — accent bar alignment
--------------------------------------------------------- */
.nactec-checkout-title.nactec-section-title::before {
top: 50% !important;
height: 38px !important;
transform: translateY(-50%) !important;
}
/* ---------------------------------------------------------
Coupon form — compact layout
--------------------------------------------------------- */
.woocommerce-checkout
form.checkout_coupon {
display: grid !important;
grid-template-columns:
minmax(260px, 420px)
max-content !important;
justify-content: start !important;
align-items: center !important;
gap: 10px !important;
margin: 14px 0 22px !important;
padding: 16px 18px !important;
}
/* WooCommerce/Divi form rows should not force 50/50 widths here */
.woocommerce-checkout
form.checkout_coupon
.form-row,
.woocommerce-checkout
form.checkout_coupon
.form-row-first,
.woocommerce-checkout
form.checkout_coupon
.form-row-last {
width: auto !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
}
/* Coupon input */
.woocommerce-checkout
form.checkout_coupon
.input-text,
.woocommerce-checkout
form.checkout_coupon
input[name="coupon_code"] {
width: 100% !important;
max-width: 420px !important;
height: 48px !important;
box-sizing: border-box !important;
margin: 0 !important;
padding: 0 14px !important;
background: #ffffff !important;
border: 1px solid #d8d8de !important;
border-radius: 8px !important;
box-shadow: none !important;
outline: none !important;
color: #1a1a1a !important;
font-size: 14px !important;
line-height: 1.2 !important;
font-weight: 400 !important;
}
.woocommerce-checkout
form.checkout_coupon
.input-text:focus,
.woocommerce-checkout
form.checkout_coupon
input[name="coupon_code"]:focus {
border-color: #0044ff !important;
box-shadow:
0 0 0 3px rgba(0, 68, 255, 0.10) !important;
}
/* ---------------------------------------------------------
Coupon button — NACTEC secondary button
--------------------------------------------------------- */
.woocommerce-checkout
form.checkout_coupon
button.button,
.woocommerce-checkout
form.checkout_coupon
button[name="apply_coupon"] {
min-width: 138px !important;
min-height: 48px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
margin: 0 !important;
padding: 11px 18px !important;
background: #ffffff !important;
border: 1px solid #0044ff !important;
border-radius: 8px !important;
color: #0044ff !important;
font-size: 15px !important;
line-height: 1.2 !important;
font-weight: 600 !important;
letter-spacing: normal !important;
text-decoration: none !important;
transition:
background-color 0.2s ease,
border-color 0.2s ease,
color 0.2s ease !important;
}
.woocommerce-checkout
form.checkout_coupon
button.button:hover,
.woocommerce-checkout
form.checkout_coupon
button[name="apply_coupon"]:hover {
padding: 11px 18px !important;
background: #f4f7ff !important;
border-color: #0033cc !important;
color: #0033cc !important;
letter-spacing: normal !important;
}
/* Remove Divi animated icon in every state */
.woocommerce-checkout
form.checkout_coupon
button.button::before,
.woocommerce-checkout
form.checkout_coupon
button.button::after,
.woocommerce-checkout
form.checkout_coupon
button.button:hover::before,
.woocommerce-checkout
form.checkout_coupon
button.button:hover::after,
.woocommerce-checkout
form.checkout_coupon
button[name="apply_coupon"]::before,
.woocommerce-checkout
form.checkout_coupon
button[name="apply_coupon"]::after,
.woocommerce-checkout
form.checkout_coupon
button[name="apply_coupon"]:hover::before,
.woocommerce-checkout
form.checkout_coupon
button[name="apply_coupon"]:hover::after {
content: none !important;
display: none !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
opacity: 0 !important;
}
/* =========================================================
CHECKOUT — MOBILE COUPON
========================================================= */
@media (max-width: 767px) {
.nactec-checkout-title.nactec-section-title::before {
height: 28px !important;
}
.woocommerce-checkout
form.checkout_coupon {
grid-template-columns: 1fr !important;
gap: 10px !important;
padding: 14px !important;
}
.woocommerce-checkout
form.checkout_coupon
.input-text,
.woocommerce-checkout
form.checkout_coupon
input[name="coupon_code"],
.woocommerce-checkout
form.checkout_coupon
button.button,
.woocommerce-checkout
form.checkout_coupon
button[name="apply_coupon"] {
width: 100% !important;
max-width: none !important;
}
}
/* =========================================================
NACTEC CHECKOUT — COUPON WIDTH FIX 1.0.27
========================================================= */
/*
* El formulario de cupón es dinámico y vive dentro de Woo Notice.
* Limitamos el ancho del formulario completo, no solo del input,
* para evitar el contenedor vacío ocupando toda la Row.
*/
.woocommerce-checkout
form.checkout_coupon {
width: fit-content !important;
max-width: 560px !important;
grid-template-columns:
320px max-content !important;
margin-right: auto !important;
}
/* Input algo más compacto */
.woocommerce-checkout
form.checkout_coupon
.input-text,
.woocommerce-checkout
form.checkout_coupon
input[name="coupon_code"] {
width: 320px !important;
max-width: 320px !important;
}
/* =========================================================
CHECKOUT — MOBILE COUPON WIDTH
========================================================= */
@media (max-width: 767px) {
.woocommerce-checkout
form.checkout_coupon {
width: 100% !important;
max-width: none !important;
grid-template-columns: 1fr !important;
margin-right: 0 !important;
}
.woocommerce-checkout
form.checkout_coupon
.input-text,
.woocommerce-checkout
form.checkout_coupon
input[name="coupon_code"] {
width: 100% !important;
max-width: none !important;
}
}
/* =========================================================
NACTEC CHECKOUT — COUPON NOTICE WIDTH 1.0.28
========================================================= */
/*
* Limitamos únicamente el aviso "¿Tenés un cupón...?".
* El aviso/login de usuario deslogueado conserva el ancho
* completo de la Row.
*/
.woocommerce-checkout
.woocommerce-form-coupon-toggle {
width: fit-content !important;
max-width: 560px !important;
margin-right: auto !important;
}
.woocommerce-checkout
.woocommerce-form-coupon-toggle
.woocommerce-info {
width: fit-content !important;
max-width: 560px !important;
box-sizing: border-box !important;
margin-right: 0 !important;
}
/* =========================================================
CHECKOUT — MOBILE COUPON NOTICE
========================================================= */
@media (max-width: 767px) {
.woocommerce-checkout
.woocommerce-form-coupon-toggle,
.woocommerce-checkout
.woocommerce-form-coupon-toggle
.woocommerce-info {
width: 100% !important;
max-width: none !important;
}
}
/* =========================================================
NACTEC CHECKOUT — COUPON ALIGNMENT 1.0.29
========================================================= */
/*
* Aviso y formulario de cupón comparten exactamente
* el mismo ancho y el mismo borde izquierdo.
*/
.woocommerce-checkout
.woocommerce-form-coupon-toggle,
.woocommerce-checkout
form.checkout_coupon {
width: 520px !important;
max-width: 100% !important;
box-sizing: border-box !important;
margin-left: 0 !important;
margin-right: auto !important;
}
/* El aviso interior ocupa todo el ancho del contenedor. */
.woocommerce-checkout
.woocommerce-form-coupon-toggle
.woocommerce-info {
width: 100% !important;
max-width: none !important;
box-sizing: border-box !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/*
* El formulario ya se muestra de forma permanente,
* por lo que el enlace de toggle dejó de ser necesario.
*/
.woocommerce-checkout
.woocommerce-form-coupon-toggle
.showcoupon {
display: none !important;
}
/* Mantener una separación limpia tras ocultar el enlace. */
.woocommerce-checkout
.woocommerce-form-coupon-toggle
.woocommerce-info {
white-space: normal !important;
}
/* =========================================================
CHECKOUT — MOBILE COUPON ALIGNMENT
========================================================= */
@media (max-width: 767px) {
.woocommerce-checkout
.woocommerce-form-coupon-toggle,
.woocommerce-checkout
form.checkout_coupon {
width: 100% !important;
max-width: none !important;
}
}
/* =========================================================
NACTEC CHECKOUT — COUPON BUTTON ALIGNMENT 1.0.30
========================================================= */
/*
* Cuando WooCommerce muestra un mensaje debajo del input,
* la primera columna crece en altura.
*
* Alineamos ambas columnas por arriba para que el botón
* permanezca siempre a la misma altura que el input.
*/
.woocommerce-checkout
form.checkout_coupon {
align-items: start !important;
}
/* La columna del botón queda siempre pegada arriba. */
.woocommerce-checkout
form.checkout_coupon
.form-row-last {
align-self: start !important;
}
/* Evitamos cualquier margen añadido por WooCommerce/Divi. */
.woocommerce-checkout
form.checkout_coupon
.form-row-last
button.button,
.woocommerce-checkout
form.checkout_coupon
.form-row-last
button[name="apply_coupon"] {
margin-top: 0 !important;
align-self: start !important;
}
/* =========================================================
CHECKOUT — MOBILE COUPON ALIGNMENT
========================================================= */
@media (max-width: 767px) {
.woocommerce-checkout
form.checkout_coupon {
align-items: stretch !important;
}
.woocommerce-checkout
form.checkout_coupon
.form-row-last {
align-self: stretch !important;
}
}
/* =========================================================
NACTEC CHECKOUT — LOGIN POLISH 1.0.31
========================================================= */
/* ---------------------------------------------------------
Login notice — same width as coupon notice
--------------------------------------------------------- */
.woocommerce-checkout
.woocommerce-form-login-toggle {
width: 520px !important;
max-width: 100% !important;
box-sizing: border-box !important;
margin-left: 0 !important;
margin-right: auto !important;
}
.woocommerce-checkout
.woocommerce-form-login-toggle
.woocommerce-info {
width: 100% !important;
max-width: none !important;
box-sizing: border-box !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* ---------------------------------------------------------
Login form — keep full row width
--------------------------------------------------------- */
.woocommerce-checkout
form.woocommerce-form-login {
width: 100% !important;
max-width: none !important;
box-sizing: border-box !important;
margin: 14px 0 22px !important;
padding: 18px !important;
background: #ffffff !important;
border: 1px solid #e2e2e8 !important;
border-radius: 10px !important;
box-shadow: none !important;
}
/* Intro text */
.woocommerce-checkout
form.woocommerce-form-login
> p:first-child {
margin: 0 0 18px !important;
color: #4a4a4f !important;
font-size: 14px !important;
line-height: 1.5 !important;
}
/* Labels */
.woocommerce-checkout
form.woocommerce-form-login
label {
color: #3f3f44 !important;
font-size: 14px !important;
line-height: 1.35 !important;
font-weight: 600 !important;
}
/* Login inputs */
.woocommerce-checkout
form.woocommerce-form-login
input.input-text {
width: 100% !important;
min-height: 48px !important;
box-sizing: border-box !important;
margin: 0 !important;
padding: 0 14px !important;
background: #ffffff !important;
border: 1px solid #d8d8de !important;
border-radius: 8px !important;
box-shadow: none !important;
outline: none !important;
color: #1a1a1a !important;
font-size: 14px !important;
line-height: 1.2 !important;
}
.woocommerce-checkout
form.woocommerce-form-login
input.input-text:focus {
border-color: #0044ff !important;
box-shadow:
0 0 0 3px rgba(0, 68, 255, 0.10) !important;
}
/* ---------------------------------------------------------
Login button — NACTEC primary
--------------------------------------------------------- */
.woocommerce-checkout
form.woocommerce-form-login
button.woocommerce-form-login__submit,
.woocommerce-checkout
form.woocommerce-form-login
button.woocommerce-button.button {
min-width: 150px !important;
min-height: 48px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
margin: 0 12px 0 0 !important;
padding: 11px 18px !important;
background: #0033cc !important;
border: 1px solid #0033cc !important;
border-radius: 8px !important;
color: #ffffff !important;
font-size: 15px !important;
line-height: 1.2 !important;
font-weight: 600 !important;
letter-spacing: normal !important;
text-decoration: none !important;
}
.woocommerce-checkout
form.woocommerce-form-login
button.woocommerce-form-login__submit:hover,
.woocommerce-checkout
form.woocommerce-form-login
button.woocommerce-button.button:hover {
padding: 11px 18px !important;
background: #0044ff !important;
border-color: #0044ff !important;
color: #ffffff !important;
letter-spacing: normal !important;
}
/* Remove Divi animated icon from login button */
.woocommerce-checkout
form.woocommerce-form-login
button.woocommerce-form-login__submit::before,
.woocommerce-checkout
form.woocommerce-form-login
button.woocommerce-form-login__submit::after,
.woocommerce-checkout
form.woocommerce-form-login
button.woocommerce-form-login__submit:hover::before,
.woocommerce-checkout
form.woocommerce-form-login
button.woocommerce-form-login__submit:hover::after,
.woocommerce-checkout
form.woocommerce-form-login
button.woocommerce-button.button::before,
.woocommerce-checkout
form.woocommerce-form-login
button.woocommerce-button.button::after,
.woocommerce-checkout
form.woocommerce-form-login
button.woocommerce-button.button:hover::before,
.woocommerce-checkout
form.woocommerce-form-login
button.woocommerce-button.button:hover::after {
content: none !important;
display: none !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
opacity: 0 !important;
}
/* ---------------------------------------------------------
Remember me / lost password
--------------------------------------------------------- */
.woocommerce-checkout
form.woocommerce-form-login
.woocommerce-form-login__rememberme {
display: inline-flex !important;
align-items: center !important;
gap: 7px !important;
margin: 0 !important;
color: #4a4a4f !important;
font-size: 14px !important;
font-weight: 400 !important;
cursor: pointer !important;
}
.woocommerce-checkout
form.woocommerce-form-login
.woocommerce-form-login__rememberme
input[type="checkbox"] {
width: 16px !important;
height: 16px !important;
margin: 0 !important;
accent-color: #0044ff !important;
}
.woocommerce-checkout
form.woocommerce-form-login
.lost_password {
margin: 18px 0 0 !important;
}
.woocommerce-checkout
form.woocommerce-form-login
.lost_password
a {
color: #0044ff !important;
font-size: 14px !important;
font-weight: 500 !important;
text-decoration: none !important;
}
.woocommerce-checkout
form.woocommerce-form-login
.lost_password
a:hover {
color: #0033cc !important;
}
/* =========================================================
CHECKOUT — LOGIN MOBILE
========================================================= */
@media (max-width: 767px) {
.woocommerce-checkout
.woocommerce-form-login-toggle {
width: 100% !important;
max-width: none !important;
}
.woocommerce-checkout
form.woocommerce-form-login {
padding: 14px !important;
}
.woocommerce-checkout
form.woocommerce-form-login
.form-row-first,
.woocommerce-checkout
form.woocommerce-form-login
.form-row-last {
width: 100% !important;
float: none !important;
}
.woocommerce-checkout
form.woocommerce-form-login
button.woocommerce-form-login__submit,
.woocommerce-checkout
form.woocommerce-form-login
button.woocommerce-button.button {
width: 100% !important;
margin-right: 0 !important;
margin-bottom: 12px !important;
}
}
/* =========================================================
NACTEC — SAFE RECOVERY 1.0.33
=========================================================
Base estable previa al styling de la ficha individual.
Se excluye deliberadamente el bloque Product Page 1.0.32
para evitar colisiones con las cards del catálogo.
========================================================= */
/* =========================================================
NACTEC SINGLE PRODUCT — 1.0.34
========================================================= */
/*
* IMPORTANTE:
* Todo el styling de la ficha individual queda encapsulado
* bajo clases nactec-single-product-* para no interferir con
* las cards de Tienda, categorías, búsqueda o relacionados.
*/
/* =========================================================
SINGLE PRODUCT — SECTIONS / ROWS
========================================================= */
.nactec-single-product-page,
.nactec-single-product-info-section,
.nactec-single-product-related-section {
padding-top: 24px !important;
padding-bottom: 0 !important;
}
.nactec-single-product-info-section {
padding-top: 48px !important;
}
.nactec-single-product-related-section {
padding-top: 56px !important;
padding-bottom: 72px !important;
}
.nactec-single-product-breadcrumb-row,
.nactec-single-product-main-row,
.nactec-single-product-info-row,
.nactec-single-product-related-row {
width: 90% !important;
max-width: 1200px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* =========================================================
SINGLE PRODUCT — BREADCRUMBS
========================================================= */
.nactec-single-product-breadcrumb-row {
padding-top: 0 !important;
padding-bottom: 26px !important;
}
.nactec-single-product-breadcrumbs {
margin: 0 !important;
}
.nactec-single-product-breadcrumbs,
.nactec-single-product-breadcrumbs a {
color: #77777d !important;
font-size: 14px !important;
line-height: 1.45 !important;
text-decoration: none !important;
}
.nactec-single-product-breadcrumbs a:hover {
color: #0044ff !important;
}
/* =========================================================
SINGLE PRODUCT — MAIN LAYOUT
========================================================= */
.nactec-single-product-main-row::before,
.nactec-single-product-main-row::after {
content: none !important;
display: none !important;
}
.nactec-single-product-main-row {
display: grid !important;
grid-template-columns:
minmax(0, 0.95fr)
minmax(0, 1.15fr) !important;
gap: 56px !important;
align-items: start !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.nactec-single-product-gallery-col,
.nactec-single-product-summary-col {
width: auto !important;
min-width: 0 !important;
margin: 0 !important;
float: none !important;
}
.nactec-single-product-summary-col {
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
}
/* =========================================================
SINGLE PRODUCT — GALLERY
========================================================= */
.nactec-single-product-images {
margin: 0 !important;
}
.nactec-single-product-images
.woocommerce-product-gallery {
width: 100% !important;
margin: 0 !important;
}
.nactec-single-product-images
.woocommerce-product-gallery__wrapper {
margin: 0 !important;
}
.nactec-single-product-images
.woocommerce-product-gallery__image {
overflow: hidden !important;
background: #ffffff !important;
border: 1px solid #ececf0 !important;
border-radius: 12px !important;
}
.nactec-single-product-images
.woocommerce-product-gallery__image
a {
display: block !important;
}
.nactec-single-product-images
.woocommerce-product-gallery__image
img {
width: 100% !important;
height: auto !important;
display: block !important;
object-fit: contain !important;
}
/* Sale badge */
.nactec-single-product-images
.onsale {
top: 14px !important;
left: 14px !important;
right: auto !important;
min-width: auto !important;
min-height: auto !important;
padding: 7px 12px !important;
background: #c75105 !important;
border-radius: 7px !important;
color: #ffffff !important;
font-size: 14px !important;
line-height: 1.2 !important;
font-weight: 600 !important;
}
/* Gallery thumbnails */
.nactec-single-product-images
.flex-control-thumbs {
display: grid !important;
grid-template-columns:
repeat(5, minmax(0, 1fr)) !important;
gap: 10px !important;
margin: 12px 0 0 !important;
padding: 0 !important;
list-style: none !important;
}
.nactec-single-product-images
.flex-control-thumbs
li {
width: auto !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
}
.nactec-single-product-images
.flex-control-thumbs
img {
width: 100% !important;
height: 82px !important;
padding: 5px !important;
object-fit: contain !important;
background: #ffffff !important;
border: 1px solid #ececf0 !important;
border-radius: 8px !important;
opacity: 0.72 !important;
cursor: pointer !important;
transition:
opacity 0.2s ease,
border-color 0.2s ease,
box-shadow 0.2s ease !important;
}
.nactec-single-product-images
.flex-control-thumbs
img:hover,
.nactec-single-product-images
.flex-control-thumbs
img.flex-active {
opacity: 1 !important;
border-color: #0044ff !important;
box-shadow:
0 0 0 2px rgba(0, 68, 255, 0.08) !important;
}
/* Zoom trigger */
.nactec-single-product-images
.woocommerce-product-gallery__trigger {
top: 14px !important;
right: 14px !important;
width: 38px !important;
height: 38px !important;
background: #ffffff !important;
border: 1px solid #e2e2e8 !important;
border-radius: 999px !important;
box-shadow:
0 4px 14px rgba(26, 26, 26, 0.06) !important;
}
/* =========================================================
SINGLE PRODUCT — BRAND
========================================================= */
.nactec-single-product-brand {
margin: 0 0 8px !important;
color: #0044ff !important;
font-size: 12px !important;
line-height: 1.3 !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.04em !important;
}
.nactec-single-product-brand
p {
margin: 0 !important;
padding: 0 !important;
}
.nactec-single-product-brand
a {
color: #0044ff !important;
text-decoration: none !important;
}
.nactec-single-product-brand
a:hover {
color: #0033cc !important;
}
/* =========================================================
SINGLE PRODUCT — TITLE
========================================================= */
.nactec-single-product-title {
position: relative !important;
margin: 0 0 14px !important;
padding-left: 14px !important;
}
.nactec-single-product-title
.product_title,
.nactec-single-product-title
h1 {
margin: 0 !important;
padding: 0 !important;
color: #1a1a1a !important;
font-size: 40px !important;
line-height: 1.12 !important;
font-weight: 700 !important;
}
.nactec-single-product-title::before {
content: "" !important;
position: absolute !important;
top: 5px !important;
left: 0 !important;
width: 5px !important;
height: 36px !important;
background: #c75105 !important;
border-radius: 999px !important;
}
/* =========================================================
SINGLE PRODUCT — RATING
========================================================= */
.nactec-single-product-rating {
margin: 0 0 16px !important;
}
.nactec-single-product-rating:empty {
display: none !important;
}
.nactec-single-product-rating
.star-rating {
color: #c75105 !important;
}
.nactec-single-product-rating
.woocommerce-review-link {
margin-left: 10px !important;
color: #77777d !important;
font-size: 13px !important;
text-decoration: none !important;
}
.nactec-single-product-rating
.woocommerce-review-link:hover {
color: #0044ff !important;
}
/* =========================================================
SINGLE PRODUCT — PRICE
========================================================= */
.nactec-single-product-price {
margin: 0 0 22px !important;
}
.nactec-single-product-price
.price {
margin: 0 !important;
color: #c75105 !important;
font-size: 28px !important;
line-height: 1.2 !important;
font-weight: 700 !important;
}
.nactec-single-product-price
.price
del {
margin-right: 8px !important;
color: #99999f !important;
font-size: 15px !important;
font-weight: 400 !important;
opacity: 1 !important;
}
.nactec-single-product-price
.price
ins {
color: #c75105 !important;
text-decoration: none !important;
}
/* =========================================================
SINGLE PRODUCT — SHORT DESCRIPTION
========================================================= */
.nactec-single-product-short-description {
margin: 0 0 24px !important;
color: #4a4a4f !important;
font-size: 15px !important;
line-height: 1.65 !important;
}
.nactec-single-product-short-description
p:last-child {
margin-bottom: 0 !important;
}
/* =========================================================
SINGLE PRODUCT — ADD TO CART
========================================================= */
.nactec-single-product-add-to-cart {
margin: 0 0 22px !important;
}
.nactec-single-product-add-to-cart
.stock {
margin: 0 0 10px !important;
color: #5d7a00 !important;
font-size: 13px !important;
line-height: 1.4 !important;
font-weight: 600 !important;
}
.nactec-single-product-add-to-cart
.out-of-stock {
color: #b33a3a !important;
}
.nactec-single-product-add-to-cart
form.cart {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 10px !important;
margin: 0 !important;
}
.nactec-single-product-add-to-cart
.quantity {
margin: 0 !important;
}
.nactec-single-product-add-to-cart
.quantity
input.qty {
width: 68px !important;
min-width: 68px !important;
height: 50px !important;
margin: 0 !important;
padding: 8px !important;
background: #ffffff !important;
border: 1px solid #d8d8de !important;
border-radius: 8px !important;
box-shadow: none !important;
outline: none !important;
color: #1a1a1a !important;
font-size: 15px !important;
font-weight: 500 !important;
text-align: center !important;
}
.nactec-single-product-add-to-cart
.quantity
input.qty:focus {
border-color: #0044ff !important;
box-shadow:
0 0 0 3px rgba(0, 68, 255, 0.10) !important;
}
/* Primary CTA */
.nactec-single-product-add-to-cart
.single_add_to_cart_button {
min-height: 50px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 12px 22px !important;
background: #0033cc !important;
border: 1px solid #0033cc !important;
border-radius: 8px !important;
color: #ffffff !important;
font-size: 16px !important;
line-height: 1.2 !important;
font-weight: 600 !important;
letter-spacing: normal !important;
text-decoration: none !important;
}
.nactec-single-product-add-to-cart
.single_add_to_cart_button:hover {
padding: 12px 22px !important;
background: #0044ff !important;
border-color: #0044ff !important;
color: #ffffff !important;
letter-spacing: normal !important;
}
/* Remove Divi animated icon */
.nactec-single-product-add-to-cart
.single_add_to_cart_button::before,
.nactec-single-product-add-to-cart
.single_add_to_cart_button::after,
.nactec-single-product-add-to-cart
.single_add_to_cart_button:hover::before,
.nactec-single-product-add-to-cart
.single_add_to_cart_button:hover::after {
content: none !important;
display: none !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
opacity: 0 !important;
}
/* =========================================================
SINGLE PRODUCT — META
========================================================= */
.nactec-single-product-meta {
margin: 0 !important;
padding-top: 16px !important;
border-top: 1px solid #e2e2e8 !important;
color: #77777d !important;
font-size: 13px !important;
line-height: 1.55 !important;
}
.nactec-single-product-meta
a {
color: #0044ff !important;
text-decoration: none !important;
}
.nactec-single-product-meta
a:hover {
color: #0033cc !important;
}
/* =========================================================
SINGLE PRODUCT — TABS
========================================================= */
.nactec-single-product-tabs {
margin: 0 !important;
}
.nactec-single-product-tabs
.woocommerce-tabs {
overflow: hidden !important;
background: #ffffff !important;
border: 1px solid #e2e2e8 !important;
border-radius: 12px !important;
box-shadow:
0 8px 24px rgba(26, 26, 26, 0.04) !important;
}
.nactec-single-product-tabs
ul.tabs {
display: flex !important;
flex-wrap: wrap !important;
margin: 0 !important;
padding: 0 18px !important;
background: #f7f7f9 !important;
border-bottom: 1px solid #e2e2e8 !important;
}
.nactec-single-product-tabs
ul.tabs::before,
.nactec-single-product-tabs
ul.tabs::after {
content: none !important;
display: none !important;
}
.nactec-single-product-tabs
ul.tabs
li {
margin: 0 24px 0 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.nactec-single-product-tabs
ul.tabs
li::before,
.nactec-single-product-tabs
ul.tabs
li::after {
content: none !important;
display: none !important;
}
.nactec-single-product-tabs
ul.tabs
li
a {
display: block !important;
padding: 15px 0 13px !important;
color: #66666c !important;
font-size: 14px !important;
line-height: 1.3 !important;
font-weight: 600 !important;
text-decoration: none !important;
border-bottom: 3px solid transparent !important;
}
.nactec-single-product-tabs
ul.tabs
li.active
a {
color: #1a1a1a !important;
border-bottom-color: #c75105 !important;
}
.nactec-single-product-tabs
.woocommerce-Tabs-panel {
margin: 0 !important;
padding: 24px 28px !important;
color: #4a4a4f !important;
font-size: 15px !important;
line-height: 1.65 !important;
}
.nactec-single-product-tabs
.woocommerce-Tabs-panel
> h2:first-child {
display: none !important;
}
.nactec-single-product-tabs
.woocommerce-Tabs-panel
p:last-child {
margin-bottom: 0 !important;
}
/* =========================================================
SINGLE PRODUCT — RELATED TITLE
========================================================= */
.nactec-single-product-related-title.nactec-section-title {
position: relative !important;
margin: 0 0 24px !important;
padding-left: 14px !important;
}
.nactec-single-product-related-title.nactec-section-title
.et_pb_module_header,
.nactec-single-product-related-title.nactec-section-title
h2 {
margin: 0 !important;
padding: 0 !important;
color: #1a1a1a !important;
font-size: 32px !important;
line-height: 1.2 !important;
font-weight: 700 !important;
}
.nactec-single-product-related-title.nactec-section-title::before {
content: "" !important;
position: absolute !important;
top: 5px !important;
left: 0 !important;
width: 4px !important;
height: 28px !important;
background: #c75105 !important;
border-radius: 999px !important;
}
/* Hide native duplicated heading */
.nactec-single-product-related
.related
> h2,
.nactec-single-product-related
.products
> h2 {
display: none !important;
}
/* =========================================================
SINGLE PRODUCT — RELATED GRID
========================================================= */
.nactec-single-product-related
ul.products {
display: grid !important;
grid-template-columns:
repeat(4, minmax(0, 1fr)) !important;
gap: 20px !important;
margin: 0 !important;
padding: 0 !important;
}
.nactec-single-product-related
ul.products::before,
.nactec-single-product-related
ul.products::after {
content: none !important;
display: none !important;
}
.nactec-single-product-related
ul.products
li.product {
width: auto !important;
float: none !important;
box-sizing: border-box !important;
margin: 0 !important;
padding: 16px !important;
background: #ffffff !important;
border: 1px solid #e2e2e8 !important;
border-radius: 12px !important;
box-shadow:
0 6px 20px rgba(26, 26, 26, 0.04) !important;
transition:
transform 0.2s ease,
border-color 0.2s ease,
box-shadow 0.2s ease !important;
}
.nactec-single-product-related
ul.products
li.product:hover {
transform: translateY(-2px);
border-color: #c8d4ff !important;
box-shadow:
0 10px 26px rgba(26, 26, 26, 0.08) !important;
}
.nactec-single-product-related
ul.products
li.product
a
img {
width: 100% !important;
height: 210px !important;
margin: 0 0 14px !important;
object-fit: contain !important;
}
.nactec-single-product-related
ul.products
li.product
.woocommerce-loop-product__title {
margin: 0 0 8px !important;
padding: 0 !important;
color: #1a1a1a !important;
font-size: 15px !important;
line-height: 1.4 !important;
font-weight: 600 !important;
}
.nactec-single-product-related
ul.products
li.product
.price {
margin: 0 !important;
color: #1a1a1a !important;
font-size: 16px !important;
line-height: 1.3 !important;
font-weight: 700 !important;
}
.nactec-single-product-related
ul.products
li.product
.price
del {
margin-right: 5px !important;
color: #99999f !important;
font-size: 12px !important;
font-weight: 400 !important;
}
.nactec-single-product-related
ul.products
li.product
.price
ins {
color: #c75105 !important;
text-decoration: none !important;
}
/* =========================================================
SINGLE PRODUCT — TABLET
========================================================= */
@media (max-width: 980px) {
.nactec-single-product-main-row {
grid-template-columns: 1fr !important;
gap: 32px !important;
}
.nactec-single-product-title
.product_title,
.nactec-single-product-title
h1 {
font-size: 36px !important;
}
.nactec-single-product-title::before {
height: 32px !important;
}
.nactec-single-product-related
ul.products {
grid-template-columns:
repeat(2, minmax(0, 1fr)) !important;
}
}
/* =========================================================
SINGLE PRODUCT — MOBILE
========================================================= */
@media (max-width: 767px) {
.nactec-single-product-page,
.nactec-single-product-info-section,
.nactec-single-product-related-section {
padding-top: 24px !important;
}
.nactec-single-product-info-section {
padding-top: 36px !important;
}
.nactec-single-product-related-section {
padding-top: 40px !important;
padding-bottom: 48px !important;
}
.nactec-single-product-breadcrumb-row {
padding-bottom: 20px !important;
}
.nactec-single-product-main-row {
gap: 24px !important;
}
.nactec-single-product-title {
padding-left: 12px !important;
}
.nactec-single-product-title
.product_title,
.nactec-single-product-title
h1 {
font-size: 30px !important;
line-height: 1.16 !important;
}
.nactec-single-product-title::before {
top: 4px !important;
width: 4px !important;
height: 28px !important;
}
.nactec-single-product-price
.price {
font-size: 24px !important;
}
.nactec-single-product-add-to-cart
form.cart {
align-items: stretch !important;
}
.nactec-single-product-add-to-cart
.single_add_to_cart_button {
flex: 1 1 auto !important;
}
.nactec-single-product-tabs
ul.tabs {
flex-direction: column !important;
padding: 0 !important;
}
.nactec-single-product-tabs
ul.tabs
li {
width: 100% !important;
margin: 0 !important;
border-bottom: 1px solid #e2e2e8 !important;
}
.nactec-single-product-tabs
ul.tabs
li
a {
padding: 13px 16px !important;
border-left: 3px solid transparent !important;
border-bottom: 0 !important;
}
.nactec-single-product-tabs
ul.tabs
li.active
a {
border-left-color: #c75105 !important;
}
.nactec-single-product-tabs
.woocommerce-Tabs-panel {
padding: 18px !important;
}
.nactec-single-product-related-title.nactec-section-title
.et_pb_module_header,
.nactec-single-product-related-title.nactec-section-title
h2 {
font-size: 26px !important;
}
.nactec-single-product-related
ul.products {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
.nactec-single-product-related
ul.products
li.product
a
img {
height: 220px !important;
}
}