:root {
    --clr-protein: #2EAD65;
    --clr-protein-bg: #E2F7EA;
    --clr-protein-border: #BDE9CD;
    --clr-fat: #FFBF17;
    --clr-fat-bg: #FFF6CF;
    --clr-fat-border: #F3E09A;
    --clr-carbs: #FF7A1F;
    --clr-carbs-bg: #FFE5D4;
    --clr-carbs-border: #F9C7A4;
    --clr-cal: #6B4F16;
    --clr-cal-bg: #FFF1DC;
    --clr-cal-border: #E8D2AD;
    --macro-donut-bg: #F2F7F4;
    --clr-panel-bg: #f0faf4;
    --clr-panel-border: #d3ead9;
    --clr-card-border: #d9e9dd;
    --clr-card-title: #1f5c35;
    --clr-text-strong: #173f2a;
    --radius-lg: 18px;
    --radius-md: 14px;
    --radius-sm: 10px;
    --font-xs: .58rem;
    --font-sm: .65rem;
    --font-n: .75rem;
    --font-lg: .9rem;
}

/* Область страницы продукта: держит всё внутри max-width родителя */
.product-page-shell {
    background: var(--clr-panel-bg);
    border: 1px solid var(--clr-panel-border);
    border-radius: var(--radius-lg);
    margin-top: .75rem;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
    position: relative;
}

/* Фикс: grid не выходит за пределы контейнера */
.product-grid {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 1.75rem;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

    /* Колонки grid - заплатка: всегда можно сжимать внутри .product-page-shell */
    .product-grid > *,
    .product-left,
    .product-right {
        min-width: 0;
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    /* Никогда не допускаем вылезания крупных медиа */
    .product-grid img,
    .product-grid video,
    .product-grid canvas,
    .product-grid svg {
        max-width: 100%;
        height: auto;
        display: block;
    }

    /* Длинные строки не ломают раскладку */
    .product-grid p,
    .product-grid h1, .product-grid h2, .product-grid h3, .product-grid h4, .product-grid h5, .product-grid h6,
    .product-grid li, .product-grid a, .product-grid span, .product-grid div {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* Таблицы скроллятся внутри, не распирают grid */
    .product-grid .table-responsive {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .product-grid table {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
    }

/* Адаптация под мобильный — single column */
@media (max-width:1100px) {
    .product-grid {
        grid-template-columns: 1fr;
    }
}

.product-left,
.product-right {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.core-card {
    background: #fff;
    border: 1px solid var(--clr-card-border);
    border-radius: var(--radius-md);
    padding: 1.05rem 1.05rem 1.1rem;
    display: flex;
    flex-direction: column;
    position: relative;
    box-sizing: border-box;
    max-width: 100%;
    overflow-x: hidden;
}

.core-title {
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--clr-card-title);
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .7rem;
}

.info-dl {
    display: grid;
    grid-template-columns: 140px 1fr;
    row-gap: .45rem;
    column-gap: 1rem;
    font-size: .75rem;
    margin: 0;
}

    .info-dl dt {
        font-weight: 600;
        color: #2d6442;
    }

/* KBG row (Protein, Fat, Carbs, Calories) */
.kbg-row {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(80px,1fr));
    gap: .55rem;
    margin-top: .6rem;
}

.kbg-box {
    background: #f6faf8;
    border: 1px solid #e2efe6;
    border-radius: 9px;
    padding: .45rem .5rem .5rem;
    display: flex;
    flex-direction: column;
    min-height: 90px;
    text-align: center;
    justify-content: center;
    transition: background .25s,border-color .25s;
    box-sizing: border-box;
    max-width: 100%;
    overflow-x: hidden;
}

    .kbg-box.box-prot {
        background: var(--clr-protein-bg);
        border-color: var(--clr-protein-border);
    }

    .kbg-box.box-fat {
        background: var(--clr-fat-bg);
        border-color: var(--clr-fat-border);
    }

    .kbg-box.box-carb {
        background: var(--clr-carbs-bg);
        border-color: var(--clr-carbs-border);
    }

    .kbg-box.box-cal {
        background: var(--clr-cal-bg);
        border-color: var(--clr-cal-border);
    }

.kbg-icon {
    font-size: .95rem;
    color: #1f5c35;
    margin-bottom: .15rem;
    line-height: 1;
}

.kbg-label {
    font-size: .52rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #2f3f30;
    margin: .15rem 0 0;
}

.kbg-val {
    font-size: .95rem;
    font-weight: 700;
    color: var(--clr-text-strong);
    line-height: 1;
    margin-top: .05rem;
}

/* Macro Chart (Donut) */
.macro-chart-card {
    background: #fff;
    border: 1px solid var(--clr-card-border);
    border-radius: var(--radius-md);
    padding: 1rem 1.05rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: .7rem;
    font-size: .8rem;
    box-sizing: border-box;
    max-width: 100%;
    overflow-x: hidden;
}

.macro-chart-title {
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--clr-card-title);
    margin: 0;
}

.macro-chart-wrap {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
}

.macro-chart-legend.legend-grid {
    display: grid;
    grid-template-columns: 14px 72px 70px 50px;
    align-items: center;
    row-gap: .35rem;
    column-gap: .55rem;
    font-size: .68rem;
    font-weight: 600;
    color: #1d3526;
    font-feature-settings: "tnum" 1,"lnum" 1;
    min-width: 170px;
}

.legend-head {
    font-size: .6rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #2c6442;
    font-weight: 700;
    opacity: .85;
}

.legend-col-label {
    grid-column: 2/3;
}

.legend-col-grams {
    grid-column: 3/4;
    text-align: right;
}

.legend-col-pct {
    grid-column: 4/5;
    text-align: right;
}

.legend-row {
    display: contents;
}

.legend-dot {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    display: inline-block;
    box-shadow: 0 0 0 1px rgba(0,0,0,.05);
    align-self: center;
}

.legend-prot {
    background: var(--clr-protein);
}

.legend-fat {
    background: var(--clr-fat);
}

.legend-carb {
    background: var(--clr-carbs);
}

.legend-label {
    text-align: left;
}

.legend-grams {
    text-align: right;
    color: #16472c;
    font-weight: 600;
    padding-right: .25rem;
}

.legend-pct {
    text-align: right;
    color: #10351f;
    font-weight: 700;
}

/* Donut itself */
.macro-chart-canvas {
    position: relative;
    width: 190px;
    height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.macro-chart-empty {
    background: #f6faf8;
    border: 1px dashed #cfe2d4;
    padding: .8rem;
    font-size: .65rem;
    color: #5b6d60;
    border-radius: 10px;
    text-align: center;
}

.macro-donut {
    width: 180px;
    height: 180px;
    transform: rotate(-90deg); /* start at 12 o'clock */
    overflow: visible;
}

    .macro-donut circle {
        fill: none;
    }

.donut-bg {
    stroke: var(--macro-donut-bg);
    stroke-width: 28;
}

.donut-seg {
    stroke-width: 28;
    stroke-linecap: butt;
    transition: stroke-dasharray .55s ease, stroke-dashoffset .55s ease, opacity .25s;
}

.seg-protein {
    stroke: var(--clr-protein);
}

.seg-fat {
    stroke: var(--clr-fat);
}

.seg-carbs {
    stroke: var(--clr-carbs);
}

.donut-hole {
    fill: #fff;
    stroke: none;
    transform: rotate(90deg); /* compensate global rotate for visual text baseline */
}

.macro-donut text {
    transform: rotate(90deg);
    font-family: inherit;
}

.pie-main-val {
    font-size: .95rem;
    font-weight: 800;
    fill: #133621;
}

.pie-sub-val {
    font-size: .55rem;
    font-weight: 600;
    fill: #2e5b3c;
    letter-spacing: .06em;
}

.macro-donut .donut-seg:hover {
    opacity: .88;
    cursor: pointer;
}

/* Description under chart */
.macro-chart-desc {
    font-size: .7rem;
    line-height: 1.45;
    color: #1b3a28;
    background: #ecf8f1;
    border: 1px solid #cfe7d7;
    border-radius: 10px;
    padding: .6rem .7rem;
    font-weight: 500;
}

    .macro-chart-desc strong {
        color: #0f512e;
    }

@media (max-width:650px) {
    .macro-chart-wrap {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Misc / existing supplemental styles */
.product-note {
    background: #ecf8f1;
    border: 1px solid #cfe7d7;
    border-radius: 8px;
    padding: .55rem .7rem;
    font-size: .62rem;
    font-weight: 500;
    color: #1f5133;
    letter-spacing: .03em;
    margin-top: .85rem;
}

.warning-badges-line {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.warning-badge {
    font-size: .65rem;
    padding: .45rem .55rem;
    border-radius: 6px;
}

.selector-field-block .selector-label {
    font-size: .63rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #2a7c3f;
    margin-bottom: .25rem;
}

.product-page-shell .form-control,
.product-page-shell .form-select {
    border-radius: 10px;
    border: 1px solid #d0e6d4;
    font-size: .78rem;
    padding: .5rem .65rem;
    box-sizing: border-box;
    max-width: 100%;
}

    .product-page-shell .form-control:focus,
    .product-page-shell .form-select:focus {
        border-color: #35a366;
        box-shadow: 0 0 0 .12rem rgba(53,163,102,.25);
    }