/**
 * SC-Interlink – Frontend Shortcode Styles
 * =========================================
 *
 * Consolidated from four inline <style> blocks in class-smart-shortcodes.php:
 *   1. render_related_posts_html   – .sc-related-posts
 *   2. render_sc_bloques_home      – .sc-home-block-section / .sc-modern-card
 *   3. render_comparison_table_html – .sc-tabla-categoria-wrapper
 *   4. generate_text_block         – .sc-interlinking-text / .sc-interlinking-products
 *
 * Design-token mapping (sc-core theme.json):
 *
 *   Colors (--wp--preset--color--)
 *   ink          #0a0a0a    Primary text
 *   ink-2        #2a2a28    Secondary text
 *   ink-3        #6b6b66    Tertiary text
 *   bg           #ffffff    Background
 *   bg-soft      #f6f4ee    Soft background
 *   line         #e7e3d7    Borders
 *   accent       #1f6b3a    Green accent / links
 *   accent-2     #163d23    Deep accent (hover)
 *   warn         #c44a1a    Warning / sale
 *   star         #f5b400    Star rating
 *
 *   Typography (--wp--preset--font-family--)
 *   display      Space Grotesk     Headings
 *   body         Manrope           Body text (inherited)
 *   mono         JetBrains Mono    Badges / prices
 *
 *   Radius (--wp--custom--radius--)
 *   sm  6px  ·  md  12px  ·  lg  20px  ·  xl  28px  ·  pill  999px
 *
 *   Shadows (--wp--preset--shadow--)
 *   card   0 18px 40px -22px rgba(0,0,0,.22), 0 2px 6px rgba(0,0,0,.04)
 *   lift   0 24px 60px -28px rgba(0,0,0,.35), 0 4px 12px rgba(0,0,0,.06)
 */


/* ==========================================================================
   1. RELATED POSTS  (.sc-related-posts)
   Source: render_related_posts_html
   ========================================================================== */

.sc-related-posts {
    margin: 30px 0;
    padding: 20px;
    background: var(--wp--preset--color--bg-soft, #f6f4ee);
    border-radius: var(--wp--custom--radius--md, 12px);
    border: 1px solid var(--wp--preset--color--line, #e7e3d7);
}

.sc-related-posts-title {
    font-family: var(--wp--preset--font-family--display, inherit);
    font-size: 16px;
    font-weight: 600;
    color: var(--wp--preset--color--ink, #0a0a0a);
    margin: 0 0 15px;
}

.sc-related-posts-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sc-related-posts-list li {
    margin-bottom: 10px;
    padding-left: 20px;
    position: relative;
}

.sc-related-posts-list li::before {
    content: "\2192"; /* → */
    position: absolute;
    left: 0;
    color: var(--wp--preset--color--warn, #c44a1a);
    font-weight: bold;
}

.sc-related-posts-list li:last-child {
    margin-bottom: 0;
}

.sc-related-posts-list a {
    color: var(--wp--preset--color--ink, #0a0a0a);
    text-decoration: none;
    font-weight: 500;
    font-family: inherit;
}

.sc-related-posts-list a:hover {
    color: var(--wp--preset--color--warn, #c44a1a);
    text-decoration: underline;
}


/* ==========================================================================
   2. HOME BLOCKS  (.sc-home-block-section / .sc-modern-card)
   Source: render_sc_bloques_home
   ========================================================================== */

.sc-home-block-section {
    margin-bottom: 40px;
}

.sc-block-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--wp--preset--color--line, #e7e3d7);
    padding-bottom: 10px;
}

.sc-block-title {
    font-family: var(--wp--preset--font-family--display, inherit);
    font-size: 24px;
    font-weight: 700;
    color: var(--wp--preset--color--ink, #0a0a0a);
    margin: 0;
}

/* Card – Modern Style */
.sc-modern-card {
    background: var(--wp--preset--color--bg, #fff);
    border-radius: var(--wp--custom--radius--md, 12px);
    box-shadow: var(--wp--preset--shadow--card, 0 18px 40px -22px rgba(0,0,0,.22), 0 2px 6px rgba(0,0,0,.04));
    padding: 15px;
    transition: transform 0.2s;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--wp--preset--color--line, #e7e3d7);
}

.sc-modern-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--wp--preset--shadow--lift, 0 24px 60px -28px rgba(0,0,0,.35), 0 4px 12px rgba(0,0,0,.06));
}

.sc-card-img-wrap {
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* Square aspect ratio */
    margin-bottom: 15px;
    overflow: hidden;
    border-radius: var(--wp--custom--radius--sm, 6px);
    background: var(--wp--preset--color--bg-soft, #f6f4ee);
}

.sc-card-img-wrap img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: var(--wp--custom--radius--sm, 6px);
}

.sc-card-title {
    font-family: var(--wp--preset--font-family--display, inherit);
    font-size: 14px;
    font-weight: 600;
    color: var(--wp--preset--color--ink, #0a0a0a);
    margin-bottom: 8px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 40px;
}

.sc-card-price {
    margin-top: auto;
    font-weight: 700;
    color: var(--wp--preset--color--accent, #1f6b3a);
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sc-card-old-price {
    text-decoration: line-through;
    color: var(--wp--preset--color--ink-3, #6b6b66);
    font-size: 13px;
    font-weight: 400;
}

.sc-ppu-badge {
    font-family: var(--wp--preset--font-family--display, "Space Grotesk", system-ui, sans-serif);
    font-size: 11px;
    background: color-mix(in srgb, var(--wp--preset--color--accent, #1f6b3a) 12%, transparent);
    color: var(--wp--preset--color--accent, #1f6b3a);
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: auto;
}

.sc-sales-badge {
    font-family: var(--wp--preset--font-family--display, "Space Grotesk", system-ui, sans-serif);
    font-size: 10px;
    background: color-mix(in srgb, var(--wp--preset--color--star, #f5b400) 18%, var(--wp--preset--color--bg, #fff));
    color: color-mix(in srgb, var(--wp--preset--color--star, #f5b400) 55%, var(--wp--preset--color--ink, #0a0a0a));
    padding: 2px 5px;
    border-radius: 4px;
    margin-left: auto;
}

/* Swiper container spacing */
.sc-swiper-container {
    overflow: hidden;
    padding: 10px; /* Space for shadow */
    margin: -10px;
}


/* ==========================================================================
   3. COMPARISON TABLE  (.sc-tabla-categoria-wrapper)
   Source: render_comparison_table_html
   ========================================================================== */

.sc-tabla-categoria-wrapper {
    width: 100%;
    overflow: hidden;
    overflow-x: auto;
    margin: 20px 0;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--wp--custom--radius--lg, 20px);
    border: 1px solid var(--wp--preset--color--line, #e7e3d7);
}

.sc-tabla-categoria-wrapper table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
    font-size: 13px;
    font-family: inherit;
    border-radius: var(--wp--custom--radius--lg, 20px);
}

.sc-tabla-categoria-wrapper th,
.sc-tabla-categoria-wrapper td {
    padding: 10px 8px;
    border: 1px solid var(--wp--preset--color--line, #e7e3d7);
    text-align: left;
}

.sc-tabla-categoria-wrapper th {
    background: var(--wp--preset--color--bg-soft, #f6f4ee);
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 10;
    white-space: nowrap;
}

/* Sticky first column (thumbnail) */
.sc-tabla-categoria-wrapper th:first-child,
.sc-tabla-categoria-wrapper td:first-child {
    position: sticky;
    left: 0;
    z-index: 12;
    background: var(--wp--preset--color--bg-soft, #f6f4ee);
    width: 80px;
    min-width: 80px;
    max-width: 80px;
    box-sizing: border-box;
}

.sc-tabla-categoria-wrapper td:first-child {
    background: var(--wp--preset--color--bg, #fff);
}

/* Sticky second column (product name) */
.sc-tabla-categoria-wrapper th:nth-child(2),
.sc-tabla-categoria-wrapper td:nth-child(2) {
    position: sticky;
    left: 80px;
    z-index: 11;
    background: var(--wp--preset--color--bg-soft, #f6f4ee);
    min-width: 100px;
    max-width: 140px;
    white-space: normal;
    word-wrap: break-word;
    box-sizing: border-box;
    border-right: 2px solid var(--wp--preset--color--line, #e7e3d7);
}

.sc-tabla-categoria-wrapper td:nth-child(2) {
    background: var(--wp--preset--color--bg, #fff);
}

/* Zebra striping */
.sc-tabla-categoria-wrapper tr:nth-child(even) td {
    background-color: var(--wp--preset--color--bg-soft, #f6f4ee);
}

.sc-tabla-categoria-wrapper tr:nth-child(even) td:first-child,
.sc-tabla-categoria-wrapper tr:nth-child(even) td:nth-child(2) {
    background-color: var(--wp--preset--color--bg-soft, #f6f4ee);
}

/* Links */
.sc-tabla-categoria-wrapper a {
    color: var(--wp--preset--color--accent, #1f6b3a);
    text-decoration: none;
    font-weight: 600;
}

.sc-tabla-categoria-wrapper a:hover {
    text-decoration: underline;
}

/* Aroma tags */
.sc-tabla-categoria-wrapper .sc-aromas {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.sc-tabla-categoria-wrapper .sc-aroma-tag {
    background: color-mix(in srgb, var(--wp--preset--color--accent, #1f6b3a) 12%, transparent);
    color: var(--wp--preset--color--accent, #1f6b3a);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
}

/* Price cells */
.sc-tabla-categoria-wrapper .sc-price-cell {
    text-align: right;
    white-space: nowrap;
}

.sc-tabla-categoria-wrapper .sc-regular-price {
    text-decoration: line-through;
    color: var(--wp--preset--color--ink-3, #6b6b66);
    font-size: 11px;
    display: block;
}

.sc-tabla-categoria-wrapper .sc-sale-price {
    color: var(--wp--preset--color--warn, #c44a1a);
    font-weight: bold;
    font-size: 14px;
}

.sc-tabla-categoria-wrapper .sc-price-unit {
    font-size: 11px;
    color: var(--wp--preset--color--ink-3, #6b6b66);
    margin-left: 4px;
}

.sc-tabla-categoria-wrapper .sc-no-price {
    color: var(--wp--preset--color--ink-3, #6b6b66);
    font-size: 12px;
}

/* Calidad badges */
.sc-tabla-categoria-wrapper .sc-calidad-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    font-family: var(--wp--preset--font-family--display, "Space Grotesk", system-ui, sans-serif);
    color: var(--sc-on-color, #fff);
}

.sc-tabla-categoria-wrapper .sc-calidad-a {
    background: var(--wp--preset--color--accent, #1f6b3a);
}

.sc-tabla-categoria-wrapper .sc-calidad-b {
    background: #B8860B;
    color: var(--sc-on-color, #fff);
}

.sc-tabla-categoria-wrapper .sc-calidad-c {
    background: var(--wp--preset--color--warn, #c44a1a);
}

.sc-tabla-categoria-wrapper .sc-calidad-d {
    background: var(--wp--preset--color--warn, #c44a1a);
}

/* Thumbnail */
.sc-tabla-categoria-wrapper .sc-thumbnail {
    /* Contenedor cuadrado fijo = anchos de columna deterministas.
       object-fit:contain muestra la miniatura COMPLETA sin recorte;
       background:transparent = sin color de fondo del contenedor. */
    width: 50px;
    height: 50px;
    object-fit: contain;
    border-radius: 4px;
    background: transparent;
}

.sc-tabla-categoria-wrapper .sc-thumbnail-cell {
    width: 60px;
    text-align: center;
}

/* Table – responsive: un-stick second column on mobile */
@media (max-width: 768px) {
    .sc-tabla-categoria-wrapper th:nth-child(2),
    .sc-tabla-categoria-wrapper td:nth-child(2) {
        position: static !important;
        border-right: 1px solid var(--wp--preset--color--line, #e7e3d7);
        width: auto;
        max-width: none;
    }
}


/* ==========================================================================
   4. TEXT BLOCK / INTERLINKING  (.sc-interlinking-text)
   Source: generate_text_block
   ========================================================================== */

.sc-interlinking-text {
    margin: 20px 0;
    padding: 20px;
    background: var(--wp--preset--color--bg-soft, #f6f4ee);
    border-radius: var(--wp--custom--radius--md, 12px);
    border: 1px solid var(--wp--preset--color--line, #e7e3d7);
}

.sc-interlinking-text p {
    margin: 0 0 15px;
    line-height: 1.6;
    color: var(--wp--preset--color--ink, #0a0a0a);
    font-family: inherit;
}

/* Horizontal scrollable product strip */
.sc-interlinking-products {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    margin: 15px 0;
    overflow-x: scroll;
    overflow-y: hidden;
    padding: 8px 4px 16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--wp--preset--color--ink, #0a0a0a) transparent;
}

.sc-interlinking-products::-webkit-scrollbar {
    height: 6px;
}

.sc-interlinking-products::-webkit-scrollbar-track {
    background: var(--wp--preset--color--line, #e7e3d7);
    border-radius: 3px;
}

.sc-interlinking-products::-webkit-scrollbar-thumb {
    background: var(--wp--preset--color--ink, #0a0a0a);
    border-radius: 3px;
}

/* Individual product card (horizontal pill) */
.sc-interlinking-product {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--wp--preset--color--bg, #fff);
    padding: 10px 14px;
    border-radius: var(--wp--custom--radius--sm, 6px);
    border: 1px solid var(--wp--preset--color--line, #e7e3d7);
    text-decoration: none;
    transition: all 0.2s ease;
    min-width: 220px;
    flex-shrink: 0;
}

.sc-interlinking-product:hover {
    border-color: var(--wp--preset--color--ink, #0a0a0a);
    box-shadow: var(--wp--preset--shadow--card, 0 18px 40px -22px rgba(0,0,0,.22), 0 2px 6px rgba(0,0,0,.04));
}

.sc-interlinking-product img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    border-radius: 6px;
    flex-shrink: 0;
}

.sc-interlinking-product-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sc-interlinking-product-name {
    color: var(--wp--preset--color--ink, #0a0a0a);
    font-weight: 600;
    font-size: 13px;
    font-family: inherit;
}

.sc-interlinking-product-meta {
    color: var(--wp--preset--color--ink-3, #6b6b66);
    font-size: 11px;
}

.sc-interlinking-product-price {
    color: var(--wp--preset--color--warn, #c44a1a);
    font-weight: 600;
}

/* Calidad badges (inside text block) */
.sc-interlinking-text .sc-calidad-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    font-family: var(--wp--preset--font-family--display, "Space Grotesk", system-ui, sans-serif);
    color: var(--sc-on-color, #fff);
    line-height: 1;
    flex-shrink: 0;
    vertical-align: middle;
}

.sc-interlinking-text .sc-calidad-a {
    background: var(--wp--preset--color--accent, #1f6b3a);
}

.sc-interlinking-text .sc-calidad-b {
    background: #B8860B;
}

.sc-interlinking-text .sc-calidad-c {
    background: var(--wp--preset--color--warn, #c44a1a);
}

.sc-interlinking-text .sc-calidad-d {
    background: var(--wp--preset--color--warn, #c44a1a);
}

/* Override parent underline (e.g. .sc-premium-content a) on product cards */
.sc-interlinking-product,
.sc-interlinking-product:hover {
    text-decoration: none !important;
}

/* Category links footer */
.sc-interlinking-categories {
    margin-top: 10px;
    font-size: 14px;
}

.sc-interlinking-categories a {
    color: var(--wp--preset--color--accent, #1f6b3a);
    text-decoration: none;
    font-weight: 600;
}

.sc-interlinking-categories a:hover {
    text-decoration: underline;
}