/**
 * BAS Shop Builder — Divi 5 module styles (bas-vendor-showcase)
 * Adapted from the /s/{slug} share page builder (bas-vendor-map 6.45.x).
 * All classes prefixed bas-sb-. Fonts fall back gracefully if Playfair
 * Display / Lato aren't loaded by the theme.
 */

.bas-sb{position:relative;overflow:hidden;background:#313131;border-radius:0;padding:52px clamp(18px,4vw,56px) 56px;font-family:'Lato',system-ui,sans-serif;color:#313131;box-sizing:border-box}
.bas-sb *,.bas-sb *::before,.bas-sb *::after{box-sizing:border-box}
.bas-sb img{max-width:100%}
.bas-sb-cart{position:absolute;right:-60px;top:-40px;width:300px;opacity:.07;pointer-events:none}
.bas-sb-grid{position:relative;display:grid;grid-template-columns:404px 1fr;gap:34px;align-items:start;max-width:1200px;margin:0 auto}

/* ── Left column ── */
.bas-sb-eyebrow{font:900 11px/1.4 'Lato',sans-serif;letter-spacing:.15em;text-transform:uppercase;color:#ffda3d}
.bas-sb-headline{font:italic 700 clamp(27px,3.2vw,40px)/1.05 'Playfair Display',Georgia,serif;color:#fff;margin:13px 0 0;letter-spacing:-.01em}
.bas-sb-sub{font:400 15px/1.6 'Lato',sans-serif;color:#c9c4b4;margin:14px 0 22px}
.bas-sb-panel{background:#3d3d3d;border-radius:20px;padding:22px;display:flex;flex-direction:column;gap:22px}
.bas-sb-label{font:900 10px/1 'Lato',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#9d9d9d}
.bas-sb-hint{font:italic 400 11px/1 'Lato',sans-serif;color:#7d7d7d}
.bas-sb-field-head{display:flex;align-items:baseline;gap:8px;margin-bottom:11px}
.bas-sb-namerow{display:flex;align-items:flex-end;gap:12px}
.bas-sb-namerow>img{width:64px;height:64px;object-fit:contain;flex:none;animation:bas-sb-bob 3s ease-in-out infinite}
.bas-sb-namefield{flex:1}
.bas-sb-namefield label{display:block;margin-bottom:8px}
.bas-sb-name{width:100%;background:#fffbef;border:1.5px solid #5a5a5a;border-radius:12px;padding:14px 16px;font:400 16px/1 'Lato',sans-serif;color:#313131;outline:none}

.bas-sb-layouts{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.bas-sb-layout{cursor:pointer;text-align:left;background:#fffbef;border:2px solid #e2dcc8;border-radius:13px;padding:8px;position:relative;transition:border-color .2s ease;font-family:'Lato',sans-serif;display:block;width:100%}
.bas-sb-layout.on{border-color:#70ac43}
.bas-sb-th{display:block;height:54px;border-radius:8px;overflow:hidden}
.bas-sb-layout-t{display:block;font:700 11.5px/1.2 'Lato',sans-serif;color:#313131;margin-top:7px}
.bas-sb-layout-d{display:block;font:400 9.5px/1.35 'Lato',sans-serif;color:#8a8a8a;margin-top:3px}
.bas-sb-layout-ck{position:absolute;top:5px;right:5px;width:17px;height:17px;border-radius:50%;background:#1d741b;color:#fff;font:700 10px/17px 'Lato',sans-serif;text-align:center;opacity:0;transition:opacity .2s ease}
.bas-sb-layout.on .bas-sb-layout-ck{opacity:1}

.bas-sb-uploads{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.bas-sb-upload{cursor:pointer;background:#fffbef;border:2px dashed #b9b29a;border-radius:13px;padding:11px 12px;display:flex;align-items:center;gap:10px;text-align:left;transition:border-color .2s ease;font-family:'Lato',sans-serif;width:100%}
.bas-sb-upload:hover{border-color:#70ac43}
.bas-sb-upload.has{border-style:solid;border-color:#70ac43}
.bas-sb-upload-prev{width:38px;height:38px;border-radius:9px;flex:none;background:#e9e3d1 center/cover no-repeat;display:flex;align-items:center;justify-content:center;font-size:17px;overflow:hidden}
.bas-sb-upload-prev.round{border-radius:50%}
.bas-sb-upload-t{font:700 11px/1.25 'Lato',sans-serif;color:#313131}
.bas-sb-upload-d{font:400 9px/1.3 'Lato',sans-serif;color:#8a8a8a}
.bas-sb-upload-note{font:italic 400 10.5px/1.4 'Lato',sans-serif;color:#9d9d9d;margin-top:8px}

.bas-sb-swatches{display:flex;flex-wrap:wrap;gap:8px}
.bas-sb-swatch{cursor:pointer;width:32px;height:32px;border-radius:50%;border:2px solid rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;padding:0;transition:border-color .2s ease}
.bas-sb-swatch.on{border-color:#fffbef}
.bas-sb-swatch span{font:700 13px/1 'Lato',sans-serif;color:#fff;opacity:0}
.bas-sb-swatch.on span{opacity:1}
.bas-sb-hexrow{display:flex;align-items:center;gap:10px;margin-top:13px}
.bas-sb-hexdot{width:26px;height:26px;border-radius:50%;flex:none;background:#70ac43;border:1.5px solid #5a5a5a;transition:background .3s ease}
.bas-sb-hex{width:104px;background:#313131;border:1.5px solid #5a5a5a;border-radius:10px;padding:9px 11px;font:400 12px/1 'Lato',sans-serif;color:#fffbef;outline:none}
.bas-sb-reset{cursor:pointer;background:none;border:0;padding:0;font:700 11px/1.3 'Lato',sans-serif;color:#c2e86b;text-decoration:underline}

.bas-sb-cards{display:flex;gap:8px}
.bas-sb-cards button{cursor:pointer;flex:1;font:900 10.5px/1 'Lato',sans-serif;letter-spacing:.09em;text-transform:uppercase;padding:11px 8px;border-radius:999px;border:1.5px solid #5a5a5a;background:transparent;color:#c9c4b4;transition:all .2s ease}
.bas-sb-cards button.on{background:#70ac43;border-color:#70ac43;color:#fff}
.bas-sb-status{display:flex;align-items:center;gap:10px;font:400 13px/1.5 'Lato',sans-serif;color:#c2e86b;min-height:20px}

/* ── Preview ── */
.bas-sb-preview{background:#fffbef;border-radius:20px;overflow:hidden;box-shadow:0 22px 44px rgba(0,0,0,.4)}
.bas-sb-pv-bar{display:flex;align-items:center;gap:7px;padding:9px 13px;background:#f2eee1;border-bottom:1px solid #e2dcc8}
.bas-sb-pv-dot{width:8px;height:8px;border-radius:50%;background:#d8d2bd;flex:none}
.bas-sb-pv-url{margin-left:8px;flex:1;min-width:0;background:#fff;border:1px solid #e2dcc8;border-radius:999px;padding:4px 11px;font:400 10px/1.3 'Lato',sans-serif;color:#8a8a8a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bas-sb-pv-url b{color:#313131;font-weight:700}
.bas-sb-pv-tag{font:900 8.5px/1 'Lato',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#8a8a8a;flex:none}
.bas-sb-pv-body{min-height:612px;position:relative;background:#fffbef}
.bas-sb-step{opacity:0;transform:translateY(16px);transition:opacity .45s ease,transform .55s cubic-bezier(.22,1,.36,1)}
.bas-sb-step.in{opacity:1;transform:translateY(0)}
.bas-sb-pv-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;transition:opacity .4s ease}
.bas-sb-pv-empty.gone{opacity:0;pointer-events:none}
.bas-sb-pv-empty img{width:92px;height:92px;object-fit:contain;animation:bas-sb-bob 3.2s ease-in-out infinite}
.bas-sb-pv-empty-eyebrow{font:900 9px/1 'Lato',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#8a8a8a;margin-top:14px}
.bas-sb-pv-empty-head{font:italic 700 24px/1.15 'Playfair Display',Georgia,serif;color:#313131;margin-top:9px}
.bas-sb-pv-empty-body{font:400 12.5px/1.6 'Lato',sans-serif;color:#5a5a5a;max-width:320px;margin-top:8px}
.bas-sb-pv-empty-arrow{font-size:22px;color:#70ac43;margin-top:12px;animation:bas-sb-bob 2.4s ease-in-out infinite}
.bas-sb-claim{display:block;text-align:center;margin:0 22px 18px;color:#fff !important;font:900 9.5px/1 'Lato',sans-serif;letter-spacing:.11em;text-transform:uppercase;padding:12px;border-radius:999px;background:#70ac43;box-shadow:0 3px 0 #4f7a2f;text-decoration:none !important}
.bas-sb-pv-foot{margin:0 22px 16px;display:flex;align-items:center;gap:10px;border-top:1px solid #e7e2d2;padding-top:13px;font:400 10.5px/1 'Lato',sans-serif;color:#8a8a8a}
.bas-sb-pv-foot b{color:#1d741b;font-weight:900}

@keyframes bas-sb-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media (prefers-reduced-motion:reduce){.bas-sb *{animation:none !important}}

@media (max-width:1023px){.bas-sb-grid{grid-template-columns:1fr}.bas-sb-preview{max-width:560px;margin:0 auto}}
@media (max-width:879px){.bas-sb{padding:26px 18px 30px}.bas-sb-panel{padding:16px;gap:16px}.bas-sb-layout-d{display:none}.bas-sb-pv-body{min-height:440px}}