/* ============================================================
   Amazon Affiliate Cluster  –  Frontend Styles v1.2
   Máxima especificidad para anular plugins externos (underline, etc.)
   ============================================================ */

/* ── Anular CUALQUIER plugin de underline con especificidad máxima ── */
html body .aac-cluster a,
html body .aac-cluster a:link,
html body .aac-cluster a:visited,
html body .aac-cluster a:hover,
html body .aac-cluster a:focus,
html body .aac-cluster a:active,
html body .aac-cluster a::before,
html body .aac-cluster a::after {
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-decoration-color: transparent !important;
    border-bottom: none !important;
    border-bottom-width: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
    -webkit-text-decoration: none !important;
}

/* ── Reset base ───────────────────────────────────────────── */
.aac-cluster,
.aac-cluster * {
    box-sizing: border-box;
}

/* ── CSS custom props (override desde PHP inline style) ────── */
.aac-cluster {
    --aac-card-bg:       #1e1f2e;
    --aac-card-bg2:      #252637;
    --aac-border:        #35364a;
    --aac-accent:        #e47911;
    --aac-accent-txt:    #ffffff;
    --aac-title-color:   #ffffff;
    --aac-title-size:    0.85rem;
    --aac-btn-size:      0.875rem;

    display: grid;
    gap:     16px;
    margin:  1.75em 0;
    width:   100%;
}

.aac-cols-1 { grid-template-columns: 1fr; max-width: 280px; }
.aac-cols-2 { grid-template-columns: repeat(2, 1fr); }
.aac-cols-3 { grid-template-columns: repeat(3, 1fr); }
.aac-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ── Card ─────────────────────────────────────────────────── */
.aac-product-card {
    background:     var(--aac-card-bg);
    border:         1px solid var(--aac-border);
    border-radius:  12px;
    box-shadow:     0 4px 18px rgba(0,0,0,.38);
    overflow:       hidden;
    display:        flex;
    flex-direction: column;
    transition:     box-shadow .22s ease, transform .22s ease;
}
.aac-product-card:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,.55);
    transform:  translateY(-3px);
}

/* ── Image area — full bleed, auto-fit ───────────────────── */
.aac-product-image {
    background:      var(--aac-card-bg2);
    display:         flex;
    align-items:     center;
    justify-content: center;
    border-bottom:   1px solid var(--aac-border);
    width:           100%;
    aspect-ratio:    1 / 1;   /* cuadrado perfecto */
    overflow:        hidden;
    position:        relative;
}

html body .aac-cluster .aac-product-image a,
html body .aac-cluster .aac-product-image a:link,
html body .aac-cluster .aac-product-image a:visited,
html body .aac-cluster .aac-product-image a:hover,
html body .aac-cluster .aac-product-image a:focus,
html body .aac-cluster .aac-product-image a:active {
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    width:           100% !important;
    height:          100% !important;
    position:        absolute !important;
    inset:           0 !important;
    text-decoration: none !important;
    border-bottom:   none !important;
    box-shadow:      none !important;
    background:      transparent !important;
    padding:         8px !important;
    margin:          0 !important;
    outline:         none !important;
}

.aac-product-image img {
    width:        100% !important;
    height:       100% !important;
    object-fit:   contain !important;
    display:      block !important;
    border:       none !important;
    box-shadow:   none !important;
    border-radius:0 !important;
    padding:      8px !important;
    transition:   transform .3s ease;
}
.aac-product-card:hover .aac-product-image img {
    transform: scale(1.05);
}

/* Placeholder SVG cuando no hay imagen */
.aac-img-placeholder {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           80%;
    height:          80%;
    opacity:         .5;
}
.aac-img-placeholder svg { width:100%; height:100%; }

/* ── Product info ─────────────────────────────────────────── */
.aac-product-info {
    padding: 14px 14px 16px;
    display: flex;
    flex-direction: column;
    flex:    1;
    gap:     10px;
}

/* ── Title — máxima especificidad para forzar color y sin subrayado ── */
html body .aac-cluster .aac-product-title {
    margin:          0 !important;
    padding:         0 !important;
    font-size:       var(--aac-title-size) !important;
    line-height:     1.45 !important;
    text-decoration: none !important;
    border-bottom:   none !important;
    border:          none !important;
    box-shadow:      none !important;
    background:      transparent !important;
    display:         -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow:        hidden !important;
}

html body .aac-cluster .aac-product-title a,
html body .aac-cluster .aac-product-title a:link,
html body .aac-cluster .aac-product-title a:visited,
html body .aac-cluster .aac-product-title a:hover,
html body .aac-cluster .aac-product-title a:focus,
html body .aac-cluster .aac-product-title a:active,
html body .aac-cluster .aac-product-title a::before,
html body .aac-cluster .aac-product-title a::after {
    color:                    var(--aac-title-color) !important;
    text-decoration:          none !important;
    text-decoration-line:     none !important;
    text-decoration-color:    transparent !important;
    text-decoration-style:    initial !important;
    text-decoration-thickness:0 !important;
    -webkit-text-decoration:  none !important;
    border-bottom:            none !important;
    border-bottom-width:      0 !important;
    box-shadow:               none !important;
    background-image:         none !important;
    background:               transparent !important;
    outline:                  none !important;
    font-weight:              500 !important;
}

/* ── Buy button — máxima especificidad ───────────────────── */
html body .aac-cluster a.aac-buy-button,
html body .aac-cluster a.aac-buy-button:link,
html body .aac-cluster a.aac-buy-button:visited,
html body .aac-cluster a.aac-buy-button:hover,
html body .aac-cluster a.aac-buy-button:focus,
html body .aac-cluster a.aac-buy-button:active,
html body .aac-cluster a.aac-buy-button::before,
html body .aac-cluster a.aac-buy-button::after {
    display:              inline-flex !important;
    align-items:          center !important;
    justify-content:      center !important;
    gap:                  6px !important;
    margin-top:           auto !important;
    padding:              10px 14px !important;
    background:           var(--aac-accent) !important;
    background-image:     none !important;
    color:                var(--aac-accent-txt) !important;
    font-size:            var(--aac-btn-size) !important;
    font-weight:          700 !important;
    letter-spacing:       .02em !important;
    text-decoration:      none !important;
    text-decoration-line: none !important;
    -webkit-text-decoration: none !important;
    border-bottom:        none !important;
    border-bottom-width:  0 !important;
    border:               none !important;
    box-shadow:           none !important;
    border-radius:        8px !important;
    cursor:               pointer !important;
    width:                100% !important;
    white-space:          nowrap !important;
    transition:           background .18s ease, transform .15s ease !important;
}

html body .aac-cluster a.aac-buy-button:hover,
html body .aac-cluster a.aac-buy-button:focus {
    filter:  brightness(.88) !important;
    transform: scale(1.02) !important;
    outline: none !important;
}

html body .aac-cluster a.aac-buy-button svg {
    width:        15px !important;
    height:       15px !important;
    flex-shrink:  0 !important;
    fill:         currentColor !important;
    border:       none !important;
    box-shadow:   none !important;
    background:   transparent !important;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 900px) {
    .aac-cols-4 { grid-template-columns: repeat(2, 1fr); }
    .aac-cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
    .aac-cols-4,.aac-cols-3,.aac-cols-2 { grid-template-columns: 1fr; }
    .aac-cols-1 { max-width: 100%; }
}

.alignwide .aac-cluster,
.alignfull .aac-cluster { max-width: none; }