/**
 * AMG Slab Compare - Styles
 * Palette: Gold #F3B335  Dark #1d1609  Cream #fbf6ec
 */

.amg-compare { margin: 0; }
.amg-compare-panel { margin-bottom: 2rem; }

.amg-compare-open {
    display: inline-block;
    padding: 0.7rem 1.6rem;
    font-size: 0.78rem; font-weight: 700; font-family: inherit;
    text-transform: uppercase; letter-spacing: 0.1em;
    border-radius: 3px; cursor: pointer;
    background: transparent; color: #1d1609; border: 2px solid #1d1609;
    transition: all 0.2s;
}
.amg-compare-open:hover { background: #1d1609; color: #fbf6ec; }

.amg-compare-panel {
    margin-top: 1.25rem;
    padding: 1.25rem;
    background: #fbf6ec;
    border: 1px solid #e2d7bf;
    border-radius: 6px;
}

.amg-compare-label { display: block; font-size: 0.9rem; color: #1d1609; margin-bottom: 0.5rem; }
.amg-compare-search {
    width: 100%; max-width: 420px;
    padding: 0.6rem 0.9rem;
    border: 1px solid #d4c9b0; border-radius: 4px;
    font-size: 0.95rem; font-family: inherit; color: #1d1609; background: #fff;
}
.amg-compare-search:focus { outline: none; border-color: #F3B335; box-shadow: 0 0 0 3px rgba(243,179,53,0.2); }

.amg-compare-results { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.amg-cmp-hint { color: #8a7d66; font-size: 0.9rem; padding: 0.5rem 0; }

.amg-cmp-result {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.35rem 0.6rem 0.35rem 0.35rem;
    background: #fff; border: 1px solid #e0d7c4; border-radius: 4px;
    cursor: pointer; font-family: inherit; font-size: 0.85rem; color: #1d1609;
    transition: border-color 0.15s;
}
.amg-cmp-result:hover { border-color: #F3B335; }
.amg-cmp-result img { width: 40px; height: 40px; object-fit: cover; border-radius: 3px; }

/* Comparison view */
.amg-cmp { margin-top: 1.5rem; }
.amg-cmp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 1.25rem; }
.amg-cmp-img { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; background: #f0ebe0; }
.amg-cmp-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.amg-cmp-noimg { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; color: #b0a48a; font-size: 0.85rem; }
.amg-cmp-title { text-align: center; margin: 0.6rem 0 0 0; font-size: 1.05rem; }
.amg-cmp-title a { color: #1d1609; text-decoration: none; }
.amg-cmp-title a:hover { color: #b8860b; }

.amg-cmp-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 6px; overflow: hidden; }
.amg-cmp-table th, .amg-cmp-table td {
    padding: 0.6rem 0.85rem; text-align: left; font-size: 0.9rem;
    border-bottom: 1px solid #e8e0d0; vertical-align: top;
}
.amg-cmp-table thead th { background: #1d1609; color: #fbf6ec; font-size: 0.85rem; }
.amg-cmp-table thead th:first-child { background: #1d1609; }
.amg-cmp-table tbody th { width: 22%; color: #6b5c3e; font-weight: 600; background: #faf6ee; }
.amg-cmp-table td { width: 39%; color: #1d1609; }
.amg-cmp-table td.amg-cmp-diff { background: #fdf4dd; }

@media (max-width: 600px) {
    .amg-cmp-table th, .amg-cmp-table td { padding: 0.5rem 0.55rem; font-size: 0.82rem; }
}