/*
 * Bloom storefront theme: a warm, rounded look for stationery, toys, gifts and jewellery.
 * Original styling on top of Bootstrap 5.3 (MIT); page structure follows Start Bootstrap's Shop Homepage (MIT).
 * Colours come from the tenant's branding (--bs-primary / --bs-secondary, set in the layout); the rest derive from them.
 */
:root {
    --bloom-cream: #fff8f0;
    --bloom-ink: #2b2d42;
    --bloom-muted: #6b7080;
    --bloom-line: #f0e4d6;
    --bloom-radius: 1.1rem;
    --bs-body-font-family: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
    --bs-body-color: var(--bloom-ink);
    --bs-body-bg: var(--bloom-cream);
    --bs-link-color: var(--bs-primary);
    --bs-link-hover-color: var(--bs-primary);
    --bs-border-radius: .75rem;
}
/* Sticky footer: the page is a full-height column and <main> takes the spare room, so the footer sits at the bottom of short pages too. */
body.bloom { min-height: 100vh; display: flex; flex-direction: column; }
body.bloom > main { flex: 1 0 auto; }
body.bloom { background: var(--bloom-cream); color: var(--bloom-ink); font-family: var(--bs-body-font-family); }
.bloom h1, .bloom h2, .bloom h3, .bloom h4, .bloom h5, .bloom .bloom-brand { font-family: "Baloo 2", "Nunito", sans-serif; font-weight: 700; color: var(--bloom-ink); letter-spacing: .005em; }
.bloom a { text-decoration: none; }
.bloom a:hover { text-decoration: underline; text-underline-offset: 3px; }
.bloom .text-primary { color: var(--bs-primary) !important; }
.bloom .text-muted { color: var(--bloom-muted) !important; }

/* Buttons: pill-shaped, brand coloured, readable on whatever colour the tenant picked. */
.bloom .btn { border-radius: 50rem; font-weight: 700; padding: .55rem 1.3rem; }
.bloom .btn-primary { --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-color: var(--sf-on-primary); --bs-btn-hover-bg: var(--bs-primary); --bs-btn-hover-border-color: var(--bs-primary); --bs-btn-hover-color: var(--sf-on-primary); --bs-btn-active-bg: var(--bs-primary); --bs-btn-active-color: var(--sf-on-primary); --bs-btn-focus-shadow-rgb: 242, 92, 84; }
.bloom .btn-primary:hover { filter: brightness(.93); }
.bloom .btn-secondary { --bs-btn-bg: var(--bs-secondary); --bs-btn-border-color: var(--bs-secondary); --bs-btn-color: var(--sf-on-secondary); --bs-btn-hover-bg: var(--bs-secondary); --bs-btn-hover-border-color: var(--bs-secondary); --bs-btn-hover-color: var(--sf-on-secondary); }
.bloom .btn-outline-primary { --bs-btn-color: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-bg: var(--bs-primary); --bs-btn-hover-border-color: var(--bs-primary); --bs-btn-hover-color: var(--sf-on-primary); --bs-btn-active-bg: var(--bs-primary); --bs-btn-active-color: var(--sf-on-primary); }
.bloom .form-control, .bloom .form-select { border-radius: .8rem; border-color: var(--bloom-line); background-color: #fff; padding: .6rem .9rem; }
.bloom .form-control:focus, .bloom .form-select:focus { border-color: var(--bs-primary); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--bs-primary) 22%, transparent); }
.bloom .alert { border-radius: var(--bloom-radius); border: 0; }
.bloom .page-link { border-radius: 50rem; margin: 0 .15rem; border-color: var(--bloom-line); color: var(--bloom-ink); }
.bloom .page-item.active .page-link { background: var(--bs-primary); border-color: var(--bs-primary); color: var(--sf-on-primary); }
.bloom .table { --bs-table-bg: transparent; }
.bloom .border.rounded, .bloom .border.rounded-3 { border-color: var(--bloom-line) !important; border-radius: var(--bloom-radius) !important; background: #fff; }

/* Top strip + navigation */
.bloom-topbar { background: var(--bs-secondary); color: var(--sf-on-secondary); font-size: .85rem; padding: .4rem 0; }
.bloom-topbar a { color: inherit; opacity: .95; }
.bloom-nav { background: rgba(255, 248, 240, .94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--bloom-line); padding: .6rem 0; }
.bloom-brand { font-size: 1.6rem; display: inline-flex; align-items: center; gap: .5rem; color: var(--bloom-ink) !important; min-width: 0; margin-right: .5rem; }
.bloom-brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bloom-brand-mark { width: 40px; height: 40px; border-radius: 50%; background: var(--bs-primary); color: var(--sf-on-primary); display: inline-flex; align-items: center; justify-content: center; font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: .95rem; letter-spacing: .02em; line-height: 1; }
.bloom-nav .nav-link { font-weight: 700; color: var(--bloom-ink); padding: .5rem .85rem; border-radius: 50rem; }
.bloom-nav .nav-link:hover, .bloom-nav .nav-link.active { background: color-mix(in srgb, var(--bs-primary) 14%, transparent); color: var(--bs-primary); text-decoration: none; }
.bloom-search { position: relative; min-width: 240px; }
.bloom-search .form-control { border-radius: 50rem; padding-right: 2.8rem; }
.bloom-search button { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--bs-primary); color: var(--sf-on-primary); }
.btn-bloom-ghost { width: 42px; height: 42px; padding: 0 !important; align-items: center; justify-content: center; border: 1px solid var(--bloom-line); background: #fff; color: var(--bloom-ink); }
.btn-bloom-ghost:hover { color: var(--bs-primary); border-color: var(--bs-primary); text-decoration: none; }
.btn-bloom-cart { background: var(--bloom-ink); color: #fff; border: 0; display: inline-flex; align-items: center; }
.btn-bloom-cart:hover { color: #fff; filter: brightness(1.2); text-decoration: none; }
.bloom-count { background: var(--bs-primary); color: var(--sf-on-primary); border-radius: 50rem; margin-left: .35rem; }
.btn-bloom-cart { gap: .35rem; position: relative; }
.bloom-toggler { border: 1px solid var(--bloom-line); background: #fff; border-radius: .7rem; padding: .3rem .55rem; }
.bloom-toggler .navbar-toggler-icon { width: 1.15rem; height: 1.15rem; }
.bloom-toggler:focus { box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--bs-primary) 22%, transparent); }
.bloom-cats { background: #fff; border-bottom: 1px solid var(--bloom-line); }
.bloom-cats-list { list-style: none; display: flex; gap: .5rem; overflow-x: auto; margin: 0; padding: .6rem 0; scrollbar-width: none; }
.bloom-cats-list::-webkit-scrollbar { display: none; }
.bloom-cats-list a { display: inline-block; white-space: nowrap; padding: .3rem 1rem; border-radius: 50rem; background: var(--bloom-cream); border: 1px solid var(--bloom-line); color: var(--bloom-ink); font-weight: 600; font-size: .92rem; }
.bloom-cats-list a:hover, .bloom-cats-list a.active { background: var(--bs-primary); border-color: var(--bs-primary); color: var(--sf-on-primary); text-decoration: none; }

/* Hero + home sections */
.bloom-hero { padding: 4.5rem 0 4rem; background: radial-gradient(circle at 12% 20%, color-mix(in srgb, var(--bs-primary) 22%, transparent), transparent 42%), radial-gradient(circle at 88% 78%, color-mix(in srgb, var(--bs-secondary) 24%, transparent), transparent 46%), var(--bloom-cream); }
.bloom-hero-eyebrow { text-transform: uppercase; letter-spacing: .2em; font-weight: 700; color: var(--bs-primary); margin-bottom: .25rem; }
.bloom-hero-title { font-size: clamp(2.4rem, 6vw, 4.2rem); line-height: 1.05; margin-bottom: .75rem; }
.bloom-hero-lead { font-size: 1.15rem; color: var(--bloom-muted); max-width: 36rem; margin: 0 auto 1rem; }
.bloom-hero-carousel img { max-height: 480px; object-fit: cover; }
.bloom-section-title { font-size: 1.7rem; margin-bottom: 1.25rem; position: relative; }
.bloom-link { font-weight: 700; color: var(--bs-primary); }
.bloom-tile { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 96px; padding: 1.1rem 1.25rem; border-radius: var(--bloom-radius); color: var(--bloom-ink); font-family: "Baloo 2", sans-serif; font-weight: 700; font-size: 1.15rem; transition: transform .15s ease, box-shadow .15s ease; }
.bloom-tile:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(43, 45, 66, .12); text-decoration: none !important; color: var(--bloom-ink); }
.bloom-tile-0 { background: color-mix(in srgb, var(--bs-primary) 20%, #fff); }
.bloom-tile-1 { background: color-mix(in srgb, var(--bs-secondary) 22%, #fff); }
.bloom-tile-2 { background: #fff1c2; }
.bloom-tile-3 { background: #e5defa; }
.bloom-tile-go { width: 34px; height: 34px; border-radius: 50%; background: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; flex-shrink: 0; }
.bloom-offer { background: #fff; border: 1px solid var(--bloom-line); border-radius: var(--bloom-radius); padding: 1.25rem; text-align: center; }

/* Product / service cards */
.bloom-card { background: #fff; border: 1px solid var(--bloom-line); border-radius: var(--bloom-radius); overflow: hidden; display: flex; flex-direction: column; transition: transform .15s ease, box-shadow .15s ease; }
.bloom-card:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(43, 45, 66, .12); }
.bloom-card-media { position: relative; background: var(--bloom-cream); }
.bloom-card-media img, .bloom-card-placeholder { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.bloom-card-placeholder { display: flex; align-items: center; justify-content: center; font-size: 2.6rem; color: color-mix(in srgb, var(--bs-primary) 45%, #fff); background: color-mix(in srgb, var(--bs-primary) 8%, #fff); }
.bloom-badge-off { position: absolute; top: .7rem; left: .7rem; background: var(--bs-primary); color: var(--sf-on-primary); font-weight: 800; font-size: .72rem; padding: .22rem .6rem; border-radius: 50rem; }
.bloom-wish { position: absolute; top: .6rem; right: .6rem; width: 38px; height: 38px; border: 0; border-radius: 50%; background: #fff; color: var(--bs-primary); box-shadow: 0 2px 8px rgba(0, 0, 0, .15); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.bloom-wish:hover, .bloom-wish.is-active { background: var(--bs-primary); color: var(--sf-on-primary); }
.bloom-card-body { padding: .9rem 1rem .4rem; flex-grow: 1; }
.bloom-card-brand { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--bloom-muted); margin-bottom: .1rem; }
.bloom-card-title { display: block; font-weight: 700; color: var(--bloom-ink); line-height: 1.3; margin-bottom: .35rem; }
.bloom-card-title:hover { color: var(--bs-primary); text-decoration: none; }
.bloom-price { display: flex; align-items: baseline; gap: .5rem; }
.bloom-price-now { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 1.2rem; color: var(--bs-primary); }
.bloom-price-now small { font-family: "Nunito", sans-serif; font-weight: 600; color: var(--bloom-muted); font-size: .75rem; }
.bloom-price del { color: var(--bloom-muted); font-size: .9rem; }
.bloom-card-foot { padding: .5rem 1rem 1rem; }
.sf-cart-btn { white-space: nowrap; }
/* The button label always stays INSIDE the button: icon + text centred, never wider than the card. */
.bloom-card-foot .btn { display: flex; align-items: center; justify-content: center; gap: .4rem; padding: .5rem .6rem; max-width: 100%; }
.bloom-card-foot .btn i { margin: 0 !important; flex: 0 0 auto; }
.sf-wish.is-active { color: #dc3545; }

/* Footer */
.bloom-footer { background: var(--bloom-ink); color: rgba(255, 255, 255, .82); border-radius: 2rem 2rem 0 0; }
.bloom-footer h5, .bloom-footer h6, .bloom-footer .bloom-brand { color: #fff !important; font-family: "Baloo 2", sans-serif; }
.bloom-footer a { color: rgba(255, 255, 255, .82); }
.bloom-footer a:hover { color: #fff; }
.bloom-links li { margin-bottom: .4rem; }
.bloom-newsletter { display: flex; gap: .5rem; }
.bloom-newsletter .form-control { border-radius: 50rem; min-width: 0; }
.bloom-newsletter .btn { white-space: nowrap; flex-shrink: 0; }
.bloom-copyright { background: rgba(0, 0, 0, .22); font-size: .88rem; }
@media (max-width: 991.98px) { .bloom-search { margin-top: .75rem; } .bloom-footer { border-radius: 1.4rem 1.4rem 0 0; } }

/* Phones: a compact header (name and logo on the left; small round cart and menu buttons on the right, cart text replaced by its icon)
   and product cards that fit two to a row. */
@media (max-width: 575.98px) {
    .bloom-nav { padding: .4rem 0; }
    .bloom-brand { font-size: 1.2rem; gap: .4rem; }
    .bloom-brand-mark { width: 34px; height: 34px; font-size: .8rem; }
    .btn-bloom-cart { width: 38px; height: 38px; padding: 0; justify-content: center; }
    .btn-bloom-cart .bloom-count { position: absolute; top: -6px; right: -6px; margin: 0; min-width: 18px; padding: .2em .4em; font-size: .64rem; line-height: 1.1; border: 2px solid var(--bloom-cream); }
    .bloom-toggler { padding: .25rem .45rem; border-radius: .65rem; }
    .bloom-toggler .navbar-toggler-icon { width: 1.05rem; height: 1.05rem; }
    .bloom-card-body { padding: .7rem .75rem .3rem; }
    .bloom-card-title { font-size: .95rem; }
    .bloom-price-now { font-size: 1.05rem; }
    .bloom-card-foot { padding: .4rem .6rem .75rem; }
    .bloom-card-foot .btn { font-size: .82rem; padding: .45rem .35rem; gap: .3rem; }
}