/**
 * Tema Nahani — Estilos custom de páginas de categoría
 * Incluye: cabecera, descripción larga, product card del listing
 */

 /* =====================================================
   GENERAL
   ===================================================== */


html {
    scroll-behavior: smooth;
}

/* El módulo-catalog fuerza page-layout-2columns-left; compensamos sin sidebar */
.page-layout-2columns-left.page-products .column.main {
    width: 100%;
    float: none;
}

.page-products .products-grid .product-item-inner:before {
    background: transparent;
}

/* =====================================================
   CABECERA DE CATEGORÍA
   ===================================================== */

/* Bloque encabezado: descripción (izquierda) + imagen (derecha) */
.nahani-category-header-info {
    display: flex;
    align-items: flex-start;
    gap: 32px;
    margin-bottom: 24px;
}

.nahani-category-header-description {
    flex: 1 1 0%;
    min-width: 0;
    position: relative;
    font-family: var(--nahani-font-body);
    font-size: var(--nahani-font-size-body);
    line-height: var(--nahani-line-height);
    color: var(--nahani-color-text);
}

/* Icono de hoja: posicionado en la esquina superior izquierda */
.nahani-category-header-icon {
    position: absolute;
    top: 2px;
    left: 0;
    width: 45px;
    height: auto;
}

/* Título: indentado para dejar hueco al icono */
.nahani-category-header-title {
    padding-left: 52px;
    margin-bottom: 20px;
}

.nahani-category-header-title h1 {
    font-size: 36px;
    font-family: var(--nahani-font-display);
}
.nahani-category-header-text {
    color: #76777a;
    padding-left: 50px;
}

/* Botón "Erfahren Sie mehr" */
.nahani-category-mehr-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 44px;
    padding: 10px 20px;
    border: 1.5px solid var(--nahani-color-green);
    border-radius: 5px;
    color: var(--nahani-color-text) !important;
    font-family: var(--nahani-font-body);
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;
    line-height: 1.4;
    transition: background-color 0.15s ease, color 0.15s ease;
    margin-left: 50px;
}

.nahani-category-mehr-arrow {
    width: 16px;
    height: auto;
    flex-shrink: 0;
}

.nahani-category-mehr-btn:hover {
    background-color: var(--nahani-color-green);
    color: #fff !important;
    text-decoration: none;
}

.nahani-category-mehr-btn:hover .nahani-category-mehr-arrow {
    filter: brightness(0) invert(1);
}

/* Offset para el header fijo al hacer scroll al ancla */
#nahani-category-long-description {
    scroll-margin-top: 80px;
    margin-bottom: 60px;
}

.nahani-category-header-image {
    flex: 0 0 50%;
    max-width: 630px;
}

.nahani-category-header-image .image {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

@media (max-width: 768px) {
    .nahani-category-header-info {
        flex-direction: column;
        gap: 16px;
    }

    .nahani-category-header-image {
        max-width: 100%;
        width: 100%;
    }
}

/* Descripción larga al final del listing */
.nahani-category-long-description {
    margin-top: 32px;
    font-family: var(--nahani-font-body);
    font-size: var(--nahani-font-size-body);
    line-height: var(--nahani-line-height);
    color: var(--nahani-color-grey);
}

.nahani-category-long-description h2 {
    background: url('../images/natural_food.png') no-repeat;
    padding: 0 0 0px 50px;
    line-height: 40px;
    font-size: 32px;
    font-family: var(--nahani-font-body);
    font-weight: 400;
    margin: 45px 0 25px 0;
    color: #333;
    word-wrap: break-word;
}

.nahani-iso-block {
    margin: 60px 0 90px 0;
}

/* =====================================================
   PRODUCT CARD — listing de categorías
   ===================================================== */

/* Layout: 2columns-left — sidebar de filtros a la izquierda */

.nahani-product-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    text-align: center;
}

/* --- Image wrapper (para posicionar el badge) --- */
.nahani-product-image-wrapper {
    position: relative;
    display: block;
}

/* --- Badge de descuento --- */
.nahani-discount-badge {
    position: absolute;
    top: -1px;
    right: -1px;
    z-index: 10;
    background-color: #7c50a0;
    color: #fff;
    font-family: var(--nahani-font-heading);
    font-size: 14px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 8px;
    line-height: 1.4;
    pointer-events: none;
}

.nahani-out-of-stock-badge {
    position: absolute;
    top: -1px;
    right: -1px;
    z-index: 10;
    background-color: #AEAEAE;
    color: #fff;
    font-family: var(--nahani-font-heading);
    font-size: 14px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 8px;
    line-height: 1.4;
    pointer-events: none;
}

/* --- Imagen centrada --- */
.nahani-product-card .product-item-photo {
    display: block;
}

.nahani-product-card .product-item-photo .product-image-container {
    display: block;
    margin: 0 auto;
}

/* --- Bloque de detalles --- */
.nahani-product-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 8px 16px;
    gap: 4px;
    margin-top: -70px;
}

/* --- Nombre del producto --- */
/* Reserva la altura de dos líneas para que los nombres de una sola línea
   ocupen el mismo espacio vertical. Así el subtítulo, el precio y el botón
   quedan alineados en toda la fila aunque un nombre ocupe dos líneas. */
.nahani-product-card .product-item-name {
    margin: 8px 0 0;
    min-height: 55px;
    display: flex;
    align-items: end;
    justify-content: center;
}

.nahani-product-card .nahani-product-format {
    min-height: 45px;
    display: flex;
    align-items: start;
    justify-content: center;
}

 .nahani-product-format {
    min-height: 45px;
 }

.price-box .price-box {
    margin: 0 !important;
}
.minimal-price {
    margin-bottom: 0 !important;
}

.nahani-product-card .product-item-name .product-item-link, 
.nahani-product-format {
    font-family: var(--nahani-font-body);
    font-size: 19px;
    font-weight: 600;
    color: var(--nahani-color-text);
    letter-spacing: 0.03em;
    text-decoration: none;
    line-height: 1.3;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box !important;
}

.nahani-product-card .product-item-name .product-item-link:hover {
    color: var(--nahani-color-green);
    text-decoration: none;
}

/* --- Formato / subtítulo (ej. "60 Kapseln") --- */
.nahani-product-format {
    font-family: var(--nahani-font-body);
    font-size: 14px;
    color: #888;
    margin: -2px 0;
}

/* --- Bloque de precios --- */
.nahani-product-card .price-box {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 6px 0;
}

.nahani-product-card .price-box .price-label {
    display: none;
}

.nahani-product-card .price-box .special-price .price,
.nahani-product-card .price-box .price {
    font-family: var(--nahani-font-body);
    font-size: 21px;
    font-weight: 400;
    color: var(--nahani-color-text);
}

.nahani-product-card .price-box .old-price {
    display: inline-block;
}

.nahani-product-card .price-box .old-price .price {
    font-family: var(--nahani-font-body);
    font-size: 15px;
    font-weight: 400;
    color: #aaa;
    text-decoration: line-through;
}

/* --- Botón "In den Warenkorb" --- */
.nahani-product-card .product-item-inner {
    width: 100%;
    margin-top: 10px;
}

.nahani-product-card .product-item-actions {
    width: 100%;
}

.nahani-product-card .actions-primary {
    width: 100%;
}

.nahani-product-card .actions-primary form {
    width: 100%;
}

.nahani-tocart-btn {
    width: 100% !important;
    background-color: #6BA800 !important;
    border-color: #6BA800 !important;
    color: #fff !important;
    font-family: var(--nahani-font-body) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    padding: 12px 16px !important;
    cursor: pointer;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: background-color 0.15s ease !important;
}

.nahani-tocart-btn::after {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2S15.9 22 17 22s2-.9 2-2-.9-2-2-2zM7.17 14.75l.03-.12.9-1.63H17c.75 0 1.41-.41 1.75-1.03l3.58-6.49A1 1 0 0 0 21.46 4H5.21l-.94-2H1v2h2l3.6 7.59-1.35 2.44C4.52 15.37 5 16.18 5 17h14v-2H8.58a.25.25 0 0 1-.41-.25z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    flex-shrink: 0;
}

.nahani-tocart-btn:hover {
    background-color: #5a9000 !important;
    border-color: #5a9000 !important;
}

.nahani-details-btn {
    text-decoration: none !important;
    background-color: #AEAEAE !important;
    border-color: #AEAEAE !important;
    cursor: pointer;
    margin-top: -4px;
    margin-left: -15px;
}

.nahani-details-btn::after {
    display: none !important;
}

.nahani-details-btn:hover {
    background-color: #999999 !important;
    border-color: #999999 !important;
}

.nahani-out-of-stock .action.submit.primary,
.nahani-out-of-stock .action.tocart.primary,
.nahani-out-of-stock form[data-role="tocart-form"] {
    display: none !important;
}

/* Ocultar los extra links (wishlist, compare) en la card */
.nahani-product-card .actions-secondary {
    display: none;
}

/* Botón siempre visible (sin hover) */
.products-grid .nahani-product-card .product-item-inner,
.products-grid .nahani-product-card:not(:hover):not(.active) .product-item-inner {
    position: static !important;
    clip: auto !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
    width: auto !important;
}

.toolbar-products {
    margin: 60px 0 0 0;
}
.toolbar select {
    border-color: var(--nahani-color-green);
    background-color: transparent;
    padding: 10px 14px;
    height: 50px;
    border-radius: 5px;
    padding-right: 30px;
}

.toolbar-amount {
    line-height: 34px;
}

.product-item .old-price {
    margin: 0 !important;
}

@media (max-width: 768px) {
    .page-products .sorter {
        position: relative;
    }
    .page-with-filter .toolbar-amount {
        position: relative;
        display: inline-block;
        line-height: 35px;
    }
    .nahani-tocart-btn {
        font-size: 12px !important;
    }
    .nahani-category-header-text {
        padding-left: 0;
    }
    .nahani-category-mehr-btn {
        margin-left: 0;
    }
}

.product-image-photo {
    margin-bottom: 0;
    margin-top: 10px;
}
/* =====================================================
   FILTRO ALFABÉTICO A-Z (categoría Produkte A-Z)
   ===================================================== */

.nahani-az-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0 0 32px;
}

.nahani-az-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border: 1px solid var(--nahani-color-green);
    border-radius: 20%;
    font-family: var(--nahani-font-heading);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    color: var(--nahani-color-green);
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.nahani-az-letter:visited {
    color: var(--nahani-color-green);
}

a.nahani-az-letter:hover,
a.nahani-az-letter:focus,
.nahani-az-letter.active {
    background-color: var(--nahani-color-green);
    color: #fff;
    text-decoration: none;
}

/* Letras sin productos: en gris y no clicables */
.nahani-az-letter.disabled {
    border-color: var(--nahani-color-grey);
    color: var(--nahani-color-grey);
    cursor: default;
    pointer-events: none;
}

/* Feedback mientras se carga el listado por Ajax */
#az-products-wrapper.nahani-az-loading {
    opacity: 0.4;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

@media (max-width: 768px) {
    .nahani-az-letter {
        width: 34px;
        height: 34px;
        font-size: 14px;
    }
}

.search.results .toolbar-amount {
    display: none;
}
.search.results dl {
    display: none
}

.search.results .toolbar-products {
    position: relative;
    margin: 0
}

.page-products .product-item-info {
    width: 100% !important;
}

.product-image-photo {
    width: 100% !important;
}