/* Square Menu Sync — Front-end Styles — CSS Variable Theming */
.sms-menu {
	--sms-font-family: inherit;
	--sms-nav-bg: #ffffff; --sms-nav-border: #e0e0e0;
	--sms-nav-link-color: #555; --sms-nav-link-hover: #222; --sms-nav-link-active: #222; --sms-nav-link-active-border: currentColor;
	--sms-nav-gap: .25rem; --sms-nav-padding-x: 1rem; --sms-nav-padding-y: .75rem;
	--sms-section-title-color: #1a1a1a; --sms-section-title-size: 1.5rem; --sms-section-gap: 3rem;
	--sms-item-gap: 1.5rem; --sms-item-border: #eee; --sms-item-padding: 1rem 0; --sms-item-name-size: 1.05rem;
	--sms-price-color: #1a1a1a; --sms-price-weight: 600;
	--sms-desc-color: #666; --sms-desc-size: .9rem;
	--sms-variation-color: #777; --sms-variation-size: .85rem;
	--sms-modifier-color: #888; --sms-modifier-size: .8rem;
	--sms-sold-out-bg: #dc3545; --sms-sold-out-color: #fff; --sms-sold-out-opacity: .5;
	--sms-image-size: 80px; --sms-image-radius: 8px;
	font-family: var(--sms-font-family);
}

/* Nav */
.sms-menu__nav { background: var(--sms-nav-bg); border-bottom: 1px solid var(--sms-nav-border); z-index: 100; transition: box-shadow .2s ease; }
.sms-menu__nav--sticky { position: sticky; top: 0; }
.sms-menu__nav--sticky.sms-menu__nav--scrolled { box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.sms-menu__nav-list { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--sms-nav-gap); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.sms-menu__nav-list::-webkit-scrollbar { display: none; }
.sms-menu__nav-list:focus-visible { outline: 2px solid var(--sms-nav-link-active); outline-offset: 2px; }
.sms-menu__nav-item { flex: 0 0 auto; }
.sms-menu__nav-link { display: block; padding: var(--sms-nav-padding-y) var(--sms-nav-padding-x); color: var(--sms-nav-link-color); text-decoration: none; font-size: .9rem; font-weight: 500; white-space: nowrap; border-bottom: 2px solid transparent; transition: color .15s ease, border-color .15s ease; }
.sms-menu__nav-link:hover { color: var(--sms-nav-link-hover); }
.sms-menu__nav-link:focus-visible { outline: 2px solid var(--sms-nav-link-active); outline-offset: -2px; border-radius: 2px; }
.sms-menu__nav-link--active { color: var(--sms-nav-link-active); border-bottom-color: var(--sms-nav-link-active-border); }

/* Body + Sections */
.sms-menu__body { padding-top: 1rem; }
.sms-menu__section { margin-bottom: var(--sms-section-gap); scroll-margin-top: 4rem; }
.sms-menu__section-title { color: var(--sms-section-title-color); font-size: var(--sms-section-title-size); font-weight: 700; margin: 0 0 .5rem 0; padding: 0 0 .75rem 0; border-bottom: var(--sms-section-divider, 2px solid currentColor); }
.sms-menu__section-desc { color: var(--sms-desc-color); font-size: var(--sms-desc-size); margin: 0 0 1rem 0; }

/* Sub-sections (child categories within a parent) */
.sms-menu__subsection { margin-top: 1.5rem; }
.sms-menu__subsection-title { color: var(--sms-section-title-color); font-size: 1.15rem; font-weight: 600; margin: 0 0 .5rem 0; padding: 0; }

/* Items grid */
.sms-menu__items { display: grid; gap: 0; }
.sms-menu[data-columns="2"] .sms-menu__items { grid-template-columns: repeat(2, 1fr); gap: 0 2rem; }
.sms-menu[data-columns="3"] .sms-menu__items { grid-template-columns: repeat(3, 1fr); gap: 0 2rem; }
@media (max-width: 768px) { .sms-menu[data-columns="2"] .sms-menu__items, .sms-menu[data-columns="3"] .sms-menu__items { grid-template-columns: 1fr; } }

/* Item */
.sms-menu__item { display: flex; gap: 1rem; padding: var(--sms-item-padding); border-bottom: 1px solid var(--sms-item-border); align-items: flex-start; }
.sms-menu__item:last-child { border-bottom: none; }
.sms-menu__item--sold-out .sms-menu__item-content, .sms-menu__item--sold-out .sms-menu__item-image { opacity: var(--sms-sold-out-opacity); }

/* Image */
.sms-menu__item-image { flex: 0 0 var(--sms-image-size); width: var(--sms-image-size); height: var(--sms-image-size); overflow: hidden; border-radius: var(--sms-image-radius); }
.sms-menu__img { width: 100%; height: 100%; object-fit: cover; }

/* Content */
.sms-menu__item-content { flex: 1; min-width: 0; }
.sms-menu__item-header { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.sms-menu__item-name { font-size: var(--sms-item-name-size); font-weight: 600; margin: 0; flex: 1; min-width: 0; }
.sms-menu__item-price { color: var(--sms-price-color); font-weight: var(--sms-price-weight); white-space: nowrap; }

/* Badge */
.sms-menu__badge { display: inline-block; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; padding: .15em .5em; border-radius: 3px; line-height: 1.4; white-space: nowrap; }
.sms-menu__badge--sold-out { background: var(--sms-sold-out-bg); color: var(--sms-sold-out-color); }

/* Description */
.sms-menu__item-desc { color: var(--sms-desc-color); font-size: var(--sms-desc-size); margin: .25rem 0 0 0; line-height: 1.5; }

/* Variations */
.sms-menu__variations { list-style: none; margin: .5rem 0 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.sms-menu__variation { display: flex; gap: .25rem; font-size: var(--sms-variation-size); color: var(--sms-variation-color); }
.sms-menu__variation-name { font-weight: 500; }

/* Modifiers */
.sms-menu__modifier-group { font-size: var(--sms-modifier-size); color: var(--sms-modifier-color); margin-top: .35rem; }
.sms-menu__modifier-label { font-weight: 600; }

/* Utility */
.sms-menu-empty { text-align: center; color: #999; padding: 2rem; font-style: italic; }
.sms-menu__sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }