/* ================================================================
   Bento Grid — Business Page Stylesheet (Consolidated)
   Mobile-First | Sections: Base · Nav · Grid · Cards · Hero ·
   QuickInfo · CTA · About · Services · Testimonials · Gallery ·
   Contact · Footer · Reveal · Swiper · Modal · SafeArea
   ================================================================ */

/* ===== Base ===== */
body {
    background: var(--gray-100);
    color: var(--text-default);
    -webkit-font-smoothing: antialiased;
}
h1 { font-size: clamp(1.8rem, 5vw, 2.8rem); font-weight: 800; line-height: 1.1; margin: 0; }
h2 { font-size: clamp(1.3rem, 3.5vw, 1.8rem); font-weight: 700; line-height: 1.15; margin: 0; }
h3 { font-size: clamp(1.4rem, 3vw, 1.8rem); font-weight: 700; margin: 0 0 0.6rem; }
h4 { font-size: clamp(1.2rem, 2.5vw, 1.5rem); font-weight: 600; margin: 0 0 0.4rem; }
h5 { font-size: clamp(1.15rem, 2vw, 1.35rem); font-weight: 500; margin: 0; line-height: 1.4; }

/* ===== Nav ===== */
.bp-nav {
    position: sticky; top: 0; z-index: 1030;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--gray-200);
}
.bp-nav-inner {
    max-width: 1200px; margin: 0 auto; padding: 0.6rem 1rem;
    display: flex; align-items: center; gap: 0.8rem;
}
.bp-nav-brand {
    font-weight: 700; font-size: clamp(1.2rem, 2vw, 1.4rem); color: var(--gray-900);
    text-decoration: none; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; flex-shrink: 1; min-width: 0;
}
.bp-nav-links {
    display: flex; gap: 0.6rem; list-style: none; margin: 0; padding: 0;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; flex-shrink: 0;
}
.bp-nav-links::-webkit-scrollbar { display: none; }
.bp-nav-links a {
    text-decoration: none; color: var(--gray-400); font-size: clamp(1.1rem, 1.5vw, 1.2rem);
    font-weight: 500; white-space: nowrap; padding: 0.3rem 0;
    transition: color 0.2s ease;
}
.bp-nav-links a:hover, .bp-nav-links a:active { color: var(--primary); }
.bp-nav-edit {
    margin-left: auto; flex-shrink: 0; white-space: nowrap;
    padding: 0.3rem 0.75rem; border: 1px solid var(--gray-200); border-radius: 999px;
    color: var(--gray-900); font-size: 0.9rem; font-weight: 600; text-decoration: none;
}
.bp-nav-edit:hover { border-color: var(--primary); color: var(--primary); }
.bp-nav-inner:has(.bp-nav-edit) .bp-nav-links { flex-shrink: 1; min-width: 0; }
@media (max-width: 767px) {
    .bp-nav-edit { font-size: 0.8rem; padding: 0.25rem 0.6rem; }
}
@media (min-width: 768px) {
    .bp-nav-inner { padding: 0.7rem 1.5rem; gap: 1.2rem; }
    .bp-nav-brand { flex-shrink: 0; }
    .bp-nav-links { gap: 1.2rem; overflow: visible; }
}

/* ===== Bento Grid Container ===== */
.bento {
    max-width: 1200px; margin: 0 auto; padding: 0.75rem;
    display: grid; grid-template-columns: 1fr; gap: 0.75rem;
}
@media (min-width: 600px) {
    .bento { grid-template-columns: repeat(2, 1fr); gap: 1rem; padding: 1rem; }
}
@media (min-width: 1024px) {
    .bento { grid-template-columns: repeat(4, 1fr); gap: 1.2rem; padding: 1.5rem; }
}

/* ===== Card Base ===== */
.bento-card {
    background: #fff; border-radius: 16px; padding: 1.2rem;
    border: 1px solid var(--gray-200);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden; position: relative;
}
@media (min-width: 600px) { .bento-card { border-radius: 18px; padding: 1.5rem; } }
@media (min-width: 1024px) {
    .bento-card { border-radius: 20px; padding: 1.8rem; }
    .bento-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.06); }
}

/* ===== Card Spans ===== */
.span-2, .span-3, .span-4 { grid-column: span 1; }
@media (min-width: 600px) {
    .span-2, .span-3, .span-4 { grid-column: span 2; }
}
@media (min-width: 1024px) {
    .span-2 { grid-column: span 2; }
    .span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; }
}

/* ===== Hero ===== */
.bento-hero {
    grid-column: span 1; min-height: 200px; padding: 0; border: none;
    border-radius: 16px; overflow: hidden; display: flex;
    align-items: flex-end; background-size: cover; background-position: center;
    position: relative;
}
.bento-hero-image {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.bento-hero::before {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.65) 100%);
}
.bento-hero-content {
    position: relative; z-index: 2; padding: 1.2rem; color: #fff; width: 100%;
}
.bento-hero-content h1 { text-shadow: 0 2px 10px rgba(0,0,0,0.5); margin-bottom: 0.2rem; }
.bento-hero-content h2 { color: rgba(255,255,255,0.85); text-shadow: 0 1px 6px rgba(0,0,0,0.4); }
@media (min-width: 600px) {
    .bento-hero { grid-column: 1 / -1; min-height: 280px; border-radius: 18px; }
    .bento-hero-content { padding: 1.8rem; }
}
@media (min-width: 1024px) {
    .bento-hero { grid-column: 1 / -1; min-height: 340px; border-radius: 20px; }
    .bento-hero-content { padding: 2rem 2.2rem; }
}

/* ===== Location badge =====
   It sits in the hero now. On its own card it was one small pill in a box
   stretched to the hero's height, which is the emptiest thing a card can be.
   Light on the hero's dark gradient, rather than the grey pill it was on
   white. */
.location-badge {
    display: inline-flex; align-items: center; gap: 0.4rem;
    margin-top: 0.6rem; padding: 0.4rem 0.75rem; border-radius: 999px;
    background: rgba(255, 255, 255, 0.16); color: #fff;
    backdrop-filter: blur(4px);
    font-size: clamp(0.95rem, 1.6vw, 1.05rem); font-weight: 500;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}
.location-badge .icon { width: 0.85em; height: 1em; fill: currentColor; }

/* ===== CTA Buttons ===== */
/* The two action cards are a pair under the hero, so they are laid out the
   same: a line of copy over a single button, centred. Every other card on the
   page is a column of text and stays left-aligned -- that is the distinction
   being drawn, not an inconsistency. */
.bento-cta-card, .bento-store {
    display: flex; flex-direction: column;
    justify-content: center; align-items: center; text-align: center;
}

.bento-action-text {
    text-wrap: balance;
    margin: 0 0 1.2rem; color: var(--muted, #6b6b70); max-width: 42ch;
    font-size: clamp(0.95rem, 1.6vw, 1.05rem);
}
.span-full { grid-column: 1 / -1; }

.bt-icon { width: 20px; height: 20px; fill: currentColor; flex-shrink: 0; }
.bt-text { display: flex; flex-direction: column; text-align: left; }
.btn-primary-custom {
    font-size: clamp(1.2rem, 2vw, 1.4rem);
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff; border: none; border-radius: 50px;
    transition: all 0.3s ease; padding: 0.6rem 1.2rem;
    display: inline-flex; align-items: center; gap: 0.6rem;
    box-shadow: 0 4px 14px rgba(13,161,112,0.3); min-height: 44px;
}
.btn-primary-custom:hover {
    transform: translateY(-2px); box-shadow: 0 6px 20px rgba(13,161,112,0.4); color: #fff;
}
.bt-div:hover {
    background-color: var(--gray-400); border-color: var(--gray-500);
    transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
@media (min-width: 600px) {
    .bt-icon { width: 24px; height: 24px; }
    .btn-primary-custom { padding: 0.8rem 1.8rem; gap: 1rem; }
}

/* ===== About ===== */
.bento-about-text p { font-size: clamp(1.5rem, 2.5vw, 1.6rem); line-height: 1.7; color: var(--gray-500); margin: 0 0 1rem; text-indent: 2rem; text-align: justify; }
.bento-about-text p:last-child { margin-bottom: 0; }
.bento-about { padding: 1.8rem; }
/* Nothing is laid out to pair with this one -- services and testimonials below
   already take a full row each -- so it takes the row too. Where a pairing is
   possible the template decides it instead, since it knows whether the company
   has a store; see the action cards in business_page.html. */
@media (min-width: 1024px) { .bento-about { grid-column: span 4; } }

/* Full width would give this a 150-character line, which nobody reads
   comfortably. A max-width fixes the line and leaves half the card empty --
   which is the same hole in a different place. Columns solve both: the text
   fills the card and each line stays about as long as it was before. */
@media (min-width: 1024px) {
    .bento-about-text { columns: 2; column-gap: 4rem; margin: 1rem; }
    .bento-about-text p:first-child { margin-top: 0; }
    /* Justifying a narrow column stretches word spacing into visible rivers:
       there is too little slack per line to distribute. */
    .bento-about-text p { text-align: left; }
}
@media (min-width: 600px) { .bento-about { padding: 2.1rem; } }
@media (min-width: 1024px) { .bento-about { padding: 2.4rem; } }

/* ===== Services ===== */
.bento-services { grid-column: span 1; }
@media (min-width: 600px) { .bento-services { grid-column: span 2; } }
@media (min-width: 1024px) { .bento-services { grid-column: span 4; } }

/* Flex, not a grid: the last row stretches to fill the card, where a grid
   left one service alone beside three empty columns. */
.bento-services-grid {
    display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 0.8rem;
}
@media (min-width: 600px) { .bento-services-grid { gap: 1rem; } }

.bento-service-group {
    flex: 1 1 300px;
    background: var(--gray-100); border-radius: 14px; padding: 1rem 1.2rem;
    border: 1px solid var(--gray-200);
}
/* The name first and darkest, then the price in the brand's colour: they are
   what a visitor scans for, and both used to be the faintest text here. */
.bento-service-group h4 {
    color: var(--gray-900); font-weight: 700; line-height: 1.25;
    font-size: clamp(1.6rem, 2.5vw, 1.7rem); margin: 0;
}
.bento-service-price {
    display: block; margin-top: 0.3rem;
    color: var(--primary-dark); font-weight: 700;
    font-size: clamp(1.5rem, 2.3vw, 1.6rem);
}

.bento-service-item {
    padding: 0.6rem 0 0.3rem;
}
/* Left, not justified: these cards are the narrowest text on the page, so
   there is almost no slack per line and justifying stretches the word spacing
   into visible gaps. The width is capped for the service that ends up alone
   on a row, where a line would run the whole card. */
.bento-service-item p {
    color: var(--gray-600); font-size: clamp(1.5rem, 2.5vw, 1.6rem);
    text-align: left; margin: 0; max-width: 62ch;
}

/* ===== Testimonials ===== */
.bento-testimonials { grid-column: span 1; }
@media (min-width: 600px) { .bento-testimonials { grid-column: span 2; } }
@media (min-width: 1024px) { .bento-testimonials { grid-column: span 4; } }

.bento-testimonials-swiper { text-align: left; padding: 0; }
.bento-testimonials-swiper .swiper-slide {
    border: none; background: transparent; padding: 0; border-radius: 0; height: auto;
}
.bento-testimonial-card {
    background: var(--gray-100); border-radius: 12px; padding: 1.2rem;
    height: 100%; display: flex; flex-direction: column; gap: 0.6rem;
}
.bento-testimonial-stars { display: flex; gap: 0.1rem; }
.bento-testimonial-stars .icon { color: #f5a623; font-size: 1.3rem; }
.bento-testimonial-text { font-size: clamp(1.5rem, 2.5vw, 1.6rem); color: var(--gray-500); line-height: 1.5; flex: 1; }
.bento-testimonial-author {
    font-weight: 600; font-size: clamp(1.5rem, 2.5vw, 1.6rem); color: var(--gray-900);
    display: flex; align-items: center; gap: 0.3rem;
}
.bento-testimonial-author .icon { color: var(--primary); font-size: 1.3rem; }
@media (min-width: 600px) {
    .bento-testimonial-card { border-radius: 14px; padding: 1.5rem; gap: 0.8rem; }
}
.bento-testimonial-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; }
.bento-testimonial-actions .btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    border-radius: 10px; font-size: clamp(1.2rem, 2vw, 1.3rem); padding: 0.45rem 0.9rem; min-height: 44px;
}
@media (min-width: 600px) {
    .bento-testimonial-actions .btn { padding: 0.5rem 1rem; gap: 0.5rem; }
}

/* ===== Partner Disclaimer ===== */
.bento-partner-disclaimer {
    text-align: center; padding: 1rem 1.5rem; margin-top: 1.5rem;
    background: transparent; border: none;
}
.bento-partner-disclaimer p {
    font-size: clamp(1.2rem, 2vw, 1.3rem); color: var(--gray-500); margin: 0;
    line-height: 1.6;
}
.bento-partner-disclaimer p + p { margin-top: 0.2rem; }
.partner-link { color: var(--primary); text-decoration: none; font-weight: 600; }
.partner-link:hover { text-decoration: underline; }

/* ===== Gallery / Carousel ===== */
.bento-gallery { grid-column: span 1; }
@media (min-width: 600px) { .bento-gallery { grid-column: span 2; } }
@media (min-width: 1024px) { .bento-gallery { grid-column: span 4; } }

.bento-gallery-swiper .swiper-slide {
    border: none; background: var(--gray-100); border-radius: 12px;
    overflow: hidden; padding: 0;
}
.bento-gallery-btn { border: none; background: none; padding: 0; width: 100%; cursor: pointer; }
/* The proportion the page chose, from its gallery_shape. A fixed height with
   object-fit: cover cropped a tall photo hard, whatever the page was for. The
   three values match the sizes declared in common/image_formats.py. */
.bento-gallery-swiper { --gallery-aspect: 1 / 1; }
.bento-gallery-swiper[data-aspect='landscape'] { --gallery-aspect: 16 / 9; }
.bento-gallery-swiper[data-aspect='portrait'] { --gallery-aspect: 3 / 4; }
.bento-gallery-img { aspect-ratio: var(--gallery-aspect); height: auto; object-fit: cover; border-radius: 12px; }
@media (min-width: 600px) {
    .bento-gallery-swiper .swiper-slide { border-radius: 14px; }
    .bento-gallery-img { border-radius: 14px; }
}
/* One photo with a caption reserves the strip on every slide, so a gallery
   mixing both keeps its photos lined up. Longer captions are cut at two lines
   here and read whole in the lightbox. */
.bento-gallery-slide { margin: 0; }
.bento-gallery-swiper.has-captions { --caption-height: 5.2rem; }
.has-captions .bento-gallery-slide { position: relative; padding-bottom: var(--caption-height); }
.has-captions .bento-gallery-img { border-radius: 0; }
.has-captions .swiper-pagination { position: static; margin-top: 0.8rem; }
.bento-gallery-caption {
    position: absolute; left: 1rem; right: 1rem; top: calc(100% - var(--caption-height) + 0.7rem);
    max-height: calc(var(--caption-height) - 1.4rem); margin: 0; overflow: hidden;
    font-size: 1.3rem; line-height: 1.4; color: var(--gray-500);
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
}

/* ===== Contact ===== */
.bento-contact { grid-column: span 1; }
@media (min-width: 600px) { .bento-contact { grid-column: span 2; } }
@media (min-width: 1024px) { .bento-contact { grid-column: span 4; } }

.bento-contact-grid { display: grid; grid-template-columns: 1fr; gap: 1.2rem; }
@media (min-width: 600px) { .bento-contact-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
@media (min-width: 1024px) { .bento-contact-grid { gap: 2rem; } }

.bento-contact-col { display: flex; flex-direction: column; gap: 0.8rem; }
@media (min-width: 600px) { .bento-contact-col { gap: 1rem; } }

.bento-contact-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.bento-contact-actions .btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    border-radius: 10px; font-size: clamp(1.2rem, 2vw, 1.3rem); padding: 0.45rem 0.9rem; min-height: 44px;
}
@media (min-width: 600px) {
    .bento-contact-actions .btn { padding: 0.5rem 1rem; gap: 0.5rem; }
}

.bento-contact-section { margin-top: 0.4rem; }

.bento-locations {
    background: var(--gray-100); border: 1px solid var(--gray-200);
    border-radius: 10px; padding: 0.8rem 1rem; margin-bottom: 0.8rem;
}
.bento-address {
    display: flex; flex-direction: row; gap: 0.6rem; align-items: flex-start;
    margin-bottom: 0.4rem;
}
.bento-address:last-child { margin-bottom: 0; }
.bento-address .icon { color: var(--primary); flex-shrink: 0; font-size: 1.2rem; margin-top: 0.1rem; }
.bento-address p { color: var(--gray-600); line-height: 1.5; font-size: clamp(1.15rem, 2vw, 1.35rem); font-weight: 500; margin: 0; }
.bento-contact-section .icon { font-size: 1.3rem; }
.bento-contact-actions .btn.disabled { opacity: 0.4; pointer-events: none; }

.bento-hours {
    display: flex; gap: 0.6rem; align-items: flex-start;
    background: var(--gray-100); border: 1px solid var(--gray-200);
    border-radius: 10px; padding: 0.8rem 1rem; margin-bottom: 0.8rem;
}
.bento-hours .icon { color: var(--primary); font-size: 1.2rem; flex-shrink: 0; margin-top: 0.1rem; }
.bento-hours p { color: var(--gray-600); line-height: 1.5; font-size: clamp(1.15rem, 2vw, 1.35rem); font-weight: 500; margin: 0; }
.bento-hours .bento-hours-note { font-size: 0.9em; font-weight: 400; opacity: 0.85; margin-top: 0.25rem; }

#get-directions-button .icon { font-size: 1.4rem; }

/* — Contact: map — */
.bento-map-placeholder {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.5rem; aspect-ratio: 16 / 9; border-radius: 14px; cursor: pointer;
    background: var(--gray-100); border: 1px solid var(--gray-200);
    transition: background 0.2s ease, border-color 0.2s ease;
}
.bento-map-placeholder .icon { font-size: 2rem; color: var(--primary); }
.bento-map-placeholder span { font-size: clamp(1.1rem, 1.5vw, 1.3rem); color: var(--gray-500); font-weight: 500; }
.bento-map-placeholder:hover { background: var(--gray-200); border-color: var(--gray-300); }

#google-map-container {
    border-radius: 14px; overflow: hidden; min-height: 200px; margin-top: 0.5rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08); border: 1px solid var(--gray-200);
}
#google-map-container iframe { width: 100%; height: 100%; border: none; }
@media (min-width: 600px) { #google-map-container { min-height: 280px; } }

/* ===== Articles ===== */
/* ===== Store ===== */
/* The two action cards sit side by side under the hero and have to read as a
   pair, so they are laid out the same: centred, one action each. Every other
   card on the page is a column of text and stays left-aligned -- that is the
   difference being drawn, not an inconsistency. */
.bento-store { grid-column: span 1; }
@media (min-width: 600px) { .bento-store { grid-column: span 2; } }
.bento-store-link { text-decoration: none; }

.bento-articles { grid-column: span 1; }
@media (min-width: 600px) { .bento-articles { grid-column: span 2; } }
@media (min-width: 1024px) { .bento-articles { grid-column: span 4; } }

.bento-articles-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 600px) { .bento-articles-grid { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; } }
@media (min-width: 1024px) { .bento-articles-grid { grid-template-columns: repeat(3, 1fr); } }

.bento-article-card {
    display: flex; flex-direction: column; height: 100%; overflow: hidden;
    background: var(--gray-100); border: 1px solid var(--gray-200); border-radius: 12px;
    text-decoration: none; color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.bento-article-card:hover {
    transform: translateY(-2px); border-color: var(--gray-300);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.bento-article-img { width: 100%; height: auto; aspect-ratio: 1960 / 1020; object-fit: cover; }
.bento-article-body { display: flex; flex-direction: column; gap: 0.4rem; padding: 1rem; flex: 1; }
.bento-article-title { font-size: clamp(1.5rem, 2.5vw, 1.7rem); color: var(--gray-900); line-height: 1.3; }
.bento-article-summary { font-size: clamp(1.2rem, 2vw, 1.3rem); color: var(--gray-500); line-height: 1.5; flex: 1; margin: 0; }
.bento-article-meta { font-size: clamp(1.1rem, 1.5vw, 1.2rem); color: var(--primary); font-weight: 600; }

.bento-articles-all {
    display: inline-block; margin-top: 1rem; font-weight: 600; text-decoration: none;
    font-size: clamp(1.2rem, 2vw, 1.3rem); color: var(--primary);
}
.bento-articles-all:hover { text-decoration: underline; }
@media (min-width: 600px) { .bento-article-card { border-radius: 14px; } .bento-article-img { height: 180px; } }
@media (prefers-reduced-motion: reduce) { .bento-article-card:hover { transform: none; } }

/* ===== Icon ===== */
.icon { width: 1em; height: 1em; display: inline-block; vertical-align: -.125em; fill: currentColor; flex-shrink: 0; }

/* ===== Footer ===== */
.bp-footer { background: var(--gray-900); color: var(--gray-200); padding: 1.5rem 0; margin-top: 0.5rem; font-size: 1.2rem; }
.bp-footer .small { font-size: 1.1rem; }
.bp-footer a { transition: all 0.3s ease; }
.bp-footer a:hover { color: var(--primary-light) !important; text-decoration: underline !important; }

/* ===== Reveal Animations ===== */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.08s; }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
}

/* ===== Swiper ===== */
.swiper-pagination-bullet-active { background: var(--primary); }

/* ===== Modal / Lightbox ===== */
.bento-lightbox { border-radius: 16px; border: none; background: #000; position: relative; }
.bento-lightbox-close {
    position: absolute; top: 0.5rem; right: 0.5rem; z-index: 1;
    background-color: rgba(255,255,255,0.7); border-radius: 50%; padding: 0.6rem;
}
.bento-lightbox-img {
    width: 100%; max-height: 85vh; object-fit: contain; border-radius: 16px;
    display: block;
}
.bento-lightbox-caption {
    margin: 0; padding: 1rem 1.4rem 1.2rem; color: #fff;
    font-size: 1.5rem; line-height: 1.5;
}

/* ===== Safe Area (notch / home indicator) ===== */
@supports (padding: env(safe-area-inset-bottom)) {
    .bp-nav-inner { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }
    .bento { padding-left: max(0.75rem, env(safe-area-inset-left)); padding-right: max(0.75rem, env(safe-area-inset-right)); }
}