/* Diseno propio de la seccion TEXTPRINT. Los colores reales vienen como
   variables CSS (--txp-bg, --txp-accent) inyectadas inline en
   templates/textprint-page.php desde las opciones del panel de admin. */

.txq-textprint-page {
    margin: 0;
    background: #fff;
    color: #1a1a1a;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

.txq-tp-backbar {
    background: #f5f5f5;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.txq-tp-back-link {
    max-width: 1200px;
    margin: 0 auto;
    padding: 8px 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #666;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: color 0.15s ease;
}

.txq-tp-back-link:hover,
.txq-tp-back-link:focus-visible {
    color: var(--txp-accent);
}

.txq-tp-back-link svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

.txq-tp-back-link img {
    height: 16px;
    width: auto;
    display: block;
}

.txq-tp-header {
    background: var(--txp-bg);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.txq-tp-topbar {
    max-width: 1200px;
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 24px;
}

.txq-tp-logo {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    color: #1a1a1a;
    text-decoration: none;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 0.03em;
}

.txq-tp-logo img {
    max-height: 40px;
    width: auto;
    display: block;
}

.txq-tp-search {
    flex: 1 1 auto;
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    background: #f2f2f2;
    border-radius: 999px;
    padding: 0 6px 0 18px;
}

.txq-tp-search input[type="search"] {
    flex: 1 1 auto;
    border: 0;
    background: none;
    padding: 11px 0;
    font-size: 14px;
    color: #1a1a1a;
    outline: none;
    -webkit-appearance: none;
}

.txq-tp-search input[type="search"]::placeholder {
    color: #8a8a8a;
}

.txq-tp-search button {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: none;
    color: #1a1a1a;
    cursor: pointer;
    border-radius: 50%;
    transition: color 0.15s ease;
}

.txq-tp-search button:hover,
.txq-tp-search button:focus-visible {
    color: var(--txp-accent);
}

.txq-tp-search button svg {
    width: 18px;
    height: 18px;
}

.txq-tp-account {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    color: #1a1a1a;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.txq-tp-account svg {
    width: 20px;
    height: 20px;
}

.txq-tp-account:hover,
.txq-tp-account:focus-visible {
    color: var(--txp-accent);
}

.txq-tp-cart {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

.txq-tp-cart-label {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

/* Barra unica que junta el menu horizontal y el breadcrumb: un solo
   borde/fila en vez de dos tiras apiladas. */
.txq-tp-navbar {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

/* Breadcrumb: reutiliza woocommerce_breadcrumb() nativo de WooCommerce. */
.txq-tp-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 0;
    font-size: 12px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.txq-tp-breadcrumb a {
    display: inline-flex;
    align-items: center;
    color: #666;
    text-decoration: none;
}

.txq-tp-breadcrumb a:hover {
    color: var(--txp-accent);
}

.txq-tp-crumb-home svg {
    width: 16px;
    height: 16px;
}

.txq-tp-crumb-sep {
    width: 12px;
    height: 12px;
    opacity: 0.5;
}

/* Menu horizontal TEXTPRINT: barra de categorias de primer nivel bajo el
   topbar. Los dropdowns se abren con hover (:hover/:focus-within), no con
   click: el primer nivel abre un panel debajo, y cada nivel mas profundo
   se despliega como flyout hacia la derecha del item que lo contiene. */
.txq-tp-nav {
    flex: 1 1 auto;
}

.txq-tp-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}

.txq-tp-menu li {
    position: relative;
}

.txq-tp-menu > li > a {
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.txq-tp-menu a {
    display: block;
    padding: 14px 16px;
    color: #1a1a1a;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    transition: color 0.15s ease;
}

.txq-tp-menu a:hover,
.txq-tp-menu li.current-menu-item > a {
    color: var(--txp-accent);
}

/* Flechita indicando que el item tiene subcategorias (solo visual, el
   despliegue es por hover, no hace falta boton). */
.txq-tp-menu li.menu-item-has-children > a {
    padding-right: 26px;
    position: relative;
}

.txq-tp-menu li.menu-item-has-children > a::after {
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    opacity: 0.6;
}

.txq-tp-menu > li > a::after {
    transform: translateY(-65%) rotate(45deg);
}

.txq-tp-menu .sub-menu li > a::after {
    transform: translateY(-50%) rotate(-45deg);
}

/* Panel de primer nivel: debajo del item, se abre con hover/foco. */
.txq-tp-menu > li > .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 260px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
    z-index: 200;
    padding: 8px 0;
    list-style: none;
    margin: 0;
}

.txq-tp-menu > li:hover > .sub-menu,
.txq-tp-menu > li:focus-within > .sub-menu {
    display: block;
}

/* Niveles mas profundos: flyout hacia la derecha del item padre. */
.txq-tp-menu .sub-menu .sub-menu {
    display: none;
    position: absolute;
    top: -9px;
    left: 100%;
    min-width: 240px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
    z-index: 210;
    padding: 8px 0;
    list-style: none;
    margin: 0;
}

.txq-tp-menu .sub-menu li:hover > .sub-menu,
.txq-tp-menu .sub-menu li:focus-within > .sub-menu {
    display: block;
}

.txq-tp-menu .sub-menu a {
    white-space: normal;
}

.txq-tp-banner {
    width: 100%;
    max-height: 380px;
    overflow: hidden;
}

.txq-tp-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.txq-tp-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 24px 64px;
    min-height: 50vh;
}

.txq-tp-main .page-title {
    font-size: 28px;
    margin-bottom: 24px;
}

.txq-tp-layout {
    display: flex;
    align-items: flex-start;
    gap: 32px;
}

.txq-tp-sidebar {
    flex: 0 0 240px;
}

.txq-tp-content {
    flex: 1 1 auto;
    min-width: 0;
}

.txq-tp-filter-box {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    padding: 16px;
}

.txq-tp-filter-box h3 {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.txq-tp-cat-list,
.txq-tp-cat-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.txq-tp-cat-list ul {
    margin-left: 14px;
}

.txq-tp-cat-list li {
    margin: 0;
    padding: 6px 0;
    font-size: 13px;
    color: #999;
}

.txq-tp-cat-list a {
    color: #1a1a1a;
    text-decoration: none;
}

.txq-tp-cat-list a:hover {
    color: var(--txp-accent);
}

.txq-tp-cat-list .current-cat > a {
    color: var(--txp-accent);
    font-weight: 700;
}

@media (max-width: 782px) {
    .txq-tp-layout {
        flex-direction: column;
    }

    .txq-tp-sidebar {
        flex: 1 1 auto;
        width: 100%;
    }
}

.txq-tp-footer {
    background: var(--txp-bg);
    color: #1a1a1a;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    margin-top: 40px;
}

.txq-tp-footer-top {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 24px;
    display: flex;
    gap: 48px;
}

.txq-tp-footer-map {
    flex: 1 1 0;
    min-width: 280px;
}

.txq-tp-footer-map iframe {
    display: block;
    width: 100%;
    height: 340px;
    max-width: 100%;
    border-radius: 8px;
}

.txq-tp-footer-info {
    flex: 1 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 22px;
}

.txq-tp-footer-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 15px;
    line-height: 1.5;
}

.txq-tp-footer-item svg {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin-top: 2px;
    color: var(--txp-accent);
}

.txq-tp-footer-item strong {
    font-weight: 700;
}

.txq-tp-footer-payment {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 22px;
    font-weight: 600;
    text-align: center;
}

.txq-tp-footer-payment img {
    display: block;
    height: auto;
    max-width: 180px;
}

@media (max-width: 780px) {
    .txq-tp-footer-top {
        flex-direction: column;
    }
}

.txq-tp-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
    font-size: 13px;
    opacity: 0.75;
    text-align: center;
}

@media (max-width: 640px) {
    .txq-tp-topbar {
        flex-wrap: wrap;
    }

    .txq-tp-search {
        order: 4;
        max-width: none;
        width: 100%;
    }

    .txq-tp-menu-toggle span,
    .txq-tp-account span,
    .txq-tp-cart-label {
        display: none;
    }

    /* El menu de primer nivel y el breadcrumb compartian la misma fila
       (.txq-tp-navbar es flex row-reverse), asi que en pantallas chicas
       se peleaban el ancho y el ultimo item del menu quedaba cortado en
       el borde de la pantalla en vez de bajar de linea. Apilados en
       columna, el menu tiene el ancho completo para hacer wrap bien. */
    .txq-tp-navbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .txq-tp-nav {
        width: 100%;
        min-width: 0;
    }

    .txq-tp-menu {
        min-width: 0;
        max-width: 100%;
    }

    .txq-tp-menu > li {
        min-width: 0;
        max-width: 100%;
    }

    .txq-tp-breadcrumb {
        width: 100%;
    }
}

/* Zoom sobre la foto del producto al pasar el mouse, en la grilla de
   productos de TEXTPRINT (categoria y marca). El markup de la tarjeta
   (.product-item > .product-img-wrap > img) lo pone el tema; aca solo se
   agrega la transicion, escoped a esta seccion. */
.txq-textprint-page .product-img-wrap {
    overflow: hidden;
}

.txq-textprint-page .product-img-wrap img {
    transition: transform 0.4s ease;
}

.txq-textprint-page .product-item:hover .product-img-wrap img {
    transform: scale(1.08);
}

.txq-textprint-page .product-item {
    transition: box-shadow 0.25s ease;
}

.txq-textprint-page .product-item:hover {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    position: relative;
    z-index: 1;
}