/* Professional order bag / cart drawer */
.bag-button { position:relative; display:inline-flex; align-items:center; gap:7px; padding:8px 11px; border:1px solid #ded8cc; border-radius:999px; color:var(--ink); background:#fffdf8; cursor:pointer; font-size:12px; font-weight:800; transition:background .18s ease, transform .18s ease, box-shadow .18s ease; }
.bag-button:hover { background:var(--lemon); box-shadow:0 7px 18px rgba(23,37,45,.10); transform:translateY(-1px); }
.bag-icon { font-size:19px; line-height:.7; transform:rotate(180deg); display:inline-block; }
.bag-count { min-width:20px; height:20px; display:grid; place-items:center; padding:0 5px; border-radius:999px; color:#fff; background:var(--orange); font-size:10px; }
.bag-count:not(.has-items) { color:var(--ink-soft); background:#ebe7df; }
.bag-backdrop { position:fixed; inset:0; z-index:80; background:rgba(23,37,45,.38); opacity:0; pointer-events:none; transition:opacity .22s ease; backdrop-filter:blur(2px); }
.bag-backdrop.show { opacity:1; pointer-events:auto; }
.bag-drawer { position:fixed; z-index:90; top:0; right:0; width:min(460px,100%); height:100dvh; display:flex; flex-direction:column; color:var(--ink); background:var(--paper); box-shadow:-18px 0 55px rgba(23,37,45,.18); transform:translateX(105%); transition:transform .3s cubic-bezier(.23,1,.32,1); }
.bag-drawer.show { transform:translateX(0); }
.bag-header { display:flex; justify-content:space-between; gap:20px; padding:32px 30px 24px; border-bottom:1px solid var(--line); background:linear-gradient(135deg,#fffdf8,#f5f0e7); }
.bag-header .section-kicker { margin-bottom:9px; }
.bag-title { margin:0; font-size:36px; line-height:.95; letter-spacing:-.06em; }
.bag-header p { max-width:245px; margin-top:11px; color:var(--ink-soft); font-size:12px; line-height:1.55; }
.bag-close { width:34px; height:34px; flex:none; display:grid; place-items:center; border:1px solid #ded8cc; border-radius:50%; color:var(--ink); background:transparent; cursor:pointer; font-size:25px; line-height:1; transition:background .18s ease, transform .18s ease; }
.bag-close:hover { background:var(--lemon); transform:rotate(8deg); }
.bag-content { flex:1; overflow:auto; padding:18px 30px; }
.bag-lines { display:grid; gap:13px; }
.bag-line { display:flex; gap:14px; padding:12px 0; border-bottom:1px solid var(--line); }
.bag-line img { width:74px; height:74px; flex:none; object-fit:cover; border-radius:8px; }
.bag-line-main { flex:1; min-width:0; }
.bag-line-title { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.bag-line-title strong { font-size:14px; line-height:1.3; }
.remove-item { padding:0; color:#a0a4a0; background:transparent; cursor:pointer; font-size:20px; line-height:.8; }
.remove-item:hover { color:var(--orange-dark); }
.bag-line-price { display:block; margin-top:5px; color:var(--orange-dark); font-size:13px; font-weight:800; }
.qty-control { width:max-content; display:flex; align-items:center; gap:13px; margin-top:10px; padding:3px; border:1px solid #dfd9cf; border-radius:999px; background:#fff; }
.qty-control button { width:25px; height:25px; display:grid; place-items:center; border-radius:50%; color:var(--ink); background:#f1ede5; cursor:pointer; font-size:18px; line-height:1; transition:color .15s ease, background .15s ease, transform .15s ease; }
.qty-control button:hover { color:#fff; background:var(--orange); transform:scale(1.07); }
.qty-control span { min-width:10px; text-align:center; font-size:12px; font-weight:800; }
.bag-empty { min-height:280px; display:grid; place-items:center; align-content:center; gap:13px; color:var(--ink-soft); text-align:center; }
.empty-bag-icon { width:66px; height:66px; display:grid; place-items:center; border-radius:50%; color:var(--orange); background:#f4eadb; font-size:32px; transform:rotate(180deg); }
.bag-empty strong { max-width:220px; font-size:14px; line-height:1.5; }
.bag-empty .text-button { color:var(--orange-dark); }
.bag-footer { padding:20px 30px 27px; border-top:1px solid var(--line); background:#fffdf8; }
.bag-summary { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; color:var(--ink-soft); font-size:13px; }
.bag-total { color:var(--ink); font-size:25px; letter-spacing:-.04em; }
.bag-actions { display:grid; grid-template-columns:.75fr 1.25fr; gap:9px; }
.bag-actions button { padding:13px 10px; border-radius:5px; cursor:pointer; font-size:12px; font-weight:800; transition:transform .16s ease, background .16s ease; }
.bag-actions button:active { transform:scale(.97); }
.bag-cancel { color:var(--ink); background:#efeae1; }
.bag-cancel:hover { background:#e4ddd1; }
.bag-submit { color:#fff; background:var(--orange); box-shadow:0 7px 17px rgba(242,107,59,.22); }
.bag-submit:hover { background:var(--orange-dark); }
[dir="rtl"] .bag-drawer { right:auto; left:0; transform:translateX(-105%); }
[dir="rtl"] .bag-drawer.show { transform:translateX(0); }
[dir="rtl"] .bag-header, [dir="rtl"] .bag-line-main { text-align:right; }
[dir="rtl"] .bag-line-title { flex-direction:row-reverse; }
@media (max-width:620px) { .bag-button { padding:8px; }.bag-button > span:not(.bag-icon) { display:none; }.bag-header { padding:25px 22px 20px; }.bag-content { padding:14px 22px; }.bag-footer { padding:18px 22px 24px; } }

/* Accessible keyboard focus */
button:focus-visible, input:focus-visible, a:focus-visible { outline:3px solid rgba(242,107,59,.38); outline-offset:3px; }