/* ============================================================
   FIVE LOAVES — Big Cartel "Neat" theme overrides
   Re-skins the store to match the NEW marketing site (site.css):
   Hanken Grotesk + Jost, warm cream/ink, squared buttons, clean
   (no film grain / glow / forced-lowercase). Targets Neat's classes.

   APPLY (one-time): Big Cartel → Settings → Integration Code → HEAD:
     <link rel="stylesheet" href="https://fiveloaves.vercel.app/bigcartel.css">
   Integration Code persists across theme switches. To iterate, edit
   this file + redeploy the site — no re-paste needed.
   Pairs with 3 no-code settings: upload the Five Loaves logo PNG,
   set the store name to "Five Loaves", reorder Featured (bread first).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600&family=Jost:wght@200;300;400;500&display=swap');

:root{
  --ink:#2e2a25; --paper:#f7f5f0; --paper-2:#efebe2; --card:#fdfcfa;
  --hair:#d8d3c8; --ink-soft:#4a463f; --muted:#6f685d; --kraft-deep:#3a2f23;
}

/* ---- base --------------------------------------------------- */
html, body, body#home, .theme, .wrapper, .content{
  background-color:var(--paper) !important;
  color:var(--ink) !important;
  font-family:"Hanken Grotesk", system-ui, sans-serif !important;
}
body{ font-weight:400; font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; }
a{ color:inherit; }
h1, h2, h3, h4{ font-family:"Jost", system-ui, sans-serif !important; font-weight:300 !important; letter-spacing:-.005em; color:var(--ink) !important; text-transform:none !important; }
p, .featured-message, .product-description{ color:var(--ink-soft); font-family:"Hanken Grotesk", system-ui, sans-serif !important; }

/* ---- header / nav ------------------------------------------- */
.header{ background:var(--paper) !important; border-bottom:1px solid var(--hair) !important; }
.header.home.has_featured{ background:var(--paper) !important; }
.logo, .logo a, .store-logo{ color:var(--ink) !important; }
.store-logo img{ width:auto !important; }   /* aspect preserved; height via BC's "Header logo size" setting */
.navigation a, .sections a, nav.utility a, nav.utility button{
  font-family:"Jost", system-ui, sans-serif !important; color:var(--ink-soft) !important;
  font-weight:400 !important; text-transform:uppercase !important; letter-spacing:.14em; font-size:12px !important; }
.navigation a:hover, .sections a:hover{ color:var(--ink) !important; }
.header-item-count, .header-subtotal-amount, .header-divider,
.open-search-button, .open-mobile-navigation, .cart-link{ color:var(--ink) !important; }

/* ---- welcome hero (kept calm — the marketing site owns the pitch) ---- */
.welcome_overlay{ background:linear-gradient(to top, rgba(46,40,33,.42) 0%, rgba(46,40,33,.06) 55%, rgba(46,40,33,0) 80%) !important; }
.welcome_text{ color:#fbf7ee !important; }
.welcome-header{ font-family:"Jost", system-ui, sans-serif !important; font-weight:300 !important; font-size:clamp(30px,4.4vw,52px) !important; line-height:1.08 !important; letter-spacing:0 !important; text-transform:none !important; color:#fbf7ee !important; text-shadow:0 2px 20px rgba(0,0,0,.4); }
.welcome-subheader{ font-family:"Hanken Grotesk", system-ui, sans-serif !important; font-weight:400 !important; font-size:clamp(16px,1.8vw,19px) !important; color:#f3e9da !important; text-transform:none !important; letter-spacing:0 !important; }
.welcome_button{ background:#fbf7ee !important; color:var(--ink) !important; }

/* ---- section headings (Featured / Shop by category) --------- */
.featured-title, .featured-title.page-title{ font-family:"Jost", system-ui, sans-serif !important; font-weight:300 !important; font-size:clamp(26px,3.6vw,40px) !important; letter-spacing:-.005em !important; text-transform:none !important; color:var(--ink) !important; }
.featured-message{ font-family:"Hanken Grotesk", system-ui, sans-serif !important; color:var(--ink-soft) !important; font-weight:400; }

/* ---- buttons: squared + ink (matches site .btn) ------------- */
.button, button.button, input[type="submit"], .add-to-cart-button, .product-buy-button{
  background:var(--ink) !important; color:var(--paper) !important; border:1px solid var(--ink) !important; border-radius:0 !important;
  font-family:"Jost", system-ui, sans-serif !important; font-weight:400 !important; letter-spacing:.2em !important; text-transform:uppercase !important; font-size:12px !important;
  padding:14px 30px !important; min-height:0 !important; height:auto !important; line-height:1.15 !important; }
.button:hover, input[type="submit"]:hover, .add-to-cart-button:hover, .product-buy-button:hover{ background:#000 !important; border-color:#000 !important; }
.minimal-button, .view-all-products{ background:transparent !important; color:var(--ink) !important; border:1px solid var(--ink) !important; border-radius:0 !important; font-family:"Jost", system-ui, sans-serif !important; font-weight:400 !important; text-transform:uppercase !important; letter-spacing:.2em !important; font-size:12px !important; }
.minimal-button:hover, .view-all-products:hover{ background:var(--ink) !important; color:var(--paper) !important; }
/* Neat's big primary buttons (CHECKOUT + ADD TO CART) render over-tall, so normalize the height + center the label */
.button--checkout, .add-to-cart-button, #add-to-cart-button{ min-height:0 !important; height:auto !important; line-height:1 !important; padding:18px 44px !important; font-size:13px !important; text-align:center !important; }

/* ---- product grid / cards ----------------------------------- */
.product-list-image-container{ border-radius:6px !important; overflow:hidden !important; background:var(--card) !important; }
.product-list-thumb-name{ font-family:"Hanken Grotesk", system-ui, sans-serif !important; font-weight:500 !important; color:var(--ink) !important; font-size:16px !important; letter-spacing:0 !important; text-transform:none !important; margin-top:12px; }
.product-list-thumb-price{ color:var(--ink-soft) !important; font-weight:500 !important; font-family:"Hanken Grotesk", system-ui, sans-serif !important; }
.product-list-thumb-options-description{ color:var(--muted) !important; font-family:"Hanken Grotesk", system-ui, sans-serif !important; font-size:13px !important; }
.product-list-thumb-status{ font-family:"Jost", system-ui, sans-serif !important; color:var(--kraft-deep) !important; font-weight:500 !important; text-transform:uppercase !important; letter-spacing:.08em; font-size:11px !important; }
.product-list-thumb-status.status-secondary{ color:var(--muted) !important; }
.category-count{ color:var(--muted) !important; font-family:"Hanken Grotesk", system-ui, sans-serif !important; }

/* ---- footer ------------------------------------------------- */
.footernav, .footer-custom-content{ font-family:"Hanken Grotesk", system-ui, sans-serif !important; color:var(--muted) !important; border-top:1px solid var(--hair) !important; }
.footernav a, .footer-custom-content a, .page_list--social_links a, .artist-support, .artist-support a{ color:var(--muted) !important; font-family:"Hanken Grotesk", system-ui, sans-serif !important; }
.footernav a:hover, .footer-custom-content a:hover{ color:var(--ink) !important; }
.social_icons svg, .facebook-icon svg, .youtube-icon svg{ fill:var(--muted) !important; }

/* ---- search / modals ---------------------------------------- */
.modal-content, .overlay_content, .modal-content--inner{ background:var(--paper) !important; color:var(--ink) !important; font-family:"Hanken Grotesk", system-ui, sans-serif !important; }
.search-input{ font-family:"Hanken Grotesk", system-ui, sans-serif !important; color:var(--ink) !important; }
.search-button{ background:var(--ink) !important; color:var(--paper) !important; border-radius:0 !important; }

/* ============================================================
   Brand components used by the customized layout.html
   (class bar / trust strip / brand footer). The markup for these
   lives in the store's Layout template; the styles live here so
   iterating = edit this file + redeploy, no template re-paste.
   ============================================================ */
:root{ --kraft:#c9b698; --faint:#9c9488; --maxw:1140px; }

/* ---- class announcement bar (mirrors site.css .fl-a) --------- */
.fl-a{ position:relative; background:var(--ink); color:var(--paper); font-family:"Jost",system-ui,sans-serif; border-bottom:1px solid rgba(201,182,152,.28); }
html.fl-a-off .fl-a{ display:none; }
.fl-a__link{ display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; max-width:var(--maxw); margin:0 auto; padding:9px 56px; font-size:13.5px; font-weight:300; letter-spacing:.01em; line-height:1.4; text-align:center; color:#ded7c9; transition:color .18s ease; text-transform:none; }
.fl-a__link:hover{ color:var(--paper); }
.fl-a__msg b{ color:var(--paper); font-weight:500; }
.fl-a__spots{ font-weight:500; color:var(--paper); }
.fl-a--low .fl-a__spots{ color:#e8c98c; }
.fl-a__cta{ display:inline-flex; align-items:center; gap:.45em; white-space:nowrap; font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:400; color:var(--paper); border-bottom:1px solid var(--kraft); padding-bottom:2px; }
.fl-a__cta i{ font-style:normal; transition:transform .18s ease; }
.fl-a__link:hover .fl-a__cta i{ transform:translateX(3px); }
.fl-a__compact{ display:none; }
.fl-a__x{ position:absolute; right:12px; top:50%; transform:translateY(-50%); width:30px; height:30px; display:flex; align-items:center; justify-content:center; background:none; border:0; cursor:pointer; font-size:20px; line-height:1; color:rgba(222,215,201,.55); transition:color .16s ease; padding:0; }
.fl-a__x:hover{ color:var(--paper); }
@media(max-width:560px){
  .fl-a__full{ display:none; }
  .fl-a__compact{ display:inline; }
  .fl-a__link{ padding:8px 40px; font-size:12.5px; gap:10px; }
  .fl-a__cta{ letter-spacing:.14em; }
}

/* ---- trust strip (first row inside the footer) --------------- */
.fl-trust{ display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; width:100%; max-width:var(--maxw); margin:0 auto; font-family:"Hanken Grotesk",system-ui,sans-serif !important; font-size:14.5px; color:var(--ink-soft); text-align:center; }
.fl-trust, .fl-trust *{ text-transform:none; }
.fl-trust__stars{ color:#8a7757; letter-spacing:2px; font-size:14px; }
.fl-trust__txt b{ color:var(--ink); font-weight:600; }
.fl-trust__link{ font-family:"Jost",system-ui,sans-serif !important; font-size:11px; letter-spacing:.16em; text-transform:uppercase !important; color:#8a7757; border-bottom:1px solid var(--kraft); padding-bottom:2px; }
.fl-trust__link:hover{ color:var(--ink); border-color:var(--ink); }

/* ---- brand footer (mirrors the marketing site's .foot) ------- */
footer[data-bc-hook="footer"]{ background:var(--paper) !important; }
footer .fl-foot{ width:100%; max-width:var(--maxw); margin:0 auto; text-align:left; font-size:15px; color:var(--ink-soft); font-family:"Hanken Grotesk",system-ui,sans-serif !important; }
footer .fl-foot, footer .fl-foot *{ text-transform:none; }   /* undo the theme's footer-wide transform */
.fl-foot__grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:48px; }
.fl-weave{ display:block; fill:none; stroke:currentColor; stroke-width:8; stroke-linecap:round; stroke-linejoin:round; width:42px; color:var(--ink); }
.fl-foot__brand{ display:flex; align-items:center; gap:12px; }
footer .fl-foot .fl-foot__brand b{ font-family:"Jost",system-ui,sans-serif !important; font-weight:400; font-size:16px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); }
.fl-foot__mission{ margin:16px 0 0; color:var(--muted); max-width:25em; line-height:1.6; }
.fl-foot__contact{ margin:16px 0 0; line-height:1.7; }
.fl-foot__contact a{ color:var(--ink-soft); letter-spacing:.04em; }
footer .fl-foot h4{ font-family:"Jost",system-ui,sans-serif !important; font-size:11px !important; letter-spacing:.2em; text-transform:uppercase; color:#8a7757 !important; margin:0 0 14px; font-weight:400 !important; }
.fl-foot__links h4{ margin-top:26px; }
.fl-foot__links h4:first-child{ margin-top:0; }
.fl-foot__links a{ display:block; margin-bottom:10px; color:var(--ink-soft); }
.fl-foot__links a:hover{ color:var(--ink); }
.fl-foot__spots div{ margin-bottom:12px; color:var(--muted); line-height:1.5; }
.fl-foot__spots b{ color:var(--ink); font-weight:500; }
.fl-foot__legal{ border-top:1px solid var(--hair); margin-top:44px; padding-top:20px; color:var(--faint); font-size:12.5px; letter-spacing:.04em; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.fl-foot__legal a{ color:var(--faint); }
.fl-foot__legal a:hover{ color:var(--ink); }
@media(max-width:880px){ .fl-foot__grid{ grid-template-columns:1fr; gap:36px; } }

/* ---- airier rhythm (whitespace pass) ------------------------- */
.content{ padding-top:64px; padding-bottom:88px; }
@media only screen and (max-width:1264px){ .content{ padding:40px 20px 64px; } }