/* ==========================================================================
   Client website brief: header, page banners, service pages, quote form,
   advice hub and catalogue refinements (forest green / warm ivory).
   Loaded after foliage.css.
   ========================================================================== */

/* ---------- Static notice (replaces the scrolling strip) ---------- */
.topbar-static { background: var(--fl-green); color: #f1ebdc; font-size: .82rem; padding: .4rem 0; letter-spacing: .02em; }

/* ---------- Header ---------- */
.site-header-brief { position: sticky; top: 0; z-index: 1030; }
.site-header-brief .site-header-main { padding-top: .6rem; padding-bottom: .6rem; }
.header-row { display: flex; align-items: center; gap: .75rem; }
.site-header-brief .brand-logo img { height: 3.1rem; }
@media (max-width: 991.98px) { .site-header-brief .brand-logo img { height: 2.5rem; } }
.header-actions { display: flex; align-items: center; gap: .25rem; margin-left: auto; }
.header-actions .header-action { width: 2.5rem; height: 2.5rem; padding: 0; justify-content: center; border-radius: 50%; position: relative; }
.header-actions .header-action .bi { font-size: 1.25rem; }
.header-actions .cart-count { position: absolute; top: 0; right: -2px; }
.header-btn { padding: .45rem 1rem; font-weight: 600; font-size: .9rem; white-space: nowrap; margin-left: .35rem; }

.main-nav { margin-left: 1.5rem; }
.main-nav-list { display: flex; gap: .15rem; list-style: none; margin: 0; padding: 0; }
.main-nav-item { position: relative; }
.main-nav-link { display: inline-flex; align-items: center; gap: .3rem; padding: .7rem .7rem; color: var(--fl-green); font-weight: 600; font-size: .9rem; white-space: nowrap; border-radius: .5rem; }
.main-nav-link .bi { font-size: .7rem; transition: transform .15s ease; }
.main-nav-link:hover, .main-nav-link.active { color: var(--fl-maroon); background: var(--fl-sage); }
.main-nav-menu { position: absolute; top: 100%; left: 0; z-index: 1040; min-width: 260px; padding: .75rem; background: #fff; border-radius: .9rem; box-shadow: 0 18px 40px rgba(31, 58, 42, .16); border: 1px solid #eee6d6; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s ease, transform .15s ease, visibility .15s; }
.main-nav-menu.is-wide { min-width: 520px; }
.main-nav-menu.is-wide ul { columns: 2; column-gap: 1rem; }
.main-nav-menu ul { list-style: none; margin: 0; padding: 0; }
.main-nav-menu li { break-inside: avoid; }
.main-nav-menu li a { display: block; padding: .42rem .6rem; border-radius: .4rem; color: #33443a; font-size: .9rem; }
.main-nav-menu li a:hover, .main-nav-menu li a:focus-visible { background: var(--fl-sage); color: var(--fl-green); }
.main-nav-all { display: flex; justify-content: space-between; align-items: center; padding: .5rem .6rem .7rem; margin-bottom: .35rem; border-bottom: 1px solid #efe7d8; font-weight: 700; color: var(--fl-maroon); font-size: .9rem; }
.main-nav-item.has-menu:hover .main-nav-menu, .main-nav-item.has-menu:focus-within .main-nav-menu { opacity: 1; visibility: visible; transform: none; }
.main-nav-item.has-menu:hover .main-nav-link .bi { transform: rotate(180deg); }
.main-nav-item:nth-last-child(-n+2) .main-nav-menu { left: auto; right: 0; }
.header-search-panel { border-top: 1px solid #efe7d8; background: #fff; }
.header-search-panel .header-search { max-width: 640px; }
/* 1200–1399px: the menu takes its own row under the logo; 1400px+: one row like the mockup. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .header-row { flex-wrap: wrap; }
    .main-nav { order: 10; flex-basis: 100%; margin: .35rem 0 0; border-top: 1px solid #efe7d8; padding-top: .25rem; }
    .main-nav-list { justify-content: center; gap: 1rem; }
}
@media (min-width: 1400px) {
    .site-header-brief .brand-logo img { height: 2.75rem; }
    .main-nav { margin-left: 1rem; }
    .main-nav-link { padding: .6rem .55rem; font-size: .87rem; }
}
@media (max-width: 1599.98px) { .header-actions .header-wishlist { display: none !important; } }
.category-nav { display: none !important; }

/* ---------- Shared blocks ---------- */
.section-block { padding: 2.5rem 0 1rem; }
.section-row-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.section-row-head .section-title-serif { margin: 0; }
.section-row-head .link-arrow { color: var(--fl-maroon); font-weight: 600; }
.storefront .section-title-serif { font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.1rem); }

/* Dark photo hero (landscaping) */
.page-hero { position: relative; min-height: 26rem; display: flex; align-items: center; background: #2f3f33 var(--hero-image) center right / cover no-repeat; color: #fff; margin-bottom: 1.5rem; }
.page-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(22, 36, 27, .88) 0%, rgba(22, 36, 27, .55) 45%, rgba(22, 36, 27, .05) 75%); }
.page-hero .container { position: relative; }
.page-hero-content { max-width: 34rem; padding: 3rem 0; }
.page-hero h1 { color: #fff !important; font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem); margin-bottom: .75rem; }
.page-hero p { font-size: 1.05rem; color: rgba(255, 255, 255, .9); margin-bottom: 1.5rem; }
.page-hero .btn-light { color: var(--fl-green); font-weight: 600; border-radius: .5rem; }
.page-hero .btn-outline-light { border-radius: .5rem; font-weight: 600; }

/* Light banner with image (category, service, business, advice) */
.page-banner { background: linear-gradient(90deg, #f6f1e5 0%, #efe8d6 100%); margin-bottom: 1.5rem; }
.page-banner-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: center; padding: 1.25rem 0 1.75rem; }
@media (min-width: 992px) { .page-banner-grid { grid-template-columns: 1.05fr .95fr; padding: 1.5rem 0 2rem; } }
.page-banner .breadcrumb { margin-bottom: .75rem; font-size: .85rem; }
.page-banner h1 { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.9rem); margin-bottom: .6rem; }
.page-banner p { color: #4c5a50; font-size: 1.02rem; max-width: 36rem; margin-bottom: 1.25rem; }
.page-banner-media { border-radius: 1.25rem; overflow: hidden; box-shadow: 0 16px 36px rgba(31, 58, 42, .12); }
.page-banner-media img { width: 100%; height: 100%; max-height: 340px; object-fit: cover; display: block; }

/* Service icons strip */
.service-icons { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; list-style: none; padding: 0; margin: 0 0 1rem; }
@media (min-width: 992px) { .service-icons { grid-template-columns: repeat(4, 1fr); margin-top: -3.5rem; position: relative; } }
.service-icons a { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .2rem; padding: 1.1rem .75rem; background: #fff; border-radius: 1rem; box-shadow: 0 10px 26px rgba(31, 58, 42, .1); color: var(--fl-green); height: 100%; }
.service-icons .bi { font-size: 1.6rem; color: var(--fl-maroon); }
.service-icons strong { font-size: .95rem; }
.service-icons span { font-size: .78rem; color: #6b766d; }

.service-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.25rem; }
.service-grid-3 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.service-tile { display: flex; flex-direction: column; background: #fff; border-radius: 1rem; overflow: hidden; border: 1px solid #eee6d6; color: inherit; transition: transform .2s ease, box-shadow .2s ease; height: 100%; }
.service-tile:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(31, 58, 42, .12); color: inherit; }
.service-tile-media { aspect-ratio: 3 / 2; background: var(--fl-sage); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.service-tile-media img { width: 100%; height: 100%; object-fit: cover; }
.service-tile-media .bi { font-size: 2.5rem; color: var(--fl-maroon); }
.service-tile-body { display: flex; flex-direction: column; gap: .3rem; padding: 1rem 1.1rem 1.15rem; flex: 1; }
.service-tile-body strong { font-family: var(--fl-serif); color: var(--fl-green); font-size: 1.1rem; }
.service-tile-body small { color: #5d695f; font-size: .86rem; }
.service-tile-more { margin-top: auto; padding-top: .4rem; color: var(--fl-maroon); font-weight: 600; font-size: .86rem; }

.process-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; counter-reset: step; }
.process-steps li { background: #fff; border: 1px solid #eee6d6; border-radius: 1rem; padding: 1.1rem; display: flex; flex-direction: column; gap: .35rem; }
.process-steps li > span { width: 2rem; height: 2rem; border-radius: 50%; background: var(--fl-maroon); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.process-steps strong { color: var(--fl-green); }
.process-steps small { color: #5d695f; }

.project-cta { display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: space-between; align-items: center; background: #f1ebdc; border-radius: 1.25rem; padding: 1.75rem 2rem; margin: 2.5rem 0 3rem; }
.project-cta h2 { font-size: 1.6rem; margin-bottom: .6rem; }
.project-cta-points { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; list-style: none; padding: 0; margin: 0; color: #3e4e43; font-size: .92rem; }
.project-cta-points .bi { color: var(--fl-maroon); margin-right: .3rem; }

.benefit-icons { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; list-style: none; padding: 0; margin: 0 0 1.5rem; }
@media (min-width: 768px) { .benefit-icons { grid-template-columns: repeat(4, 1fr); } }
.benefit-icons li { display: flex; flex-direction: column; align-items: center; gap: .4rem; text-align: center; padding: 1rem .5rem; background: #fff; border: 1px solid #eee6d6; border-radius: 1rem; color: var(--fl-green); font-weight: 600; font-size: .9rem; }
.benefit-icons .bi { font-size: 1.6rem; color: var(--fl-maroon); }

.service-tabs { gap: .25rem; border-bottom: 1px solid #e7dfcd; margin-bottom: 1.5rem; flex-wrap: nowrap; overflow-x: auto; }
.service-tabs .nav-link { border: 0; border-bottom: 3px solid transparent; border-radius: 0; color: #5d695f; font-weight: 600; padding: .75rem 1.1rem; white-space: nowrap; background: none; }
.service-tabs .nav-link.active { color: var(--fl-green); border-bottom-color: var(--fl-maroon); }
.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.check-list li { padding-left: 1.75rem; position: relative; }
.check-list li::before { content: "\F26E"; font-family: bootstrap-icons; position: absolute; left: 0; top: 0; color: var(--fl-maroon); }
.quote-card { background: #fff; border: 1px solid #eee6d6; border-radius: 1rem; padding: 1.4rem; box-shadow: 0 10px 26px rgba(31, 58, 42, .08); }
.work-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .75rem; }
.work-gallery img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: .9rem; }
.faq-accordion .accordion-item { border: 1px solid #eee6d6; border-radius: .75rem !important; margin-bottom: .6rem; overflow: hidden; }
.faq-accordion .accordion-button { font-weight: 600; color: var(--fl-green); }
.faq-accordion .accordion-button:not(.collapsed) { background: var(--fl-sage); box-shadow: none; }

/* For Businesses */
.biz-cards { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1rem; }
@media (min-width: 768px) { .biz-cards { grid-template-columns: repeat(3, 1fr); } }
.biz-card { background: #fff; border: 1px solid #eee6d6; border-radius: 1.1rem; padding: 1.6rem 1.25rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .5rem; box-shadow: 0 10px 26px rgba(31, 58, 42, .06); }
.biz-card > .bi { font-size: 2rem; color: var(--fl-maroon); }
.biz-card h2 { font-size: 1.2rem; margin: 0; }
.biz-card p { color: #5d695f; font-size: .9rem; margin: 0 0 .5rem; }
.client-portal { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.25rem; background: #fff; border: 1px solid #eee6d6; border-radius: 1.25rem; padding: 1.75rem 2rem; margin-top: 2.5rem; }
.client-portal h2 { font-size: 1.5rem; margin-bottom: .25rem; }
.client-portal p { color: #5d695f; margin-bottom: .75rem; }
.client-portal-points { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; list-style: none; padding: 0; margin: 0; font-size: .9rem; color: #3e4e43; }
.client-portal-points .bi { color: var(--fl-maroon); margin-right: .3rem; }

/* Quote form */
.quote-page { padding-top: 1.5rem; padding-bottom: 3rem; }
.quote-form .form-label { font-weight: 600; font-size: .88rem; color: #33443a; }
.quote-form .form-control, .quote-form .form-select { border-radius: .6rem; border-color: #ddd3bf; padding: .6rem .8rem; }
.upload-drop { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: 1.5rem 1rem; border: 2px dashed #cfc4ad; border-radius: .9rem; background: #fbf8f1; text-align: center; cursor: pointer; color: #4c5a50; transition: border-color .15s ease, background .15s ease; }
.upload-drop .bi { font-size: 1.8rem; color: var(--fl-maroon); }
.upload-drop small { color: #7a8479; }
.upload-drop.is-over { border-color: var(--fl-maroon); background: var(--fl-sage); }
.upload-drop.is-invalid { border-color: #dc3545; }
.upload-names { font-size: .82rem; color: var(--fl-green); font-weight: 600; }
.project-types { background: #fff; border: 1px solid #eee6d6; border-radius: 1.25rem; padding: 1.25rem; position: sticky; top: 6rem; }
.project-type-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.project-type { border: 2px solid transparent; background: #faf7f1; border-radius: .9rem; padding: 0; overflow: hidden; text-align: left; transition: border-color .15s ease; }
.project-type img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.project-type span { display: block; padding: .5rem .6rem; font-size: .84rem; font-weight: 600; color: var(--fl-green); }
.project-type.is-active, .project-type:hover { border-color: var(--fl-maroon); }
.quote-assurances { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .5rem; font-size: .88rem; color: #4c5a50; }
.quote-assurances .bi { color: var(--fl-maroon); margin-right: .4rem; }
.quote-thanks { max-width: 640px; margin: 2rem auto; background: #fff; border-radius: 1.25rem; padding: 2.5rem 1.5rem; border: 1px solid #eee6d6; }
.quote-thanks-icon { display: inline-flex; width: 4rem; height: 4rem; border-radius: 50%; background: var(--fl-sage); color: var(--fl-maroon); font-size: 2rem; align-items: center; justify-content: center; margin-bottom: 1rem; }

/* Advice */
.advice-search { position: relative; display: flex; gap: .5rem; max-width: 30rem; }
.advice-search .bi { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: #7a8479; }
.advice-search .form-control { padding-left: 2.4rem; border-radius: .6rem; }
.advice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.25rem; }
.advice-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #eee6d6; border-radius: 1rem; overflow: hidden; color: inherit; transition: transform .2s ease, box-shadow .2s ease; }
.advice-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(31, 58, 42, .12); color: inherit; }
.advice-card-media { aspect-ratio: 16 / 9; background: linear-gradient(135deg, #e6ecdf, #f1ebdc); display: flex; align-items: center; justify-content: center; }
.advice-card-media .bi { font-size: 2.4rem; color: var(--fl-maroon); }
.advice-card-media img { width: 100%; height: 100%; object-fit: cover; }
.advice-card-body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.advice-card-body strong { font-family: var(--fl-serif); color: var(--fl-green); font-size: 1.1rem; }
.advice-card-body small { color: #5d695f; }
.advice-help { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; background: #f1ebdc; border-radius: 1.25rem; padding: 1.5rem 1.75rem; margin: 2.5rem 0 1rem; }

/* ---------- Homepage (brief order) ---------- */
.hero-buttons { display: flex; flex-wrap: wrap; gap: .6rem; }
.hero-btn-secondary { background: rgba(255, 255, 255, .7); }
.usp-strip { background: #f1ebdc; padding: .9rem 0; margin-top: 1rem; }
.usp-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem 1rem; list-style: none; margin: 0; padding: 0; }
@media (min-width: 992px) { .usp-list { grid-template-columns: repeat(4, 1fr); } }
.usp-list li { display: flex; align-items: center; gap: .65rem; }
.usp-list .bi { flex-shrink: 0; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1.5px solid var(--fl-maroon); color: var(--fl-maroon); display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; }
.usp-list strong { display: block; color: var(--fl-green); font-size: .9rem; line-height: 1.2; }
.usp-list small { display: block; color: #6b766d; font-size: .76rem; }

.home-section .section-heading { justify-content: space-between; text-align: left; flex-direction: row; align-items: flex-end; }
.home-section .section-heading h2::after { display: none; }
.home-section .section-heading .link-arrow { order: 0; margin: 0; border: 0; padding: 0; color: var(--fl-maroon); font-weight: 600; }

.photo-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1rem; }
@media (min-width: 1200px) { .photo-tiles { grid-template-columns: repeat(8, 1fr); } }
.photo-tile { display: flex; flex-direction: column; gap: .5rem; color: var(--fl-green); text-align: center; }
.photo-tile-media { aspect-ratio: 1; border-radius: 1rem; overflow: hidden; background: var(--fl-sage); box-shadow: 0 6px 16px rgba(31, 58, 42, .08); }
.photo-tile-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.photo-tile:hover .photo-tile-media img { transform: scale(1.05); }
.photo-tile-label { font-weight: 600; font-size: .9rem; }

.need-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; }
@media (min-width: 768px) { .need-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .need-grid { grid-template-columns: repeat(6, 1fr); } }
.need-card { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; padding: 1.1rem; background: #fff; border: 1px solid #eee6d6; border-radius: 1rem; color: var(--fl-green); transition: border-color .15s ease, transform .2s ease; height: 100%; }
.need-card:hover { border-color: var(--fl-maroon); transform: translateY(-2px); color: var(--fl-green); }
.need-card .bi { font-size: 1.5rem; color: var(--fl-maroon); }
.need-card strong { font-size: .95rem; }
.need-card small { color: #6b766d; font-size: .8rem; }

.home-landscaping { padding: 2.5rem 0 1rem; }
.landscaping-band { position: relative; border-radius: 1.25rem; overflow: hidden; background: #2f3f33 var(--band-image) center right / cover no-repeat; min-height: 18rem; display: flex; align-items: center; }
.landscaping-band::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(22, 36, 27, .92) 0%, rgba(22, 36, 27, .7) 45%, rgba(22, 36, 27, .1) 80%); }
.landscaping-band-text { position: relative; max-width: 34rem; padding: 2.25rem 2.5rem; color: #fff; }
.landscaping-band-text h2 { color: #fff !important; font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem); margin-bottom: .6rem; }
.landscaping-band-text p { color: rgba(255, 255, 255, .88); margin-bottom: 1.25rem; }
.landscaping-band .btn-light { color: var(--fl-green); font-weight: 600; border-radius: .5rem; }
.landscaping-band .btn-outline-light { border-radius: .5rem; font-weight: 600; }
.landscaping-eyebrow { display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #cfe0c6; margin-bottom: .5rem; }
.landscaping-mini { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin-top: .9rem; }
@media (min-width: 768px) { .landscaping-mini { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .landscaping-mini { grid-template-columns: repeat(6, 1fr); } }
.landscaping-mini-tile { display: block; background: #fff; border-radius: .9rem; overflow: hidden; border: 1px solid #eee6d6; color: var(--fl-green); }
.landscaping-mini-tile img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.landscaping-mini-tile span { display: block; padding: .5rem .65rem; font-size: .82rem; font-weight: 600; }

.business-strip { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: center; background: #fff; border: 1px solid #eee6d6; border-radius: 1.25rem; padding: 2rem; }
@media (min-width: 992px) { .business-strip { grid-template-columns: 1fr 1.1fr; } }
.business-strip-text p { color: #5d695f; }
.business-strip-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
.business-strip-list a { display: flex; align-items: center; gap: .6rem; padding: .75rem .9rem; border-radius: .75rem; background: #faf7f1; color: var(--fl-green); font-weight: 600; font-size: .88rem; }
.business-strip-list a:hover { background: var(--fl-sage); }
.business-strip-list .bi { color: var(--fl-maroon); font-size: 1.15rem; }
.home-landscaping .landscaping-eyebrow.text-success, .business-strip .landscaping-eyebrow { color: var(--fl-maroon) !important; }

/* ---------- Product cards (brief mockup: sizes + full-width Add to Cart) ---------- */
.product-card-ugaoo .badge-best { background: var(--fl-yellow); color: #fff; }
.product-card-ugaoo .badge-new { background: var(--fl-sage); color: var(--fl-green); }
.card-size-form { position: relative; z-index: 2; margin-top: .6rem; display: grid; gap: .5rem; }
.card-sizes { display: flex; gap: .3rem; flex-wrap: wrap; }
.card-sizes label { flex: 1 1 0; text-align: center; font-size: .72rem; font-weight: 600; padding: .3rem .2rem; border: 1px solid #ddd3bf; border-radius: .4rem; color: #4c5a50; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-sizes .btn-check:checked + label { background: var(--fl-sage); border-color: var(--fl-maroon); color: var(--fl-green); }
.card-sizes .btn-check:focus-visible + label { outline: 2px solid var(--fl-maroon); outline-offset: 1px; }
.product-card-add-full { border-radius: .5rem !important; font-weight: 600; padding: .5rem; font-size: .88rem; }

/* ---------- Category page (brief mockup) ---------- */
.category-banner { display: grid; grid-template-columns: 1fr; align-items: center; gap: 1rem; background: linear-gradient(90deg, #f6f1e5 0%, #efe8d6 100%); border-radius: 1.25rem; overflow: hidden; margin: 1rem 0 1.5rem; }
@media (min-width: 992px) { .category-banner { grid-template-columns: 1fr 1.1fr; } }
.category-banner-text { padding: 1.5rem 1.75rem; }
.category-banner-text .breadcrumb { font-size: .82rem; margin-bottom: .6rem; }
.category-banner h1 { font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem); margin-bottom: .4rem; }
.category-banner p { color: #4c5a50; margin-bottom: .6rem; max-width: 34rem; }
.category-count { display: inline-block; font-size: .82rem; font-weight: 600; color: var(--fl-maroon); background: #fff; border-radius: 999px; padding: .2rem .7rem; }
.category-banner-media { height: 100%; min-height: 160px; }
.category-banner-media img { width: 100%; height: 100%; max-height: 260px; object-fit: cover; object-position: 78% center; display: block; }
@media (max-width: 991.98px) { .category-banner-media img { max-height: 170px; } }

.filter-card { border: 1px solid #eee6d6; border-radius: 1rem; background: #fff; }
.filter-card .card-header { background: transparent; font-weight: 700; color: var(--fl-green); border-bottom-color: #efe7d8; }
.filter-group legend, .filter-collapsible > summary { font-size: .85rem; font-weight: 700; color: var(--fl-green); text-transform: none; }
.filter-group .form-check-label { font-size: .88rem; color: #3e4e43; }
.filter-group .form-check-input:checked { background-color: var(--fl-maroon); border-color: var(--fl-maroon); }
.price-slider { position: relative; height: 1.6rem; margin: .4rem .3rem .2rem; }
.price-slider-track { position: absolute; top: 50%; left: 0; right: 0; height: 4px; transform: translateY(-50%); background: #e3dccb; border-radius: 4px; }
.price-slider-track span { position: absolute; top: 0; bottom: 0; background: var(--fl-maroon); border-radius: 4px; }
.price-slider input[type=range] { position: absolute; inset: 0; width: 100%; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; margin: 0; }
.price-slider input[type=range]::-webkit-slider-thumb { pointer-events: auto; -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--fl-maroon); cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, .15); }
.price-slider input[type=range]::-moz-range-thumb { pointer-events: auto; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--fl-maroon); cursor: pointer; }
.price-slider-label { font-size: .82rem; color: #4c5a50; margin: 0 0 .5rem; }
.subcategory-tile { border-radius: 1rem; }

/* ---------- Product page ---------- */
.bulk-callout { display: flex; align-items: center; gap: .75rem; padding: .8rem 1rem; border: 1px dashed #cfc4ad; border-radius: .9rem; background: #fbf8f1; color: var(--fl-green); }
.bulk-callout:hover { border-color: var(--fl-maroon); color: var(--fl-green); }
.bulk-callout > .bi:first-child { font-size: 1.4rem; color: var(--fl-maroon); }
.bulk-callout strong { display: block; font-size: .9rem; }
.bulk-callout small { display: block; color: #6b766d; font-size: .8rem; }
.product-detail-tabs { margin-bottom: 1.25rem; }
.product-details .tab-pane.product-section { padding-top: 0; }
.storefront .product-tabs { display: none; }
.storefront .promise-strip { background: var(--fl-sage) !important; color: var(--fl-green) !important; }
.storefront .promise-strip .bi { color: var(--fl-maroon) !important; }
.storefront .combo-callout { background: #f1ebdc; border-color: #e3d8c0; }