/* ================================================================
   Navigation module — premium redesign for Warehouse / shipsworld
   ================================================================ */

#navigation {
    clear: both;
    margin: 40px 0 24px;
}

#navigation .navigation_container {
    width: 100%;
}

/* ── Two equal-height cards ───────────────────────────────── */
#navigation .navigation {
    display: flex;
    align-items: stretch;
    gap: 20px;
}

/* Card: flex-column so inner <a> stretches to full card height */
#navigation #navigation_left,
#navigation #navigation_right {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(21, 63, 103, 0.10);
    transition: box-shadow 0.22s ease, transform 0.22s ease;
    min-width: 0;
}

#navigation #navigation_left:hover,
#navigation #navigation_right:hover {
    box-shadow: 0 8px 28px rgba(21, 63, 103, 0.20);
    transform: translateY(-3px);
}

/* ── <a> fills the full card — entire card is clickable ───── */
#navigation #navigation_left > a,
#navigation #navigation_right > a {
    flex: 1;
    display: flex;
    flex-direction: column;
    text-decoration: none !important;
    color: inherit;
    background: #fff;
}

/* ── Hide original arrow images ───────────────────────────── */
#navigation img.navigation_flecha {
    display: none !important;
}

/* ── product_container: flex column, no padding (header
       strip needs to touch card edges) ─────────────────────── */
#navigation #navigation_left  #product_container,
#navigation #navigation_right #product_container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1;
    padding: 0;
    float: none;
    text-align: center;
}

/* ── Direction header strip ───────────────────────────────── */
#navigation span.arrow_label,
#navigation span.label {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 18px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
    float: none;
    width: 100%;
    box-sizing: border-box;
}

/* Left card: navy header, chevron before label text */
#navigation #navigation_left span.arrow_label {
    background: #153f67;
    justify-content: flex-start;
}

#navigation #navigation_left span.arrow_label::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Right card: salmon header, label goes to top with order, chevron after */
#navigation #navigation_right span.label {
    background: #fece26;
    color: #153f67;
    justify-content: flex-end;
    order: -1;              /* moves it above div.product_name in flex column */
}

#navigation #navigation_right span.label::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23153f67' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ── Product image + name column ──────────────────────────── */
/* div.product_name wraps both the image and name span */
#navigation div.product_name {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 22px 20px 24px;
    flex: 1;
    float: none;
    width: 100%;
    box-sizing: border-box;
}

/* ── Product image ────────────────────────────────────────── */
#navigation img.recuadro {
    display: block;
    width: 130px !important;
    height: 130px !important;
    object-fit: cover;
    border-radius: 5px;
    border: 1px solid #f0f0f0;
    margin: 0 !important;
    padding: 0 !important;
    transition: opacity 0.22s ease;
    flex-shrink: 0;
}

#navigation #navigation_left:hover img.recuadro,
#navigation #navigation_right:hover img.recuadro {
    opacity: 0.85;
}

/* ── Product name text ────────────────────────────────────── */
#navigation span.product_name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    color: #153f67;
    text-align: center;
    width: 100%;
    white-space: normal;
    max-width: 100%;
    float: none;
    transition: color 0.22s ease;
}

#navigation #navigation_left:hover  span.product_name,
#navigation #navigation_right:hover span.product_name {
    color: #b89000;
}

/* ── Mobile: cards stack vertically ──────────────────────── */
@media (max-width: 767px) {
    #navigation .navigation {
        flex-direction: column;
        gap: 14px;
    }

    #navigation img.recuadro {
        width: 100px !important;
        height: 100px !important;
    }
}