:root{
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --color-page:#fff8ee;
  --color-card:#fff;
  --color-text:#1e1511;
  --color-muted:#6e5f59;
  --color-border:rgba(45,28,18,.13);
  --color-primary:#1f1511;
  --color-accent:#f2a516;
  --color-success:#267052;
  --color-danger:#b8372b;
  --radius-card:18px;
  --radius-control:999px;
  --shadow-card:0 8px 22px rgba(53,31,17,.08);
  --shadow-sheet:0 -18px 54px rgba(32,21,17,.24);
  --top-bar-height:72px;
}

html{
  max-width:100%;
  overflow-x:clip;
  scroll-padding-top:calc(var(--top-bar-height) + 54px);
}
body{
  max-width:100%;
  overflow-x:hidden;
  background:var(--color-page);
  color:var(--color-text);
}
body.sheet-open{overflow:hidden}
body:has(.cart-bar:not([hidden])) .menu-layout{padding-bottom:calc(116px + env(safe-area-inset-bottom))}

.skip-link{
  position:fixed;
  left:var(--space-4);
  top:var(--space-2);
  z-index:100;
  transform:translateY(-130%);
  border-radius:var(--radius-control);
  background:var(--color-primary);
  color:#fff;
  padding:var(--space-3) var(--space-4);
  font-weight:900;
}
.skip-link:focus{transform:none}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

button,
.primary-action,
.secondary-action,
.chip,
.quick-action,
.cart-button,
.pill-btn{
  min-height:44px;
}
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea{
  min-height:44px;
}

.site-header,
.section-shell{
  width:100%;
  max-width:430px;
  margin-inline:auto;
}

.site-header{
  min-height:var(--top-bar-height);
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:var(--space-3);
  align-items:center;
  padding:calc(env(safe-area-inset-top) + var(--space-2)) var(--space-4) var(--space-2);
  background:rgba(255,248,238,.96);
  border-bottom:1px solid var(--color-border);
  box-shadow:0 8px 24px rgba(52,32,20,.06);
}
.brand{
  min-width:0;
  min-height:44px;
  gap:var(--space-2);
}
.brand-mark{
  width:40px;
  height:40px;
  border-radius:12px;
  box-shadow:none;
}
.brand strong{
  max-width:150px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:1rem;
  line-height:1.15;
}
.brand small{font-size:.72rem;color:var(--color-muted)}
.top-nav{display:none}
.header-actions{gap:var(--space-2);justify-content:flex-end}
.pill-btn{
  padding:0 var(--space-3);
  box-shadow:none;
}
#accountBtn{display:none}
.cart-button{
  width:48px;
  height:48px;
  padding:0;
  justify-content:center;
  border-radius:50%;
  box-shadow:none;
}
.cart-button span{font-size:0}
.cart-button span::before{content:"Cart";font-size:.78rem;font-weight:950}
.cart-button b{
  position:absolute;
  transform:translate(16px,-16px);
  min-width:22px;
  height:22px;
  font-size:.72rem;
  border:1px solid var(--color-page);
}

.section-shell{
  padding-inline:var(--space-4);
}
.hero{
  min-height:176px;
  display:block;
  padding:var(--space-5) var(--space-4) var(--space-4);
}
.eyebrow{
  margin-bottom:var(--space-2);
  color:var(--color-danger);
  font-size:.68rem;
  letter-spacing:.08em;
}
.hero h1,
.section-heading h2,
.split-section h2{
  font-size:28px;
  line-height:1.15;
  letter-spacing:0;
}
.hero-text{
  margin:var(--space-2) 0 var(--space-4);
  font-size:15px;
  line-height:1.45;
  color:var(--color-muted);
}
.hero-actions{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-2);
}
.hero-actions .primary-action{
  width:100%;
  min-height:48px;
}
.hero-actions .secondary-action{
  display:none;
}
.hero-board,
.pain-strip{
  display:none;
}
.status-card{
  margin-top:var(--space-4);
  width:100%;
  border-radius:16px;
  padding:var(--space-3);
  box-shadow:var(--shadow-card);
}

.menu-layout{
  display:block;
  padding:0 var(--space-4) var(--space-6);
}
.menu-main{min-width:0}
.menu-controls{
  margin:0 calc(var(--space-4) * -1) var(--space-4);
  padding:var(--space-3) var(--space-4) 0;
  background:var(--color-page);
}
.search-box{
  min-height:48px;
  margin:0 0 var(--space-3);
  border-radius:16px;
  padding:0 var(--space-3);
  background:var(--color-card);
  box-shadow:var(--shadow-card);
}
.search-box input{
  min-height:46px;
  font-size:16px;
}
.quick-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-2);
  margin-bottom:var(--space-3);
}
.quick-action{
  border:1px solid var(--color-border);
  border-radius:var(--radius-control);
  background:var(--color-card);
  padding:0 var(--space-3);
  font-size:14px;
  font-weight:900;
}
.filter-count{
  display:inline-grid;
  min-width:20px;
  height:20px;
  margin-left:var(--space-1);
  place-items:center;
  border-radius:50%;
  background:var(--color-accent);
  color:var(--color-primary);
  font-size:.72rem;
}
.category-rail{
  position:sticky;
  top:var(--top-bar-height);
  z-index:30;
  display:flex;
  gap:var(--space-2);
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  margin:0 calc(var(--space-4) * -1);
  padding:var(--space-2) var(--space-4);
  background:rgba(255,248,238,.98);
  border-block:1px solid rgba(45,28,18,.07);
  contain:paint;
}
.category-rail::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;
  max-width:220px;
  border-color:var(--color-border);
  padding:0 var(--space-4);
  text-align:center;
  white-space:nowrap;
  color:var(--color-text);
  box-shadow:none;
}
.chip.active{
  background:var(--color-primary);
  color:#fff;
}
.filter-summary{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2);
  padding:var(--space-2) 0 0;
}
.filter-chip{
  min-height:36px;
  border:1px solid rgba(38,112,82,.18);
  border-radius:var(--radius-control);
  background:#eff8f2;
  color:#214c38;
  padding:0 var(--space-3);
  font-size:13px;
  font-weight:850;
}

.section-heading{
  margin:var(--space-4) 0 var(--space-3);
}
.section-heading h2{
  font-size:20px;
  line-height:1.2;
}
.section-heading p:not(.eyebrow){
  display:none;
  font-size:14px;
  line-height:1.45;
}
.promo-rail,
.bundle-rail,
.bakery-case-rail,
.campaign-capacity{
  display:none;
  gap:var(--space-3);
  overflow-x:auto;
  margin:0 calc(var(--space-4) * -1) var(--space-3);
  padding:0 var(--space-4) var(--space-1);
  scrollbar-width:none;
  contain:paint;
}
.promo-rail::-webkit-scrollbar,
.bundle-rail::-webkit-scrollbar,
.bakery-case-rail::-webkit-scrollbar,
.campaign-capacity::-webkit-scrollbar{display:none}
.promo-card,
.bundle-card,
.case-batch,
.capacity-card{
  min-width:232px;
  border-radius:16px;
  box-shadow:var(--shadow-card);
}

.product-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-3);
}
.product-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) 96px;
  grid-template-areas:"body art";
  gap:var(--space-3);
  min-height:0;
  border-radius:var(--radius-card);
  background:var(--color-card);
  box-shadow:var(--shadow-card);
  overflow:hidden;
  cursor:pointer;
}
.product-art{
  grid-area:art;
  width:96px;
  height:96px;
  margin:var(--space-3) var(--space-3) 0 0;
  border-radius:14px;
  overflow:hidden;
}
.product-body{
  grid-area:body;
  min-width:0;
  padding:14px 0 14px 14px;
  gap:var(--space-2);
}
.product-top{
  justify-content:flex-start;
  flex-wrap:wrap;
}
.category-badge,
.stock-badge{
  font-size:.68rem;
  padding:4px 7px;
}
.product-card h3{
  display:-webkit-box;
  overflow:hidden;
  margin:0;
  font-size:16px;
  line-height:1.2;
  font-weight:800;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.product-card p{
  display:-webkit-box;
  overflow:hidden;
  font-size:14px;
  line-height:1.4;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.variant-box{
  margin-top:0;
}
.variant-box:empty,
.allergen-row:empty,
.product-trust:empty{display:none}
.variant-box select{
  min-height:44px;
  border-radius:12px;
  padding:0 var(--space-2);
  font-size:13px;
}
.allergen-row{
  gap:var(--space-1);
  min-height:0;
}
.product-card .product-trust{
  display:none;
}
.allergen-row span,
.product-trust span{
  font-size:.68rem;
  padding:3px 7px;
}
.product-actions{
  display:flex;
  gap:var(--space-2);
  margin:0;
}
.favorite-btn,
.details-btn{
  min-height:44px;
  padding:0 var(--space-3);
  font-size:13px;
  box-shadow:none;
}
.source-line{display:none}
.product-foot{
  align-items:center;
  margin-top:0;
}
.price{
  font-size:16px;
  font-weight:950;
}
.card-cart-control{
  display:flex;
  justify-content:flex-end;
}
.add-button{
  min-width:64px;
  min-height:44px;
  border:0;
  border-radius:var(--radius-control);
  background:var(--color-primary);
  color:#fff;
  padding:0 var(--space-4);
  font-size:14px;
  font-weight:950;
}
.add-button.quote{background:var(--color-success)}
.inline-qty{
  display:grid;
  grid-template-columns:44px minmax(28px,auto) 44px;
  align-items:center;
  border:1px solid var(--color-border);
  border-radius:var(--radius-control);
  background:#fff9ed;
  overflow:hidden;
}
.inline-qty button{
  width:44px;
  height:44px;
  border:0;
  background:transparent;
  color:var(--color-primary);
  font-size:20px;
  font-weight:950;
}
.inline-qty span{
  min-width:28px;
  text-align:center;
  font-weight:950;
}

.skeleton-card{
  min-height:124px;
  cursor:default;
  pointer-events:none;
}
.skeleton-lines{
  grid-area:body;
  display:grid;
  gap:var(--space-2);
  padding:16px 0 16px 14px;
}
.skeleton-lines span,
.skeleton-image{
  display:block;
  border-radius:12px;
  background:linear-gradient(90deg,#f1e4d4,#fff8ee,#f1e4d4);
  background-size:220% 100%;
  animation:skeleton-shimmer 1.4s ease-in-out infinite;
}
.skeleton-lines span{height:16px}
.skeleton-lines span:nth-child(2){width:75%}
.skeleton-lines span:nth-child(3){width:58%}
.skeleton-image{
  grid-area:art;
  width:96px;
  height:96px;
  margin:var(--space-3) var(--space-3) 0 0;
}
@keyframes skeleton-shimmer{to{background-position:-220% 0}}

.sheet-backdrop{
  position:fixed;
  inset:0;
  z-index:78;
  background:rgba(31,21,17,.38);
  opacity:0;
  transition:opacity .2s ease;
}
.sheet-backdrop.open{opacity:1}
.filter-sheet{
  position:fixed;
  left:50%;
  right:auto;
  bottom:0;
  z-index:80;
  width:100%;
  max-width:430px;
  max-height:min(82dvh,720px);
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  padding:var(--space-2) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));
  border:1px solid var(--color-border);
  border-radius:22px 22px 0 0;
  background:var(--color-card);
  box-shadow:var(--shadow-sheet);
  transform:translate(-50%,110%);
  transition:transform .24s ease;
  overflow:auto;
  overscroll-behavior:contain;
}
.filter-sheet.open{transform:translate(-50%,0)}
.sheet-handle{
  width:42px;
  height:5px;
  border-radius:999px;
  background:#d8c8b7;
  margin:0 auto var(--space-1);
}
.sheet-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:var(--space-3);
}
.sheet-header h2{
  margin:0;
  font-size:20px;
  line-height:1.2;
}
.sheet-header small{color:var(--color-muted)}
.icon-button{
  width:44px;
  height:44px;
  border:0;
  border-radius:50%;
  background:#fff0d2;
  font-size:24px;
  font-weight:700;
}
.filter-row{
  display:flex;
  justify-content:space-between;
  gap:var(--space-3);
  padding:var(--space-3);
  border:1px solid var(--color-border);
  border-radius:16px;
  background:#fffaf4;
}
.filter-row b,
.filter-row small{
  display:block;
}
.filter-row small{color:var(--color-muted)}
.filter-sheet .chip-grid{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2);
}
.filter-sheet .chip{
  max-width:100%;
  white-space:normal;
}
.checkline{
  min-height:48px;
  margin:0;
  padding:0 var(--space-2);
}
.checkline input{
  width:20px;
  height:20px;
}
.sheet-actions{
  position:sticky;
  bottom:calc(-1 * (var(--space-4) + env(safe-area-inset-bottom)));
  display:grid;
  grid-template-columns:1fr 1.25fr;
  gap:var(--space-2);
  margin:var(--space-2) calc(var(--space-4) * -1) calc(-1 * (var(--space-4) + env(safe-area-inset-bottom)));
  padding:var(--space-3) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));
  border-top:1px solid var(--color-border);
  background:linear-gradient(180deg,rgba(255,255,255,.86),#fff);
}
.sheet-actions .primary-action,
.sheet-actions .secondary-action{
  width:100%;
  min-height:48px;
}

.cart-bar{
  position:fixed;
  left:var(--space-4);
  right:var(--space-4);
  bottom:calc(var(--space-4) + env(safe-area-inset-bottom));
  z-index:50;
  max-width:398px;
  margin-inline:auto;
}
.cart-bar button{
  width:100%;
  min-height:56px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:var(--space-3);
  border:0;
  border-radius:18px;
  background:var(--color-primary);
  color:#fff;
  padding:var(--space-2) var(--space-4);
  box-shadow:0 16px 36px rgba(31,21,17,.28);
}
.cart-bar span,
.cart-bar small,
.cart-bar b{
  display:block;
  text-align:left;
}
.cart-bar small{color:rgba(255,255,255,.72)}
.cart-bar strong{
  white-space:nowrap;
}
.cart-drawer{
  width:min(430px,100%);
  padding-top:env(safe-area-inset-top);
}
.cart-header button,
.qty-row button{
  min-width:44px;
  min-height:44px;
}

.app-dialog{
  max-height:88dvh;
  overflow:auto;
}
#productDialog.app-dialog,
#checkoutDialog.app-dialog,
#quoteDialog.app-dialog{
  width:min(430px,100%);
  max-width:430px;
  margin:auto auto 0;
  border-radius:22px 22px 0 0;
  padding:var(--space-5) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom));
}
.detail-layout{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-4);
}
.detail-layout .product-art.large{
  width:100%;
  height:auto;
  aspect-ratio:4/3;
  margin:0;
}
.checkout-form fieldset{
  grid-template-columns:1fr;
  padding:var(--space-4);
  border-radius:18px;
}

.split-section,
.wholesale-section,
.partners-section,
.selfservice-section,
.campaigns-section{
  display:block;
  padding-block:var(--space-6);
}
.quote-card-stack,
.wholesale-grid,
.selfservice-grid,
.partner-grid,
.campaign-grid,
.grid-two{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-3);
}
.quote-card-stack > *,
.wholesale-grid > *,
.selfservice-grid > *,
.partner-grid > *,
.campaign-grid > *,
.grid-two > *,
.elevated-form,
.standing-card,
.checkout-form,
.admin-form{
  min-width:0;
  max-width:100%;
}
.elevated-form,
.checkout-form,
.admin-form{
  width:100%;
}
.elevated-form input,
.elevated-form textarea,
.elevated-form select,
.checkout-form input,
.checkout-form textarea,
.checkout-form select,
.admin-form input,
.admin-form textarea,
.admin-form select{
  min-width:0;
  max-width:100%;
}
.elevated-form,
.standing-card,
.quote-card-stack article,
.partner-card,
.campaign-card,
.review-card,
.delivery-card{
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
}

@media (min-width:700px){
  .site-header,
  .section-shell{
    max-width:700px;
  }
  .hero-actions .secondary-action{
    display:inline-flex;
    width:max-content;
    min-height:44px;
    padding-inline:0;
    background:transparent;
    border:0;
    box-shadow:none;
    color:var(--color-primary);
  }
  .section-heading p:not(.eyebrow){
    display:block;
  }
  .promo-rail,
  .bundle-rail,
  .bakery-case-rail,
  .campaign-capacity{
    display:flex;
  }
  .product-card{
    grid-template-columns:minmax(0,1fr) 120px;
  }
  .product-art,
  .skeleton-image{
    width:120px;
    height:120px;
  }
}

@media (min-width:960px){
  .site-header,
  .section-shell{
    max-width:960px;
  }
  .top-nav{
    display:flex;
    grid-column:1/-1;
  }
  #accountBtn{display:inline-flex}
  .hero{
    display:grid;
    grid-template-columns:minmax(0,1fr) 320px;
  }
  .hero-board{
    display:grid;
    min-height:320px;
  }
  .product-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
    transition-duration:.01ms!important;
  }
}