/* OURA performance layer: safe rendering optimizations for below-the-fold content. */

@supports (content-visibility: auto) {
    .smart-home-section,
    .home-search-section,
    .home-concern-section,
    .home-birthday-wrap,
    .oura-replenishment-section,
    .concern-shop-page,
    .routine-builder-page,
    .skin-journey-page {
        content-visibility: auto;
        contain-intrinsic-size: auto 900px;
    }
}

.product-card-media picture,
.main-image picture {
    display: block;
    width: 100%;
    height: 100%;
}

.product-card-media img,
.assistant-product-media img,
.thumbnail,
.oura-replenishment-media img {
    image-rendering: auto;
}

/* ============================================================
   AI Beauty Assistant · response focus + smart follow-ups
============================================================ */

/* Keep controls visible and let only the conversation area shrink. */
.beauty-assistant-panel > header,
.beauty-assistant-prompts,
.beauty-assistant-form,
.beauty-assistant-panel > footer {
    flex-shrink: 0;
}

.beauty-assistant-prompts.is-smart {
    position: relative;
    display: block;
    flex: 0 0 auto;
    padding: 13px 14px 14px;
    border-top: 1px solid rgba(185, 142, 83, .18);
    border-bottom: 1px solid rgba(185, 142, 83, .12);
    background:
        radial-gradient(circle at 100% 0%, rgba(220, 195, 153, .16), transparent 11rem),
        linear-gradient(180deg, #fffdf8 0%, #faf5ec 100%);
    box-shadow: 0 -10px 28px rgba(58, 53, 31, .045);
    overflow: visible;
}

.assistant-prompt-heading {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    margin-bottom: 11px;
    color: #4f472d;
}

.assistant-prompt-heading > i {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 1px solid rgba(185, 142, 83, .20);
    border-radius: 10px;
    color: #6b5935;
    background: linear-gradient(145deg, rgba(220, 195, 153, .38), rgba(255, 253, 248, .96));
    font-size: .86rem;
}

.assistant-prompt-heading > span {
    min-width: 0;
    font-size: .73rem;
    font-weight: 850;
    line-height: 1.15;
    letter-spacing: .015em;
}

.assistant-prompt-heading > span::after {
    content: "Choose a next step to refine your results";
    display: block;
    margin-top: 3px;
    color: #92886d;
    font-size: .57rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
}

html[lang^="ar"] .assistant-prompt-heading > span::after {
    content: "اختر خطوة لتضييق النتائج بشكل أدق";
}

.assistant-prompt-heading::after {
    content: "SMART";
    align-self: start;
    padding: 4px 6px;
    border: 1px solid rgba(185, 142, 83, .18);
    border-radius: 999px;
    color: #81663d;
    background: rgba(185, 142, 83, .10);
    font-size: .46rem;
    font-weight: 900;
    letter-spacing: .08em;
}

html[lang^="ar"] .assistant-prompt-heading::after {
    content: "ذكي";
    letter-spacing: 0;
}

.assistant-prompt-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.beauty-assistant-prompts.is-smart .assistant-prompt-list button {
    position: relative;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;
    min-width: 0;
    min-height: 58px;
    gap: 8px;
    padding: 9px 10px;
    border: 1px solid rgba(107, 92, 57, .17);
    border-radius: 15px;
    color: #4d462d;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 6px 18px rgba(80, 66, 38, .055);
    font-size: .68rem;
    font-weight: 760;
    line-height: 1.28;
    text-align: start;
    white-space: normal;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.beauty-assistant-prompts.is-smart .assistant-prompt-list button:first-child {
    border-color: rgba(185, 142, 83, .30);
    background: linear-gradient(145deg, #fffdf8, #f7eddd);
}

.beauty-assistant-prompts.is-smart .assistant-prompt-list button > i {
    display: grid;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 9px;
    color: #665630;
    background: rgba(185, 142, 83, .14);
    font-size: .76rem;
}

.beauty-assistant-prompts.is-smart .assistant-prompt-list button > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.beauty-assistant-prompts.is-smart .assistant-prompt-list button::after {
    content: "›";
    color: #9c8a66;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1;
}

html[dir="rtl"] .beauty-assistant-prompts.is-smart .assistant-prompt-list button::after {
    transform: rotate(180deg);
}

.beauty-assistant-prompts.is-smart .assistant-prompt-list button:hover,
.beauty-assistant-prompts.is-smart .assistant-prompt-list button:focus-visible {
    border-color: rgba(107, 92, 57, .38);
    background: #fffdf8;
    box-shadow: 0 9px 22px rgba(80, 66, 38, .09);
    outline: none;
    transform: translateY(-1px);
}

.beauty-assistant-prompts.is-smart .assistant-prompt-list button:active {
    transform: translateY(0);
}

/* Separate the input visually from suggestions so buttons never look clipped. */
.beauty-assistant-prompts.is-smart + .beauty-assistant-form,
.beauty-assistant-form {
    position: relative;
    z-index: 2;
    background: rgba(255, 253, 248, .98);
}

.assistant-response-start {
    scroll-margin-top: 8px;
}

@media (max-width: 700px) {
    .beauty-assistant-prompts.is-smart {
        /* Critical: do not let flexbox collapse the suggestion panel. */
        flex: 0 0 auto;
        min-height: 174px;
        max-height: none;
        padding: 12px 12px 13px;
        overflow: visible;
    }

    .assistant-prompt-heading {
        margin-bottom: 9px;
    }

    .assistant-prompt-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    .beauty-assistant-prompts.is-smart .assistant-prompt-list button {
        min-height: 56px;
        padding: 8px;
        font-size: .66rem;
    }
}

@media (max-width: 360px) {
    .beauty-assistant-prompts.is-smart {
        min-height: 0;
        max-height: 218px;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .assistant-prompt-list {
        grid-template-columns: 1fr;
    }

    .beauty-assistant-prompts.is-smart .assistant-prompt-list button {
        min-height: 52px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
    }

    .beauty-assistant-prompts.is-smart .assistant-prompt-list button {
        transition: none;
    }
}