/* Crafts N Creations PWA client — phone shell + screen router.
   The app is a real full-screen PWA on mobile; on wider viewports it is centred
   inside a phone-sized frame purely for presentation (the frame is NOT chrome
   the user interacts with — it just mimics a handset). */

body{background:var(--desk)}

.device-stage{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 12px;
}

.device{
  position:relative;
  width:402px;
  height:874px;
  max-height:calc(100vh - 48px);
  background:var(--bg);
  border-radius:54px;
  border:12px solid #0d0d0d;
  box-shadow:0 30px 70px rgba(17,24,39,.28);
  overflow:hidden;
}

/* status-bar notch */
.device__notch{
  position:absolute;top:12px;left:50%;transform:translateX(-50%);
  width:120px;height:30px;background:#0d0d0d;border-radius:0 0 18px 18px;z-index:60;
}

.device__screens{position:absolute;inset:0;overflow:hidden}

/* Each screen fills the device and scrolls internally. */
.screen{
  position:absolute;inset:0;
  flex-direction:column;
  min-height:100%;
  background:var(--bg);
  overflow-y:auto;
  overflow-x:hidden;
}

/* On a real handset (or narrow viewport) drop the frame and go full-bleed. */
@media (max-width:460px){
  .device-stage{padding:0}
  .device{width:100vw;height:100vh;max-height:none;border:0;border-radius:0}
  .device__notch{display:none}
}

/* On desktop, a slim install/help ribbon above the phone. */
.stage-hint{
  position:fixed;top:14px;left:0;right:0;text-align:center;
  font-size:12px;color:var(--ts);pointer-events:none;
}
.stage-hint b{color:var(--gold)}

/* ---- Filters: segmented status control ---- */
.seg{
  flex:1;padding:10px 0;border-radius:6px;font-size:12px;cursor:pointer;
  font-family:'Inter',sans-serif;font-weight:500;
  border:1px solid var(--border);background:transparent;color:var(--tp);
}
.seg.active{border-color:var(--gold);background:var(--gold);color:#fff;font-weight:700}

/* ---- Product detail: selectable piece rows ---- */
.piece-row .piece-dot{border:2px solid var(--ts)}
.piece-row.selected{border-left:3px solid var(--gold);background:rgba(114,6,18,.10)}
.piece-row.selected .piece-dot{border:5px solid var(--gold)}

/* ============ Hide-Prices (Customer / B2C) mode ============ */
/* When body.b2c is on, every price & weight disappears from the real
   catalogue and detail screens; the "prices hidden" note takes their place. */
body.b2c .js-price,
body.b2c .js-weight,
body.b2c .js-pricebox,
body.b2c .js-wishlist { display:none !important; }
.b2c-note{ display:none; }
body.b2c .b2c-note{ display:block; }
body.b2c #b2c-on{ display:none; }   /* already in Customer View — exit via the banner */
/* nudge content down so the banner never covers controls */
body.b2c #s-home > div:first-child{ padding-top:96px; }
body.b2c #s-detail [data-go="s-home"]{ top:80px; z-index:65; }

/* Persistent top banner — only visible while Customer View is on */
.b2c-banner{
  position:absolute; top:0; left:0; right:0; z-index:60;
  display:none; align-items:center; gap:8px;
  background:var(--warn); padding:44px 14px 10px;
  box-shadow:0 2px 14px rgba(17,24,39,.18);
}
body.b2c .b2c-banner{ display:flex; }

/* PIN overlay + keypad — shown by adding .open */
.pin-overlay{
  position:absolute; inset:0; z-index:70;
  background:rgba(13,13,13,.55); backdrop-filter:blur(4px);
  align-items:center; justify-content:center; padding:22px;
  display:none;
}
.pin-overlay.open{ display:flex; }
.pin-card{
  width:100%; max-width:320px; background:var(--surface);
  border-radius:14px; padding:24px 22px 18px; text-align:center;
  box-shadow:0 20px 60px rgba(17,24,39,.3);
}
.pin-dots{ display:flex; gap:14px; justify-content:center; margin:18px 0 4px; }
.pin-dot{ width:13px; height:13px; border-radius:50%; border:2px solid var(--border); transition:.12s; }
.pin-dot.on{ background:var(--gold); border-color:var(--gold); }
.pin-err{ min-height:16px; font-size:12px; color:var(--danger); margin-top:6px; }
.pin-err.shake{ animation:pinshake .35s; }
@keyframes pinshake{ 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-6px)} 40%,80%{transform:translateX(6px)} }
.pin-keypad{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:12px; }
.pin-key{
  height:52px; border:1px solid var(--border); border-radius:10px;
  background:var(--bg); color:var(--tp); font-family:'JetBrains Mono';
  font-size:20px; cursor:pointer; transition:.1s;
}
.pin-key:active{ background:rgba(114,6,18,.10); transform:scale(.97); }
.pin-key--ghost{ font-family:'Inter'; font-size:13px; color:var(--ts); background:transparent; border-color:transparent; }