/* 7khalas product editor (ops catalogue): a right-hand panel with big tap targets. */
.kpe { position: fixed; inset: 0; z-index: 1080; background: rgba(20, 24, 16, .45); display: none; justify-content: flex-end; }
.kpe.open { display: flex; }
.kpe-panel { width: min(760px, 100%); height: 100%; background: #fffdf7; display: flex; flex-direction: column; box-shadow: -20px 0 40px -20px rgba(0,0,0,.4); animation: kpe-in .22s ease-out; }
@keyframes kpe-in { from { transform: translateX(40px); opacity: .4; } to { transform: none; opacity: 1; } }
.kpe-top { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid #e7dfca; }
.kpe-top h2 { font-size: 1.35rem; margin: 0; }
.kpe-x { border: 0; background: #f1ead6; width: 40px; height: 40px; border-radius: 50%; font-size: 1.3rem; }
.kpe-body { flex: 1; overflow-y: auto; padding: 1rem 1.25rem 1.5rem; }
.kpe-step { margin-bottom: 1.4rem; }
.kpe-step h3 { font-size: 1.05rem; display: flex; align-items: center; gap: .55rem; margin: 0 0 .7rem; }
.kpe-step h3 span { width: 28px; height: 28px; border-radius: 50%; background: #3d8b2f; color: #fff; display: grid; place-items: center; font-size: .9rem; flex: 0 0 auto; }
.kpe-tiles { display: grid; gap: .55rem; }
.kpe-tiles--sec { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.kpe-tiles--role { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.kpe-tile { border: 2px solid #e7dfca; background: #fff; border-radius: 16px; padding: .7rem .5rem; display: flex; flex-direction: column; align-items: center; gap: .35rem; text-align: center; cursor: pointer; transition: border-color .12s, transform .12s; }
.kpe-tile:active { transform: scale(.97); }
.kpe-tile b { font-weight: 600; font-size: .92rem; line-height: 1.15; }
.kpe-tile.on { border-color: #3d8b2f; background: #eef6e6; box-shadow: 0 0 0 3px rgba(124,194,67,.25); }
.kpe-ic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 1.5rem; }
.kpe-role { align-items: flex-start; text-align: left; padding: .8rem .85rem; }
.kpe-role > .mdi { font-size: 1.6rem; color: #3d8b2f; line-height: 1; }
.kpe-role small { color: #6b6255; line-height: 1.25; }
.kpe-flags { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; margin-top: .8rem; }
.kpe-flag { display: flex; align-items: center; gap: .35rem; cursor: pointer; }
.kpe-flag input { width: 18px; height: 18px; }
.kpe-help { color: #6b6255; font-size: .9rem; margin: .8rem 0 .5rem; }
.kpe-group { border: 1px solid #e7dfca; border-radius: 14px; padding: .65rem .7rem; margin-bottom: .6rem; background: #fff; }
.kpe-group-top { display: flex; gap: .4rem; margin-bottom: .45rem; } .kpe-group-top input { font-weight: 600; }
.kpe-choice { display: flex; align-items: center; gap: .4rem; margin-bottom: .35rem; }
.kpe-dot { width: 18px; flex: 0 0 auto; color: #e0a92e; text-align: center; }
.kpe-extra { width: 120px; flex: 0 0 auto; }
.kpe-gap { width: 34px; flex: 0 0 auto; }
.kpe-foot { display: flex; align-items: center; gap: .5rem; padding: .85rem 1.25rem; border-top: 1px solid #e7dfca; background: #fbf7ec; }
.kpe-sum { flex: 1; min-width: 0; color: #4b4438; font-size: .92rem; }
@media (max-width: 575px) { .kpe-sum { display: none; } .kpe-extra { width: 96px; } }
.kpe-house { margin: 1rem 0 .5rem; } .kpe-house b { display: block; } .kpe-house small { color: #6b6255; }
.kpe-ph-list { display: flex; flex-wrap: wrap; gap: .5rem; } .kpe-ph { position: relative; width: 84px; } .kpe-ph img { width: 84px; height: 84px; object-fit: contain; background: #fff; border: 1px solid #e7dfca; border-radius: 12px; } .kpe-ph em { display: block; font-size: .72rem; text-align: center; font-style: normal; color: #6b6255; } .kpe-ph button { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: #1d1915; color: #fff; }