.extra-quantity-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0;border-bottom:1px solid #e7ddd0}.extra-quantity-row small{display:block;margin-top:5px;font-size:12px}.extra-stepper{display:flex;align-items:center;gap:12px;flex-shrink:0}.extra-stepper button{width:40px;height:40px;border:1px solid #10263a;background:transparent;border-radius:50%;font-size:22px;color:#10263a}.extra-stepper button:disabled{opacity:.3}.extra-stepper output{min-width:20px;text-align:center;font-weight:600}.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin:18px 0}.kpi-value{display:block;font-size:26px;margin-top:12px}.kpi-charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}.kpi-bars{display:grid;gap:9px}.kpi-bar-row{display:grid;grid-template-columns:minmax(70px,1fr) 2fr 55px;align-items:center;gap:10px;font-size:13px}.kpi-bar-row>span{overflow-wrap:anywhere}.kpi-bar-track{height:14px;border-radius:8px;background:#efe6dc;overflow:hidden}.kpi-bar-track>div{height:100%;background:#b98245;border-radius:8px}.appearance-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:20px}.appearance-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}.appearance-fields label{display:grid;gap:7px}.appearance-preview iframe{width:100%;min-height:620px;border:1px solid #d8cbbd;border-radius:16px}.appearance-preview{align-self:start;position:sticky;top:16px}input[type=color]{min-height:40px;width:100%;border:1px solid #d8cbbd;border-radius:8px}.appearance-layout button{margin:5px 0}.appearance-layout input[type=file]{display:block;max-width:100%;margin:10px 0}@media(max-width:800px){.appearance-layout{grid-template-columns:1fr}.appearance-preview{position:static}.extra-quantity-row{gap:8px}.extra-stepper{gap:8px}}

/* 1.6: bounded notices on phones and tablets, independent of theme radius. */
#toast.toast { width: max-content; max-width: min(480px, calc(100vw - 32px)); height: auto; min-height: 0; border-radius: 14px !important; padding: 14px 18px; box-sizing: border-box; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; text-align: left; }
.checkout-notice { padding: 16px; margin: 12px 0; border: 1px solid #d6b68a; border-radius: 12px !important; background: #fff7e9; color: #183044; font-size: 15px; line-height: 1.5; }
.checkout-notice strong { display: block; font-size: 16px; }
.checkout-notice p { margin: 6px 0 0; }
#paymentOptions .choice { width: 100%; text-align: left; margin-bottom: 8px; }
.stripe-payment-panel { position: fixed; z-index: 10000; left: 16px; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); max-width: 520px; max-height: 65vh; overflow: auto; margin: auto; padding: 20px; border: 2px solid #183044; border-radius: 16px !important; background: #fff8ef; color: #183044; box-shadow: 0 8px 40px #0005; line-height: 1.45; }
.stripe-payment-panel small { display: block; margin-top: 12px; }

/* 1.7: gentle intro exit; payment recovery uses the browser top layer. */
#introOverlay { opacity:1; transition:opacity 800ms ease; }
#introOverlay.fading { opacity:0; pointer-events:none; }
@media(prefers-reduced-motion:reduce){#introOverlay{transition-duration:150ms;}}
dialog.stripe-payment-panel { inset:auto 16px max(16px, env(safe-area-inset-bottom)); width:calc(100% - 32px); box-sizing:border-box; }
dialog.stripe-payment-panel::backdrop { background:rgba(8,24,37,.45); }
.favorite-card { padding:20px; margin:12px 0; border:1px solid #dacbbb; border-radius:16px; background:#fff; }
.favorite-card h3 { margin:0 0 8px; }