/* Existing shared icon system: glyphs, badges and icon controls.
   Sizes, palettes and interaction states have one owner. Opt-in soft corners
   leave existing content controls unchanged. Header layout stays in header.css. */
.sf-ui {
  --sfui-icon-ink: #fff;
  --sfui-neutral-icon: #fff;
  --sfui-white-image-filter: brightness(0) invert(1);
  --sfui-neutral-image-filter: var(--sfui-white-image-filter);
  --sfui-badge-blue-background: var(--sfui-button-blue);
  --sfui-badge-red-background: #3c232d;
  --sfui-badge-amber-background: #3e321e;
  --sfui-badge-gold-background: #373225;
  --sfui-badge-green-background: #203d2b;
  --sfui-badge-violet-background: #302943;
  --sfui-badge-slate-background: #1d344e;
  --sfui-cart-ink: #ffbc00;
  --sfui-cart-background: #2c2719;
  --sfui-cart-hover-background: #3a311a;
  --sfui-messages-ink: #38bdf8;
  --sfui-messages-background: rgba(56,189,248,.12);
  --sfui-messages-hover-background: rgba(56,189,248,.2);
  --sfui-orders-ink: #fb923c;
  --sfui-orders-background: rgba(251,146,60,.12);
  --sfui-orders-hover-background: rgba(251,146,60,.2);
  --sfui-icon-size: var(--sfui-icon-small);
  --sfui-icon-stroke: 1.7;
  --sfui-rating-star: #f59e0b;
  --sfui-icon-small: 19.2px;
  --sfui-icon-medium: 21.6px;
  --sfui-icon-large: 24px;
  --sfui-badge-small: 40px;
  --sfui-badge-medium: 42.4px;
  --sfui-badge-large: 58px;
  --sfui-icon-button-size: var(--sfui-badge-small);
  --sfui-icon-button-radius: var(--sfui-button-radius);
  --sfui-icon-button-soft-radius: var(--sfui-control-radius);
  --sfui-icon-button-padding-small: var(--sfui-space-6);
  --sfui-icon-button-padding-medium: var(--sfui-space-8);
  --sfui-icon-button-padding-large: var(--sfui-space-12);
}
html[data-theme="light"] .sf-ui:not(.sf-ui--dark, .sf-ui--support) {
  --sfui-icon-ink: #263745;
  --sfui-neutral-icon: #263745;
  --sfui-neutral-image-filter: brightness(0);
  --sfui-cart-ink: #916000;
  --sfui-cart-background: #fff1c2;
  --sfui-cart-hover-background: #ffe69b;
  --sfui-messages-ink: #0369a1;
  --sfui-messages-background: #e0f2fe;
  --sfui-messages-hover-background: #bae6fd;
  --sfui-orders-ink: #c2410c;
  --sfui-orders-background: #ffedd5;
  --sfui-orders-hover-background: #fed7aa;
}
.sfui-icon { display: block; width: var(--sfui-icon-size); height: var(--sfui-icon-size); flex: 0 0 var(--sfui-icon-size); fill: none; stroke: currentColor; stroke-width: var(--sfui-icon-stroke); color: var(--sfui-icon-ink); stroke-linecap: round; stroke-linejoin: round; }
.sfui-icon--small { --sfui-icon-size: var(--sfui-icon-small); }
.sfui-icon--medium { --sfui-icon-size: var(--sfui-icon-medium); }
.sfui-icon--large { --sfui-icon-size: var(--sfui-icon-large); }
.sfui-icon--brand { --sfui-icon-ink: var(--sfui-button-green); }
.sfui-icon--rating { --sfui-icon-ink: var(--sfui-rating-star); }
.sfui-icon--inherit { color: inherit; }
.sfui-icon-badge { --sfui-icon-ink: var(--sfui-primary-ink); display: inline-flex; align-items: center; justify-content: center; width: var(--sfui-badge-size); height: var(--sfui-badge-size); flex: 0 0 var(--sfui-badge-size); border: var(--sfui-border-width) solid transparent; border-radius: var(--sfui-control-radius); color: var(--sfui-icon-ink); background: var(--sfui-primary); }
.sfui-icon-badge--small { --sfui-badge-size: var(--sfui-badge-small); --sfui-icon-size: var(--sfui-icon-small); }
.sfui-icon-badge--medium { --sfui-badge-size: var(--sfui-badge-medium); --sfui-icon-size: var(--sfui-icon-medium); }
.sfui-icon-badge--large { --sfui-badge-size: var(--sfui-badge-large); --sfui-icon-size: var(--sfui-icon-large); border-radius: var(--sfui-radius); }
.sfui-icon-badge--social { background: var(--sfui-social-background); border-color: var(--sfui-social-border); }
.sfui-icon-badge--brand { background: var(--sfui-button-green); }
.sfui-icon-badge--whatsapp { background: #25d366; }
.sfui-icon-badge--phone { background: #2563eb; }
.sfui-icon-badge--mail { background: #ea4335; }
.sfui-icon-badge--address { background: #64748b; }
.sfui-icon-badge--neutral { --sfui-icon-ink: var(--sfui-neutral-icon); background: var(--sfui-control); border-color: var(--sfui-border); }
.sfui-vivid-surface { --sfui-vivid-background: var(--sfui-tone-accent, var(--sfui-primary)); --sfui-vivid-hover: color-mix(in srgb, var(--sfui-vivid-background) 86%, white); }
.sfui-icon-badge--vivid { --sfui-icon-ink: var(--sfui-primary-ink); background: var(--sfui-vivid-background); }
.sfui-icon-badge--vivid img { filter: var(--sfui-white-image-filter); }
.sfui-icon-badge--plain { --sfui-icon-ink: var(--sfui-neutral-icon); background: transparent; }
.sfui-icon-badge--neutral img { filter: var(--sfui-neutral-image-filter); }
.sfui-icon-badge--tinted { --sfui-icon-ink: var(--sfui-primary-ink); background: var(--sfui-badge-background); border-color: var(--sfui-border); }
.sfui-icon-badge--tinted img { filter: var(--sfui-white-image-filter); }
.sfui-icon-badge--blue { --sfui-badge-background: var(--sfui-badge-blue-background); }
.sfui-icon-badge--red { --sfui-badge-background: var(--sfui-badge-red-background); }
.sfui-icon-badge--amber { --sfui-badge-background: var(--sfui-badge-amber-background); }
.sfui-icon-badge--gold { --sfui-badge-background: var(--sfui-badge-gold-background); }
.sfui-icon-badge--green { --sfui-badge-background: var(--sfui-badge-green-background); }
.sfui-icon-badge--violet { --sfui-badge-background: var(--sfui-badge-violet-background); }
.sfui-icon-badge--slate { --sfui-badge-background: var(--sfui-badge-slate-background); }

/* Category rows and framed icons share the selectable palette. */
.sfui-tinted-surface { --sfui-tinted-background: color-mix(in srgb, var(--sfui-tone-accent) 18%, var(--sfui-control)); }

/* Featured group frame; reused by menu icons without changing their media owner.
   Badge size / image fit remain owned by icon-badge and the existing size tokens. */
.sfui-icon-badge__fallback { display: none; }
.sfui-icon-badge > img[hidden] + .sfui-icon-badge__fallback { display: inline-flex; }
.sfui-icon-frame { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; padding: 0; border: var(--sfui-border-width) solid var(--sfui-vivid-background); border-radius: var(--sfui-control-radius); background: var(--sfui-vivid-background); }
.sfui-icon-frame--media-fill { overflow: hidden; }
.sfui-icon-frame--media-fill > .sfui-icon-badge { --sfui-badge-image-fit: cover; border-radius: 0; }
.sfui-icon-frame--monochrome > .sfui-icon-badge { --sfui-icon-ink: var(--sfui-primary-ink); }
.sfui-icon-frame--monochrome img { filter: var(--sfui-white-image-filter); }
.sfui-icon-frame-control--only { display: inline-flex; flex: 0 0 auto; padding: 0; border: 0; border-radius: var(--sfui-control-radius); background: transparent; cursor: pointer; }
.sfui-icon-frame-control:is(:hover, [aria-current="page"], [aria-current="location"], [aria-pressed="true"], [aria-selected="true"]):not(:disabled, [aria-disabled="true"]) .sfui-icon-frame { border-color: var(--sfui-icon-frame-active-border, var(--sfui-primary-ink)); background: var(--sfui-vivid-hover); }

.sfui-icon-badge--standalone { --sfui-badge-image-size: 100%; border: 0; background: transparent; }
.sfui-icon-badge--logo { --sfui-badge-image-size: calc(var(--sfui-badge-size) - var(--sfui-space-8)); }
.sfui-icon-badge--logo > .sfui-icon { --sfui-icon-size: var(--sfui-badge-image-size); }
.sfui-icon-badge--rounded-media { overflow: hidden; }
.sfui-icon-badge--image img:not([hidden]) { display: block; width: var(--sfui-badge-image-width, var(--sfui-badge-image-size, var(--sfui-icon-size))); height: var(--sfui-badge-image-height, var(--sfui-badge-image-size, var(--sfui-icon-size))); object-fit: var(--sfui-badge-image-fit, contain); }
.sfui-icon-button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 var(--sfui-icon-button-size); width: var(--sfui-icon-button-size); height: var(--sfui-icon-button-size); border: var(--sfui-border-width) solid var(--sfui-border); border-radius: var(--sfui-icon-button-radius); background: var(--sfui-control); color: var(--sfui-text); cursor: pointer; }
.sfui-icon-button--cart { --sfui-icon-ink: var(--sfui-cart-ink); background: var(--sfui-cart-background); color: var(--sfui-cart-ink); border-color: transparent; }
.sfui-icon-button--cart:hover { background: var(--sfui-cart-hover-background); }
.sfui-icon-button--messages { --sfui-icon-ink: var(--sfui-messages-ink); background: var(--sfui-messages-background); color: var(--sfui-messages-ink); border-color: transparent; }
.sfui-icon-button--messages:hover { background: var(--sfui-messages-hover-background); }
.sfui-icon-button--orders { --sfui-icon-ink: var(--sfui-orders-ink); background: var(--sfui-orders-background); color: var(--sfui-orders-ink); border-color: transparent; }
.sfui-icon-button--orders:hover { background: var(--sfui-orders-hover-background); }
.sfui-icon-button--small { --sfui-icon-button-size: var(--sfui-badge-small); padding: var(--sfui-icon-button-padding-small); }
.sfui-icon-button--medium { --sfui-icon-button-size: var(--sfui-badge-medium); padding: var(--sfui-icon-button-padding-medium); }
.sfui-icon-button--large { --sfui-icon-button-size: var(--sfui-badge-large); padding: var(--sfui-icon-button-padding-large); }
.sfui-icon-button--soft { --sfui-icon-button-radius: var(--sfui-icon-button-soft-radius); }
.sfui-icon-button--round { --sfui-icon-button-radius: var(--sfui-round-radius); }
/* Optional primary icon action; other icon-button tones and sizes stay unchanged. */
.sfui-icon-button--primary { --sfui-icon-ink: var(--sfui-primary-ink); border-color: var(--sfui-button-green); background: var(--sfui-button-green); color: var(--sfui-primary-ink); box-shadow: var(--sfui-focus-ring); transition: filter var(--sfui-motion-duration) ease; }
.sfui-icon-button--primary:hover, .sfui-icon-button-control:hover .sfui-icon-button--primary { filter: var(--sfui-hover-filter); }
.sfui-icon-button--primary:active, .sfui-icon-button-control:active .sfui-icon-button--primary { filter: var(--sfui-active-filter); }
.sfui-icon-button--framed[aria-expanded="true"] { border-color: var(--sfui-focus-border); }
/* Destructive icon action uses the existing shared danger palette. */
.sfui-icon-button--danger { --sfui-icon-ink: var(--sfui-danger); background: var(--sfui-badge-red-background); border-color: var(--sfui-border); color: var(--sfui-danger); }
.sfui-icon-button--danger:not(:disabled):hover { filter: var(--sfui-hover-filter); }
.sfui-icon-button--danger:not(:disabled):active { filter: var(--sfui-active-filter); }
.sfui-icon-button--ghost { --sfui-icon-ink: currentColor; border-color: transparent; background: transparent; color: inherit; }
.sfui-icon-button--ghost:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.sfui-icon-button--roomy > .sfui-icon { --sfui-icon-size: calc(var(--sfui-icon-button-size) - var(--sfui-space-24)); }
.sfui-icon-button--online { position: relative; }
.sfui-icon-button--online::after { content: ''; position: absolute; top: 0; right: var(--sfui-space-2); width: var(--sfui-space-12); height: var(--sfui-space-12); border: var(--sfui-border-width) solid color-mix(in srgb, var(--sfui-button-green) 80%, #000); border-radius: var(--sfui-round-radius); background: color-mix(in srgb, var(--sfui-button-green) 80%, #fff); }
.sfui-icon-button:disabled, .sfui-icon-frame-control:disabled { opacity: var(--sfui-disabled-opacity); cursor: not-allowed; }
.sfui-icon-button--has-badge { position: relative; }
.sfui-icon-button__badge { position: absolute; top: calc(-1 * var(--sfui-space-6)); right: calc(-1 * var(--sfui-space-6)); min-width: var(--sfui-space-20); padding-inline: var(--sfui-space-4); border-radius: var(--sfui-tag-radius); background: var(--sfui-button-blue); color: var(--sfui-primary-ink); font-size: var(--sfui-size-tiny); line-height: var(--sfui-space-20); text-align: center; }

/* Preserved compact logo presentation for the shared tabbed offers option. */
.sfui-icon-badge--offer { --sfui-badge-image-width:auto; --sfui-badge-image-height:auto; --sfui-badge-size:var(--sfui-badge-small); border:0; border-radius:var(--sfui-space-7); background:rgba(255,255,255,.075); }
.sfui-icon-badge--offer img { max-width:calc(var(--sfui-badge-size) - var(--sfui-space-8)); max-height:calc(var(--sfui-badge-size) - var(--sfui-space-10) - var(--sfui-space-1)); filter:brightness(0) saturate(100%) invert(78%) sepia(72%) saturate(1214%) hue-rotate(337deg) brightness(102%) contrast(101%); }
@media (max-width:767.98px) {
  .sfui-icon-badge--offer { --sfui-badge-image-width:100%; --sfui-badge-image-height:34px; --sfui-badge-size:calc(var(--sfui-badge-small) - var(--sfui-space-6)); height:36px; border-radius:var(--sfui-button-radius); background:transparent; }
  .sfui-icon-badge--offer img { max-width:100%; max-height:34px; object-fit:contain; }
}