/* =========================================================
   Broadway Floral — visual refresh override (v1 draft)
   Template: westminster_new (ZenCart 1.5.8a)
   Install: save as
     includes/templates/westminster_new/css/stylesheet_zz_refresh.css
   ZenCart auto-loads stylesheet*.css alphabetically, so "zz" makes
   this load last and override the template. Delete the file to revert.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600&family=Work+Sans:wght@400;500;600&display=swap');

:root {
  --bf-evergreen: #1E4D2B;   /* primary — from the woodcut logo */
  --bf-evergreen-dk: #153A20;
  --bf-leaf: #3E7B47;
  --bf-cream: #FAF7F2;       /* page background */
  --bf-paper: #FFFFFF;
  --bf-ink: #2B2B2B;         /* body text */
  --bf-muted: #5F5A54;       /* secondary text (AA contrast on cream) */
  --bf-line: #E6E0D6;
  --bf-clay: #C2643F;        /* seasonal / accent */
  --bf-serif: 'Fraunces', Georgia, serif;
  --bf-sans: 'Work Sans', Arial, Helvetica, sans-serif;
}

/* ---------- Base ---------- */
body {
  background: var(--bf-cream);
  color: var(--bf-ink);
  font-family: var(--bf-sans);
  font-size: 100%;           /* 16px base, was 85% (13.6px) */
  line-height: 1.55;
}
a { color: var(--bf-evergreen); }
a:hover, #navMain ul li a:hover { color: var(--bf-clay); }

/* Type system: serif (Fraunces) = titles & product names; sans (Work Sans) = everything functional */
h1, h2, .centerBoxHeading, #productName, h3.itemTitle, legend {
  font-family: var(--bf-serif);
  font-weight: 600;
  color: var(--bf-evergreen);
  letter-spacing: -0.01em;
}
h1, #productName { font-size: 2rem; line-height: 1.2; text-transform: none !important; }
h2 { font-size: 1.6rem; }

/* Product names in category listings */
h3.itemTitle, h3.itemTitle a { font-size: 1.15rem; color: var(--bf-ink); text-transform: none; }
/* Form section titles (login, contact, checkout) */
legend { font-size: 1.35rem; text-transform: none; padding: 0 .25rem; background: transparent !important; border: 0 !important; }
/* Functional headings stay in the sans */
h3, h4, #attribsOptionsText, .optionName {
  font-family: var(--bf-sans);
  font-weight: 600;
  color: var(--bf-ink);
  letter-spacing: 0;
}
h3:not(.itemTitle) { text-transform: none !important; font-size: 1.05rem; }
#attribsOptionsText { font-size: 1rem; text-transform: none; }

/* Headings typed into category descriptions with the editor's Georgia font */
font[class*="Georgia"], font[class*="Georgia"] b {
  font-family: var(--bf-serif) !important;
  color: var(--bf-evergreen) !important;
}
#indexProductListCatDescription, #indexCategoriesCatDescription {
  background: var(--bf-cream) !important;
  border: 1px solid var(--bf-line) !important;
  border-radius: 8px;
}
/* Prices in category listings */
.centerBoxContentsProducts .productBasePrice { font-weight: 600; font-size: 1.1rem; color: var(--bf-evergreen); }
.optionName { font-size: .95rem; }

/* ---------- Form controls ---------- */
input[type=radio], input[type=checkbox] {
  accent-color: var(--bf-evergreen);
  width: 18px; height: 18px;
  vertical-align: middle; margin-right: 6px;
}
input[name="cart_quantity"], input[name^="cart_quantity"] {
  background: var(--bf-paper) !important;
  border: 1px solid #CFC7B8 !important;
  border-radius: 4px;
  width: 4.5em !important;
  height: 2.4em;
  padding: 0 .4em;
  text-align: center;
  font-family: var(--bf-sans);
  font-size: 1rem;
  color: var(--bf-ink);
}
input[name^="cart_quantity"]:focus { outline: 2px solid var(--bf-leaf); outline-offset: 1px; border-color: var(--bf-leaf) !important; }
#cartAdd .qmax { display: block; font-size: .8rem; color: var(--bf-muted); margin-top: .35rem; }

/* ---------- Header ---------- */
#top-wrapper { background: var(--bf-evergreen); }
#top-wrapper, #top-wrapper a { color: #F3EFE6; }
#top-wrapper i { color: #B9D3BC; }
#headerWrapper, #top-middle { background: var(--bf-paper); }
#tagline, #taglineWrapper,
#tagline font, #tagline b, #taglineWrapper font, #taglineWrapper b {
  font-family: var(--bf-serif) !important;
  color: var(--bf-muted) !important;
  font-weight: 400;
}
#tagline b:first-child, #taglineWrapper b:first-child { color: var(--bf-evergreen) !important; font-weight: 600; }

/* Top bar (log in / cart / checkout) — light text on evergreen */
#top-wrapper ul.slimmenu li a, #top-wrapper ul li a,
#top-wrapper ul.slimmenu li, #top-wrapper ul li { color: #F3EFE6 !important; border: 0 !important; }
#top-wrapper ul.slimmenu li a:hover, #top-wrapper ul li a:hover { color: #fff !important; }
#top-wrapper ul, #top-wrapper .onerow-fluid { border: 0 !important; box-shadow: none !important; }

/* Main nav — was #A0A0A0 (failed contrast) */
#navMainWrapper { border-bottom: 0; } /* this ID is the top bar in westminster_new */
#navMain ul li a, ul.slimmenu li a {
  color: var(--bf-ink);
  font-family: var(--bf-sans);
  font-weight: 500;
  letter-spacing: 0.06em;
}
#navMain i, ul.slimmenu li .sub-collapser > i { color: var(--bf-leaf); }

/* Search */
#navMainSearch input[type=text], .search-header-box input[type=text], .search-box input[type=text] {
  background: var(--bf-paper);
  border: 1px solid var(--bf-line);
  border-radius: 4px 0 0 4px;
  font-family: var(--bf-sans);
}

/* ---------- Buttons ---------- */
.cssButton, .cssButtonHover, .more-info, .button_in_cart,
.button_search, .button_checkout, input.cssButton, span.cssButton,
.product_detail a {
  background: var(--bf-evergreen) !important;
  color: #fff !important;
  font-family: var(--bf-sans);
  font-weight: 600;
  letter-spacing: 0.05em;
  border: 0;
  border-radius: 4px;
  transition: background .15s ease;
}
.cssButton:hover, .cssButtonHover, input.cssButton:hover,
.product_detail a:hover { background: var(--bf-evergreen-dk) !important; }

/* ---------- Home page ---------- */
#indexDefault.centerColumn, #home-top {
  background: transparent;
  border: 0;
  box-shadow: none;
}
.centerBoxHeading {
  background: transparent !important;
  font-size: 1.75rem;
  text-transform: none;
  text-align: center;
  border: 0;
  padding: 1.5rem 0 .5rem;
}

/* Product cards */
.centerBoxContentsFeatured {
  background: var(--bf-paper);
  border: 1px solid var(--bf-line);
  border-radius: 8px;
  transition: box-shadow .2s ease, transform .2s ease;
}
.centerBoxContentsFeatured:hover {
  box-shadow: 0 6px 18px rgba(30, 77, 43, .10);
  transform: translateY(-2px);
}
.centerBoxContentsFeatured img { border-radius: 4px; }
.product_title a {
  font-family: var(--bf-serif);
  font-size: 1.1rem;
  color: var(--bf-ink);
}
.price .productBasePrice {
  font-family: var(--bf-sans);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--bf-evergreen);
}
.centerBoxContentsFeatured i { color: var(--bf-muted); }

/* Story copy */
#indexDefaultLowerContent { color: var(--bf-ink); line-height: 1.7; max-width: 820px; margin: 0 auto; }
#indexDefaultLowerContent strong { font-family: var(--bf-serif); color: var(--bf-evergreen); font-size: 1.15em; }

/* ---------- Home small banners (homead1/2/3, define_main_page.php) ----------
   The banner Title + "Shop Now!" live in .mask, hidden (opacity 0) until hover.
   ENABLE THIS BLOCK only after the banner images are replaced with clean photos
   (no baked-in text) — otherwise the label shows twice.
   It turns the hover overlay into an always-visible caption strip (works on phones).

#home-images .view { position: relative; overflow: hidden; border-radius: 8px; }
#home-images .view .mask {
  opacity: 1 !important; visibility: visible !important;
  position: absolute; left: 0; right: 0; bottom: 0; top: auto !important;
  height: auto !important; width: auto !important;
  background: linear-gradient(to top, rgba(21,58,32,.85), rgba(21,58,32,0)) !important;
  padding: 2.5rem 1rem .9rem; transform: none !important;
  display: flex; align-items: flex-end; justify-content: space-between; gap: .75rem;
}
#home-images .view .mask h2 {
  font-family: var(--bf-serif); color: #fff !important; font-size: 1.35rem;
  margin: 0; padding: 0; background: none !important; text-align: left;
  opacity: 1 !important; transform: none !important;
}
#home-images .view .mask a.info {
  font-family: var(--bf-sans); font-weight: 600; font-size: .8rem; letter-spacing: .06em;
  text-transform: uppercase; color: #fff !important; background: var(--bf-clay) !important;
  border: 0; border-radius: 4px; padding: .45rem .8rem; margin: 0;
  opacity: 1 !important; transform: none !important; box-shadow: none;
}
#home-images .view:hover img { transform: scale(1.03); transition: transform .3s ease; }
*/

/* ---------- Product page ---------- */
#navBreadCrumb, #navBreadCrumb a { color: var(--bf-muted); }
#productGeneral.centerColumn { background: var(--bf-paper); border-color: var(--bf-line); }
#pi-left, #pi-right { background: var(--bf-cream); border-color: var(--bf-line); border-radius: 8px; }
#productPrices { font-family: var(--bf-sans); font-size: 1.6rem; font-weight: 600; color: var(--bf-evergreen); }

/* ---------- Footer ---------- */
#navSuppWrapper, #flex-navSupp, #siteinfoLegal, #footer-bottom {
  background: var(--bf-evergreen) !important;
  border-color: var(--bf-evergreen-dk) !important;
}
#navSuppWrapper, #navSuppWrapper * { color: #E9E4D8 !important; }
#navSuppWrapper a:hover { color: #fff !important; text-decoration: underline; }
#navSuppWrapper h1, #navSuppWrapper h2, #navSuppWrapper h3, #navSuppWrapper h4,
#navSuppWrapper .heading {
  font-family: var(--bf-serif) !important;
  color: #fff !important;
  text-transform: none;
}
#siteinfoLegal { border-top: 1px solid rgba(255,255,255,.15) !important; }

/* ---------- Phones (≤767px, matches the template's breakpoint) ---------- */
@media (max-width: 767px) {
  /* Empty top bar on phones (its links move into the icon row) */
  #top-wrapper { display: none !important; }

  /* Logo shrinks so the menu button no longer covers "Home & Garden" */
  #logoWrapper { position: relative; }
  #logo { padding: 10px 0 4px !important; margin-bottom: 6px !important; }
  #logo img { max-width: calc(100% - 64px) !important; height: auto !important; display: block; }
  .menu-collapser .collapse-button { background: var(--bf-evergreen) !important; border-radius: 6px; }

  /* Open menu drops below the logo instead of over it */
  #menu ul.slimmenu {
    margin-top: 26px !important;
    border-top: 1px solid var(--bf-line);
    box-shadow: 0 8px 16px rgba(0,0,0,.08);
  }
  ul.slimmenu li .sub-collapser { background: var(--bf-evergreen) !important; }
  ul.slimmenu li .sub-collapser > i { color: #fff !important; }
  ul.slimmenu li { border-color: var(--bf-line) !important; }

  /* Compact address block */
  #taglineWrapper { padding: 4px 12px 10px !important; margin: 0 !important; }
  #tagline { margin-top: 0 !important; }
  #tagline, #tagline font, #tagline b { font-size: 15px !important; line-height: 1.4 !important; }

  /* Account / search / cart row */
  #mobile-nav1 {
    background: var(--bf-paper) !important;
    border-top: 1px solid var(--bf-line);
    border-bottom: 1px solid var(--bf-line);
  }
  #mobile-nav1 i, #mobile-nav1 .fa { color: var(--bf-evergreen) !important; }

  /* Home page: remove dead space, show Bouquet of the Day, full-width banners */
  #indexDefault.centerColumn { margin-top: 0 !important; }
  #indexDefaultMainContent > br.clearBoth { display: block; height: 0; line-height: 0; font-size: 0; }
  #home-top .content-slider { margin-top: 12px !important; }
  #home-top #top-banner { display: block !important; float: none !important; width: 100% !important; margin: 12px 0 0 !important; }
  #home-top #top-banner img { width: 100% !important; height: auto !important; border-radius: 8px; }
  #home-images { padding-bottom: 10px !important; }
  #home-images .view { width: 100% !important; float: none !important; margin: 0 0 12px !important; }
  #home-images .view img { width: 100% !important; height: auto !important; }
}

/* ---------- Content pages (EZ-Pages & define pages) ---------- */
#ezPageDefault, .centerColumn [id$="MainContent"].content { color: var(--bf-ink); line-height: 1.7; }
#ezPageDefault > h1 { margin-bottom: .75rem; }
#ezPageDefault h2, .centerColumn [id$="MainContent"].content h2 {
  font-size: 1.5rem; margin: 2rem 0 .75rem; color: var(--bf-evergreen); text-transform: none !important;
}
#ezPageDefault p, .centerColumn [id$="MainContent"].content p { margin: 0 0 1rem; max-width: 72ch; }
#ezPageDefault ul, .centerColumn [id$="MainContent"].content ul { margin: 0 0 1rem 1.25rem; padding: 0; }
#ezPageDefault li, .centerColumn [id$="MainContent"].content li { margin-bottom: .35rem; }
#ezPageDefault a, .centerColumn [id$="MainContent"].content a { color: var(--bf-evergreen); text-decoration: underline; text-underline-offset: 2px; }
#ezPageDefault a:hover, .centerColumn [id$="MainContent"].content a:hover { color: var(--bf-clay); }
/* A paragraph that is only a bold line + phone/link reads as a callout */
#ezPageDefault blockquote, .centerColumn [id$="MainContent"].content blockquote {
  margin: 1.5rem 0; padding: 1rem 1.25rem;
  background: var(--bf-cream); border-left: 4px solid var(--bf-evergreen); border-radius: 0 8px 8px 0;
}
#ezPageDefault blockquote p:last-child, .centerColumn [id$="MainContent"].content blockquote p:last-child { margin-bottom: 0; }

/* Accordion (built by jscript_zz_accordion.js from each <h3>) — card style */
.bf-acc { display: grid; gap: 12px; margin: 1rem 0 2rem; max-width: 780px; }
.bf-acc-item {
  background: var(--bf-paper); border: 1px solid var(--bf-line); border-radius: 4px;
  box-shadow: 0 1px 2px rgba(43, 43, 43, .03); transition: border-color .15s ease;
}
.bf-acc-item:hover, .bf-acc-item.is-open { border-color: #D6CDBE; }
h3.bf-acc-h { margin: 0 !important; padding: 0; font-size: 1rem; }
.bf-acc-q {
  all: unset; box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; padding: 1.05rem 1.25rem; cursor: pointer;
  font-family: var(--bf-sans); font-size: 1rem; font-weight: 500;
  color: var(--bf-ink); line-height: 1.4;
}
.bf-acc-q:hover .bf-acc-q-text { color: var(--bf-evergreen); }
.bf-acc-q:focus-visible { outline: 2px solid var(--bf-leaf); outline-offset: -2px; border-radius: 4px; }
.bf-acc-icon { flex: 0 0 auto; width: 12px; height: 12px; position: relative; }
.bf-acc-icon::before, .bf-acc-icon::after {
  content: ""; position: absolute; left: 0; top: 50%; width: 12px; height: 1.5px;
  background: var(--bf-leaf); transform: translateY(-50%); transition: transform .2s ease;
}
.bf-acc-icon::after { transform: translateY(-50%) rotate(90deg); }
.bf-acc-item.is-open .bf-acc-icon::after { transform: translateY(-50%) rotate(0deg); }
.bf-acc-item.is-open .bf-acc-q-text { color: var(--bf-evergreen); font-weight: 600; }
.bf-acc-a { padding: 0 1.25rem 1.25rem; }
.bf-acc-a > :last-child { margin-bottom: 0; }
.bf-acc-all {
  all: unset; cursor: pointer; display: block; text-align: right; max-width: 780px; margin: 0 0 .5rem;
  font-family: var(--bf-sans); font-size: .85rem; font-weight: 600; color: var(--bf-evergreen);
  text-decoration: underline; text-underline-offset: 2px;
}
.bf-acc-all:hover { color: var(--bf-clay); }
/* Section headings between accordion groups */
.bf-acc-page h2 {
  font-weight: 400 !important; font-size: 1.45rem !important; max-width: 780px;
  padding-bottom: .5rem; margin: 2.25rem 0 1rem !important; border-bottom: 1px solid var(--bf-line);
}
.bf-acc-page blockquote { max-width: 780px; }
@media (max-width: 767px) {
  .bf-acc-q { padding: .95rem 1rem; }
  .bf-acc-a { padding: 0 1rem 1.1rem; }
}

/* Contact Us intro block (define_contact_us) */
#contactUsNoticeContent { line-height: 1.7; margin-bottom: 1.5rem; }
#contactUsNoticeContent p { margin: 0 0 1rem; max-width: 72ch; }
#contactUsNoticeContent p:first-child, #contactUsNoticeContent p:nth-child(2) {
  display: inline-block; vertical-align: top; min-width: 260px; margin-right: 2.5rem;
  padding: 1rem 1.25rem; background: var(--bf-cream); border: 1px solid var(--bf-line); border-radius: 8px;
}
#contactUsNoticeContent a { color: var(--bf-evergreen); text-decoration: underline; text-underline-offset: 2px; }
#contactUsNoticeContent strong { font-family: var(--bf-serif); color: var(--bf-evergreen); font-size: 1.1em; }
@media (max-width: 767px) {
  #contactUsNoticeContent p:first-child, #contactUsNoticeContent p:nth-child(2) { display: block; margin-right: 0; min-width: 0; }
}

/* Links in the home page story text (define_main_page_lower) */
#indexDefaultLowerContent a { color: var(--bf-evergreen); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
#indexDefaultLowerContent a:hover { color: var(--bf-clay); }

/* ---------- Delivery rate finder (Delivery FAQ) ---------- */
.bf-rate-form {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem;
  max-width: 780px; margin: .25rem 0 1rem; padding: 1rem 1.25rem;
  background: var(--bf-cream); border: 1px solid var(--bf-line); border-radius: 6px;
}
.bf-rate-form label { font-weight: 600; color: var(--bf-ink); }
.bf-rate-form select {
  width: auto !important; min-width: 200px; max-width: 100%; height: 2.6em; padding: 0 .6em;
  background: var(--bf-paper) !important; border: 1px solid #CFC7B8 !important; border-radius: 4px;
  font-family: var(--bf-sans); font-size: 1rem; color: var(--bf-ink);
}
.bf-rate-form select:focus { outline: 2px solid var(--bf-leaf); outline-offset: 1px; }
.bf-rate-form .cssButton { height: 2.6em; padding: 0 1.25em; }

/* ---------- Delivery rate results page (main_page=zoneday) ---------- */
#zonedayBody .centerColumn h1 { font-size: 0 !important; }
#zonedayBody .centerColumn h1::after { content: "Delivery rates & cutoffs"; font-size: 2rem; }
#zoneDayMainContent { color: var(--bf-muted); }
#zoneDayMainContent > div { overflow-x: auto; max-width: 100%; }
#zoneDayMainContent table {
  border-collapse: collapse !important; border: 1px solid var(--bf-line) !important;
  background: var(--bf-paper); font-size: .92rem; margin: 1rem 0 1.5rem; min-width: 640px; width: 100%; max-width: 960px;
  font-variant-numeric: tabular-nums;
}
#zoneDayMainContent th, #zoneDayMainContent td {
  background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--bf-line) !important;
  padding: .6rem .75rem !important; text-align: left; color: var(--bf-ink);
}
#zoneDayMainContent th {
  background: var(--bf-evergreen) !important; color: #fff !important;
  font-weight: 600; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
}
#zoneDayMainContent th.am, #zoneDayMainContent th.pm { background: var(--bf-leaf) !important; }
#zoneDayMainContent tr:nth-child(even) td { background: var(--bf-cream) !important; }
#zoneDayMainContent td:first-child { font-weight: 600; white-space: nowrap; }
#zoneDayMainContent td[colspan] { color: var(--bf-muted); font-style: italic; }
/* Rush delivery isn't offered online; delete the next line to show its columns again */
#zoneDayMainContent .rush { display: none !important; }

/* ---------- Best sellers row on suburb pages (.bf-picks) ---------- */
.bf-picks {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem;
  max-width: 780px; margin: .75rem 0 2rem;
}
.bf-pick-text { display: flex; flex-direction: column; }
.bf-pick {
  display: flex; flex-direction: column; text-decoration: none !important;
  background: var(--bf-paper); border: 1px solid var(--bf-line); border-radius: 8px;
  padding: .75rem; transition: box-shadow .2s ease, transform .2s ease;
}
.bf-pick:hover { box-shadow: 0 6px 18px rgba(30, 77, 43, .10); transform: translateY(-2px); }
.bf-pick img {
  width: 100% !important; height: auto !important; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 4px; margin-bottom: .6rem;
}
.bf-pick-name { font-family: var(--bf-serif); font-size: 1.05rem; color: var(--bf-ink); line-height: 1.3; }
.bf-pick-price { margin-top: .35rem; font-weight: 600; color: var(--bf-evergreen); }
.bf-pick-price .normalprice { color: var(--bf-muted); font-weight: 400; margin-right: .35rem; }
@media (max-width: 767px) {
  .bf-picks { grid-template-columns: 1fr; }
  .bf-pick { flex-direction: row; align-items: center; gap: .9rem; }
  .bf-pick img { width: 96px !important; flex: 0 0 96px; margin-bottom: 0; }
}