/*
 * Mariscos Islas Cíes: estilos propios del tema hijo de Hyvä.
 * CSS normal: las clases de Tailwind que no estén ya en styles.css no funcionan.
 */

/* Páginas de contenido (CMS): ancho de lectura y tipografía.
   Fuera: la portada y la intranet, que tienen su propio diseño. */
.cms-page-view:not(.cms-index-index):not(.cms-intranet) .column.main {
    max-width: 960px;
    margin: 0 auto;
    padding: 40px 16px 64px;
    color: #4b5563;
    font-size: 16px;
    line-height: 1.75;
}
.cms-page-view:not(.cms-index-index):not(.cms-intranet) .column.main h1,
.cms-page-view:not(.cms-index-index):not(.cms-intranet) .column.main h2,
.cms-page-view:not(.cms-index-index):not(.cms-intranet) .column.main h3,
.cms-page-view:not(.cms-index-index):not(.cms-intranet) .column.main h4 {
    color: #21293c;
    line-height: 1.3;
}
.cms-page-view:not(.cms-index-index):not(.cms-intranet) .column.main h1 {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 24px;
}
.cms-page-view:not(.cms-index-index):not(.cms-intranet) .column.main h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 40px 0 16px;
}
.cms-page-view:not(.cms-index-index):not(.cms-intranet) .column.main h3 {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 28px 0 12px;
}
.cms-page-view:not(.cms-index-index):not(.cms-intranet) .column.main h4 {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 24px 0 8px;
}
.cms-page-view:not(.cms-index-index):not(.cms-intranet) .column.main > :first-child {
    margin-top: 0;
}
.cms-page-view:not(.cms-index-index):not(.cms-intranet) .column.main p {
    margin: 0 0 16px;
}
.cms-page-view:not(.cms-index-index):not(.cms-intranet) .column.main ul,
.cms-page-view:not(.cms-index-index):not(.cms-intranet) .column.main ol {
    margin: 0 0 20px;
    padding-left: 1.5rem;
}
.cms-page-view:not(.cms-index-index):not(.cms-intranet) .column.main ul {
    list-style: disc;
}
.cms-page-view:not(.cms-index-index):not(.cms-intranet) .column.main ol {
    list-style: decimal;
}
.cms-page-view:not(.cms-index-index):not(.cms-intranet) .column.main li {
    margin: 0 0 6px;
}
.cms-page-view:not(.cms-index-index):not(.cms-intranet) .column.main a {
    color: #005ea8;
    text-decoration: underline;
}
.cms-page-view:not(.cms-index-index):not(.cms-intranet) .column.main a:hover {
    color: #ff6840;
}
.cms-page-view:not(.cms-index-index):not(.cms-intranet) .column.main strong,
.cms-page-view:not(.cms-index-index):not(.cms-intranet) .column.main b {
    color: #21293c;
    font-weight: 600;
}
.cms-page-view:not(.cms-index-index):not(.cms-intranet) .column.main img {
    max-width: 100%;
    height: auto;
}
.cms-page-view:not(.cms-index-index):not(.cms-intranet) .column.main table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 20px;
}
.cms-page-view:not(.cms-index-index):not(.cms-intranet) .column.main th,
.cms-page-view:not(.cms-index-index):not(.cms-intranet) .column.main td {
    border: 1px solid #e5e7eb;
    padding: 8px 12px;
    text-align: left;
    vertical-align: top;
}

/* Ficha de producto: cantidad con botones − / + (Magento_Catalog/templates/product/view/quantity.phtml) */
.mic-qty {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid #94a3b8;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}
.mic-qty .form-input {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    width: 3.25rem;
    padding-left: 2px;
    padding-right: 2px;
    -moz-appearance: textfield;
}
.mic-qty .form-input::-webkit-outer-spin-button,
.mic-qty .form-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mic-qty .form-input:focus { outline: 2px solid #1e40af; outline-offset: -2px; }
.mic-qty-boton {
    width: 38px;
    min-height: 44px;
    flex: none;
    background: #f1f5f9;
    color: #1e40af;
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}
.mic-qty-boton:hover { background: #e2e8f0; }
.mic-qty-boton:focus-visible { outline: 2px solid #1e40af; outline-offset: -2px; }
.mic-qty-boton:disabled { color: #94a3b8; background: #f8fafc; cursor: not-allowed; }

/* Ficha de producto: preguntas frecuentes desplegables (bloque CMS faq-pedido-marisco) */
.mic-faq details {
    border-bottom: 1px solid #e5e7eb;
}
.mic-faq details:last-of-type {
    border-bottom: 0;
}
.mic-faq summary {
    position: relative;
    padding: 14px 36px 14px 0;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    color: #21293c;
}
.mic-faq summary::-webkit-details-marker {
    display: none;
}
.mic-faq summary::after {
    content: "+";
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    line-height: 1;
    color: #0068B2;
}
.mic-faq details[open] summary::after {
    content: "\2212";
}
.mic-faq details p {
    margin: 0 0 16px;
    color: #4b5563;
    line-height: 1.7;
}
.mic-faq a {
    color: #0068B2;
    text-decoration: underline;
}

/* Ficha de producto: descripción | cocina y recetas + preguntas frecuentes */
.mic-dos-columnas { align-items: start; }
.mic-dos-columnas > div { min-width: 0; }
.mic-dos-columnas > div > section + section { margin-top: 2rem; }
.mic-dos-columnas > div > section:first-child { margin-top: 0; }
@media (max-width: 1023px) { .mic-dos-columnas > div:empty { display: none; } }
@media (min-width: 1024px) {
    .grid.mic-dos-columnas { grid-template-columns: 3fr 2fr; gap: 2.5rem; }
    .mic-lateral.mic-fija { position: sticky; top: 1.5rem; }
}

/* Títulos de sección («Descripción / …») con línea debajo */
.mic-dos-columnas section > h2:first-child {
    padding-bottom: .625rem; margin-bottom: 1.25rem;
    border-bottom: 1px solid #d6e4f0; text-align: left;
}

/* Títulos dentro del texto: más contenidos y en el azul de la tienda */
.mic-dos-columnas .prose h2 { font-size: 1.5rem; line-height: 1.3; color: #0068B2; margin: 2.25rem 0 .75rem; }
.mic-dos-columnas .prose h3 { font-size: 1.1875rem; line-height: 1.35; color: #0068B2; margin: 1.75rem 0 .5rem; }
.mic-dos-columnas .prose > :first-child { margin-top: 0; }

/* Cocina y recetas: fondo azul suave y línea a la izquierda */
#recetas .card { background: #f0f6fb; border-color: #d6e4f0; border-left: 4px solid #0068B2; }

/* Ficha de trazabilidad como ficha técnica */
.prose ul.mic-traza {
    list-style: none; padding: .5rem 1.25rem; margin: 1rem 0 1.5rem;
    background: #f5f7f9; border: 1px solid #e3e8ee; border-radius: .5rem;
}
.prose ul.mic-traza li { padding: .45rem 0; margin: 0; border-bottom: 1px dashed #dde3ea; }
.prose ul.mic-traza li:last-child { border-bottom: 0; }
.prose ul.mic-traza strong { color: #1f2937; }

/* Párrafo final (llamada a comprar) en franja destacada */
.prose p.mic-cierre {
    margin-top: 2rem; padding: 1rem 1.25rem;
    background: #eaf3fa; border-left: 4px solid #0068B2; border-radius: .375rem;
}

/* Menú: desplegable «Tienda», una columna por procedencia con sus subcategorías colgando del título */
.navigation .mic-tienda-panel {
    display: grid; grid-template-columns: repeat(2, minmax(13rem, max-content)); gap: 0 2rem;
    width: max-content; padding: 1.25rem 1.5rem; background: #fff;
}
.navigation .mic-cat {
    padding: .25rem 0 .5rem; margin-bottom: .5rem; font-weight: 700; color: #0068B2;
    border-bottom: 2px solid #0068B2;
}
.navigation .mic-grupo ul { margin-left: .25rem; border-left: 2px solid #d6e4f0; }
.navigation .mic-sub { padding: .5rem .75rem .5rem 1rem; border-left: 2px solid transparent; margin-left: -2px; }
.navigation .mic-sub:hover, .navigation .mic-sub[aria-current=page] { border-left-color: #0068B2; color: #0068B2; background: #f0f6fb; }
/* Móvil (panel «Tienda»): cada procedencia como cabecera azul y sus subcategorías colgando de una línea */
dialog .mic-cat {
    font-weight: 700; color: #0068B2; background: #f0f6fb;
    border-left: 4px solid #0068B2; border-bottom-color: #d6e4f0;
}
dialog .mic-cat span { margin-inline-start: 1.5rem; }
dialog li:has(> .mic-cat):not(:nth-child(2)) { margin-top: 1rem; border-top: 1px solid #e2e8f0; }
dialog .mic-sub { padding-top: 0; padding-bottom: 0; border-bottom: 0; }
dialog .mic-sub span {
    display: block; margin-inline-start: 2.75rem; padding: .8rem 0 .8rem 1rem;
    border-left: 2px solid #d6e4f0; border-bottom: 1px solid #f1f5f9; width: 100%;
}
dialog .mic-sub[aria-current=page] span { border-left-color: #0068B2; color: #0068B2; font-weight: 600; }