/**
 * EY Complementary Products - frontend layout.
 *
 * Colours and font sizes are NOT set here: they are printed as inline CSS from
 * the plugin dashboard (EYCA_Settings::build_css). This file only owns layout,
 * plus the hard resets that stop Elementor / theme kits from leaking their
 * own global colours, typography and button styles into the widget.
 *
 * Selectors are intentionally doubled (.eyca-wrap.eyca-wrap) so their
 * specificity beats Elementor kit selectors such as `.elementor-kit-123 a`.
 */

/* --------------------------------------------------------------------------
 * Isolation layer
 * ----------------------------------------------------------------------- */

.eyca-wrap.eyca-wrap {
    display: block !important;
    box-sizing: border-box !important;
    margin: 28px 0 22px !important;
    padding: 16px 0 !important;
    border-top: 1px solid var(--eyca-line, #e4e1dc) !important;
    border-bottom: 1px solid var(--eyca-line, #e4e1dc) !important;
    border-left: 0 !important;
    border-right: 0 !important;
    background: none !important;
    box-shadow: none !important;
    direction: rtl !important;
    text-align: right !important;
    font-family: inherit !important;
    font-style: normal !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    --eyca-line: #e4e1dc;
}

.eyca-wrap.eyca-wrap *,
.eyca-wrap.eyca-wrap *::before,
.eyca-wrap.eyca-wrap *::after {
    box-sizing: border-box !important;
    font-family: inherit !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-shadow: none !important;
    float: none !important;
}

/* --------------------------------------------------------------------------
 * Head
 * ----------------------------------------------------------------------- */

.eyca-wrap.eyca-wrap .eyca-head {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
}

.eyca-wrap.eyca-wrap .eyca-head strong {
    display: block !important;
    margin: 0 !important;
    font-weight: 800 !important;
}

.eyca-wrap.eyca-wrap .eyca-head small {
    display: block !important;
    margin: 3px 0 0 !important;
    font-weight: 700 !important;
}

.eyca-wrap.eyca-wrap .eyca-head > span {
    flex: 0 0 auto !important;
    font-weight: 400 !important;
}

/* --------------------------------------------------------------------------
 * Card
 * ----------------------------------------------------------------------- */

.eyca-wrap.eyca-wrap .eyca-card {
    display: grid !important;
    grid-template-columns: 72px 1fr auto !important;
    gap: 13px !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 12px !important;
    border: 1px solid var(--eyca-line, #e4e1dc) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: border-color .18s ease, background .18s ease, opacity .18s ease !important;
}

.eyca-wrap.eyca-wrap .eyca-card.is-loading { opacity: .72 !important; }

.eyca-wrap.eyca-wrap .eyca-thumb {
    width: 72px !important;
    height: 86px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: #f1f1ef !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
}

.eyca-wrap.eyca-wrap .eyca-thumb img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: opacity .18s ease !important;
}

.eyca-wrap.eyca-wrap .eyca-card.is-loading .eyca-thumb img { opacity: .72 !important; }

.eyca-wrap.eyca-wrap .eyca-info {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* --------------------------------------------------------------------------
 * Text
 * ----------------------------------------------------------------------- */

.eyca-wrap.eyca-wrap a.eyca-name {
    display: inline-block !important;
    margin: 0 0 5px !important;
    padding: 0 !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    background: none !important;
    box-shadow: none !important;
    border: 0 !important;
    border-bottom: 1px solid transparent !important;
    transition: border-color .18s ease, color .18s ease !important;
}

.eyca-wrap.eyca-wrap a.eyca-name:hover,
.eyca-wrap.eyca-wrap a.eyca-name:focus-visible {
    border-bottom-color: currentColor !important;
    outline: none !important;
}

.eyca-wrap.eyca-wrap .eyca-meta {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
    padding: 0 !important;
}

.eyca-wrap.eyca-wrap .eyca-price {
    font-weight: 800 !important;
    line-height: 1.3 !important;
}

.eyca-wrap.eyca-wrap .eyca-price del { text-decoration: line-through !important; }

.eyca-wrap.eyca-wrap .eyca-price ins {
    text-decoration: none !important;
    background: none !important;
}

.eyca-wrap.eyca-wrap .eyca-variation-text:not(:empty)::before {
    content: '\2022';
    margin-left: 8px;
    color: #aaa;
}

.eyca-wrap.eyca-wrap .eyca-status {
    display: block !important;
    margin: 5px 0 0 !important;
    padding: 0 !important;
    line-height: 1.45 !important;
    font-weight: 400 !important;
}

/* --------------------------------------------------------------------------
 * Button
 * ----------------------------------------------------------------------- */

.eyca-wrap.eyca-wrap button.eyca-toggle {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 92px !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 14px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background .18s ease, color .18s ease, border-color .18s ease !important;
}

.eyca-wrap.eyca-wrap button.eyca-toggle:disabled,
.eyca-wrap.eyca-wrap button.eyca-toggle[disabled] {
    cursor: not-allowed !important;
}

.eyca-wrap.eyca-wrap .is-hidden { display: none !important; }

/* --------------------------------------------------------------------------
 * Responsive
 * ----------------------------------------------------------------------- */

@media (max-width: 600px) {
    .eyca-wrap.eyca-wrap .eyca-card {
        grid-template-columns: 62px 1fr !important;
        gap: 10px !important;
        padding: 10px !important;
    }
    .eyca-wrap.eyca-wrap .eyca-thumb { width: 62px !important; height: 74px !important; }
    .eyca-wrap.eyca-wrap button.eyca-toggle {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    .eyca-wrap.eyca-wrap .eyca-head > span { display: none !important; }
}