/* Majesty product panel (Figma: Menu V2 · Product sheet / drawer). ACSS tokens first.
 * The Offcanvas shell (bottom sheet ≤767px, drawer ≥768px) is styled by the Bricks class "product-panel". */

.pp { display: flex; flex-direction: column; inline-size: 100%; block-size: 100%; min-block-size: 0; max-block-size: inherit; }
.pp-state { display: grid; place-items: center; min-block-size: 240px; padding: var(--space-l); font-size: var(--text-m); color: var(--text-dark-muted); text-align: center; }

.pp__handle { display: none; align-self: center; flex-shrink: 0; inline-size: 40px; block-size: 4px; margin-block-start: var(--space-xs); border-radius: 2px; background: var(--mj-border-input); }
[data-direction="bottom"] .pp__handle { display: block; }

/* Head */
.pp__head { flex-shrink: 0; display: flex; align-items: flex-start; gap: var(--space-s); padding: var(--space-s) var(--space-m); }
.pp__plate { flex-shrink: 0; display: grid; place-items: center; inline-size: 72px; block-size: 72px; border-radius: var(--radius-circle); background: var(--mj-bg-plate); overflow: hidden; }
.pp__img { display: block; inline-size: 64px; block-size: 64px; border-radius: var(--radius-circle); object-fit: cover; }
.pp__title { flex: 1 1 auto; min-inline-size: 0; display: flex; flex-direction: column; gap: 2px; }
.pp__name { margin: 0; font-size: var(--h5); font-weight: 700; line-height: 1.4; color: var(--text-dark); }
.pp__desc { margin: 0; font-size: var(--text-s); line-height: 1.6; color: var(--text-dark-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pp__close { flex-shrink: 0; display: grid; place-items: center; inline-size: 44px; block-size: 44px; padding: 0; border: 1px solid var(--mj-border-default); border-radius: var(--radius-m); background: transparent; color: var(--text-dark); cursor: pointer; }
.pp__close svg { inline-size: 24px; block-size: 24px; }

/* Body (scrolls) */
.pp__body { flex: 1 1 auto; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: var(--space-l); padding: var(--space-s) var(--space-m) var(--space-l); }
.pp__group { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.pp__legend, .pp .wapf-field-label { float: none; inline-size: 100%; margin: 0 0 var(--space-xs); padding: 0; font-size: var(--text-m); font-weight: 600; line-height: 1.4; color: var(--text-dark); }
.pp__sizes .atc__size { flex: 0 0 auto; min-inline-size: 88px; padding-inline: var(--space-s); }

/* Add-ons (markup from the add-on plugin; same chip as Figma "Topping chip") */
.pp .wapf, .pp .wapf-wrapper, .pp .wapf-field-group, .pp .wapf-field-input { margin: 0; padding: 0; }
.pp .wapf-product-totals { display: none; }
/* Every field (and every field group) is its own section: same spacing as between الحجم and الإضافات */
.pp .wapf-wrapper, .pp .wapf-field-group { display: flex; flex-direction: column; gap: var(--space-l); }
.pp .wapf-field-row { display: flex; flex-direction: column; gap: var(--space-l); margin: 0; }
.pp .wapf-field-container { inline-size: 100% !important; margin: 0; padding: 0; }
.pp .wapf-field-container .wapf-field-label, .pp .wapf-field-container .wapf-field-label label { color: var(--text-dark); }
.pp .wapf-field-label label { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs); font: inherit; }
.pp .wapf-field-label abbr, .pp .wapf-required { color: var(--danger); text-decoration: none; }
.pp .wapf-field-label .pp__hint { font-size: var(--text-xs); font-weight: 400; color: var(--text-dark-muted); }
.pp .wapf-field-label .pp__hint--count { color: var(--secondary); font-weight: 600; }
.pp .wapf-field-description { margin: var(--space-xs) 0 0; font-size: var(--text-xs); color: var(--text-dark-muted); }
.pp .wapf-checkboxes, .pp .wapf-radios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); }
.pp .wapf-checkable { margin: 0; min-inline-size: 0; }
.pp .wapf-input-label { display: flex; align-items: center; gap: var(--space-xs); block-size: 100%; margin: 0; padding: 10px var(--space-s); border: 1px solid var(--mj-border-default); border-radius: var(--radius-m); background: var(--mj-bg-surface); cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
/* Choice indicator: a 22px circle (Figma Topping chip). Fixed size so plugin CSS cannot stretch it. */
.pp .wapf-input-label input.wapf-input { appearance: none; -webkit-appearance: none; box-sizing: border-box; flex: 0 0 22px; inline-size: 22px; block-size: 22px; min-inline-size: 22px; max-inline-size: 22px; margin: 0; padding: 0; border: 1.5px solid var(--mj-border-input); border-radius: var(--radius-circle); background: var(--mj-bg-surface) center / 14px no-repeat; box-shadow: none; cursor: pointer; transition: border-color .15s ease, background-color .15s ease, transform .15s ease; }
.pp .wapf-input-label:hover { border-color: var(--mj-border-input); }
.pp .wapf-input-label:hover input.wapf-input:not(:checked):not(:disabled) { border-color: var(--base); }
/* Checked: white circle with a navy check (base #071f3a; data URIs cannot read tokens) */
.pp .wapf-input-label input.wapf-input:checked { border-color: var(--mj-bg-surface); background-color: var(--mj-bg-surface); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23071f3a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); transform: scale(1.05); }
.pp .wapf-label-text { flex: 1 1 auto; min-inline-size: 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: var(--space-xs); font-size: var(--text-s); font-weight: 600; line-height: 1.4; color: var(--text-dark); }
.pp .wapf-pricing-hint { font-size: var(--text-xs); font-weight: 400; color: var(--text-dark-muted); white-space: nowrap; }
.pp .wapf-input-label:has(.wapf-input:checked) { background: var(--base); border-color: var(--base); }
.pp .wapf-input-label:has(.wapf-input:checked) .wapf-label-text { color: var(--text-light); }
.pp .wapf-input-label:has(.wapf-input:checked) .wapf-pricing-hint { color: var(--text-light-muted); }
.pp .wapf-input-label:has(.wapf-input:focus-visible) { outline: 3px solid var(--focus-color); outline-offset: 2px; }
.pp .wapf-input-label:has(.wapf-input:disabled) { opacity: .4; cursor: not-allowed; }
.pp .wapf-input-label .wapf-input:disabled { cursor: not-allowed; }

/* Footer (sticky) */
.pp__foot { flex-shrink: 0; display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-s) var(--space-m) calc(var(--space-m) + env(safe-area-inset-bottom)); border-block-start: 1px solid var(--mj-border-default); background: var(--mj-bg-surface); }
.pp__error { margin: 0; padding: var(--space-xs) var(--space-s); border-radius: var(--radius-m); background: color-mix(in srgb, var(--danger) 10%, var(--mj-bg-surface)); color: var(--danger); font-size: var(--text-s); line-height: 1.5; }
.pp__error[hidden] { display: none; }
.pp__summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); }
.pp__line { order: -1; flex: 1 1 auto; min-inline-size: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-xs); line-height: 1.6; color: var(--text-dark-muted); }
.pp__total { flex-shrink: 0; margin: 0; font-size: var(--mj-price-l); font-weight: 800; line-height: 1.2; color: var(--text-dark); white-space: nowrap; }
.pp__actions { display: flex; align-items: stretch; gap: var(--space-xs); }
.pp__submit { flex: 1 1 auto; justify-content: center; }
.pp__submit:disabled { opacity: .45; cursor: not-allowed; }
.pp__submit[aria-busy="true"] { opacity: .7; cursor: progress; }
.pp__qty[hidden] { display: none; }
.pp__qty { flex-shrink: 0; display: flex; align-items: center; border: 1.5px solid var(--mj-border-input); border-radius: var(--radius-m); background: var(--mj-bg-surface); }
.pp__qty-btn { display: grid; place-items: center; inline-size: 44px; block-size: 44px; padding: 0; border: 0; background: none; color: var(--text-dark); cursor: pointer; }
.pp__qty-btn svg { inline-size: 20px; block-size: 20px; }
.pp__qty-input { inline-size: 36px; padding: 0; border: 0; background: none; text-align: center; font-size: var(--text-m); font-weight: 700; color: var(--text-dark); -moz-appearance: textfield; appearance: textfield; }
.pp__qty-input::-webkit-inner-spin-button, .pp__qty-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.pp__close:focus-visible, .pp__qty-btn:focus-visible, .pp__qty-input:focus-visible { outline: 3px solid var(--focus-color); outline-offset: 2px; }

@media (min-width: 768px) {
	.pp__head { padding: var(--space-l) var(--space-l) var(--space-s); }
	.pp__body { padding-inline: var(--space-l); }
	.pp__foot { padding: var(--space-m) var(--space-l); }
}
@media (prefers-reduced-motion: reduce) {
	.pp .wapf-input-label, .pp .wapf-input-label input.wapf-input { transition: none; }
}