/* Sugarhive website concept: commerce layer (order mode, picks, options, pairs, mini cart, sticky order bar). Loaded after site.css. */

/* Order mode + branch */
.order-mode { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 22px; }
.seg { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid var(--line); }
.seg button { height: 44px; min-width: 112px; padding: 0 22px; border: 0; border-radius: 999px; background: transparent; color: var(--rv); font-size: 14px; transition: background .2s, color .2s; }
.seg button[aria-pressed="true"] { background: var(--rv); color: var(--aw); }
.branch { position: relative; }
.branch .pop { position: absolute; z-index: 30; inset-block-start: calc(100% + 8px); inset-inline-start: 0; width: min(320px, 86vw); padding: 14px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 24px 60px -24px rgba(61,17,80,.45); }
.branch .pop[hidden], .micro-note[hidden], .mini[hidden] { display: none; }
.micro-note { margin: 0; font-size: 13px; color: var(--mute); }

/* Marked slot: content the client still owes */
.slot { display: grid; gap: 6px; padding: 14px 16px; border: 1px dashed rgba(61,17,80,.25); border-radius: 14px; font-size: 14px; line-height: 1.5; color: var(--mute); }
.slot b { font: 500 10px/1 var(--en); letter-spacing: .18em; text-transform: uppercase; color: var(--rv); }
html[lang="ar"] .slot b { font: 600 12px/1 var(--ar); letter-spacing: 0; }
.dup { padding-block: 48px 24px; max-width: 880px; }

/* Picks */
.picks { padding-top: 24px; padding-bottom: 12px; }
.picks .tabs { display: flex; gap: 8px; margin-bottom: 18px; }
.picks .slot { max-width: 520px; }

/* Options, add-ons, pairs */
.optgrp { display: grid; gap: 8px; }
.optgrp .gh { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; }
.optgrp .gh b { font-weight: 500; }
.optgrp .eg { padding: 2px 8px; border: 1px dashed rgba(61,17,80,.25); border-radius: 999px; font: 500 9.5px/1.4 var(--en); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
html[lang="ar"] .optgrp .eg { font: 500 11px/1.4 var(--ar); letter-spacing: 0; text-transform: none; }
.optgrp .pl { display: flex; flex-wrap: wrap; gap: 8px; }
.optgrp .fchip { height: auto; min-height: 40px; padding: 6px 16px; }
.optgrp .fchip small { margin-inline-start: 8px; font-size: 11px; opacity: .65; }
.pairs { padding: clamp(24px, 4vw, 48px); background: var(--aw); border-top: 1px solid var(--line); }
.item-page .pairs { background: transparent; padding-inline: 0; border: 0; margin-top: 56px; }
.pairs .h2 { font-size: clamp(22px, 2.2vw, 30px); margin: 0 0 18px; }
.sheet-body { position: relative; }
@media (max-width: 760px) { .sheet .pairs .strip { margin-inline: calc(-1 * clamp(24px, 4vw, 48px)); padding-inline: clamp(24px, 4vw, 48px); } }

/* Drawer */
.drawer header h2 { display: block; }
.mode-tag { display: block; margin-top: 6px; font: 500 10.5px/1 var(--en); letter-spacing: .18em; text-transform: uppercase; color: var(--mute); }
html[lang="ar"] .mode-tag { font: 500 13px/1 var(--ar); letter-spacing: 0; }
.line .opts { margin-top: 4px; font-size: 12.5px; line-height: 1.4; color: var(--mute); }

/* Mini cart pill (desktop) and sticky order bar (phone) */
.mini { position: fixed; z-index: 70; inset-block-end: 24px; inset-inline-end: 24px; display: inline-flex; align-items: center; min-height: 52px; padding: 0 22px; border: 0; border-radius: 999px; color: var(--rv); font-size: 14px; background: rgba(237,227,211,.55); box-shadow: 0 14px 40px -18px rgba(61,17,80,.5); }
.mini-in { position: relative; z-index: 3; display: inline-flex; align-items: center; gap: 16px; white-space: nowrap; }
.mini-in b { font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }
.obar { display: none; }
@media (max-width: 860px) {
  .mini { display: none !important; }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .obar { display: block; position: fixed; z-index: 70; inset-inline: 0; inset-block-end: 0; background: var(--rv); }
  .obar > * { display: flex; align-items: center; justify-content: center; width: 100%; height: calc(64px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); border: 0; background: none; color: var(--aw); font-size: 15px; letter-spacing: .02em; text-decoration: none; gap: .4em; }
  .obar .num { font-family: var(--en); }
}