/* BinFlow content blocks: size guide + service area list */
.bf-blocks { --bf-accent: #FF6B1A; --bf-dark: #1C1D21; --bf-line: #E7E4DF; --bf-sand: #F5F3EF; margin: 1.5rem 0 2.5rem; }
.bf-blocks *, .bf-blocks *::before, .bf-blocks *::after { box-sizing: border-box; }
.bf-block-heading { margin: 0 0 1rem; }

.bf-size-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 14px; }
.bf-size-card { background: #fff; border: 1px solid var(--bf-line); border-radius: 16px; padding: 10px; display: flex; flex-direction: column; transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s; }
.bf-size-card:hover { transform: translateY(-3px); box-shadow: 0 20px 34px -26px rgba(0,0,0,.45); }
.bf-size-visual { background: linear-gradient(#fbfaf7, #f0ece5); border-radius: 10px; padding: 12px 8px 0; overflow: hidden; aspect-ratio: 250 / 125; display: flex; align-items: flex-end; }
.bf-size-visual svg { width: 100%; height: auto; display: block; }
.bf-size-visual img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; margin-bottom: 8px; }
.bf-size-visual .b-body { fill: var(--bf-accent); }
.bf-size-visual .b-lip { fill: color-mix(in srgb, var(--bf-accent) 75%, #000); }
.bf-size-visual .b-rib { stroke: rgba(0,0,0,.18); stroke-width: 2; }
.bf-size-visual .b-rail { fill: #3a3d44; }
.bf-size-visual .b-person { fill: #b9b3a9; }
.bf-size-visual .b-ground { stroke: #d7d1c6; stroke-width: 2; }
.bf-size-visual .b-dim { fill: #6b6f78; font: 600 9px ui-monospace, Menlo, monospace; }
.bf-size-body { padding: 12px 6px 6px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.bf-size-body h3 { margin: 0; font-size: 1.15rem; line-height: 1.2; }
.bf-size-body p { margin: 0; }
.bf-size-body .bf-cap { font-size: .85rem; font-weight: 600; }
.bf-size-body .bf-desc { font-size: .85rem; opacity: .7; }
.bf-size-body .bf-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.bf-size-body .bf-chips span { font-size: .72rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--bf-sand); }
.bf-size-body .bf-from { margin-top: auto; padding-top: 8px; font-size: .85rem; opacity: .85; }
.bf-size-body .bf-from strong { font-size: 1.4rem; letter-spacing: -.02em; }

.bf-area-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 10px; }
.bf-area-list li { margin: 0; }
.bf-area-list a { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border: 1px solid var(--bf-line); border-radius: 14px; background: #fff; text-decoration: none; color: inherit; transition: border-color .2s, transform .25s; }
.bf-area-list a:hover { border-color: var(--bf-accent); transform: translateY(-2px); }
.bf-area-list b { display: block; line-height: 1.3; }
.bf-area-list small { display: block; font-size: .8rem; opacity: .65; }
.bf-area-pin { width: 36px; height: 36px; flex: none; border-radius: 10px; background: var(--bf-accent); display: grid; place-items: center; }
.bf-area-pin svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Area page body defaults (themes can override) */
.bf-location-body .wp-block-details { border-bottom: 1px solid var(--bf-line, #E7E4DF); padding: 1rem 0; }
.bf-location-body .wp-block-details summary { font-weight: 700; cursor: pointer; }
.bf-location-body .wp-block-details > p { margin-top: .6rem; opacity: .8; }