.bxf{--ink:#1a1a1a;--muted:#666;--line:#ececec;--card:#fff;--cream:#e9e0cf;--cream-d:#d8ccb4;--ribbon:#5a3a2a;--radius:16px;
  font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);position:relative;}
.bxf *{box-sizing:border-box;}
@media(min-width:901px){.bxf{transition:padding-right .3s;}}
@media(min-width:901px){.bxf.panel-open{padding-right:380px;}}
@media(min-width:901px){.bxf.panel-wide{padding-right:min(640px,50vw);}}

/* steps */
.bxf-steps{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:10px 14px 10px 22px;box-shadow:0 4px 20px rgba(0,0,0,.06);margin-bottom:28px;}
.bxf-steps__list{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;}
.bxf-next{background:var(--ink);color:#fff;border:none;border-radius:999px;padding:7px 16px;font-weight:600;font-size:.78rem;line-height:1;cursor:pointer;white-space:nowrap;transition:.15s;align-self:center;}
.bxf-next:hover{opacity:.9;}
.bxf-next.disabled{opacity:.35;pointer-events:none;}
.bxf-next.loading{opacity:.6;pointer-events:none;}
.bxf-step{font-size:.9rem;font-weight:600;color:#aaa;}.bxf-step.active{color:var(--ink);}.bxf-step.done{color:#888;}

/* shop */
.bxf-shop{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 4px 20px rgba(0,0,0,.06);padding:26px;}
.bxf-shop__head h2{font-size:1.5rem;font-weight:700;letter-spacing:-.3px;margin:0 0 6px;}
.bxf-shop__head p{color:var(--muted);margin:0 0 18px;font-size:.95rem;}
.bxf-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;}
.bxf-chip{padding:8px 16px;border-radius:999px;border:1px solid transparent;background:#f3f3f5;color:var(--muted);font-weight:600;font-size:.85rem;cursor:pointer;}
.bxf-chip.active{background:var(--ink);color:#fff;}
.bxf-products{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;}

.bxf-loading{grid-column:1/-1;color:var(--muted);}



/* product card */
.bxf-item{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;display:flex;flex-direction:column;transition:box-shadow .15s,transform .15s;}
.bxf-item:hover{box-shadow:0 8px 24px rgba(0,0,0,.08);}
.bxf-item__img{position:relative;aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:2rem;background:#fff;overflow:hidden;border:none;cursor:pointer;padding:0;width:100%;}
.bxf-item__img img{width:100%;height:100%;object-fit:contain;padding:10px;transition:transform .25s;}
.bxf-item:hover .bxf-item__img img{transform:scale(1.04);}
.bxf-item__view{position:absolute;left:0;right:0;bottom:0;background:rgba(20,20,20,.8);color:#fff;font-size:.62rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;line-height:1;padding:3px 9px;transform:translateY(100%);transition:transform .2s;}
.bxf-item:hover .bxf-item__view{transform:translateY(0);}
.bxf-item__b{padding:14px 14px 0;flex:1;text-align:center;}
.bxf-item__cat{display:block;font-size:.7rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#a98;margin-bottom:5px;}
.bxf-item__n{font-size:.92rem;font-weight:600;line-height:1.3;margin:0 0 5px;color:var(--ink);}
.bxf-item__p{font-size:.9rem;font-weight:600;color:var(--ink);}
.bxf-item__p .omr-symbol,.bxf-item__p svg{height:.85em;width:auto;vertical-align:-.05em;}
.bxf-item__add{margin:14px;padding:11px;border-radius:10px;border:1.5px solid var(--ink);background:#fff;color:var(--ink);font-weight:700;font-size:.82rem;letter-spacing:.4px;text-transform:uppercase;cursor:pointer;transition:.15s;}
.bxf-item__add:hover{background:var(--ink);color:#fff;}
.bxf-item.in .bxf-item__add{background:var(--ink);color:#fff;}

/* edge handle */
.bxf-handle{position:fixed;right:0;top:42%;transform:translateY(-50%);z-index:60;cursor:pointer;border:none;
  background:var(--ink);color:#fff;padding:16px 12px;border-radius:14px 0 0 14px;box-shadow:-4px 6px 20px rgba(0,0,0,.2);
  display:flex;flex-direction:column;align-items:center;gap:7px;transition:transform .2s,opacity .2s;}
.bxf-handle:hover{padding-right:16px;}
.bxf-handle__ico{font-size:20px;line-height:1;}
.bxf-handle__label{writing-mode:vertical-rl;transform:rotate(180deg);font-size:.72rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;}
.bxf-handle__count{background:#fff;color:var(--ink);min-width:24px;height:24px;border-radius:999px;font-size:.82rem;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 6px;}
.bxf.panel-open .bxf-handle{opacity:0;pointer-events:none;}

/* backdrop */
.bxf-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.4);opacity:0;visibility:hidden;transition:.3s;z-index:65;}
.bxf-backdrop.show{opacity:1;visibility:visible;}

/* drawer */
.bxf-drawer{position:fixed;top:var(--bxf-top,150px);right:0;height:calc(100vh - var(--bxf-top,150px));width:360px;max-width:92vw;background:#fff;z-index:70;
  box-shadow:-8px 0 44px rgba(0,0,0,.2);transform:translateX(100%);transition:transform .3s,width .3s;
  display:flex;flex-direction:column;}
.bxf-drawer.is-open{transform:translateX(0);}
.bxf-drawer.is-wide{width:min(640px,50vw);}
.bxf-drawer__head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line);}
.bxf-drawer__title{font-size:1.1rem;font-weight:700;}.bxf-drawer__title b{text-transform:capitalize;}
.bxf-drawer__acts{display:flex;gap:6px;}
.bxf-iconbtn{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:.95rem;color:var(--ink);}
.bxf-iconbtn:hover{background:#f5f5f5;}
.bxf-drawer__body{flex:1;overflow:auto;padding:18px 20px;}
.bxf-drawer__foot{border-top:1px solid var(--line);padding:16px 20px;}

/* meter */
.bxf-meter{display:none;}
.bxf-meter__count{font-size:.85rem;font-weight:600;color:var(--muted);}
.bxf-meter__bar{display:block;height:6px;border-radius:999px;background:#eee;margin-top:8px;overflow:hidden;}
.bxf-meter__fill{display:block;height:100%;width:0;background:var(--ink);transition:width .3s;}

/* selected list (narrow) */
.bxf-list{display:flex;flex-direction:column;gap:10px;}
.bxf-list__empty{color:#aaa;font-size:.9rem;text-align:center;padding:24px 0;}
.bxf-row{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;padding:8px;}
.bxf-row__img{width:48px;height:48px;border-radius:8px;overflow:hidden;background:#f3efe8;flex:0 0 48px;display:flex;align-items:center;justify-content:center;}
.bxf-row__img img{width:100%;height:100%;object-fit:cover;}
.bxf-row__b{flex:1;min-width:0;}
.bxf-row__n{font-size:.88rem;font-weight:600;margin:0 0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bxf-row__p{font-size:.82rem;color:var(--muted);}
.bxf-row__x{border:none;background:#f3f3f5;width:28px;height:28px;border-radius:8px;cursor:pointer;color:#666;font-size:.9rem;}
.bxf-row__x:hover{background:#eaeaea;}

/* live box (wide) */
.bxf-box{position:relative;background:linear-gradient(180deg,var(--cream),var(--cream-d));border-radius:var(--radius);padding:26px 22px 22px;box-shadow:0 10px 30px rgba(0,0,0,.12);margin:6px 0 18px;}
.bxf-box__bow{position:absolute;top:-13px;left:50%;transform:translateX(-50%);width:64px;height:26px;background:var(--ribbon);border-radius:8px 8px 4px 4px;box-shadow:0 0 0 6px var(--cream),-30px 8px 0 -4px var(--ribbon),30px 8px 0 -4px var(--ribbon);}
.bxf-box__interior{background:#fbf8f1;border:2px solid #cdbfa3;border-radius:10px;padding:14px;box-shadow:inset 0 2px 10px rgba(90,70,40,.18);}
.bxf-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:8px;}
.bxf-slot{aspect-ratio:1;border-radius:8px;border:1.5px dashed #d3c6ab;display:flex;align-items:center;justify-content:center;position:relative;background:#fff8;font-size:1.5rem;overflow:visible;}
.bxf-slot.filled{border-style:solid;border-color:#fff;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.12);animation:pop .25s ease;}
.bxf-slot__img{width:100%;height:100%;object-fit:cover;border-radius:7px;}
@keyframes pop{from{transform:scale(.4);opacity:0;}to{transform:scale(1);opacity:1;}}
.bxf-slot__x{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;background:var(--ink);color:#fff;font-size:12px;line-height:20px;text-align:center;cursor:pointer;opacity:0;transition:.15s;z-index:2;}
.bxf-slot.filled:hover .bxf-slot__x{opacity:1;}
.bxf-box__note{margin:14px 0 0;font-size:.82rem;color:#6b5e44;text-align:center;}
.bxf-box__note.full{color:#9a2b2b;font-weight:600;}

/* footer */
.bxf-total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px;}
.bxf-total strong{font-size:1.3rem;}
.bxf-btn{display:block;text-align:center;background:var(--ink);color:#fff;text-decoration:none;padding:14px;border-radius:999px;font-weight:600;font-size:.95rem;cursor:pointer;}
.bxf-btn.disabled{opacity:.4;pointer-events:none;}
.bxf-btn.loading{opacity:.6;pointer-events:none;}
.bxf-microcopy{display:none;}

/* mobile: drawer becomes bottom sheet, handle becomes bottom bar */
@media(max-width:900px){
  .bxf-drawer{top:auto;bottom:0;left:0;right:0;width:100%!important;height:auto;max-height:82vh;border-radius:18px 18px 0 0;transform:translateY(100%);transition:transform .3s,max-height .3s;box-shadow:0 -8px 44px rgba(0,0,0,.2);}
  .bxf-drawer.is-open{transform:translateY(0);}
  .bxf-drawer.is-wide{max-height:90vh;}
  .bxf-handle{top:auto;bottom:0;left:0;right:0;transform:none;width:100%;flex-direction:row;justify-content:center;gap:10px;border-radius:14px 14px 0 0;padding:14px;}
  .bxf-handle__label{writing-mode:horizontal-tb;transform:none;}
  .bxf-slots{grid-template-columns:repeat(4,1fr);}
}

/* details modal */
.bxf-modal{position:fixed;inset:0;z-index:90;display:none;}
.bxf-modal.show{display:block;}
.bxf-modal__overlay{position:absolute;inset:0;background:rgba(0,0,0,.5);}
.bxf-modal__card{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(820px,92vw);max-height:88vh;overflow:auto;background:#fff;border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.3);display:grid;grid-template-columns:1fr 1fr;}
.bxf-modal__close{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;border:none;background:#f3f3f5;cursor:pointer;font-size:1rem;color:#444;z-index:2;}
.bxf-modal__close:hover{background:#e8e8e8;}
.bxf-modal__img{background:#f6f4f0;display:flex;align-items:center;justify-content:center;min-height:320px;font-size:3rem;}
.bxf-modal__img img{width:100%;height:100%;object-fit:contain;padding:24px;}
.bxf-modal__body{padding:34px 30px;display:flex;flex-direction:column;}
.bxf-modal__cat{font-size:.72rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#a98;margin-bottom:8px;}
.bxf-modal__name{font-size:1.5rem;font-weight:700;letter-spacing:-.3px;margin:0 0 10px;}
.bxf-modal__price{font-size:1.2rem;font-weight:700;margin-bottom:18px;}
.bxf-modal__price svg,.bxf-modal__price .omr-symbol{height:.85em;width:auto;vertical-align:-.05em;}
.bxf-modal__desc{font-size:.92rem;line-height:1.6;color:var(--muted);flex:1;}
.bxf-modal__desc p{margin:0 0 10px;}
.bxf-modal__add{margin-top:22px;}
@media(max-width:700px){
  .bxf-modal__card{grid-template-columns:1fr;max-height:90vh;}
  .bxf-modal__img{min-height:240px;}
  .bxf-modal__body{padding:24px 22px;}
}

/* currency symbol sizing inside subtotal / rows / modal */
.bxf-total svg,.bxf-total .omr-symbol,
.bxf-row__p svg,.bxf-row__p .omr-symbol{height:.8em;width:auto;vertical-align:-.04em;}

/* ============================================================
   CUSTOMIZE STEP (.bxc)
   ============================================================ */
.bxc{--ink:#1a1a1a;--muted:#666;--line:#ececec;--card:#fff;--radius:16px;position:relative;
  font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);}
.bxc *{box-sizing:border-box;}
@media(min-width:901px){.bxc{padding-right:380px;}}

.bxc-steps{display:flex;flex-wrap:wrap;gap:10px 22px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px 22px;box-shadow:0 4px 20px rgba(0,0,0,.06);margin-bottom:28px;}
.bxc-step{font-size:.9rem;font-weight:600;color:#aaa;}.bxc-step.active{color:var(--ink);}.bxc-step.done{color:#888;}

.bxc-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 4px 20px rgba(0,0,0,.06);padding:26px;}
.bxc-panel__head{text-align:center;margin-bottom:22px;}
.bxc-panel__head h2{font-size:1.5rem;font-weight:700;letter-spacing:-.3px;margin:0 0 6px;}
.bxc-panel__head p{color:var(--muted);margin:0;font-size:.95rem;}

/* card grid */
.bxc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px;}
.bxc-hint{grid-column:1/-1;color:var(--muted);text-align:center;padding:20px 0;}
.bxc-card{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;display:flex;flex-direction:column;transition:box-shadow .15s;}
.bxc-card:hover{box-shadow:0 8px 24px rgba(0,0,0,.08);}
.bxc-card__img{aspect-ratio:4/5;background:#f6f4f0;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.bxc-card__img img{width:100%;height:100%;object-fit:cover;}
.bxc-card__no{color:#b7b1a6;font-weight:600;font-size:1rem;}
.bxc-card__b{padding:14px 14px 0;flex:1;text-align:center;}
.bxc-card__n{font-size:.95rem;font-weight:600;margin:0 0 4px;}
.bxc-card__p{font-size:.9rem;font-weight:600;color:var(--ink);}
.bxc-card__p svg,.bxc-card__p .omr-symbol{height:.8em;width:auto;vertical-align:-.04em;}
.bxc-card__sel{margin:14px;padding:11px;border-radius:10px;border:1.5px solid var(--ink);background:#fff;color:var(--ink);font-weight:700;font-size:.82rem;letter-spacing:.4px;text-transform:uppercase;cursor:pointer;transition:.15s;}
.bxc-card__sel:hover{background:var(--ink);color:#fff;}

/* write message */
.bxc-write{display:grid;grid-template-columns:minmax(0,320px) 1fr;gap:28px;align-items:start;}
@media(max-width:700px){.bxc-write{grid-template-columns:1fr;}}
.bxc-preview{border-radius:12px;overflow:hidden;background:#f6f4f0;aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;}
.bxc-preview img{width:100%;height:100%;object-fit:cover;}
.bxc-write__b h3{font-size:1.4rem;font-weight:700;margin:0 0 6px;}
.bxc-write__b .bxc-sub{color:var(--muted);font-size:.92rem;margin:0 0 16px;}
.bxc-blankrow{display:flex;align-items:center;gap:8px;margin-bottom:14px;font-size:.9rem;}
.bxc-label{font-weight:600;font-size:.9rem;margin:0 0 6px;display:block;}
.bxc-message{width:100%;min-height:150px;resize:vertical;border:1px solid var(--line);border-radius:10px;padding:12px;font:inherit;font-size:.95rem;}
.bxc-message:focus{outline:none;border-color:#bbb;}
.bxc-message:disabled{background:#f5f5f5;color:#aaa;}
.bxc-count{text-align:right;font-size:.8rem;color:#999;margin:6px 0 16px;}
.bxc-from{width:100%;height:44px;border:1px solid var(--line);border-radius:10px;padding:0 12px;font:inherit;font-size:.95rem;margin-bottom:8px;}
.bxc-from:focus{outline:none;border-color:#bbb;}
.bxc-write__foot{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:20px;}
.bxc-backbtn{background:none;border:none;color:var(--muted);font-weight:600;cursor:pointer;font-size:.85rem;white-space:nowrap;padding:0;}
.bxc-next{background:var(--ink);color:#fff;border:none;border-radius:999px;padding:11px 22px;font-weight:600;font-size:.85rem;cursor:pointer;white-space:nowrap;}

/* side panel */
.bxc-side{position:fixed;top:0;right:0;height:100vh;width:360px;max-width:92vw;background:#fff;border-left:1px solid var(--line);
  box-shadow:-8px 0 30px rgba(0,0,0,.06);display:flex;flex-direction:column;z-index:40;}
@media(max-width:900px){.bxc-side{position:static;width:100%;height:auto;border-left:none;box-shadow:none;margin-top:24px;border:1px solid var(--line);border-radius:var(--radius);}}
.bxc-side__head{padding:20px;border-bottom:1px solid var(--line);font-weight:700;font-size:1.1rem;}
.bxc-side__body{flex:1;overflow:auto;padding:16px 20px;}
.bxc-grow{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #f2f2f2;}
.bxc-grow__img{width:40px;height:40px;border-radius:8px;overflow:hidden;background:#f3efe8;flex:0 0 40px;}
.bxc-grow__img img{width:100%;height:100%;object-fit:cover;}
.bxc-grow__n{flex:1;font-size:.88rem;font-weight:600;}
.bxc-grow__q{font-size:.82rem;color:var(--muted);}
.bxc-side__foot{border-top:1px solid var(--line);padding:18px 20px;}
.bxc-total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px;font-size:1rem;}
.bxc-total span{color:var(--muted);}
.bxc-microcopy{text-align:center;font-size:.75rem;color:#999;margin:12px 0 0;}

/* ============================================================
   REVIEW STEP (.bxr)
   ============================================================ */
.bxr{--ink:#1a1a1a;--muted:#666;--line:#ececec;--card:#fff;--radius:16px;
  font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);}
.bxr *{box-sizing:border-box;}
.bxr-steps{display:flex;align-items:center;gap:16px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px 22px;box-shadow:0 4px 20px rgba(0,0,0,.06);margin-bottom:28px;}
.bxr-step{font-size:.9rem;font-weight:600;color:#aaa;}.bxr-step.active{color:var(--ink);}.bxr-step.done{color:#888;}

.bxr-layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:28px;align-items:start;}
@media(max-width:900px){.bxr-layout{grid-template-columns:1fr;}}

.bxr-col{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 4px 20px rgba(0,0,0,.06);padding:26px;}
.bxr-col h2{font-size:1.4rem;font-weight:700;letter-spacing:-.3px;margin:0 0 4px;}
.bxr-tip{color:var(--muted);font-size:.92rem;margin:0 0 18px;}
.bxr-sub{font-size:1.05rem;font-weight:700;margin:22px 0 10px;}
.bxr-hint{color:var(--muted);}

.bxr-row{display:flex;align-items:flex-start;gap:14px;padding:12px 0;border-bottom:1px solid #f2f2f2;}
.bxr-row__img{width:56px;height:56px;border-radius:10px;overflow:hidden;background:#f6f4f0;flex:0 0 56px;}
.bxr-row__img img{width:100%;height:100%;object-fit:cover;}
.bxr-row__b{flex:1;min-width:0;}
.bxr-row__n{font-size:.95rem;font-weight:600;margin:0 0 3px;}
.bxr-row__p{font-size:.9rem;color:var(--muted);}
.bxr-row__meta{display:block;font-size:.82rem;color:#888;margin-top:3px;}
.bxr-row__x{border:none;background:#f3f3f5;width:30px;height:30px;border-radius:8px;cursor:pointer;color:#666;font-size:.9rem;}
.bxr-row__x:hover{background:#eaeaea;}

.bxr-edit{display:inline-flex;align-items:center;gap:6px;margin-top:16px;color:var(--ink);font-weight:600;font-size:.9rem;text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:1px;}

/* summary */
.bxr-summary{margin:6px 0 4px;}
.bxr-sumrow{display:flex;justify-content:space-between;gap:12px;font-size:.92rem;padding:8px 0;color:#444;}
.bxr-sumrow span:last-child{white-space:nowrap;}
.bxr-sumrow svg,.bxr-sumrow .omr-symbol{height:.8em;width:auto;vertical-align:-.04em;}
.bxr-totalrow{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);margin-top:12px;padding-top:14px;}
.bxr-totalrow span{font-size:1.05rem;font-weight:700;}
.bxr-totalrow strong{font-size:1.5rem;}
.bxr-totalrow svg,.bxr-totalrow .omr-symbol{height:.8em;width:auto;vertical-align:-.04em;}
.bxr-tax{display:flex;justify-content:space-between;font-size:.82rem;color:#999;margin-top:8px;}
.bxr-cta{display:block;width:100%;text-align:center;background:var(--ink);color:#fff;border:none;text-decoration:none;
  padding:15px;border-radius:999px;font-weight:700;font-size:1rem;cursor:pointer;margin-top:18px;}
.bxr-cta:hover{opacity:.92;}
.bxr-shop{display:block;text-align:center;margin-top:12px;color:var(--muted);font-size:.85rem;text-decoration:underline;}
.bxr-empty{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:40px;text-align:center;box-shadow:0 4px 20px rgba(0,0,0,.06);}
.bxr-empty a{color:var(--ink);font-weight:600;}