/* Icon roles are stable across all responsive layouts. */
:root{--icon-size-small:16px;--icon-size-standard:24px;--icon-size-block:32px;--icon-stroke:1.5px}
.ui-icon--16{--icon-size:var(--icon-size-small)}
.ui-icon--24{--icon-size:var(--icon-size-standard)}
.ui-icon--32{--icon-size:var(--icon-size-block)}
svg.ui-icon,img.ui-icon{display:inline-block;width:var(--icon-size);height:var(--icon-size);min-width:var(--icon-size);flex:0 0 var(--icon-size);vertical-align:middle;object-fit:contain;aspect-ratio:1}
svg.ui-icon[data-designer-icon]{fill:none;stroke:#14283f;stroke-width:var(--icon-stroke)}
svg.ui-icon [stroke]:not([stroke=none]),.ui-icon[data-designer-icon] :is(path,rect,circle,ellipse,line,polyline,polygon),.legacy-line-icon :is(path,rect,circle,line){vector-effect:non-scaling-stroke}
.legacy-line-icon,.trash-icon{stroke-width:var(--icon-stroke)}
.ui-chevron{stroke:currentColor;stroke-width:var(--icon-stroke);stroke-linecap:round;stroke-linejoin:round}
.ui-chevron--up{transform:rotate(180deg)}.ui-chevron--left{transform:rotate(90deg)}.ui-chevron--right{transform:rotate(-90deg)}
.header-actions .ui-icon{width:var(--icon-size-standard);height:var(--icon-size-standard);min-width:var(--icon-size-standard)}
.icon-button{align-items:center;justify-content:center}.mobile-menu{gap:4px}.mobile-menu span{width:var(--icon-size-standard);height:1.5px}
.map-card .ui-icon{width:var(--icon-size-standard);height:var(--icon-size-standard);margin-top:2px}
.benefits .ui-icon{width:var(--icon-size-block);height:var(--icon-size-block);min-width:var(--icon-size-block);flex-basis:var(--icon-size-block)}
.select-trigger .ui-icon{width:var(--icon-size-small);height:var(--icon-size-small);flex-basis:var(--icon-size-small)}
.picker-control{gap:12px}.picker-control>span{flex:1;min-width:0}.picker-control .ui-icon{align-self:center}
.calendar-head button,.pagination>button:not(.dot){display:inline-flex;align-items:center;justify-content:center;padding:0}
.cart-day .ui-chevron{margin-left:12px}.cart-day[open] .ui-chevron.chevron{transform:rotate(180deg)}
.breadcrumb a,.cart-actions .text-button{display:inline-flex;align-items:center;gap:8px}
.trash-icon{width:var(--icon-size-standard);height:var(--icon-size-standard);min-width:var(--icon-size-standard);margin:0;vertical-align:middle}
.icon-title{display:flex;align-items:center;gap:12px}.icon-title .ui-icon{flex-shrink:0}
.input-icon-field{position:relative;display:block;width:100%;min-width:0}.input-icon-field>.ui-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);pointer-events:none}.form-field .input-icon-field input{padding-left:52px}
.sidebar nav .ui-icon{width:var(--icon-size-standard);height:var(--icon-size-standard);min-width:var(--icon-size-standard);flex-basis:var(--icon-size-standard)}
.designer-nav-icon{display:grid;place-items:center;width:var(--icon-size-standard);height:var(--icon-size-standard);flex:0 0 var(--icon-size-standard);background:#faf7f4;border-radius:4px}
#order-date{display:flex;align-items:center;justify-content:space-between;gap:12px}
.number-field{position:relative;width:100%;min-width:0}.number-field input{appearance:textfield;padding-right:38px}.number-field input::-webkit-inner-spin-button,.number-field input::-webkit-outer-spin-button{appearance:none;margin:0}
.value-stepper{position:absolute;right:1px;top:1px;bottom:1px;width:32px;display:grid;grid-template-rows:1fr 1fr}.value-stepper button{min-height:0;border:0;border-radius:0;background:transparent;padding:0;display:grid;place-items:center}.value-stepper button:hover{background:#e8eef5}.value-stepper .ui-icon{width:var(--icon-size-small);height:var(--icon-size-small)}
.trash-icon path,.payment-status-icon:not(img) :is(path,circle){vector-effect:non-scaling-stroke}.payment-status-icon:not(img){stroke-width:var(--icon-stroke)}
.faq summary::after{content:'';display:block;align-self:center;flex:0 0 var(--icon-size-small);width:var(--icon-size-small);height:var(--icon-size-small);background:linear-gradient(currentColor,currentColor) center/100% var(--icon-stroke) no-repeat,linear-gradient(currentColor,currentColor) center/var(--icon-stroke) 100% no-repeat}.faq details[open] summary::after{content:'';background:linear-gradient(currentColor,currentColor) center/100% var(--icon-stroke) no-repeat}
.ui-text-arrow{display:inline-flex;width:var(--icon-size-small);height:var(--icon-size-small);align-items:center;justify-content:center;font-size:16px;line-height:16px;vertical-align:middle}
.select-trigger svg.ui-icon,.sidebar nav svg.ui-icon{stroke-width:var(--icon-stroke)}
@media(min-width:601px){.sidebar nav button{padding-top:12px;padding-bottom:12px}}
.account-exit { gap: 12px; }
.payment-card .payment-status-icon.ui-icon { display: block; }
/* Exact 32px empty/filled header component exported from the supplied Figma.
   The existing cart-count hidden flag still drives the state. */
.header-cart-link .header-cart-state,
.header-cart-link #cart-count {
  display: block;
  width: 32px;
  height: 32px;
  min-width: 32px;
  position: static;
  background: transparent;
  border-radius: 0;
  object-fit: contain;
}
.header-cart-link:has(#cart-count:not([hidden])) #cart-empty-icon { display: none; }
/* Basket quantity is separate from the designer's unchanged SVG assets. */
.header-cart-link { position: relative; }
.header-cart-link.multiple-rations #cart-count { display: none; }
.header-cart-link.multiple-rations:has(#cart-count:not([hidden])) #cart-empty-icon { display: block; }
#cart-quantity { position: absolute; top: 8px; right: 2px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; background: var(--ds-rust, #BF7958); color: var(--ds-porcelain, #FAF7F4); font-size: 10px; line-height: 16px; text-align: center; }
#cart-quantity[hidden] { display: none; }

/* Exact Figma sidebar contours, without icon tiles. */
.sidebar nav .admin-nav-icon { color:var(--ds-porcelain); background:transparent; border-radius:0; display:block; width:24px; height:24px; flex:0 0 24px; }

/* Match the approved filled basket badge when showing multiple rations. */
#cart-quantity { top:calc(50% - 14px); right:calc(50% - 15px); background:#14283F; color:#FAF7F4; }