/*
Theme Name:   FoodHome
Theme URI:    https://foodhome.com
Author:       FoodHome
Description:  Store theme for local.FoodHome.com (Detroit-area delivery) and ship.FoodHome.com (nationwide shipping). Shop page opens on Best Buys with departments on the left and the cart on the right. Function before promotion. Works with FH Search, FoodHome Delivery Slots, ShipStation Rates and Cart Rules.
Version:      1.0.2
Requires at least: 6.4
Requires PHP: 7.4
WC requires at least: 8.0
License:      GPL-2.0-or-later
Text Domain:  foodhome
*/

:root {
  --fh-ink: #1D2327;
  --fh-muted: #5B646A;
  --fh-line: #ECE7E1;
  --fh-bg: #FAF8F6;
  --fh-card: #FFFFFF;
  --fh-orange: #F14A35;
  --fh-red: #B8321F;
  --fh-red-dark: #8E2414;
  --fh-red-tint: #FDE8E3;
  --fh-green: #057A4C;
  --fh-green-dark: #04603C;
  --fh-teal: #1E6E64;
  --fh-teal-tint: #EEF6F5;
  --fh-sand: #F1ECE6;
  --fh-radius: 14px;
  --fh-head: 'Quicksand', 'Trebuchet MS', sans-serif;
  --fh-body: 'Open Sans', 'Segoe UI', Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--fh-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--fh-ink);
  background: var(--fh-bg);
}
img { max-width: 100%; height: auto; }
a { color: var(--fh-red); }
a:hover { color: var(--fh-red-dark); }
h1, h2, h3, h4 { font-family: var(--fh-head); font-weight: 700; line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: 32px; }
h2 { font-size: 22px; }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 3px solid var(--fh-teal); outline-offset: 2px; }
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.screen-reader-text:focus {
  clip: auto; width: auto; height: auto; padding: 10px 14px; background: #fff; z-index: 100000; top: 8px; left: 8px;
}
.fh-wrap { max-width: 1360px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }

/* ------------------------------------------------------------------ top strip */
.fh-strip { background: var(--fh-teal); color: #fff; font-size: 14px; }
.fh-mode-ship .fh-strip { background: var(--fh-ink); }
.fh-strip .fh-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px; padding-top: 7px; padding-bottom: 7px; }
.fh-strip a { color: #fff; }
.fh-strip-contact a { text-decoration: none; margin-left: 14px; white-space: nowrap; }
.fh-strip-contact a:hover { text-decoration: underline; color: #fff; }

/* ------------------------------------------------------------------ header */
.fh-header { background: #fff; border-bottom: 1px solid var(--fh-line); }
.fh-header .fh-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-top: 12px; padding-bottom: 12px; }
.fh-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.fh-brand img { height: 46px; width: auto; display: block; }
.fh-brand-sub {
  font-family: var(--fh-head); font-weight: 700; font-size: 15px; line-height: 1.2; color: var(--fh-teal);
  border-left: 2px solid var(--fh-line); padding-left: 12px;
}
.fh-search { flex: 1 1 320px; min-width: 0; }
.fh-search .fhs { max-width: none; }
.fh-search .fhs { --fhs-accent: #1D2327; --fhs-sale: var(--fh-red); --fhs-best: var(--fh-orange); --fhs-radius: 10px; }
.fh-search .fhs-box { border-color: var(--fh-ink); }
.fh-search .woocommerce-product-search { display: flex; }
.fh-search .woocommerce-product-search input[type=search] {
  flex: 1; height: 46px; padding: 0 16px; border: 2px solid var(--fh-ink); border-right: 0; border-radius: 10px 0 0 10px;
}
.fh-search .woocommerce-product-search button { height: 46px; border: 0; border-radius: 0 10px 10px 0; background: var(--fh-ink); color: #fff; padding: 0 16px; }
.fh-account { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; font-weight: 600; font-size: 15px; }
.fh-account a { color: var(--fh-ink); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
.fh-account a:hover { color: var(--fh-red); }
.fh-account ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.fh-cart-link { position: relative; }
.fh-cart-link svg { width: 26px; height: 26px; }
.fh-cart-count {
  position: absolute; top: 2px; left: 16px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  background: var(--fh-red); color: #fff; font-size: 12px; font-weight: 700; line-height: 20px; text-align: center;
}
.fh-cart-count:empty, .fh-cart-count[data-n="0"] { display: none; }

/* zip notice */
.fh-notice { background: var(--fh-teal-tint); border-bottom: 1px solid #A7D6CF; font-size: 15px; }
.fh-notice .fh-wrap { padding-top: 10px; padding-bottom: 10px; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
.fh-notice a.fh-btn { min-height: 38px; padding: 0 16px; font-size: 15px; }

/* ------------------------------------------------------------------ layout */
.fh-shop { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; padding-top: 20px; padding-bottom: 20px; }
.fh-depts {
  flex: 1 1 210px; max-width: 250px; background: var(--fh-card); border: 1px solid var(--fh-line);
  border-radius: var(--fh-radius); padding: 10px; position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto;
}
.fh-depts > summary { list-style: none; cursor: default; }
.fh-depts > summary::-webkit-details-marker { display: none; }
.fh-depts h2 { margin: 6px 10px 8px; font-size: 18px; }
.fh-depts ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.fh-depts ul ul { margin: 2px 0 6px 12px; padding-left: 8px; border-left: 2px solid var(--fh-line); }
.fh-depts a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; padding: 0 10px;
  border-radius: 8px; text-decoration: none; font-size: 15px; color: var(--fh-ink);
}
.fh-depts ul ul a { min-height: 34px; font-size: 14px; }
.fh-depts a:hover { background: var(--fh-sand); color: var(--fh-ink); }
.fh-depts a[aria-current="page"] { background: var(--fh-red-tint); color: var(--fh-red-dark); font-weight: 700; }
.fh-depts a.is-best { font-weight: 700; color: var(--fh-red); }
.fh-depts .fh-n { color: var(--fh-muted); font-size: 12px; font-weight: 400; }
.fh-depts-note { margin: 12px 10px 6px; font-size: 13px; color: var(--fh-muted); }

.fh-main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.fh-main-page { max-width: 1000px; margin: 0 auto; background: #fff; border: 1px solid var(--fh-line); border-radius: var(--fh-radius); padding: 28px; }
.fh-wide-page { flex: 1 1 100%; }

.fh-cart {
  flex: 1 1 260px; max-width: 320px; background: var(--fh-card); border: 1px solid var(--fh-line);
  border-radius: var(--fh-radius); padding: 18px; display: flex; flex-direction: column; gap: 14px;
  position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto;
}
.fh-cart h2 { margin: 0; font-size: 20px; }
.fh-cart .woocommerce-mini-cart { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.fh-cart .woocommerce-mini-cart-item { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 2px 8px; font-size: 14px; line-height: 1.3; position: relative; padding-right: 22px; }
.fh-cart .woocommerce-mini-cart-item a:not(.remove) { color: var(--fh-ink); text-decoration: none; display: flex; align-items: center; gap: 10px; grid-column: 1 / -1; }
.fh-cart .woocommerce-mini-cart-item img { width: 40px; height: 40px; object-fit: contain; flex: none; margin: 0 !important; float: none !important; }
.fh-cart .woocommerce-mini-cart-item .quantity { grid-column: 1 / -1; color: var(--fh-muted); padding-left: 50px; font-size: 13px; }
.fh-cart .woocommerce-mini-cart-item .remove {
  position: absolute; right: 0; top: 0; width: 20px; height: 20px; line-height: 18px; text-align: center; border-radius: 50%;
  color: var(--fh-muted) !important; text-decoration: none; font-size: 18px;
}
.fh-cart .woocommerce-mini-cart-item .remove:hover { background: var(--fh-red); color: #fff !important; }
.fh-cart .woocommerce-mini-cart__total { border-top: 1px solid var(--fh-line); padding-top: 12px; margin: 0; display: flex; justify-content: space-between; font-size: 15px; }
.fh-cart .woocommerce-mini-cart__buttons { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.fh-cart .woocommerce-mini-cart__buttons a { display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 10px; font-weight: 700; text-decoration: none; }
.fh-cart .woocommerce-mini-cart__buttons a:not(.checkout) { background: var(--fh-sand); color: var(--fh-ink); }
.fh-cart .woocommerce-mini-cart__buttons a.checkout { background: var(--fh-green); color: #fff; min-height: 50px; font-size: 17px; order: -1; }
.fh-cart .woocommerce-mini-cart__buttons a.checkout:hover { background: var(--fh-green-dark); }
.fh-cart .woocommerce-mini-cart__empty-message { margin: 0; color: var(--fh-muted); }
.fh-cart-rows { display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.fh-cart-rows div { display: flex; justify-content: space-between; gap: 10px; }
.fh-cart-rows .is-muted { color: var(--fh-muted); }
.fh-cart-info { background: var(--fh-teal-tint); border-radius: 10px; padding: 12px; font-size: 14px; display: flex; flex-direction: column; gap: 6px; }
.fh-couriers { display: flex; align-items: center; gap: 12px; }
.fh-couriers img { height: 24px; width: auto; }

/* ------------------------------------------------------------------ buttons */
.fh-btn, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit,
.woocommerce a.button.alt, .woocommerce button.button.alt {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px;
  border: 0; border-radius: 10px; background: var(--fh-green); color: #fff; font-weight: 700; font-size: 15px;
  text-decoration: none; cursor: pointer; line-height: 1.2;
}
.fh-btn:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover {
  background: var(--fh-green-dark); color: #fff;
}
.fh-btn-dark { background: var(--fh-ink); }
.fh-btn-dark:hover { background: #000; }
.woocommerce button.button:disabled, .woocommerce button.button.disabled { opacity: .5; }

/* ------------------------------------------------------------------ shop head */
.fh-shop-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px; }
.fh-crumbs, .woocommerce-breadcrumb { margin: 0; font-size: 14px; color: var(--fh-muted); }
.fh-crumbs a, .woocommerce-breadcrumb a { color: var(--fh-muted); }
.fh-shop-head h1 { margin: 2px 0 0; }
.fh-shop-sub { margin: 4px 0 0; color: var(--fh-muted); font-size: 15px; }
.woocommerce-ordering select, .fh-shop-head select {
  height: 44px; padding: 0 10px; font-size: 15px; border: 1px solid #C9C2BA; border-radius: 8px; background: #fff; color: var(--fh-ink);
}
.woocommerce-ordering { margin: 0; }
.woocommerce-result-count { margin: 0; font-size: 14px; color: var(--fh-muted); }
.fh-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }

/* ------------------------------------------------------------------ product grid */
.woocommerce ul.products, ul.products {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none;
}
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none; }
.woocommerce ul.products li.product, ul.products li.product {
  width: auto !important; margin: 0 !important; float: none !important;
  background: var(--fh-card); border: 1px solid var(--fh-line); border-radius: var(--fh-radius);
  padding: 12px; display: flex; flex-direction: column; gap: 8px; position: relative;
}
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link { color: var(--fh-ink); text-decoration: none; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; }
.woocommerce ul.products li.product a img {
  width: 100%; height: 140px; object-fit: contain; margin: 0 !important; background: #fff;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--fh-body); font-size: 15px !important; font-weight: 600; line-height: 1.35; padding: 0 !important; margin: 0;
  min-height: 40px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.woocommerce ul.products li.product .price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: auto 0 0 !important; color: var(--fh-ink) !important; font-size: 20px !important; font-weight: 700; }
.woocommerce ul.products li.product .price del { order: 2; font-size: 14px; color: var(--fh-muted); font-weight: 400; opacity: 1; }
.woocommerce ul.products li.product .price ins { text-decoration: none; color: var(--fh-red); }
.woocommerce ul.products li.product .onsale, .woocommerce span.onsale {
  position: absolute; top: 10px; left: 10px; right: auto; margin: 0; min-width: 0; min-height: 0; line-height: 1.4;
  background: var(--fh-red); color: #fff; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 999px; z-index: 2;
}
.woocommerce ul.products li.product .onsale.is-best { background: var(--fh-orange); }
.woocommerce ul.products li.product .button { width: 100%; margin: 0 !important; }
.woocommerce ul.products li.product .added_to_cart { font-size: 13px; text-align: center; }
.woocommerce ul.products li.product .fhcr-badge, .woocommerce ul.products li.product [class*="fhcr"] { font-size: 12px; color: var(--fh-red); }
.woocommerce ul.products li.product .star-rating { display: none; }
.woocommerce nav.woocommerce-pagination ul { border: 0; display: flex; justify-content: center; gap: 6px; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span {
  min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid var(--fh-line); background: #fff;
}
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--fh-ink); color: #fff; }

/* empty / info notices */
.woocommerce-info, .woocommerce-message, .woocommerce-error, .woocommerce-noreviews, p.no-comments {
  border-top-color: var(--fh-teal); background: #fff; border-radius: 10px; border: 1px solid var(--fh-line); border-left: 4px solid var(--fh-teal);
}
.woocommerce-error { border-left-color: var(--fh-red); }
.woocommerce-info::before, .woocommerce-message::before { color: var(--fh-teal); }

/* ------------------------------------------------------------------ single product */
.woocommerce div.product { background: #fff; border: 1px solid var(--fh-line); border-radius: var(--fh-radius); padding: 24px; }
.woocommerce div.product .product_title { font-size: 28px; }
.woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--fh-red); font-size: 26px; font-weight: 700; }
.woocommerce div.product p.price del { color: var(--fh-muted); font-size: 18px; }
.woocommerce div.product form.cart .button { min-height: 50px; padding: 0 28px; font-size: 17px; }
.woocommerce div.product form.cart .qty { height: 50px; width: 70px; border: 1px solid #C9C2BA; border-radius: 8px; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { border-radius: 8px 8px 0 0; }
.woocommerce .related > h2, .woocommerce .upsells > h2 { font-size: 22px; }

/* hide what the owner doesn't want: upsells/cross-sells */
.woocommerce .upsells, .woocommerce .cross-sells { display: none; }

/* ------------------------------------------------------------------ pages, cart, checkout */
.entry-title { font-size: 32px; }
.woocommerce table.shop_table { border-radius: 10px; background: #fff; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select {
  min-height: 44px; padding: 8px 12px; border: 1px solid #C9C2BA; border-radius: 8px;
}

/* ------------------------------------------------------------------ footer */
.fh-footer { background: var(--fh-sand); border-top: 1px solid var(--fh-line); margin-top: 20px; font-size: 15px; }
.fh-footer .fh-wrap { padding-top: 32px; padding-bottom: 32px; display: flex; flex-wrap: wrap; gap: 28px; justify-content: space-between; }
.fh-footer-brand { flex: 1 1 260px; display: flex; flex-direction: column; gap: 8px; }
.fh-footer-brand img { height: 40px; width: auto; align-self: flex-start; }
.fh-footer-brand p { margin: 0; color: #3D454B; }
.fh-footer nav ul, .fh-footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fh-footer-col { flex: 1 1 180px; display: flex; flex-direction: column; gap: 8px; }
.fh-footer-col strong { font-family: var(--fh-head); font-size: 17px; }
.fh-footer-legal { border-top: 1px solid var(--fh-line); }
.fh-footer-legal .fh-wrap { padding-top: 14px; padding-bottom: 14px; font-size: 13px; color: var(--fh-muted); }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1100px) {
  .fh-cart { position: static; max-width: none; flex-basis: 100%; max-height: none; }
}
@media (max-width: 760px) {
  .fh-wrap { padding-left: 16px; padding-right: 16px; }
  .fh-strip-contact { display: none; }
  .fh-brand img { height: 38px; }
  .fh-brand-sub { display: none; }
  .fh-header .fh-wrap { gap: 10px; }
  .fh-search { order: 3; flex-basis: 100%; }
  .fh-account { margin-left: auto; }
  .fh-account .fh-hide-sm { display: none; }
  .fh-depts { position: static; max-width: none; flex-basis: 100%; max-height: none; padding: 0; }
  .fh-depts > summary {
    cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; min-height: 48px;
  }
  .fh-depts > summary h2 { margin: 0; }
  .fh-depts > summary::after { content: '▾'; font-size: 18px; }
  .fh-depts[open] > summary::after { content: '▴'; }
  .fh-depts > ul { padding: 0 10px 10px; }
  h1 { font-size: 26px; }
  .woocommerce ul.products, ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .woocommerce ul.products li.product a img { height: 110px; }
  .woocommerce ul.products li.product .price { font-size: 17px !important; }
  .fh-main-page { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

/* product card button: centred text, full width, same height everywhere */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product .added_to_cart {
  display: flex !important; align-items: center; justify-content: center; text-align: center;
  min-height: 44px; padding: 8px 12px !important; line-height: 1.2 !important; width: 100%; box-sizing: border-box;
}
.woocommerce ul.products li.product .added_to_cart { min-height: 0; padding: 4px !important; background: none; color: var(--fh-teal); font-weight: 600; }
.woocommerce ul.products li.product .button.loading { opacity: .7; }
.woocommerce ul.products li.product .button.added::after { margin-left: 6px; }
/* pictures: always the whole product, never cropped by the card */
.woocommerce ul.products li.product a img { object-fit: contain !important; object-position: center; aspect-ratio: auto; }