@font-face {
    font-family: "wpf2d801c";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/6ac519/fonts/lora-700.woff2) format("woff2");
}

@font-face {
    font-family: "wpf2d801c";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/6ac519/fonts/lora-400.woff2) format("woff2");
}
:root {
    --awba: #1f9273;
    --zewm: #156b54;
    --mjr3: #e2843c;
    --qqpn: #f4fbf8;
    --qoj3: #ffffff;
    --phdf: #123028;
    --dj5w: #5a7d72;
    --va9u: #d5ebe3;
    --umxk: #ffffff;
    --f4cq: #111111;
    --gk9u: #e4f2ee;
    --r4by: #fcf0e8;
    --fy3l: "wpf2d801c", Charter, Georgia, serif;
    --ljr6: "wpf2d801c", "Book Antiqua", Palatino, Georgia, serif;
    --d62l: 600;
    --xcgz: -0.01em;
    --s415: 46rem;
    --xnju: 72rem;
    --tu29: 1.5rem;
    --ipba: 1.65;
    --kkhn: 3.4rem;
    --n6z9: 1rem;
    --zkwr: 3px;
}

/* Вигляд картки один на сайт: рамка, пласка або з тінню. Кути, повітря і рамки
   формують перцептивний відбиток не менше за колір, а коштує це три змінні. */

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
}

h1, h2, h3 {
    margin: 0;
    font-family: var(--fy3l);
    font-weight: var(--d62l);
    letter-spacing: var(--xcgz);
    line-height: 1.22;
}

p {
    margin: 0;
}

dl, dt, dd {
    margin: 0;
}

ul, ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
    height: auto;
}

svg {
    flex: none;
    display: block;
}


button {
    border: 0;
    color: inherit;
    font: inherit;
    background: none;
    padding: 0;
    margin: 0;
}

input, textarea {
    margin: 0;
    color: inherit;
    font: inherit;
}

summary {
    cursor: pointer;
}

[hidden] {
    display: none !important;
}

[id] {
    scroll-margin-top: 1.5rem;
}

/* каркас */

.bn_page {
    margin: 0;
    background: var(--qqpn);
    color: var(--phdf);
    font-family: var(--ljr6);
    font-size: 17px;
    line-height: var(--ipba);
    -webkit-font-smoothing: antialiased;
}

.bn_main {
    display: block;
}

.bn_zone {
    width: 100%;
    margin: 0 auto;
    max-width: var(--xnju);
    padding: 0 var(--tu29);
}

.bn_column {
    padding: 0 var(--tu29);
    margin: 0 auto;
    max-width: var(--s415);
    width: 100%;
}

.bn_sec {
    padding: var(--kkhn) 0;
}

.bn_sec-caption {
    margin-bottom: 1.1rem;
    font-size: 1.5rem;
}

.bn_anchor {
    color: var(--awba);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.bn_btn {
    display: inline-block;
    padding: 0.7rem 1.4rem;
    border: 0;
    border-radius: var(--zkwr);
    background: var(--awba);
    color: var(--umxk);
    font-weight: 600;
    cursor: pointer;
}

.bn_doc {
    gap: 1rem;
    display: grid;
}

.bn_prose {
    color: var(--phdf);
}

.bn_rev {
    color: var(--dj5w);
    margin-top: 0.5rem;
    font-size: 0.86rem;
}

/* шапка */

.bn_mast {
    border-bottom: 1px solid var(--va9u);
    background: var(--qoj3);
}

.bn_mast-core {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
}

.bn_mast-brand {
    align-items: center;
    display: inline-flex;
}

.bn_mast-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--fy3l);
    font-weight: 700;
    font-size: 1.15rem;
}

.bn_mast-bar {
    display: flex;
    align-items: center;
    gap: 1.1rem;
}

.bn_mast-anchor {
    font-size: 0.95rem;
    color: var(--dj5w);
}

.bn_mast-anchor:hover {
    color: var(--phdf);
}

.bn_mast-phone {
    color: var(--awba);
    font-weight: 600;
    align-items: center;
    display: inline-flex;
    gap: 0.4rem;
}

.bn_mast-strip {
    font-size: 0.85rem;
    background: var(--gk9u);
}

.bn_mast-strip-core {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

.bn_mast-hours {
    color: var(--dj5w);
}

/* перший екран */

.bn_opening {
    background: var(--qoj3);
    border-bottom: 1px solid var(--va9u);
}

.bn_opening-core {
    grid-template-columns: 1.15fr 1fr;
    align-items: center;
    display: grid;
    gap: 2rem;
}

.bn_opening-caption {
    font-size: 2.05rem;
}

.bn_opening-intro {
    color: var(--phdf);
    margin-top: 0.9rem;
}

.bn_opening-notice {
    margin-top: 1.1rem;
    align-items: flex-start;
    padding: 0.75rem 0.9rem;
    gap: 0.55rem;
    background: var(--r4by);
    display: flex;
    font-size: 0.95rem;
    border-radius: var(--zkwr);
}

.bn_opening-notice-icon {
    color: var(--mjr3);
    margin-top: 0.15rem;
}

.bn_opening-shot {
    border-radius: var(--zkwr);
    margin: 0;
    overflow: hidden;
}

.bn_opening-shot img {
    width: 100%;
    object-fit: cover;
    display: block;
    height: auto;
}

.bn_opening-flat .bn_opening-caption {
    max-width: 34rem;
}

.bn_opening-wide {
    overflow: hidden;
    margin: 1.4rem 0;
}

.bn_opening-wide img {
    display: block;
    height: clamp(11rem, 26vw, 20rem);
    object-fit: cover;
    width: 100%;
}

.bn_opening-facts {
    gap: 0.5rem;
    margin-top: 1.3rem;
    display: grid;
}

.bn_opening-fact {
    align-items: flex-start;
    gap: 0.55rem;
    display: flex;
    font-size: 0.95rem;
}

.bn_opening-fact-icon {
    color: var(--awba);
    margin-top: 0.15rem;
}

/* категорії */

.bn_cats-split {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
    display: grid;
}

.bn_cat {
    display: grid;
    gap: 0.35rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--va9u);
    border-radius: var(--zkwr);
    background: var(--qoj3);
}

.bn_cat-caption {
    font-family: var(--fy3l);
    font-weight: var(--d62l);
    font-size: 1.05rem;
}

.bn_cat-note {
    font-size: 0.92rem;
    color: var(--dj5w);
}

.bn_cats-roll {
    display: grid;
}

.bn_cat-row {
    padding: 0.85rem 0;
    gap: 1rem;
    border-top: 1px solid var(--va9u);
    grid-template-columns: 12rem 1fr;
    display: grid;
}

.bn_cat-row:last-child {
    border-bottom: 1px solid var(--va9u);
}

/* товари */

.bn_goods {
    background: var(--qoj3);
}

.bn_goods-header {
    justify-content: space-between;
    align-items: baseline;
    display: flex;
    gap: 1rem;
}

.bn_goods-count {
    font-size: 0.9rem;
    color: var(--dj5w);
}

.bn_goods-split {
    gap: 1rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}

.bn_goods-split .bn_good {
    display: grid;
    align-content: start;
    gap: 0.4rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--va9u);
    border-radius: var(--zkwr);
    background: var(--qqpn);
}

.bn_good-figure {
    margin: -1rem -1.1rem 0.6rem;
    overflow: hidden;
    border-radius: var(--zkwr) var(--zkwr) 0 0;
}

.bn_good-figure img {
    width: 100%;
    height: 11rem;
    display: block;
    object-fit: cover;
}

.bn_good-thumb {
    width: 4.5rem;
    border-radius: var(--zkwr);
    overflow: hidden;
    margin: 0;
    flex: none;
}

.bn_good-thumb img {
    display: block;
    object-fit: cover;
    height: 4.5rem;
    width: 100%;
}

.bn_good-name {
    font-size: 1rem;
}

.bn_good-note {
    font-size: 0.9rem;
    color: var(--dj5w);
}

.bn_good-price {
    font-family: var(--fy3l);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--awba);
}

.bn_price-roll {
    display: grid;
}

.bn_price-roll .bn_good {
    gap: 1rem;
    padding: 0.85rem 0;
    border-top: 1px dotted var(--va9u);
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.bn_price-roll .bn_good-main {
    flex: 1;
}

.bn_price-roll .bn_good:last-child {
    border-bottom: 1px dotted var(--va9u);
}

.bn_good-main {
    display: grid;
    gap: 0.15rem;
}

.bn_goods-few {
    justify-content: start;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 19rem));
}

.bn_good-end {
    margin-top: 0.2rem;
    gap: 0.5rem 0.7rem;
    flex-wrap: wrap;
    align-items: baseline;
    display: flex;
}

.bn_good-end-side {
    flex: none;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.4rem;
}

.bn_good-off {
    display: none !important;
}

.bn_good-out {
    opacity: 0.62;
}

.bn_good-out .bn_good-price {
    text-decoration: line-through;
    color: var(--dj5w);
}

.bn_good-ask {
    /* justify-self, а не align-self: усередині гріда картки друге тягне кнопку по
       вертикалі, а по горизонталі вона лишається на всю ширину рядка. */
    justify-self: start;
    align-self: start;
    margin-top: 0.35rem;
    padding: 0.28rem 0.7rem;
    border: 1px solid var(--va9u);
    border-radius: var(--zkwr);
    background: transparent;
    color: var(--awba);
    font-size: 0.85rem;
    cursor: pointer;
}

.bn_good-ask:hover {
    border-color: var(--awba);
}

.bn_cat, .bn_cat-row {
    width: 100%;
    cursor: pointer;
    text-align: left;
}

.bn_cat-on {
    border-color: var(--awba);
    background: var(--gk9u);
}

.bn_cats-split .bn_cat-on {
    border-color: var(--awba);
}

/* Кнопка "показати все" тільки з підписом, тому їй потрібна власна висота. */
.bn_cat-all {
    min-height: 3.2rem;
    align-content: center;
    color: var(--awba);
}

.bn_good-status {
    border-radius: 999px;
    color: var(--mjr3);
    padding: 0.1rem 0.5rem;
    background: var(--r4by);
    font-size: 0.78rem;
    white-space: nowrap;
}

/* широкі рядки товарів */

.bn_wide-roll {
    gap: 0.9rem;
    display: grid;
}

.bn_goods-wide .bn_good {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--va9u);
    border-radius: var(--zkwr);
    background: var(--qqpn);
}

.bn_good-side {
    border-radius: var(--zkwr);
    overflow: hidden;
    margin: 0;
    flex: none;
    width: 5.5rem;
}

.bn_good-side img {
    width: 100%;
    display: block;
    object-fit: cover;
    height: 5.5rem;
}

.bn_goods-wide .bn_good-main {
    justify-items: start;
    gap: 0.2rem;
    display: grid;
    flex: 1;
}

.bn_good-price-case {
    white-space: nowrap;
    flex: none;
}

/* візит: години, орієнтир, зона доставки */

.bn_visit-core {
    gap: 2rem;
    grid-template-columns: 1fr 1.2fr;
    display: grid;
    align-items: start;
}

.bn_hours-roll {
    display: grid;
}

.bn_hours-row {
    gap: 1rem;
    align-items: baseline;
    justify-content: space-between;
    padding: 0.45rem 0;
    border-bottom: 1px dotted var(--va9u);
    display: flex;
}

.bn_hours-day {
    color: var(--phdf);
}

.bn_hours-time {
    font-variant-numeric: tabular-nums;
    color: var(--dj5w);
    white-space: nowrap;
}

.bn_visit-notes {
    padding-top: 0.4rem;
    display: grid;
    gap: 0.8rem;
}

.bn_visit-note {
    align-items: flex-start;
    font-size: 0.96rem;
    display: flex;
    gap: 0.55rem;
}

.bn_visit-icon {
    color: var(--awba);
    margin-top: 0.2rem;
}

.bn_visit-since {
    color: var(--dj5w);
    font-size: 0.9rem;
}

.bn_visit-stack .bn_hours-roll {
    margin-bottom: 1.1rem;
}

.bn_visit-stack .bn_visit-note {
    margin-bottom: 0.5rem;
}

.bn_opening-since {
    color: var(--dj5w);
    font-size: 0.92rem;
    margin-top: 0.6rem;
}

.bn_opening-side .bn_opening-core {
    grid-template-columns: 0.85fr 1.15fr;
}

/* доставка */

.bn_ship-zone {
    background: var(--gk9u);
}

.bn_ship-shot {
    max-width: var(--xnju);
    overflow: hidden;
    margin: 1.4rem auto 0;
    padding: 0 var(--tu29);
}

.bn_ship-shot img {
    width: 100%;
    height: clamp(9rem, 20vw, 15rem);
    display: block;
    border-radius: var(--zkwr);
    object-fit: cover;
}

.bn_ship-core {
    gap: 2rem;
    align-items: start;
    grid-template-columns: 1.6fr 1fr;
    display: grid;
}

.bn_ship-prose {
    gap: 0.9rem;
    display: grid;
}

.bn_ship-aside {
    padding: 1.1rem;
    border-radius: var(--zkwr);
    gap: 0.35rem;
    background: var(--qoj3);
    display: grid;
}

.bn_ship-aside-key {
    font-family: var(--fy3l);
    font-weight: 700;
}

.bn_ship-aside-val {
    color: var(--dj5w);
    font-size: 0.93rem;
}

/* форма замовлення */

.bn_ask-note {
    color: var(--dj5w);
    margin-bottom: 1.1rem;
}

.bn_ask-form {
    display: grid;
    gap: 0.85rem;
}

.bn_ask-row {
    grid-template-columns: 1fr 1fr;
    display: grid;
    gap: 0.85rem;
}

.bn_ask-field {
    display: grid;
    gap: 0.3rem;
}

.bn_ask-label {
    font-size: 0.88rem;
    color: var(--dj5w);
}

.bn_ask-input {
    width: 100%;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--va9u);
    border-radius: var(--zkwr);
    background: var(--qoj3);
    font-family: inherit;
    font-size: 1rem;
}

.bn_ask-input:focus {
    outline: 2px solid var(--awba);
    outline-offset: 1px;
}

.bn_ask-area {
    resize: vertical;
}

.bn_ask-send {
    justify-self: start;
    padding: 0.7rem 1.6rem;
    border: 0;
    border-radius: var(--zkwr);
    background: var(--awba);
    color: var(--umxk);
    font-weight: 600;
    cursor: pointer;
}

.bn_ask-after {
    font-size: 0.9rem;
    color: var(--dj5w);
}

.bn_ask-form-sent .bn_ask-after {
    font-weight: 600;
    color: var(--mjr3);
}

.bn_ask-split {
    background: var(--qoj3);
}

.bn_ask-core {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 2rem;
    align-items: start;
}

.bn_ask-side {
    display: grid;
    gap: 0.5rem;
    padding: 1.2rem;
    border: 1px solid var(--va9u);
    border-radius: var(--zkwr);
}

.bn_ask-phone {
    font-family: var(--fy3l);
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--awba);
}

.bn_ask-side-note {
    color: var(--dj5w);
    font-size: 0.9rem;
}

/* новини */

.bn_log-caption {
    margin-bottom: 1rem;
    font-size: 1.35rem;
}

.bn_log-roll {
    gap: 0.5rem 1.2rem;
    grid-template-columns: auto 1fr;
    display: grid;
}

.bn_log-date {
    white-space: nowrap;
    font-size: 0.86rem;
    color: var(--dj5w);
}

.bn_log-note {
    font-size: 0.96rem;
}

.bn_log-split {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
    display: grid;
}

.bn_log-card {
    border-left: 2px solid var(--awba);
    background: var(--qoj3);
    display: grid;
    padding: 1rem;
    gap: 0.35rem;
}

/* питання */

.bn_answers-roll {
    display: grid;
    gap: 0.6rem;
}

.bn_answers-thing {
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--va9u);
    border-radius: var(--zkwr);
    background: var(--qoj3);
}

.bn_answers-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-family: var(--fy3l);
    font-weight: var(--d62l);
    list-style: none;
}

.bn_answers-q::-webkit-details-marker {
    display: none;
}

.bn_answers-sign {
    color: var(--dj5w);
}

.bn_answers-a {
    margin-top: 0.6rem;
    color: var(--dj5w);
}

.bn_answers-open .bn_answers-a {
    margin-top: 0.35rem;
}

/* адреса */

.bn_where {
    border-top: 1px solid var(--va9u);
}

.bn_where-core {
    gap: 1.2rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.bn_where-thing {
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 0.2rem 0.6rem;
    display: grid;
}

.bn_where-icon {
    grid-row: span 2;
    color: var(--awba);
}

.bn_where-key {
    font-family: var(--fy3l);
    font-weight: 700;
}

.bn_where-val {
    color: var(--dj5w);
    font-size: 0.93rem;
}

.bn_where-case {
    display: grid;
    gap: 0.4rem;
    background: var(--gk9u);
    padding: 1.3rem;
    border-radius: var(--zkwr);
    text-align: center;
}

.bn_where-line {
    font-size: 0.97rem;
}

.bn_where-hours {
    color: var(--dj5w);
}

.bn_where-phone {
    font-family: var(--fy3l);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--awba);
}

/* заголовок внутрішньої сторінки */

.bn_phead {
    border-bottom: 1px solid var(--va9u);
    background: var(--qoj3);
    padding: 2rem 0 1.2rem;
}

.bn_phead-tint {
    background: var(--gk9u);
}

.bn_phead-core {
    display: grid;
    gap: 0.4rem;
}

.bn_phead-back {
    color: var(--awba);
    font-size: 0.88rem;
}

.bn_phead-caption {
    font-size: 1.75rem;
}

.bn_phead-sub {
    color: var(--dj5w);
}

/* контакти */

.bn_cinfo {
    display: grid;
}

.bn_cinfo-row {
    padding: 0.8rem 0;
    gap: 1rem;
    border-top: 1px solid var(--va9u);
    grid-template-columns: 14rem 1fr;
    display: grid;
}

.bn_cinfo-row:last-child {
    border-bottom: 1px solid var(--va9u);
}

.bn_cinfo-key {
    color: var(--dj5w);
    font-size: 0.93rem;
    gap: 0.5rem;
    align-items: center;
    display: flex;
}

.bn_cinfo-icon {
    color: var(--awba);
}

.bn_cinfo-val {
    font-size: 0.97rem;
}

/* 404 */

.bn_nf {
    text-align: center;
    padding: 4rem 0;
}

.bn_nf-caption {
    font-size: 1.8rem;
}

.bn_nf-prose {
    margin: 0.7rem 0 1.4rem;
    color: var(--dj5w);
}

/* підвал */

.bn_end {
    border-top: 1px solid var(--va9u);
    margin-top: var(--kkhn);
    background: var(--qoj3);
}

.bn_end-core {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    padding-top: 1.8rem;
    padding-bottom: 1.2rem;
}

.bn_end-brand {
    display: grid;
    gap: 0.25rem;
}

.bn_end-name {
    font-family: var(--fy3l);
    font-weight: 700;
    font-size: 1.05rem;
}

.bn_end-note {
    font-size: 0.9rem;
    color: var(--dj5w);
}

.bn_end-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.1rem;
}

.bn_end-anchor {
    color: var(--dj5w);
    font-size: 0.9rem;
}

.bn_end-anchor:hover {
    color: var(--phdf);
}

.bn_end-bottom {
    gap: 0.4rem 1.2rem;
    padding-bottom: 1.6rem;
    display: flex;
    flex-wrap: wrap;
}

.bn_end-legal {
    font-size: 0.82rem;
    color: var(--dj5w);
}

.bn_end-reg {
    font-variant-numeric: tabular-nums;
}

.bn_end-narrow .bn_end-core {
    gap: 0.6rem;
    display: grid;
}

/* банер згоди */

.bn_notice {
    background: var(--zewm);
    color: var(--umxk);
    z-index: 20;
    position: fixed;
}

.bn_notice-bar {
    bottom: 0;
    right: 0;
    left: 0;
}

.bn_notice-core {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
}

.bn_notice-case {
    max-width: 22rem;
    padding: 1.1rem;
    bottom: 1rem;
    border-radius: var(--zkwr);
    left: 1rem;
}

.bn_notice-prose {
    font-size: 0.88rem;
}

.bn_notice-actions {
    align-items: center;
    margin-top: 0.6rem;
    display: flex;
    gap: 0.9rem;
}

.bn_notice-case .bn_notice-actions {
    margin-top: 0.9rem;
}

.bn_notice-more {
    color: inherit;
    font-size: 0.85rem;
    text-decoration: underline;
}

.bn_notice-accept {
    padding: 0.45rem 1.1rem;
    font-size: 0.9rem;
}

@media (max-width: 60rem) {
    .bn_opening-core,
    .bn_ship-core,
    .bn_visit-core,
    .bn_ask-core {
    grid-template-columns: 1fr;
}

    .bn_opening-side .bn_opening-core {
    grid-template-columns: 1fr;
}

    .bn_opening-shot {
    order: -1;
}
}

@media (max-width: 40rem) {
    :root {
    --kkhn: 2rem;
    --tu29: 1.1rem;
}

    .bn_opening-caption {
    font-size: 1.7rem;
}

    .bn_ask-row,
    .bn_cat-row,
    .bn_cinfo-row {
    grid-template-columns: 1fr;
}

    .bn_mast-bar {
    gap: 0.8rem;
}

    .bn_price-roll .bn_good {
    flex-wrap: wrap;
    gap: 0.3rem;
}
}
