/**
 * Zamseed Product Comparison Widget Styles
 *
 * @package Zamseed
 * @since 1.0.0
 */

.zs-product-comparison__header {
    margin-bottom: 32px;
    max-width: 700px;
}

.zs-product-comparison__eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--zs-accent-text, #9a6c1f);
}

.zs-product-comparison__heading {
    margin: 0 0 12px;
    font-family: var(--zs-font-serif, 'Cormorant Garamond', serif);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 700;
    color: var(--zs-primary, #2d5a27);
}

.zs-product-comparison__description {
    margin: 0;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--zs-muted, #555555);
}

/* ==========================================================================
   Scroller + next control

   These rules used to live only in assets/css/pages/product-detail.css under
   page-scoped class names, so the widget shipped a scroll region it could not
   style and a control it never rendered. The widget owns them now; the page
   stylesheet keeps only the crop-page tints.
   ========================================================================== */

.zs-product-comparison__scroller {
    position: relative;
}

.zs-product-comparison__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

.zs-product-comparison__scroll:focus-visible {
    outline: 2px solid var(--zs-primary, #2d5a27);
    outline-offset: 4px;
}

/* Circular next affordance, pinned above the top-right of the table. Hidden
   until the script measures real overflow, so it never promises a scroll that
   cannot happen. */
.zs-product-comparison__nav {
    position: absolute;
    top: -52px;
    right: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    /* The exported expand_circle_right glyph draws its own ring, so the
       control adds no background, border or radius of its own. */
    background: none;
    border: 0;
    color: var(--zs-text, #1c1c1c);
    cursor: pointer;
    transition: color 0.2s ease;
}

.zs-product-comparison__nav[hidden] {
    display: none;
}

.zs-product-comparison__nav:hover {
    color: var(--zs-primary, #2d5a27);
}

.zs-product-comparison__nav:focus-visible {
    outline: 2px solid var(--zs-primary, #2d5a27);
    outline-offset: 2px;
    border-radius: 50%;
}

.zs-product-comparison__nav svg {
    display: block;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
}

/* At the end of the track the arrow flips to point back to the start. */
.zs-product-comparison__nav.is-at-end svg {
    transform: scaleX(-1);
}

.zs-product-comparison__table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    overflow: hidden;
}

.zs-product-comparison__table th,
.zs-product-comparison__table td {
    padding: 16px 20px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    text-align: left;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 0.9375rem;
}

.zs-product-comparison__corner,
.zs-product-comparison__row-label {
    position: sticky;
    left: 0;
    z-index: 1;
}

.zs-product-comparison__corner {
    background-color: var(--zs-warm, #fdfcf9);
}

.zs-product-comparison__col-header {
    background-color: var(--zs-warm, #fdfcf9);
    text-align: center;
    vertical-align: top;
}

.zs-product-comparison__col-image {
    display: block;
    width: 100%;
    max-width: 140px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    margin: 0 auto 10px;
    border-radius: 10px;
}

.zs-product-comparison__col-badge {
    display: inline-block;
    margin-bottom: 6px;
    padding: 3px 10px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--zs-primary, #2d5a27);
    background-color: var(--zs-green-soft, #eef4df);
    border-radius: 999px;
}

.zs-product-comparison__col-name {
    display: block;
    font-family: var(--zs-font-serif, 'Cormorant Garamond', serif);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--zs-text, #1c1c1c);
    text-decoration: none;
}

a.zs-product-comparison__col-name:hover {
    color: var(--zs-primary, #2d5a27);
}

.zs-product-comparison__row-label {
    font-weight: 700;
    color: var(--zs-muted, #555555);
    background-color: var(--zs-warm, #fdfcf9);
    white-space: nowrap;
}

.zs-product-comparison__value {
    color: var(--zs-text, #1c1c1c);
    text-align: center;
    transition: background-color 0.2s ease;
}

.zs-product-comparison__value--highlight {
    background-color: rgba(45, 90, 39, 0.06);
    font-weight: 700;
    color: var(--zs-primary, #2d5a27);
}

/* Figma "Color/Jewel Dark" — the same data-emphasis green the variety stat
   figures use (widget-variety-explorer.css:151), so both readings of yield
   match wherever the two components share a page. Was #008236, a value in no
   palette that assets/css/pages/product-detail.css then had to override. */
.zs-product-comparison__row--emphasized .zs-product-comparison__value {
    color: #145f35;
}

.zs-product-comparison__empty {
    padding: 48px 24px;
    text-align: center;
    background-color: var(--zs-warm, #fdfcf9);
    border: 2px dashed var(--zs-border, rgba(0, 0, 0, 0.08));
    border-radius: 12px;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    color: var(--zs-muted, #555555);
}

@media (max-width: 760px) {
    .zs-product-comparison__header { margin-bottom: 24px; }
    .zs-product-comparison__table th,
    .zs-product-comparison__table td {
        padding: 12px 14px;
        font-size: 0.875rem;
    }
    .zs-product-comparison__nav { top: -44px; }
}

@media (prefers-reduced-motion: reduce) {
    .zs-product-comparison__scroll {
        scroll-behavior: auto;
    }

    .zs-product-comparison__nav,
    .zs-product-comparison__value {
        transition: none;
    }
}