/* Simple case page (approved canvas, Nov 2026). Builds on wallset.css. */
.dbxc-buy{display:flex;flex-direction:column}
.dbxc-intro{margin:6px 0 12px;color:#C9CBDC;font-size:15.5px;line-height:1.6;max-width:560px}
.dbxc-pricerow{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid #262940}
.dbxc-badge{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border-radius:999px;font-size:15px;font-weight:800;line-height:1.3;color:#fff;background:rgba(46,204,113,.14);border:2px solid #2ECC71}
.dbxc-badge i{flex:none;width:11px;height:11px;border-radius:50%;background:#2ECC71;box-shadow:0 0 0 4px rgba(46,204,113,.25)}
.dbxc-badge.is-low{background:rgba(255,179,71,.12);border-color:#FFB347}.dbxc-badge.is-low i{background:#FFB347;box-shadow:0 0 0 4px rgba(255,179,71,.25)}
.dbxc-badge.is-out{background:rgba(255,107,138,.12);border-color:#FF6B8A}.dbxc-badge.is-out i{background:#FF6B8A;box-shadow:0 0 0 4px rgba(255,107,138,.25)}
.dbxc-lab{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#B9BBCB;font-weight:700}
.dbxc-dims{margin-bottom:16px}
.dbxc-dims-h{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}
.dbxc-dims-h [data-dbx-units]{margin:0}
.dbxc-dims-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:#1E2032;border:1px solid #2A2D45;border-radius:14px}
.dbxc-dims-g>div{padding:14px 16px;display:flex;flex-direction:column;gap:6px;min-width:0}
.dbxc-dims-g>div+div{border-left:1px solid #2E3147}
.dbxc-dims-g b{font-size:14.5px;line-height:1.4;color:#fff}.dbxc-dims-g small{font-size:12px;color:#B9BBCB}
.dbxc-opts{display:flex;flex-wrap:wrap;gap:22px;padding:18px;margin-bottom:16px;background:#181A2A;border:1px solid #2A2D45;border-radius:16px}
.dbxc-grp{flex:1 1 260px;min-width:0;border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.dbxc-grp legend{padding:0;margin-bottom:10px;font-size:12px;font-weight:800;color:#C9CBDC}
.dbxc-cards{display:grid;gap:8px}.dbxc-cards-2{grid-template-columns:repeat(2,minmax(0,1fr))}.dbxc-cards-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.dbxc-card{all:unset;box-sizing:border-box;cursor:pointer;min-height:54px;padding:8px 6px;border-radius:10px;border:1px solid #3A3E5C;background:#11121C;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center}
.dbxc-card .dbxc-ct{display:flex;align-items:center;justify-content:center;gap:8px;font-size:13.5px;font-weight:800;line-height:1.25}
.dbxc-card .dbxc-ct i{flex:none;width:11px;height:11px;border-radius:50%;border:1px solid rgba(11,12,20,.35)}
.dbxc-card small{font-size:11px;color:#B9BBCB}
.dbxc-card:hover{border-color:#23DAF7}
.dbxc-card:focus-visible{outline:2px solid #23DAF7;outline-offset:2px}
.dbxc-card.on{background:#23DAF7;border-color:#23DAF7;color:#0B0C14}.dbxc-card.on small{color:#0B0C14}
.dbxc-card[disabled]{opacity:.45;cursor:not-allowed}.dbxc-card[disabled]:hover{border-color:#3A3E5C}
.dbxc-note{margin:0;font-size:12px;line-height:1.6;color:#B9BBCB}
.dbxc-warn{margin:0 0 12px;padding:12px 14px;border-radius:12px;background:rgba(255,179,71,.12);border:1px solid #FFB347;color:#fff;font-size:14px;line-height:1.5}
.dbxc-buyrow{display:flex;gap:10px;align-items:stretch}
.dbxc-qty{flex:none;border-color:#2E3147;background:#181A2A}
.dbxc-qty button{width:44px;height:52px}.dbxc-qty output{width:34px;font-size:16px}
.dbxc-buyrow .ws-add{flex:1;width:auto}
#dbx-pay-slot{margin-top:12px}#dbx-pay-slot:empty{display:none}
.dbxc-fin{margin-top:4px;border:1px solid #2A2D45;border-radius:14px;overflow:hidden}
.dbxc-fin .ws-fin{margin:0;border:0;border-radius:0}.dbxc-fin .ws-fin+.ws-fin{border-top:1px solid #2A2D45}
.dbxc-wd{margin:16px 0 0}.dbxc-wd a{color:#23DAF7;font-weight:700}
@media (max-width:900px){.dbxc-dims-g{grid-template-columns:1fr}.dbxc-dims-g>div+div{border-left:0;border-top:1px solid #2E3147}}
@media (max-width:420px){.dbxc-cards-2{grid-template-columns:1fr}}
/* v2: buy row on one line, bigger stepper, points beside the button */
.dbxc-buyrow{flex-wrap:wrap;align-items:center}
.dbxc-qty{height:54px;border-radius:999px}
.dbxc-qty button{width:52px;height:54px;font-size:22px;color:#fff}
.dbxc-qty output{width:40px;font-size:18px}
.dbxc-buyrow .ws-add{flex:1 1 240px;max-width:360px;height:54px}
.dbxc-buyrow #dbx-pay-slot{margin:0;flex:0 1 auto}
.dbxc-buyrow #dbx-pay-slot .dbxr-pline-wrap,.dbxc-buyrow #dbx-pay-slot>*{margin:0!important}
/* accessories: one row per product, option picker for packs and colours */
.dbxc-acc .ws-acc-t{gap:6px}
.dbxc-var{max-width:100%;min-height:34px;padding:0 30px 0 12px;border-radius:999px;border:1px solid #33375A;background:#11121C;color:#fff;font:600 13px Montserrat,Arial,sans-serif}
.dbxc-stl{font-style:normal;font-size:12px;font-weight:700;color:#3DDC84}.dbxc-stl.onbackorder{color:#E8B931}
/* Wall Designer banner */
.dbxc .dbxc-dz{margin-top:0!important;padding-top:88px}
/* detail: bigger dimensions drawing */
.dbxc .ws-det{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px}
.dbxc .ws-det-img{max-width:560px}
@media (max-width:900px){.dbxc .dbxc-dz{padding-top:56px}.dbxc .ws-det{grid-template-columns:1fr}.dbxc-buyrow .ws-add{max-width:none}}
/* v3: accessories add one row at a time */
.dbxc-accbuy{display:flex;align-items:center;gap:8px}
.dbxc-accadd{all:unset;box-sizing:border-box;cursor:pointer;height:34px;padding:0 16px;border-radius:999px;background:#fff;color:#0B0C14;font-weight:800;font-size:13px;display:inline-flex;align-items:center}
.dbxc-accadd:hover{background:#23DAF7}.dbxc-accadd:focus-visible{outline:2px solid #23DAF7;outline-offset:2px}
.dbxc-accadd[disabled]{opacity:.6;cursor:wait}.dbxc-accadd.done{background:#2ECC71;color:#0B0C14}
.dbxc-acc.on{border-color:#2A2D45}
.dbxc-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:9999;max-width:min(92vw,560px);padding:14px 18px;border-radius:14px;background:#1E2032;border:1px solid #2ECC71;color:#fff;font-size:14px;line-height:1.5;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.dbxc-toast.bad{border-color:#FF6B8A}.dbxc-toast a{color:#23DAF7;font-weight:800;margin-left:6px}
.dbxc-buyrow .dbxr-pline{font-size:14px;color:#D9DAE8}
.dbxc-ten{margin-top:8px;padding-top:12px;border-top:1px solid #262940;display:flex;flex-direction:column;gap:8px}
.ws-add.busy{opacity:.6;cursor:wait}
/* v4 (2.30.1): phones – the accessory rows were wider than the screen (a long option name in a pack/colour picker set
   the grid column's minimum width), so the price, quantity and Add button sat off the right edge and were cut off.
   Let the column shrink, and put price · quantity · Add on their own line under the name. */
@media (max-width:900px){
.ws-acc-g{grid-template-columns:minmax(0,1fr)}
.dbxc-acc{flex-wrap:wrap}
.dbxc-acc .ws-acc-t{flex:1 1 0}
.dbxc-acc .dbxc-var{width:100%}
.dbxc-acc .ws-acc-r{flex:1 1 100%;flex-direction:row;justify-content:space-between;align-items:center}
}
.dbxc-power.is-off .dbxc-cards,.dbxc-power.is-off .dbxc-note,.dbxc-power.is-off .dbxc-ten{opacity:.35}
.dbxc-spotpower{margin:0 0 4px;padding:10px 12px;border-radius:10px;background:rgba(35,218,247,.1);border:1px solid #23DAF7;color:#fff;font-size:13px;line-height:1.5}