| ` inherits that 835 px, so
* the inner ` ` becomes 835 px wide too. Inside the 400 px
* offcanvas only the first ~360 px of that div is visible, so the
* wrapped lines render past the drawer's right edge — they exist, they
* just sit off-screen.
*
* Fix: cap THIS one div's width to roughly the drawer's visible area.
* We deliberately do NOT touch `.shopping-cart` (JS hooks depend on it)
* nor the parent table / td / form styles. Only the dedicated
* `.eden-cart-saved-banner` class (added in cart.blade.php) is
* targeted. */
#shoppingCart .eden-cart-saved-banner {
/* Bootstrap offcanvas defaults `--bs-offcanvas-width: 400px`; minus
the offcanvas-body horizontal padding (~3rem total). Falls back
to a hard 360 px in browsers that don't surface the CSS var. */
max-width: calc(var(--bs-offcanvas-width, 400px) - 3rem);
width: 100%;
white-space: normal;
word-break: break-word;
overflow-wrap: anywhere;
line-height: 1.4;
font-size: 0.9rem;
}
/* ============================================================================
* 19. Home — "Helpful tips and expert advice" featured (left) blog image
*
* The Dermato template's left card was designed for a wide hero image; with
* Eden's portrait/square uploads it ends up dominating the section. Constrain
* the featured (left) image to a fixed 260×200 thumbnail. Targets the LEFT
* card only (`.blog-item .blog-image-item`); the right-stack thumbnails
* (`.blog-list .blog-image-item`) keep their original sizing.
* ============================================================================ */
.home-dermato .blog-item .blog-image-item {
width: 260px;
height: 200px;
overflow: hidden;
border-radius: var(--border-radius--m, 1rem);
flex: 0 0 auto;
}
.home-dermato .blog-item .blog-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
} |