/* =====================================================================
   Article / description content ("yp-prose").
   ONE stylesheet for two places: the public pages (product description, article, category, brand)
   and the admin text editor — so what the editor shows is what the visitor gets.
   Layout parts (boxes, image + text, buttons) adapt to the width of the text area itself
   (container queries), so the editor's "mobile" preview behaves like a real phone.
   ===================================================================== */

.yp-prose {
    container-type: inline-size;
    --yc-green: var(--yh-green, #1f4a2c);
    --yc-green-2: var(--yh-green-2, #2c6a3d);
    --yc-gold: var(--yh-gold, #f5b83d);
    --yc-gold-2: var(--yh-gold-2, #f8cf6a);
    --yc-line: var(--yd-edge, #e8dcc0);
    --yc-soft: var(--yd-soft, #f3ecdb);
}

/* ---------- text ---------- */
.yp-prose :where(h2, h3, h4) { line-height: 1.7; font-weight: 900; }
.yp-prose :where(p) { margin: 0 0 1.1em; }
.yp-prose :where(img) { max-width: 100%; height: auto; border-radius: 14px; }
.yp-prose :where(figure) { margin: 1.5em 0; }
.yp-prose :where(figure img) { display: block; margin-inline: auto; }
.yp-prose :where(figcaption) { margin-top: .5em; text-align: center; color: var(--yp-muted, #67776b); font-size: .86em; }
.yp-prose :where(iframe, video) { max-width: 100%; border-radius: 14px; }
.yp-prose :where(iframe) { aspect-ratio: 16 / 9; height: auto; }
.yp-prose hr { height: 3px; margin: 2em 0; border: 0; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--yc-gold), transparent); opacity: 1; }
.yp-prose :where(table) { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; margin: 1.2em 0; }
.yp-prose :where(th, td) { padding: 10px 14px; border: 1px solid var(--yc-line); }
.yp-prose :where(th) { background: var(--yc-soft); }
.yp-prose :where(blockquote) { margin: 1.4em 0; padding: 14px 18px; border-inline-start: 4px solid var(--yc-gold); border-radius: 0 14px 14px 0; background: var(--yc-soft); }

/* a picture the author floated left/right: full width on a narrow text area */
@container (max-width: 560px) {
    .yp-prose img[style*="float"] { float: none !important; display: block; margin: 1em auto !important; }
}

/* ---------- boxes ---------- */
.yp-prose .yp-box {
    --box: var(--yc-green-2);
    --box-bg: #eef7ee;
    margin: 1.5em 0;
    padding: 16px 20px;
    border-radius: 18px;
    background: var(--box-bg);
    border-inline-start: 5px solid var(--box);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--box) 22%, transparent);
}
.yp-prose .yp-box > :last-child { margin-bottom: 0; }
.yp-prose .yp-box__title { display: block; margin: 0 0 .4em; color: var(--box); font-weight: 900; font-size: 1.05em; }
.yp-prose .yp-box--tip { --box: #2c6a3d; --box-bg: #eef7ee; }
.yp-prose .yp-box--info { --box: #2563a8; --box-bg: #eaf3fc; }
.yp-prose .yp-box--warn { --box: #b7791f; --box-bg: #fdf3dc; }
.yp-prose .yp-box--danger { --box: #c0392b; --box-bg: #fdecea; }
.yp-prose .yp-box--gold {
    --box: #b7791f;
    --box-bg: #fff8e6;
    border-inline-start-width: 0;
    background: radial-gradient(circle at 100% 0, rgba(245, 184, 61, .22), transparent 55%), linear-gradient(180deg, #fffdf6, #fff4d6);
    box-shadow: inset 0 0 0 1.5px rgba(245, 184, 61, .6), 0 18px 30px -24px rgba(140, 95, 20, .6);
    text-align: center;
}
.yp-prose .yp-box--quote {
    --box: var(--yc-green-2);
    --box-bg: #f4f8f1;
    padding: 22px 26px;
    border-inline-start-width: 0;
    text-align: center;
    font-size: 1.12em;
    font-weight: 700;
    line-height: 2.1;
}
.yp-prose .yp-box--quote::before { content: "“"; display: block; color: var(--box); font-size: 2.6em; line-height: .6; font-family: Georgia, serif; }

:root[data-theme="dark"] .yp-prose .yp-box {
    background: color-mix(in srgb, var(--box) 20%, #121a15);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--box) 45%, transparent);
}
:root[data-theme="dark"] .yp-prose .yp-box--tip, :root[data-theme="dark"] .yp-prose .yp-box--quote { --box: #6fbf86; }
:root[data-theme="dark"] .yp-prose .yp-box--info { --box: #6aa9e8; }
:root[data-theme="dark"] .yp-prose .yp-box--warn, :root[data-theme="dark"] .yp-prose .yp-box--gold { --box: #f5b83d; }
:root[data-theme="dark"] .yp-prose .yp-box--danger { --box: #ef7d70; }

/* ---------- picture + text side by side ---------- */
.yp-prose .yp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 22px; align-items: center; margin: 1.8em 0; }
.yp-prose .yp-split > figure { margin: 0; }
.yp-prose .yp-split > figure img { width: 100%; border-radius: 18px; box-shadow: 0 18px 30px -22px rgba(0, 0, 0, .5); }
.yp-prose .yp-split > div > :last-child { margin-bottom: 0; }
.yp-prose .yp-split--rev > :first-child { order: 2; }
@container (max-width: 560px) {
    .yp-prose .yp-split { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .yp-prose .yp-split--rev > :first-child { order: 0; }
}

/* ---------- button link ---------- */
.yp-prose .yp-cta { margin: 1.8em 0; text-align: center; }
.yp-prose a.yp-cta__btn {
    display: inline-block;
    padding: 13px 34px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--yc-gold-2), var(--yc-gold));
    color: #2a1d05;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 14px 24px -14px rgba(140, 95, 20, .8), inset 0 -2px 0 rgba(0, 0, 0, .12);
}