:root {
    --txq-brand: #C71F2E;
    --txq-brand-dark: #A11722;
    --txq-brand-tint: #FBEAEC;
    --txq-whatsapp: #25D366;
    --txq-whatsapp-dark: #1DA851;
    --txq-ink: #111827;
    --txq-navy: #17324A;
    --txq-muted: #6b7280;
    --txq-border: #ECEEF1;
    --txq-card-bg: #F6F6F5;
    --txq-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --txq-font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.txq-lock-scroll { overflow: hidden; }

#txq-widget,
.txq-cat-grid,
.txq-cat-viewall-wrap {
    font-family: var(--txq-font);
}

/* Titulo grande decorativo de fondo en cabeceras de categoria/tienda. */
.nasa-first-breadcrumb {
    position: relative;
    z-index: 0;
}
.nasa-first-breadcrumb-wrap,
#top-bar {
    overflow: hidden;
}
.txq-bigtitle-bg {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    font-size: 4.5em;
    font-weight: 800;
    line-height: 1;
    color: rgba(17, 24, 39, 0.06);
    white-space: nowrap;
    text-transform: uppercase;
    z-index: -1;
    pointer-events: none;
    user-select: none;
}

/* Selector visual de color con la foto real de cada variacion. */
.txq-swatch-wrap select { display: none; }
.txq-swatch-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 4px 0 8px;
}
.txq-swatch {
    width: 52px;
    height: 52px;
    padding: 2px;
    border: 2px solid transparent;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    line-height: 0;
    transition: border-color 150ms var(--txq-ease), transform 150ms var(--txq-ease);
}
.txq-swatch img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    pointer-events: none;
}
.txq-swatch:hover { transform: translateY(-1px); }
.txq-swatch.is-active { border-color: var(--txq-brand); }

.txq-add-btn {
    background: #25D366;
    color: #fff;
    border: none;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.txq-add-btn:hover { background: #1DA851; }
.txq-add-btn:disabled { background: #9ca3af; cursor: default; }
.txq-add-btn--small { padding: 8px 14px; font-size: 13px; width: 100%; }
.txq-add-btn.disabled,
.txq-add-btn.wc-variation-selection-needed,
.txq-add-btn.wc-variation-is-unavailable {
    opacity: 0.5;
    pointer-events: none;
}

/* Grilla de productos: tarjeta clara, imagen cuadrada, titulo centrado. */
.products .product-item {
    background: transparent !important;
    border-radius: 6px;
    padding: 18px 18px 24px !important;
    text-align: center !important;
    transition: transform 220ms var(--txq-ease), box-shadow 220ms var(--txq-ease);
    will-change: transform;
}
.products .product-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(17, 24, 39, 0.12);
}
.products .product-item .product-img-wrap {
    margin: 0 0 18px;
    background: transparent !important;
}
.products .product-item .product-img-wrap .main-img {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 4px;
}
.products .product-item .product-img-wrap .main-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
/* La imagen de "hover" (back-img) del tema debe recortarse igual que la
   principal; si no, se ve mas corta y salta al pasar el mouse. */
.products .product-item .product-img-wrap .back-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}
.products .product-item .product-img-wrap .back-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    left: 0 !important;
}
.products .product-item .product-info-wrap {
    text-align: left !important;
}
.products .product-item .product-info-wrap .name {
    color: var(--txq-navy) !important;
    font-weight: 700 !important;
    font-size: 14px;
    line-height: 1.4;
    /* El tema trunca el titulo a una linea con "...". Lo dejamos completo,
       que salte a varias lineas en vez de cortarse. */
    overflow: visible !important;
    white-space: normal !important;
    text-overflow: unset !important;
    word-wrap: break-word;
    /* Alto reservado para el titulo (hasta 3 lineas) para que todas las
       tarjetas midan lo mismo sin importar si el nombre es corto o largo. */
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    min-height: 4.2em;
}
/* Oculta el selector de atributos (detalles, color, etc.) que el tema
   superpone sobre la imagen en la vista de listado. Solo se ve en la
   ficha individual del producto, donde SI hace falta para elegir variante. */
.products .product-item .nasa-product-content-variable-warp {
    display: none !important;
}

/* Vitrina del shortcode [txq_products_by_category]. */
.txq-cat-grid {
    display: grid;
    grid-template-columns: repeat(var(--txq-cat-cols, 4), minmax(0, 1fr));
    gap: 24px;
    margin: 24px 0;
}
@media (max-width: 991px) {
    .txq-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
    .txq-cat-grid { grid-template-columns: 1fr; }
}
.txq-cat-card {
    background: var(--txq-card-bg);
    border-radius: 6px;
    padding: 18px 18px 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
}
.txq-cat-card-img {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 4px;
    margin-bottom: 18px;
}
.txq-cat-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 200ms var(--txq-ease);
}
.txq-cat-card-img:hover img { transform: scale(1.04); }
.txq-cat-card-title {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 4.2em;
    color: var(--txq-navy);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.4;
    text-decoration: none;
    margin-bottom: 14px;
}
.txq-cat-card-title:hover { color: var(--txq-brand); }
.txq-cat-card-price { margin-top: auto; font-weight: 700; color: var(--txq-ink); }

.txq-cat-viewall-wrap {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}
.txq-cat-viewall {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 32px;
    border: 2px solid var(--txq-viewall, #2563EB);
    border-radius: 999px;
    color: var(--txq-viewall, #2563EB);
    background: transparent;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    transition: background 150ms var(--txq-ease), color 150ms var(--txq-ease);
}
.txq-cat-viewall:hover {
    background: var(--txq-viewall, #4358FF);
    color: #fff;
}

.txq-icon-btn {
    position: relative;
    background: none;
    border: none;
    padding: 4px;
    margin: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    color: var(--txq-ink);
    font-family: var(--txq-font);
    transition: color 150ms var(--txq-ease), transform 150ms var(--txq-ease);
}
.txq-icon-btn:hover { color: var(--txq-brand); transform: translateY(-1px); }
.txq-icon-btn:focus-visible { outline: 2px solid var(--txq-brand); outline-offset: 3px; border-radius: 6px; }
.txq-icon-btn svg { width: 26px; height: 26px; }
.txq-icon-btn .txq-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    font-size: 11px;
    background: var(--txq-brand);
    color: #fff;
}

.txq-badge {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #fff;
    color: var(--txq-brand);
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 150ms var(--txq-ease);
}
.txq-badge:empty,
.txq-badge[data-empty="true"] { opacity: 0.85; }

.txq-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(17, 24, 39, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms var(--txq-ease);
}
.txq-backdrop.is-open { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
    .txq-backdrop { transition: opacity 120ms linear; }
}

.txq-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    width: 420px;
    max-width: 92vw;
    background: #fff;
    box-shadow: -24px 0 60px rgba(17, 24, 39, 0.18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateX(100%);
    transition: transform 260ms var(--txq-ease);
}
.txq-panel.is-open {
    transform: translateX(0);
}
@media (prefers-reduced-motion: reduce) {
    .txq-panel { transition: transform 120ms linear; }
}

.txq-panel-header {
    padding: 22px 24px;
    background: #fff;
    color: var(--txq-ink);
    border-bottom: 1px solid var(--txq-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    font-size: 19px;
    flex-shrink: 0;
}
.txq-close {
    background: none;
    border: none;
    color: var(--txq-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 150ms var(--txq-ease), color 150ms var(--txq-ease);
}
.txq-close:hover { background: #F3F4F6; color: var(--txq-ink); }
.txq-close:focus-visible { outline: 2px solid var(--txq-brand); outline-offset: 2px; }

.txq-panel-body { padding: 20px 24px; overflow-y: auto; flex: 1; }

.txq-empty,
.txq-error,
.txq-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    padding: 32px 8px;
    color: var(--txq-muted);
    font-size: 14px;
}
.txq-empty svg { width: 34px; height: 34px; color: #d1d5db; }
.txq-error { color: #b91c1c; }
.txq-loading { flex-direction: row; padding: 24px 0; }

.txq-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--txq-border);
    border-top-color: var(--txq-brand);
    border-radius: 50%;
    animation: txq-spin 0.7s linear infinite;
}
@keyframes txq-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .txq-spinner { animation: none; }
}

.txq-brand-group { margin-bottom: 28px; }
.txq-brand-group:last-child { margin-bottom: 0; }
.txq-brand-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--txq-brand);
    margin-bottom: 14px;
}

.txq-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
}
.txq-item + .txq-item { border-top: 1px solid var(--txq-border); }
.txq-item img,
.txq-item-placeholder {
    width: 84px;
    height: 84px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--txq-border);
    flex-shrink: 0;
}
.txq-item-placeholder { background: #F3F4F6; }
.txq-item-info { flex: 1; min-width: 0; }
.txq-item-brand {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--txq-muted);
    margin-bottom: 4px;
}
.txq-item-name { display: block; font-size: 14.5px; font-weight: 700; color: var(--txq-ink); line-height: 1.35; }
.txq-item-sku { font-size: 12.5px; color: var(--txq-muted); margin-top: 4px; }
.txq-item-remove {
    background: none;
    border: none;
    color: var(--txq-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    flex-shrink: 0;
    transition: background 150ms var(--txq-ease), color 150ms var(--txq-ease);
}
.txq-item-remove svg { width: 18px; height: 18px; }
.txq-item-remove:hover { background: #FEE2E2; color: #dc2626; }
.txq-item-remove:disabled { opacity: 0.5; cursor: default; }

.txq-group-warning { font-size: 12.5px; color: #b91c1c; margin-top: 14px; }
.txq-group-note { font-size: 12.5px; color: var(--txq-muted); line-height: 1.5; margin-top: 14px; }

.txq-send-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 10px;
    background: var(--txq-whatsapp);
    color: #fff;
    text-align: center;
    padding: 15px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    transition: background 150ms var(--txq-ease), transform 150ms var(--txq-ease);
}
.txq-send-btn svg { width: 18px; height: 18px; }
.txq-send-btn:hover { background: var(--txq-whatsapp-dark); color: #fff; transform: translateY(-1px); }
.txq-send-btn:focus-visible { outline: 2px solid var(--txq-brand); outline-offset: 2px; }

/* Main menu row is capped at Foundation's default 1200px width regardless of
   viewport, so the top-level nav items (currently ~1425px combined) overflow
   past the box and get clipped on the right. Let this row use the full
   available width instead of the Foundation cap. */
.nasa-elements-wrap-main-menu > .row {
    max-width: none;
    width: 100%;
}

/* Marca (linea txq_brand: TEXBAG/SOLMASTER o TEXTPRINT) pegada arriba del
   titulo. Solo aparece si el producto tiene marca asignada. */
.txq-product-brand {
    font-family: var(--txq-font);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--txq-brand);
    margin-bottom: 2px;
}

/* Subtitulo corto bajo el titulo del producto (descripcion corta / excerpt).
   El tema lo trae oculto por defecto; se activa aqui para las cards que
   tengan ese campo cargado. Selector con mayor especificidad que la regla
   original del tema (".product-des") para ganar sin depender del orden de
   carga de las hojas de estilo. */
.product-item .product-des {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: var(--txq-muted);
    font-family: var(--txq-font);
}