/*
Theme Name: U-Neac Farm
Description: Farm store theme for the U-Neac Farmer Platform. GrazeCart-familiar, customizer-driven colors and hero.
Version: 0.4.4
Author: U-Neac Ministry
*/

:root {
    /* 10/3: the widest the page content goes on a big screen (was 1240px). One number for the whole site. */
    --uf-max: 1400px;
    --uneac-primary: #2D5016;
    --uneac-accent: #C4A265;
    --uneac-cream: #F5F0E8;
    --uneac-text: #3D2B1F;
    --uneac-white: #ffffff;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: Georgia, 'Times New Roman', serif;
    background: var(--uneac-cream);
    color: var(--uneac-text);
    font-size: 17px;
    line-height: 1.6;
}

a { color: var(--uneac-primary); }
img { max-width: 100%; height: auto; }

/* ---------- Header ---------- */
.uf-topbar {
    background: var(--uneac-white);
    padding: 14px 4%;
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
.uf-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.uf-logo img { max-height: 60px; width: auto; }
.uf-logo .uf-sitename { font-size: 24px; font-weight: 700; color: var(--uneac-primary); }
.uf-search { flex-grow: 1; max-width: 520px; }
.uf-search form { display: flex; }
.uf-search input[type=search] {
    flex-grow: 1; padding: 10px 16px; border: 1px solid #ccc;
    border-radius: 24px 0 0 24px; font-size: 15px; outline: none;
}
.uf-search button {
    background: var(--uneac-primary); color: #fff; border: none;
    padding: 10px 18px; border-radius: 0 24px 24px 0; cursor: pointer;
}
.uf-account { margin-left: auto; display: flex; gap: 18px; align-items: center; }
.uf-account a { text-decoration: none; font-size: 14px; }
.uf-cart-count {
    background: var(--uneac-accent); color: #fff; border-radius: 50%;
    padding: 1px 7px; font-size: 12px; margin-left: 3px;
}

/* ---------- Nav ---------- */
.uf-nav { background: var(--uneac-primary); padding: 0 4%; }
.uf-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.uf-nav > ul > li { position: relative; }
.uf-nav a {
    display: block; color: #fff; text-decoration: none;
    padding: 13px 18px; font-size: 15px; font-family: Arial, sans-serif;
}
.uf-nav a:hover { background: rgba(255,255,255,.12); }
.uf-nav li ul {
    display: none; position: absolute; top: 100%; left: 0; z-index: 50;
    background: var(--uneac-white); min-width: 210px;
    box-shadow: 0 6px 18px rgba(0,0,0,.15);
}
.uf-nav li:hover > ul { display: block; }
.uf-nav li ul a { color: var(--uneac-text); padding: 10px 16px; }
.uf-nav li ul a:hover { background: var(--uneac-cream); }

/* ---------- Hero ---------- */
.uf-hero {
    position: relative; min-height: 420px; display: flex;
    align-items: center; justify-content: center; text-align: center;
    background-size: cover; background-position: center;
    background-color: var(--uneac-primary);
}
.uf-hero::before {
    content: ""; position: absolute; inset: 0;
    background: rgba(20, 30, 10, .45);
}
.uf-hero-inner { position: relative; max-width: 760px; padding: 40px 20px; color: #fff; }
.uf-hero h1 { font-size: 44px; margin: 0 0 12px; line-height: 1.15; }
.uf-hero p { font-size: 21px; margin: 0 0 26px; }
.uf-btn {
    display: inline-block; background: var(--uneac-accent); color: #fff;
    padding: 14px 36px; border-radius: 4px; text-decoration: none;
    font-size: 17px; font-family: Arial, sans-serif;
}
.uf-btn:hover { filter: brightness(1.08); color: #fff; }

/* ---------- Sections ---------- */
.uf-section { padding: 54px 4%; max-width: var(--uf-max); margin: 0 auto; }
.uf-section-title { text-align: center; font-size: 32px; margin: 0 0 6px; color: var(--uneac-text); }
.uf-section-sub {
    text-align: center; color: #7a6a58; margin: 0 auto 34px; max-width: 600px;
    border-bottom: 3px solid var(--uneac-accent); display: table; padding-bottom: 10px;
}

/* Category tiles */
.uf-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }
.uf-cat {
    position: relative; border-radius: 8px; overflow: hidden;
    min-height: 190px; display: flex; align-items: flex-end;
    background: linear-gradient(135deg, var(--uneac-primary), #4a7a2a);
    background-size: cover; background-position: center;
    text-decoration: none; box-shadow: 0 3px 10px rgba(0,0,0,.12);
    transition: transform .15s ease;
}
.uf-cat:hover { transform: translateY(-3px); }
.uf-cat::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,.05) 60%);
}
.uf-cat-label { position: relative; padding: 18px; color: #fff; }
.uf-cat-tag {
    font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
    font-family: Arial, sans-serif; opacity: .9;
}
.uf-cat-name { font-size: 24px; font-weight: 700; }

/* Woo content area */
.uf-content { padding: 34px 4%; max-width: var(--uf-max); margin: 0 auto; }

/* Products grid */
ul.products { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px; }
ul.products li.product {
    background: var(--uneac-white); border-radius: 8px; padding: 16px;
    text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
ul.products li.product img { border-radius: 6px; }
ul.products li.product .woocommerce-loop-product__title { font-size: 17px; color: var(--uneac-text); }
ul.products li.product .price { color: var(--uneac-primary); font-weight: 700; display: block; margin: 6px 0; }
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .wc-block-components-button {
    background: var(--uneac-primary) !important; color: #fff !important;
    border-radius: 4px; font-family: Arial, sans-serif;
}
.woocommerce a.button:hover, .woocommerce button.button:hover { filter: brightness(1.15); }
.onsale { background: var(--uneac-accent) !important; }

/* Notices */
.woocommerce-info { border-top-color: var(--uneac-primary) !important; }

/* ---------- Footer ---------- */
.uf-footer {
    background: var(--uneac-text); color: #e8ded2;
    padding: 40px 4%; margin-top: 60px;
}
.uf-footer-inner {
    max-width: var(--uf-max); margin: 0 auto; display: flex;
    justify-content: space-between; gap: 30px; flex-wrap: wrap;
}
.uf-footer a { color: var(--uneac-accent); text-decoration: none; }
.uf-footer .uf-sitename { font-size: 22px; font-weight: 700; color: #fff; }
.uf-footer-note { max-width: var(--uf-max); margin: 26px auto 0; font-size: 13px; opacity: .7; }

@media (max-width: 700px) {
    .uf-hero h1 { font-size: 30px; }
    .uf-hero p { font-size: 17px; }
    .uf-topbar { gap: 12px; }
    .uf-search { order: 3; max-width: 100%; width: 100%; }
}

/* ---------- v0.2: homepage sections ---------- */
.uf-intro { text-align: center; padding: 40px 4% 10px; max-width: 800px; margin: 0 auto; }
.uf-intro p { font-size: 19px; margin: 8px 0; color: var(--uneac-text); }
.uf-intro p strong { color: var(--uneac-primary); }

.uf-trust { text-align: center; padding: 50px 4%; max-width: 820px; margin: 0 auto; }
.uf-trust h2 { font-size: 28px; margin: 0 0 16px; }
.uf-trust p { font-size: 17px; }

.uf-steps { background: var(--uneac-band, #E7F3D8); padding: 54px 4%; text-align: center; }
.uf-steps-inner { max-width: 1100px; margin: 0 auto; }
.uf-steps h2 { font-size: 26px; margin: 0 0 34px; }
.uf-steps-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 30px; margin-bottom: 34px; }
.uf-step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--uneac-primary); color: #fff; font-size: 20px;
    font-weight: 700; margin-bottom: 12px; font-family: Arial, sans-serif;
}
.uf-step h3 { margin: 0 0 8px; font-size: 19px; }
.uf-step p { font-size: 14px; margin: 0 auto; max-width: 260px; color: #55483a; }

.uf-pickup { text-align: center; padding: 56px 4%; }
.uf-pickup h2 { font-size: 26px; margin: 0 0 10px; text-decoration: underline; text-decoration-color: var(--uneac-accent); text-underline-offset: 8px; }
.uf-pickup p { max-width: 560px; margin: 14px auto 24px; }

/* Product cards closer to CWHM */
ul.products li.product { text-align: left; padding: 0 0 16px; overflow: hidden; }
ul.products li.product a img { aspect-ratio: 1/1; margin-bottom: 10px; }
ul.products li.product .woocommerce-loop-product__title { padding: 0 14px; font-size: 15px; font-family: Arial, sans-serif; }
ul.products li.product .price { padding: 0 14px; font-size: 18px; }
ul.products li.product .price small { display: block; color: #8a7a66; font-weight: 400; font-size: 12px; }
ul.products li.product .button { margin: 8px 14px 0; display: block; text-align: center; }

/* Category archive headline */
.woocommerce-products-header__title { font-size: 30px; margin-bottom: 4px; }
.term-description { color: #7a6a58; margin-bottom: 18px; }

/* Footer columns */
.uf-footer-col h4 { color: #fff; margin: 0 0 10px; font-size: 15px; }
.uf-footer-col ul { list-style: none; margin: 0; padding: 0; }
.uf-footer-col li { margin: 6px 0; font-size: 14px; }

/* Secondary category bar (store pages) */
.uf-nav2 { background: #fff; border-bottom: 1px solid #e2dbd0; padding: 0 4%; }
.uf-nav2 ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.uf-nav2 > ul > li { position: relative; }
.uf-nav2 a {
    display: block; color: var(--uneac-text); text-decoration: none;
    padding: 10px 14px; font-size: 14px; font-family: Arial, sans-serif;
}
.uf-nav2 > ul > li > a:hover { color: var(--uneac-primary); }
.uf-nav2 li ul {
    display: none; position: absolute; top: 100%; left: 0; z-index: 60;
    background: #fff; min-width: 200px; box-shadow: 0 6px 18px rgba(0,0,0,.15);
}
.uf-nav2 li:hover > ul { display: block; }
.uf-nav2 li ul a:hover { background: var(--uneac-cream); }

/* Card width fix (permanent in master) */
ul.products li.product { width: auto !important; float: none !important; margin: 0 !important; }
ul.products li.product a img { width: 100%; }

/* All Foods = primary tab in category bar */
.uf-nav2 > ul > li:first-child > a {
    background: var(--uneac-primary); color: #fff; font-weight: 700; padding: 10px 20px;
}
.uf-nav2 > ul > li:first-child > a:hover { color: #fff; filter: brightness(1.15); }

/* Login / Register side-by-side */
.woocommerce .u-columns.col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.woocommerce .u-columns.col2-set .u-column1, .woocommerce .u-columns.col2-set .u-column2 { width: auto; float: none; }
@media (max-width: 700px) { .woocommerce .u-columns.col2-set { grid-template-columns: 1fr; } }
.woocommerce form.login, .woocommerce form.register {
    background: #fff; border: 1px solid #e2dbd0; border-radius: 8px; padding: 24px;
}

/* Logo sizing */
.uf-logo img, .uf-logo .custom-logo { max-height: 70px !important; width: auto !important; }

/* ---------- v0.3: mobile menu ---------- */
.uf-menu-btn {
    display: none; background: var(--uneac-primary); color: #fff; border: none;
    font-size: 24px; padding: 8px 16px; width: 100%; cursor: pointer; text-align: left;
}
/* v1.7 (9/17): this block styled .uf-nav / .uf-nav2, which header.php has not rendered
   since the nav became .uf-mainnav. Removed - it was a decoy that made the mobile menu
   look handled while nothing hid the real nav. The live mobile rules are in functions.php's
   wp_head block, which owns .uf-mainnav. Its .uf-menu-btn { display: block } was already
   overridden by the later unconditional .uf-menu-btn { display: none } anyway. */

/* ---------- v0.3: product page ---------- */
.uf-back { max-width: var(--uf-max); margin: 0 auto; padding: 0 0 10px; }
.uf-back a { font-family: Arial, sans-serif; font-size: 14px; text-decoration: none; }
.single-product div.product {
    background: var(--uneac-white); border-radius: 8px; padding: 28px;
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
.single-product div.product .woocommerce-product-gallery img { border-radius: 6px; }
.single-product div.product .product_title { font-size: 28px; margin-bottom: 6px; }
.single-product div.product p.price { font-size: 24px; color: var(--uneac-primary); }
.uf-approx { color: #7a6a58; font-size: 14px; font-family: Arial, sans-serif; margin: 4px 0 10px; }
.single-product form.cart .single_add_to_cart_button { padding: 14px 40px; font-size: 16px; }
.woocommerce-tabs { margin-top: 30px; }
.woocommerce-tabs h2 { text-align: center; font-size: 24px; }
.woocommerce-tabs ul.tabs li.active a { color: var(--uneac-primary); }

/* ---------- v0.3.1 ---------- */
.uf-cats-btn { display: none; }
@media (max-width: 780px) {
    .uf-cats-btn {
        display: block; width: 100%; text-align: left; background: #fff;
        border: none; border-bottom: 1px solid #e2dbd0; padding: 11px 16px;
        font-family: Arial, sans-serif; font-size: 15px; color: var(--uneac-text); cursor: pointer;
    }
    .uf-nav2 { display: none; }
    body.uf-cats-open .uf-nav2 { display: block; }
    .uf-nav2 ul { flex-direction: column; overflow: visible; }
    .uf-nav2 li ul { position: static; display: block; box-shadow: none; background: var(--uneac-cream); }
    .uf-nav2 li ul a { padding-left: 30px; }
    .uf-nav2 > ul > li:first-child > a { padding: 10px 16px; }
}

/* Card text breathing room */
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .price,
ul.products li.product .uf-approx {
    padding-left: 14px !important;
    padding-right: 14px !important;
}
ul.products li.product .button { margin-left: 14px !important; margin-right: 14px !important; }


/* ---------- v0.4: section pattern styles ---------- */
.uf-editor-home { }
.ufp-section { padding: 46px 20px; max-width: 1100px; margin: 0 auto; }
.ufp-band { background: var(--uneac-band, #E7F3D8); padding: 50px 20px; }
.ufp-band > * { max-width: 1100px; margin-left: auto; margin-right: auto; }
.ufp-cta { background: var(--uneac-primary); color: #fff; text-align: center; padding: 54px 20px; }
.ufp-cta h2, .ufp-cta p { color: #fff; }
.ufp-story { background: #fff; border-top: 3px solid var(--uneac-accent); border-bottom: 3px solid var(--uneac-accent); padding: 50px 20px; text-align: center; }
.ufp-story p { max-width: 720px; margin: 12px auto; font-size: 18px; line-height: 1.7; }
h3.ufp-num { width: 58px; height: 58px; line-height: 58px; border-radius: 50%; background: var(--uneac-primary); color: #fff; margin: 0 auto 10px; font-size: 26px; text-align: center; }
.ufp-quote { font-size: 22px; font-style: italic; max-width: 760px; margin: 10px auto; line-height: 1.6; }
.ufp-quote-name { color: #777; font-size: 15px; }
.ufp-faq-item { border: 1px solid #ddd; border-radius: 6px; background: #fff; padding: 12px 18px; max-width: 780px; margin: 10px auto; }
.ufp-faq-item summary { cursor: pointer; font-weight: bold; font-size: 17px; }
.ufp-faq-item p { margin: 10px 0 2px; }
.wp-block-button__link.wp-element-button { background: var(--uneac-primary); color: #fff; border-radius: 4px; padding: 13px 30px; font-size: 16px; text-decoration: none; }
.ufp-cta .wp-block-button__link.wp-element-button { background: #fff; color: var(--uneac-primary); }
.uneac-nl { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; max-width: 560px; margin: 0 auto; }
.uneac-nl input { padding: 12px 14px; font-size: 16px; border: none; border-radius: 4px; flex: 1 1 160px; }
.uneac-nl button { padding: 12px 26px; font-size: 16px; border: none; border-radius: 4px; background: var(--uneac-accent); color: #fff; cursor: pointer; }
.wp-block-columns { gap: 24px; }
.wp-block-details summary::marker { color: var(--uneac-primary); }


/* ---------- v0.7: category strip dropdowns + archive kicker ---------- */
.uf-nav2 li ul {
    display: none; position: absolute; top: 100%; left: 0; z-index: 60;
    background: #fff; min-width: 220px; border: 1px solid #e2dbd0;
    border-top: 2px solid var(--uneac-primary);
    box-shadow: 0 6px 18px rgba(0,0,0,.15);
    flex-direction: column; flex-wrap: nowrap;
}
.uf-nav2 li:hover > ul { display: block; }
.uf-nav2 li ul li { display: block; }
.uf-nav2 li ul a { display: block; padding: 9px 16px; white-space: nowrap; }
.uf-nav2 li ul a:hover { background: var(--uneac-cream); color: var(--uneac-primary); }
@media (max-width: 900px) { .uf-nav2 li ul { display: none !important; } }

.term-description { max-width: var(--uf-max); margin: 0 auto; padding: 6px 4% 0; box-sizing: border-box; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: #8a7a66; }
.term-description p { margin: 0; }


/* the invisible clearfix must not claim a grid cell */
ul.products::before, ul.products::after { display: none !important; content: none !important; }


/* ---------- v0.8: Food First homepage ---------- */
.uf-hero-food { position: relative; min-height: 430px; background-size: cover; background-position: center; }
.uf-hero-food::before { content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(255,253,248,0) 0%, rgba(255,253,248,0) 42%, rgba(255,253,248,.55) 62%, rgba(255,253,248,.88) 100%); }
.uf-hero-food-inner { position: relative; max-width: var(--uf-max); margin: 0 auto; padding: 44px 4%;
    display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: center; }
.uf-hero-food-copy h1 { font-size: 42px; margin: 0 0 12px; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.6); }
.uf-hero-food-copy p { font-size: 18px; color: #fff; margin: 0 0 20px; max-width: 460px; text-shadow: 0 1px 6px rgba(0,0,0,.6); }

.uf-hero-blocks { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.uf-hb { display: block; position: relative; height: 150px; border-radius: 12px; overflow: hidden;
    background-color: var(--uneac-primary); background-size: cover; background-position: center;
    box-shadow: 0 4px 14px rgba(0,0,0,.22); text-decoration: none; transition: transform .15s; }
.uf-hb:hover { transform: translateY(-3px); }
.uf-hb-label { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 12px 10px;
    color: #fff; font-weight: 700; font-size: 15px; line-height: 1.25;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.62) 70%); }
.uf-tstrip { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 8px;
    background: var(--uneac-primary); color: #fff; padding: 11px 4%; font-size: 15px; }
.uf-tstrip a { color: #fff; text-decoration: underline; }
@media (max-width: 860px) {
    .uf-hero-food-inner { grid-template-columns: 1fr; }
    .uf-hero-food::before { background: linear-gradient(180deg, rgba(255,253,248,.85) 0%, rgba(255,253,248,.50) 40%, rgba(24,30,16,.50) 100%); }
    .uf-hero-food-copy h1 { font-size: 30px; }
    .uf-hb { height: 110px; }
}
/* the category bar follows along */
.uf-nav2 { position: sticky; top: 0; z-index: 80; }
body.admin-bar .uf-nav2 { top: 32px; }
@media (max-width: 782px) { body.admin-bar .uf-nav2 { top: 46px; } }


/* ---------- v0.9: categories ARE the main menu ---------- */
.uf-utility { background: #fff; padding: 4px 4% 0; text-align: right; }
.uf-utility ul { list-style: none; margin: 0; padding: 0; display: inline-flex; gap: 4px; flex-wrap: wrap; }
.uf-utility a { font-size: 13px; color: #6a6353; text-decoration: none; padding: 3px 10px; }
.uf-utility a:hover { color: var(--uneac-primary); text-decoration: underline; }
.uf-nav { position: sticky; top: 0; z-index: 1200; }
body.admin-bar .uf-nav { top: 32px; }
@media (max-width: 782px) { body.admin-bar .uf-nav { top: 46px; } }
.uf-nav > ul > li:first-child > a { background: rgba(0,0,0,.28); font-weight: 700; }
.uf-nav2 { position: static; }


/* ---------- v0.9.1: the menu truly stays (desktop) ---------- */
.uf-nav.uf-stuck { position: fixed; top: 0; left: 0; right: 0; z-index: 1200; box-shadow: 0 3px 10px rgba(0,0,0,.18); }
body.admin-bar .uf-nav.uf-stuck { top: 32px; }
.uf-nav-spacer { display: none; }
.uf-nav-spacer.on { display: block; }


/* ---------- v0.9.2: the friendly 1-2-3 (Food First) ---------- */
.uf-steps-food { background: none; padding: 10px 4% 34px; }
.uf-hsteps-inner { max-width: 1100px; margin: 0 auto; }
.uf-hsteps-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 26px; }
.uf-hstep { text-align: center; padding: 0 14px; }
.uf-hstep-num { display: block; width: 44px; height: 44px; line-height: 44px; border-radius: 50%;
    background: #A9A64F; color: #fff; font-weight: 700; font-size: 18px; margin: 0 auto 10px; text-align: center; }
.uf-hstep h3 { margin: 0 0 6px; font-size: 17px; }
.uf-hstep p { margin: 0 auto; max-width: 300px; color: #555; font-size: 14.5px; line-height: 1.55; }

/* testimonies */
.uf-reviews { padding: 26px 4% 44px; }
.uf-reviews-row { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.uf-rev { background: #fff; border: 1px solid #eee7db; border-radius: 12px; box-shadow: 0 3px 10px rgba(0,0,0,.06); padding: 18px 20px; text-align: left; }
.uf-rev-stars { color: #A9A64F; letter-spacing: 2px; margin-bottom: 8px; }
.uf-rev p { font-style: italic; margin: 0 0 10px; }
.uf-rev-who { color: #8a7a66; font-size: 13px; }


/* the map keeps to its own layer, under the menu */
.uf-map-canvas { position: relative; z-index: 0; isolation: isolate; }


/* the maker's mark */
.uf-credit { text-align: center; font-size: 12px; color: #9a917e; padding: 10px 4% 16px; background: var(--uneac-text, #2b2620); }
.uf-credit a { color: #b8ae95; text-decoration: underline; }


/* payment trust strip */
.uf-paystrip { text-align: center; padding: 14px 4% 4px; background: var(--uneac-text, #2b2620); color: #cfc8b8; font-size: 12.5px; display: flex; flex-wrap: wrap; gap: 10px 18px; justify-content: center; align-items: center; }
.uf-paycards { display: inline-flex; gap: 6px; }
.uf-paycards span { border: 1px solid #57503f; border-radius: 4px; padding: 2px 8px; font-size: 11px; letter-spacing: .5px; color: #b8ae95; }
.uf-paynote { flex-basis: 100%; color: #9a917e; font-size: 11.5px; }


/* four-column footer, rebuilt */
.uf-footer-4 { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 26px; }
@media (max-width: 900px) { .uf-footer-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .uf-footer-4 { grid-template-columns: 1fr; } }
.uf-footer-notecol { margin-top: 14px; font-size: 12.5px; color: #9a917e; max-width: 260px; }
.uf-footer-addr { margin-bottom: 8px; color: #cfc8b8; font-size: 14px; white-space: pre-line; }
.uf-footer-news { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.uf-footer-newslabel { flex-basis: 100%; font-size: 13px; color: #cfc8b8; margin-bottom: 2px; }
.uf-footer-news input { flex: 1; min-width: 140px; padding: 8px 12px; border-radius: 6px; border: 1px solid #57503f; background: #fffdf8; }
.uf-footer-news .uf-btn { padding: 8px 18px; }


/* the logo knows its place - stately, not sprawling */
.uf-logo img, .uf-topbar .custom-logo { max-height: 88px; width: auto; display: block; }
@media (max-width: 782px) { .uf-logo img, .uf-topbar .custom-logo { max-height: 64px; } }


/* ---------- v1.2: classic header, CWHM-shaped ---------- */
.uneac-style-classic .uf-search input { border-radius: 999px; padding: 12px 20px; border: 1.5px solid var(--uneac-primary); }
.uneac-style-classic .uf-search button { border-radius: 999px; width: 46px; font-size: 0; position: relative; }
.uneac-style-classic .uf-search button::before { content: "\1F50D"; font-size: 16px; }
.uneac-style-classic .uf-account { display: flex; gap: 22px; }
.uneac-style-classic .uf-account a { text-align: center; font-size: 13px; color: var(--uneac-primary); }
.uneac-style-classic .uf-account a::before { display: block; font-size: 21px; margin-bottom: 2px; }
.uneac-style-classic .uf-account a:first-child::before { content: "\1F464"; }
.uneac-style-classic .uf-account a:last-child::before { content: "\1F9FA"; }
.uneac-style-classic .uf-nav > ul > li:first-child > a { background: rgba(0,0,0,.18); font-weight: 700; }
.uneac-style-classic .uf-nav > ul > li:first-child > a::before { content: "\229E "; }
.uneac-style-classic .uf-nav2 { position: static; }


/* ---------- v1.3: hero without the four pictures, bigger & clickable ---------- */
.uf-hero-nopics .uf-hero-food-inner { grid-template-columns: 1fr; justify-items: center; }
.uf-hero-nopics .uf-hero-food-copy { max-width: 760px; text-align: center; margin: 0 auto; }
.uf-hero-nopics .uf-hero-food-copy .uf-btn { margin: 0 auto; }
.uf-hero-nopics { min-height: 480px; display: flex; align-items: center; }
.uf-hero-nopics .uf-hero-food-copy h1 { font-size: 62px; line-height: 1.08; }
.uf-hero-nopics .uf-hero-food-copy p { font-size: 25px; line-height: 1.4; max-width: 620px; margin: 0 auto 22px; }
/* the food words read like the white sentence, just clickable */
.uf-hero-sub a { color: #fff !important; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.uf-hero-sub a:hover { color: #fff !important; text-decoration-thickness: 2px; }
/* even overlay so the centered white text stays readable across the photo */
.uf-hero-nopics.uf-hero-food::before { background: rgba(24,30,16,var(--uf-hero-tint,.44)); } /* 3/10: Customize > "Darken the hero photo" */
.uf-hero-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.uf-hero-links a { display: inline-block; background: rgba(255,255,255,.92); color: var(--uneac-primary);
    font-weight: 700; font-size: 14px; text-decoration: none; padding: 7px 14px; border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0,0,0,.25); transition: transform .12s, background .12s; }
.uf-hero-links a:hover { transform: translateY(-2px); background: #fff; }
@media (max-width: 860px) {
    .uf-hero-nopics .uf-hero-food-copy h1 { font-size: 34px; }
    .uf-hero-nopics .uf-hero-food-copy p { font-size: 18px; }
    .uf-hero-nopics.uf-hero-food::before { background: linear-gradient(180deg, rgba(24,30,16,.35) 0%, rgba(24,30,16,.62) 100%); }
}

/* ---------- v1.3: trust badges strip ---------- */
.uf-badges { justify-content: center; gap: 8px 10px; padding: 12px 4%; }
.uf-badge { display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: 4px 13px;
    font-size: 13.5px; font-weight: 600; color: #fff; white-space: nowrap; }

/* ---------- v1.3: mobile category tiles - top 9, two across ---------- */
@media (max-width: 780px) {
    .uf-cats { grid-template-columns: 1fr 1fr; gap: 12px; }
    .uf-cats .uf-cat:nth-child(n+11) { display: none; } /* show an even top 10 */
    .uf-cat { min-height: 120px; }
    .uf-cat-name { font-size: 18px; }
}

/* ---------- v1.3: Popular Items carousel ---------- */
.uf-carousel { position: relative; }
.uf-carousel-track ul.products { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto;
    scroll-snap-type: x mandatory; gap: 22px; grid-template-columns: none !important; margin: 0; padding: 4px 2px;
    scrollbar-width: none; }
.uf-carousel-track ul.products::-webkit-scrollbar { display: none; }
.uf-carousel-track li.product { flex: 0 0 240px !important; width: 240px !important; scroll-snap-align: start; }
.uf-carousel-arrow { position: absolute; top: 42%; transform: translateY(-50%); z-index: 5; width: 44px; height: 44px;
    border-radius: 50%; border: none; background: var(--uneac-primary); color: #fff; font-size: 26px; line-height: 1;
    cursor: pointer; box-shadow: 0 3px 12px rgba(0,0,0,.28); }
.uf-carousel-arrow:hover { filter: brightness(1.1); }
.uf-carousel-prev { left: -8px; }
.uf-carousel-next { right: -8px; }
@media (max-width: 700px) { .uf-carousel-arrow { display: none; } .uf-carousel-track li.product { flex-basis: 30% !important; width: 30% !important; } .uf-carousel-track ul.products { gap: 10px; } .uf-carousel-track li.product .woocommerce-loop-product__title { font-size: 12px; } .uf-carousel-track li.product .price { font-size: 13px; } .uf-carousel-track li.product .button { font-size: 11px; padding: 6px 4px; } }


/* ---------- v1.4: easier-to-shop product grid + mobile dropdowns + category bar everywhere ---------- */
/* medium screens: a tidy 3 across; phones: 2 across (never a giant single column) */
@media (max-width: 1024px) { ul.products { grid-template-columns: repeat(3, 1fr) !important; gap: 16px; } }
@media (max-width: 640px)  { ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; } }
@media (max-width: 640px) {
    ul.products li.product .woocommerce-loop-product__title { font-size: 13.5px; }
    ul.products li.product .price { font-size: 15px; }
    ul.products li.product .button { font-size: 13px; padding: 8px 6px; }
    ul.products li.product .uf-approx { font-size: 12px; }
}
/* keep the popular carousel horizontal even on small screens */
.uf-carousel-track ul.products { grid-template-columns: none !important; }

/* mobile: menus become tap-to-open dropdowns instead of one long expanded list */
@media (max-width: 780px) {
    .uf-nav li ul, .uf-nav2 li ul { display: none !important; }
    .uf-nav li.uf-open > ul, .uf-nav2 li.uf-open > ul { display: block !important; }
    .uf-nav > ul > li.uf-has-kids > a, .uf-nav2 > ul > li.uf-has-kids > a { position: relative; }
    .uf-nav > ul > li.uf-has-kids > a::after,
    .uf-nav2 > ul > li.uf-has-kids > a::after { content: "\25BE"; position: absolute; right: 18px; transition: transform .15s; }
    .uf-nav > ul > li.uf-open.uf-has-kids > a::after,
    .uf-nav2 > ul > li.uf-open.uf-has-kids > a::after { transform: rotate(180deg); }
}


/* ---------- v1.5: primary menu = slim green bar at the very top-right; food categories = main menu ---------- */
/* v1.7 (9/17): the .uf-topmenu and .uf-nav-main rule sets were removed. Neither class is
   rendered by header.php or by any plugin - verified by grepping every PHP file for the
   markup, not just the selector. They were the second generation of nav styling (after
   .uf-nav) and their mobile block below was the one that LOOKED like a working hamburger. */
.uf-menu-btn { display: none; }

@media (max-width: 860px) {
    /* the hamburger itself - this is the LIVE rule that reveals the button. The nav it opens
       is hidden and shown in functions.php's wp_head block (.uf-mainnav), not here. */
    .uf-menu-btn { display: block; width: 100%; background: var(--uneac-primary); color: #fff; border: none; font-size: 17px; padding: 11px 16px; text-align: left; cursor: pointer; }
}


/* ---------- v1.6: easier category shopping ---------- */
/* archive content was rendering flush-left; give it the same centered, padded container as the title */
.woocommerce .uf-cat-search,
.woocommerce .uf-subtabs,
.woocommerce .uf-cat-intro,
.woocommerce .term-description,
.woocommerce ul.products,
.woocommerce .woocommerce-result-count,
.woocommerce nav.woocommerce-pagination,
.woocommerce .uf-cat-more {
    max-width: var(--uf-max); margin-left: auto; margin-right: auto;
    padding-left: 4%; padding-right: 4%; box-sizing: border-box;
}

/* reassurance = the category's own description, easy to read (like the Cow Dairy layout) */
.uf-cat-intro .uf-cat-tagline { font-size: 19px; font-weight: 600; color: var(--uneac-primary); margin: 0 0 8px; }
.woocommerce .uf-cat-intro { max-width: 900px; margin: 4px auto 18px; padding-left: 4%; padding-right: 4%; box-sizing: border-box; color: #4a4436; font-size: 15.5px; line-height: 1.6; }
.uf-cat-intro p { margin: 0 0 10px; }
.uf-cat-intro ul { list-style: none; margin: 10px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1px 24px; }
.uf-cat-intro ul li { position: relative; padding: 3px 0 3px 26px; }
.uf-cat-intro ul li::before { content: "\2713"; position: absolute; left: 0; color: var(--uneac-primary); font-weight: 700; }
.uf-cat-intro em { display: inline-block; color: #7a7060; font-size: 13px; margin-top: 6px; }

/* quick search above the tabs */
.uf-cat-search { display: flex; margin: 4px 0 14px; }
.uf-cat-search input[type=search] { width: 300px; max-width: 62%; padding: 8px 12px; border: 1px solid #cfc8bc; border-right: none; border-radius: 8px 0 0 8px; font-size: 14px; }
.uf-cat-search button { border: none; background: var(--uneac-primary); color: #fff; padding: 0 13px; border-radius: 0 8px 8px 0; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.uf-cat-search button:hover { filter: brightness(1.1); }
.uf-cat-search button svg { display: block; }

/* subcategory tabs = folder-style tabs sitting on a green baseline */
.uf-subtabs { display: flex; flex-wrap: wrap; gap: 3px; margin: 8px 0 22px; border-bottom: 2px solid var(--uneac-primary); }
.uf-subtab { display: inline-block; padding: 9px 18px; border: 1px solid #d8d0bf; border-bottom: none; border-radius: 8px 8px 0 0; background: #ece6d8; color: var(--uneac-text); text-decoration: none; font-size: 14px; font-weight: 600; margin-bottom: -2px; }
.uf-subtab:hover { background: #f5f1e8; color: var(--uneac-primary); }
.uf-subtab-on, .uf-subtab-on:hover { background: #fff; color: var(--uneac-primary); border-color: var(--uneac-primary); border-bottom: 2px solid #fff; position: relative; z-index: 1; }
.uf-cat-more { margin: 46px 0 6px; border-top: 1px solid #e2dbd0; padding-top: 26px; }
.uf-cat-more h3 { text-align: center; color: var(--uneac-primary); font-size: 20px; margin: 0 0 14px; }
.uf-cat-more-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.uf-cat-more-links a { display: inline-block; padding: 8px 16px; border-radius: 999px; background: #f4f1ea; border: 1px solid #e2dbd0; color: var(--uneac-text); text-decoration: none; font-size: 14px; }
.uf-cat-more-links a:hover { background: var(--uneac-cream); color: var(--uneac-primary); }


/* ================= v1.7 (9/17): tighter mobile header + 2.4-card Popular Items =================
   Deployed to all six sites running uneac-farm. Three fixes, all phone-only (<=700px):
   1. the logo cap - line ~249 sets max-height:70px !IMPORTANT, which silently beat the old
      64px mobile rule at line ~453 (no !important). Rather than strip the !important there
      and change the DESKTOP logo to 88px, this block wins by being later AND !important.
   2. the Popular Items carousel was flex-basis:30% + 10px gap = 3.05 cards at 360px.
      Sized in vw, NOT %, and this matters: a % width resolves against the ul content box,
      which padding-right shrinks, so 42% + padding-right:14% gave 119px cards (2.6 across)
      instead of the 151px intended. vw is immune to that. Measured live on cwhm at 375px:
      33vw = 2.54 cards, 35vw = 2.41, 38vw = 2.23, 40vw = 2.13. 35vw chosen.
      Card type goes back up, since it had been shrunk to squeeze three across.
   3. header rows: topbar padding 14px -> 7px, gap 24px -> 8px, search input slimmer.
      NOTE the "Welcome back, <name>" line is added by uneac-locations.php (~line 2216) for
      LOGGED-IN users only and it sets flex-wrap:wrap inline - a customer never sees that row.
   ============================================================================================ */
@media (max-width: 700px) {
    /* --- header, tighter --- */
    .uf-topbar { padding: 7px 4%; gap: 8px; }
    .uf-logo img, .uf-logo .custom-logo, .uf-topbar .custom-logo { max-height: 44px !important; }
    .uf-account { gap: 16px; }
    .uneac-style-classic .uf-account a { font-size: 12px; }
    .uneac-style-classic .uf-account a::before { font-size: 19px; margin-bottom: 0; }
    .uf-welcome { font-size: 12px; margin: 0; line-height: 1.3; }
    .uneac-style-classic .uf-search input { padding: 9px 16px; }
    .uneac-style-classic .uf-search button { width: 40px; }
    .uf-menu-btn { padding: 10px 16px; font-size: 16px; }

    /* --- Popular Items: two and a bit, so the next card is visibly cut off --- */
    .uf-carousel-track li.product { flex: 0 0 35vw !important; width: 35vw !important; }
    .uf-carousel-track ul.products { gap: 12px; padding-right: 16px; }
    .uf-carousel-track li.product .woocommerce-loop-product__title { font-size: 14px; }
    .uf-carousel-track li.product .price { font-size: 15.5px; }
    .uf-carousel-track li.product .button { font-size: 13px; padding: 8px 6px; }
    .uf-carousel-track li.product .uf-approx { font-size: 11.5px; }
}


/* ================= v1.8 (9/17): the short homepage welcome =================
   Replaces the two .uf-intro paragraphs AND the .uf-trust heading+paragraph with one
   block. Styling only - the words live in the page content, per site, so a farm that
   has not changed its homepage is untouched by this and these rules sit unused.
   The payoff line is stored in normal case and shouted with text-transform, so it
   stays readable to a screen reader and editable in the page editor.
   =========================================================================== */
.uf-hello { max-width: 820px; margin: 0 auto; padding: 46px 6% 36px; text-align: center; }
.uf-hello .uf-hello-q {
    font-size: 23px; line-height: 1.5; color: var(--uneac-text); margin: 0 0 24px;
}
.uf-hello .uf-hello-q strong { color: var(--uneac-primary); font-weight: 700; }
.uf-hello .uf-hello-yes {
    font-size: 35px; line-height: 1.15; margin: 0; color: var(--uneac-primary);
    text-transform: uppercase; letter-spacing: .5px; font-weight: 700;
}
.uf-hello .uf-hello-yes::after {
    content: ""; display: block; width: 96px; height: 3px;
    margin: 18px auto 0; background: var(--uneac-accent); border-radius: 2px;
}
@media (max-width: 700px) {
    .uf-hello { padding: 28px 6% 24px; }
    .uf-hello .uf-hello-q { font-size: 19px; line-height: 1.45; margin: 0 0 18px; }
    .uf-hello .uf-hello-yes { font-size: 26px; }
    .uf-hello .uf-hello-yes::after { width: 76px; margin-top: 14px; }
}

/* ---------------------------------------------------------------------------
   9/24: the Popular Items row runs the full width of the screen on a desktop.

   Every other section on the homepage is capped at 1240px, which is right for
   reading - a line of text that runs the whole width of a wide monitor is hard
   to follow. A sliding row of food is the opposite: the cap was cutting it off
   at four and a bit cards with empty cream either side, when the whole point of
   the row is to show there is more.

   Only the ROW breaks out. The heading, the subtitle and the Shop Now button
   stay where they were, so the section still lines up with the ones above and
   below it.

   The phone is left completely alone. The 782px floor here is the same breakpoint
   the theme uses elsewhere, and below it the existing rules - flex-basis 30%,
   then 35vw - carry on exactly as before.
   --------------------------------------------------------------------------- */
@media (min-width: 783px) {
    /* the section keeps its vertical padding and loses only the width cap */
    .uf-section.uf-popular-sec { max-width: none; padding-left: 0; padding-right: 0; }
    /* the words stay at the old width, centred, so nothing else shifts */
    .uf-popular-sec > .uf-section-title,
    .uf-popular-sec > .uf-section-sub,
    .uf-popular-sec > p { max-width: var(--uf-max); margin-left: auto; margin-right: auto; padding-left: 4%; padding-right: 4%; box-sizing: border-box; }
    /* the row itself spans the window, with a comfortable gutter so the first and
       last card are not jammed against the glass */
    .uf-popular-sec .uf-carousel { padding: 0 48px; }

    /* THE ONE THAT ACTUALLY MATTERED.
       There is a rule further up this stylesheet that caps every .woocommerce ul.products at
       1240px, centres it, and gives it 4% side padding. It is written for the shop page, where
       it is right - but the carousel's list is also a .woocommerce ul.products, so it was being
       capped too. Widening the section moved the arrows out to the edges and left the cards
       sitting in the middle, which is exactly what it looked like: a full-width band with a
       1240px row floating in it. Measured on the live page at a 1905px window, that rule put
       the first card at x=332, which is where it was.
       Undone here for this row only; the shop page keeps its cap. */
    .uf-popular-sec .uf-carousel-track ul.products {
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        padding: 4px 8px 4px 2px;   /* back to the carousel's own padding, not the shop's 4% */
    }
    /* the arrows follow the row out instead of floating over the first card */
    .uf-popular-sec .uf-carousel-prev { left: 8px; }
    .uf-popular-sec .uf-carousel-next { right: 8px; }
}

/* 10/3: the pickup map inside a page or homepage section uses that section's gutter, not a second one. */
.uf-content .uf-map-wrap, .uf-section .uf-map-wrap { max-width: none; padding-left: 0; padding-right: 0; }

/* ---------------------------------------------------------------------------
   10/4 PHONES (Gideon, from his own phone):
   - the header was a row too tall for a signed-in member: "Welcome back, ..." took a
     line of its own and pushed My Account / Cart onto a second one. On a phone the
     greeting goes and logo + account + cart stay on one row.
   - Popular Items: cards were 35vw wide (about 130px) and stretched to the tallest one,
     so they read tall and narrow. Wider cards, a shorter photo, names on fewer lines.
   - Category tiles: just the name on a phone - the small tagline was never meant to show there.
   --------------------------------------------------------------------------- */
@media (max-width: 700px) {
    .uf-welcome { display: none !important; }
    .uf-account { flex-wrap: nowrap !important; }

    /* a wide card: photo on the left, name beside it, then sizes / price / button across the bottom */
    .uf-carousel-track ul.products { gap: 12px; padding-right: 16px; align-items: flex-start; }
    .uf-carousel-track li.product { flex: 0 0 82vw !important; width: 82vw !important; max-width: 340px; padding: 12px !important;
        display: flex !important; flex-direction: column; text-align: left; }
    .uf-carousel-track li.product > a.woocommerce-LoopProduct-link { display: grid !important; grid-template-columns: 96px 1fr; column-gap: 12px; align-items: start; text-align: left; }
    .uf-carousel-track li.product > a.woocommerce-LoopProduct-link img { grid-row: 1 / span 3; width: 96px !important; height: 96px !important; aspect-ratio: 1; object-fit: cover; margin: 0 !important; }
    .uf-carousel-track li.product > a.woocommerce-LoopProduct-link > :not(img) { grid-column: 2; }
    .uf-carousel-track li.product .woocommerce-loop-product__title { font-size: 16px; line-height: 1.25; margin: 0 0 3px !important; padding: 0 !important; }
    .uf-carousel-track li.product .uf-buy { margin-top: auto; padding-top: 10px; text-align: left; }
    .uf-carousel-track li.product .uf-buy > a.woocommerce-LoopProduct-link { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
    .uf-carousel-track li.product .price { font-size: 17px; }
    .uf-carousel-track li.product .button { font-size: 15px; padding: 10px 8px; }

    .uf-cat-tag { display: none; }
}