@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Marcellus&display=swap');

.fof-order {
  --fof-primary:#826a45; --fof-dark:#3b2d20; --fof-cream:#f8f3ea;
  --fof-paper:#fffdf9; --fof-border:#e7dece; --fof-accent:#d85a2a;
  --fof-green:#477443; --fof-danger:#b00020;
  margin:0; padding-bottom:88px; color:#29231d; background:#fbf9f5;
  font-family:"Manrope",system-ui,sans-serif;
}
.fof-order * { box-sizing:border-box; }
.fof-order h1,.fof-order h2,.fof-order h3 { font-family:"Marcellus",Georgia,serif; color:var(--fof-dark); }

.fof-order__header {
  min-height:92px; padding:12px max(22px,calc((100vw - 1180px)/2));
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  background:#fff; border-bottom:1px solid var(--fof-border);
}
.fof-order__brand { display:flex; align-items:center; gap:13px; color:inherit; text-decoration:none; }
.fof-order__logo { width:68px; height:68px; object-fit:contain; }
.fof-order__brand-copy { display:flex; flex-direction:column; }
.fof-order__eyebrow { color:var(--fof-accent); font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.fof-order__title { font-family:"Marcellus",Georgia,serif; font-size:1.45rem; color:var(--fof-dark); }
.fof-order__service-badge { display:flex; flex-direction:column; padding:9px 15px; border-radius:999px; color:#fff; background:var(--fof-green); text-align:center; }
.fof-order__service-badge strong { font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; }
.fof-order__service-badge span { font-size:.72rem; opacity:.82; }

.fof-order__hero {
  max-width:1180px; margin:28px auto 20px; padding:38px 42px; border-radius:22px;
  display:grid; grid-template-columns:1.25fr .75fr; gap:40px; align-items:center;
  color:#fff; background:linear-gradient(125deg,#39281c,#755b3b 72%,#8f7149);
  box-shadow:0 18px 45px rgba(59,45,32,.14);
}
.fof-order__hero h2 { margin:2px 0 10px; color:#fff; font-size:clamp(2rem,4vw,3.25rem); line-height:1.06; }
.fof-order__hero p { margin:0; max-width:650px; color:#f3eadb; line-height:1.65; }
.fof-order__hero-kicker { font-size:.75rem; font-weight:700; letter-spacing:.17em; text-transform:uppercase; color:#f1b383!important; }
.fof-order__hero-details { display:grid; gap:12px; padding:22px; border:1px solid rgba(255,255,255,.2); border-radius:16px; background:rgba(255,255,255,.08); }
.fof-order__hero-details span { display:flex; flex-direction:column; font-size:.85rem; color:#f7efe3; }
.fof-order__hero-details strong { margin-bottom:2px; color:#f1b383; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; }

.fof-order__preview { max-width:1180px; margin:14px auto 0; padding:10px 15px; text-align:center; color:#624a19; background:#fff4cf; border:1px solid #d8b85b; border-radius:9px; }
.fof-order__unavailable { max-width:560px; margin:4rem auto; padding:2rem; text-align:center; background:#fff; border:1px solid var(--fof-border); border-radius:16px; box-shadow:0 12px 35px rgba(50,40,30,.08); }

.fof-category-nav {
  position:sticky; top:0; z-index:30; max-width:1180px; margin:0 auto 20px; padding:10px 4px;
  display:flex; gap:9px; overflow-x:auto; background:rgba(251,249,245,.94); backdrop-filter:blur(10px);
}
.fof-category-nav[hidden] { display:none; }
.fof-category-nav a { flex:none; padding:10px 16px; border:1px solid var(--fof-border); border-radius:999px; color:#5e5145; background:#fff; text-decoration:none; font-size:.82rem; font-weight:700; }
.fof-category-nav a:hover,.fof-category-nav a.is-active { color:#fff; border-color:var(--fof-primary); background:var(--fof-primary); }

.fof-order__main { max-width:1180px; margin:0 auto; padding:0 4px 30px; }
.fof-order__loading { padding:3rem 0; color:#7b7067; text-align:center; }
.fof-category { margin:0 0 42px; scroll-margin-top:82px; }
.fof-category__title { margin:0 0 15px; font-size:1.7rem; }
.fof-category__title::after { content:""; display:block; width:42px; height:3px; margin-top:7px; background:var(--fof-accent); border-radius:3px; }
.fof-category__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }

.fof-item-card {
  position:relative; width:100%; min-height:154px; padding:10px 54px 10px 10px;
  display:flex; align-items:center; gap:18px; overflow:hidden; color:inherit; background:var(--fof-paper);
  border:1px solid var(--fof-border); border-radius:16px; font:inherit; text-align:left; cursor:pointer;
  box-shadow:0 5px 18px rgba(66,48,32,.055); transition:transform .18s,box-shadow .18s,border-color .18s;
}
.fof-item-card:hover { transform:translateY(-2px); border-color:#cdbc9e; box-shadow:0 12px 28px rgba(66,48,32,.11); }
.fof-item-card:focus-visible { outline:3px solid #d7a764; outline-offset:2px; }
.fof-item-card[aria-disabled="true"] { opacity:.55; cursor:not-allowed; }
.fof-item-card__image { width:132px; height:132px; flex:0 0 132px; object-fit:cover; border-radius:12px; background:linear-gradient(135deg,#eee8df,#f8f5ef); }
.fof-item-card__body { min-width:0; flex:1; }
.fof-item-card__name { margin-bottom:5px; color:var(--fof-dark); font-family:"Marcellus",Georgia,serif; font-size:1.05rem; font-weight:700; }
.fof-item-card__desc { margin-bottom:9px; color:#70665d; font-size:.84rem; line-height:1.45; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.fof-item-card__price { color:var(--fof-primary); font-size:1.05rem; font-weight:800; }
.fof-item-card__badges { display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
.fof-badge { padding:3px 8px; border-radius:999px; color:#356331; background:#edf5e9; font-size:.68rem; font-weight:700; }
.fof-badge--soldout { color:var(--fof-danger); background:#f8e7e7; }
.fof-item-card__action { position:absolute; right:14px; bottom:14px; width:32px; height:32px; display:grid; place-items:center; border-radius:50%; color:#fff; background:var(--fof-accent); font-size:1.35rem; font-weight:500; box-shadow:0 5px 12px rgba(216,90,42,.25); }

.fof-order__footer { max-width:1180px; margin:15px auto 25px; padding:22px; display:flex; justify-content:center; align-items:center; gap:12px; border-top:1px solid var(--fof-border); color:#756a60; text-align:left; }
.fof-order__footer img { width:52px; height:52px; object-fit:contain; }
.fof-order__footer p { margin:0; font-size:.8rem; line-height:1.55; }

.fof-btn { display:inline-block; min-height:44px; padding:12px 20px; border:0; border-radius:9px; cursor:pointer; font-family:inherit; font-size:1rem; font-weight:600; text-align:center; text-decoration:none; }
.fof-btn--primary { color:#fff; background:var(--fof-primary); }
.fof-btn--primary:hover { background:#665136; }
.fof-btn--primary:disabled { background:#bbb; cursor:not-allowed; }
.fof-btn--secondary { color:var(--fof-primary); background:#fff; border:1px solid var(--fof-primary); }

.fof-cart-bar { position:fixed; left:50%; bottom:18px; z-index:40; width:min(650px,calc(100% - 28px)); padding:14px 18px; transform:translateX(-50%); display:flex; align-items:center; gap:12px; color:#fff; background:var(--fof-dark); border:0; border-radius:15px; font:inherit; cursor:pointer; box-shadow:0 14px 35px rgba(40,28,18,.28); }
.fof-cart-bar__count { width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; color:var(--fof-dark); background:#fff; border-radius:50%; font-size:.82rem; font-weight:800; }
.fof-cart-bar__label { flex:1; text-align:left; font-weight:700; }
.fof-cart-bar__total { font-weight:800; }

.fof-modal,.fof-cart-drawer { position:fixed; inset:0; z-index:60; }
.fof-modal[hidden],.fof-cart-drawer[hidden] { display:none; }
.fof-modal__backdrop,.fof-cart-drawer__backdrop { position:absolute; inset:0; background:rgba(27,20,14,.62); }
.fof-modal__panel { position:absolute; left:50%; top:50%; width:min(560px,calc(100% - 28px)); max-height:88vh; padding:28px; overflow-y:auto; transform:translate(-50%,-50%); background:#fff; border-radius:18px; box-shadow:0 20px 60px rgba(0,0,0,.22); }
.fof-modal__close { position:absolute; top:12px; right:14px; border:0; background:none; font-size:1.7rem; cursor:pointer; }
.fof-modal__close:focus-visible { outline:2px solid var(--fof-primary); }
.fof-modal__section { margin-top:18px; }
.fof-modal__section-title { margin-bottom:7px; font-weight:700; }
.fof-modal__option { display:flex; align-items:center; gap:9px; padding:9px 0; border-bottom:1px solid var(--fof-border); }
.fof-modal__option label { flex:1; }
.fof-modal__qty { display:flex; align-items:center; gap:11px; }
.fof-modal__qty button { width:38px; height:38px; color:var(--fof-primary); background:#fff; border:1px solid var(--fof-primary); border-radius:50%; font-size:1.2rem; cursor:pointer; }
.fof-modal__instructions { width:100%; min-height:70px; padding:10px; border:1px solid var(--fof-border); border-radius:8px; font:inherit; }
.fof-modal__footer { position:sticky; bottom:-28px; margin-top:20px; padding:12px 0 0; background:#fff; }
.fof-modal__add-btn { width:100%; }
.fof-modal__group-error,.fof-modal__group-unavailable { color:var(--fof-danger); font-size:.84rem; }
.fof-visually-hidden { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.fof-cart-drawer { z-index:70; }
.fof-cart-drawer__panel { position:absolute; right:0; top:0; bottom:0; width:min(440px,100%); padding:22px; overflow-y:auto; background:#fff; }
.fof-cart-drawer__header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.fof-cart-drawer__header button { border:0; background:none; font-size:1.7rem; cursor:pointer; }
.fof-cart-drawer__item { display:flex; justify-content:space-between; gap:8px; padding:12px 0; border-bottom:1px solid var(--fof-border); }
.fof-cart-drawer__item-remove { color:var(--fof-danger); border:0; background:none; cursor:pointer; }
.fof-cart-drawer__row { display:flex; justify-content:space-between; padding:5px 0; }
.fof-cart-drawer__row--total { margin-top:7px; padding-top:11px; border-top:1px solid var(--fof-border); font-size:1.12rem; font-weight:800; }
.fof-cart-drawer__notice { padding:10px; color:#624a19; background:#fff4e5; border-radius:8px; font-size:.84rem; }
.fof-cart-drawer__checkout { width:100%; margin-top:8px; }
.fof-cart-drawer__empty { padding:2rem 0; color:#888; text-align:center; }

@media (max-width:900px) {
  .fof-order__hero { margin:18px 14px; grid-template-columns:1fr; gap:22px; padding:30px 26px; }
  .fof-category-nav,.fof-order__main { margin-left:14px; margin-right:14px; }
  .fof-category__grid { grid-template-columns:1fr; }
}
@media (max-width:600px) {
  .fof-order__header { min-height:78px; padding:10px 14px; }
  .fof-order__logo { width:54px; height:54px; }
  .fof-order__eyebrow { display:none; }
  .fof-order__title { font-size:1.05rem; }
  .fof-order__service-badge { padding:8px 11px; }
  .fof-order__hero { padding:25px 20px; border-radius:16px; }
  .fof-order__hero-details { padding:16px; }
  .fof-order__preview { margin:10px 14px 0; font-size:.78rem; }
  .fof-category-nav { margin-bottom:15px; }
  .fof-category__title { font-size:1.4rem; }
  .fof-item-card { min-height:120px; padding:10px 48px 10px 10px; gap:12px; }
  .fof-item-card__image { width:94px; height:94px; flex-basis:94px; }
  .fof-item-card__name { font-size:.95rem; }
  .fof-item-card__desc { font-size:.78rem; -webkit-line-clamp:2; }
  .fof-modal__panel { left:0; right:0; bottom:0; top:auto; width:100%; max-height:90vh; padding:22px 16px 78px; transform:none; border-radius:18px 18px 0 0; }
}


/* =========================================================
   CATEGORY VISIBILITY FIX
   Keep all customer menu category tabs visible.
   ========================================================= */

.fof-category-nav {
  display:flex !important;
  flex-wrap:wrap !important;
  overflow-x:visible !important;
  overflow-y:visible !important;
  height:auto !important;
  max-height:none !important;
}

.fof-category-nav a {
  display:inline-flex !important;
  visibility:visible !important;
  opacity:1 !important;
  flex:0 0 auto !important;
}