/* Same theme as the hexagon configurator. */
@import url('/medalleros/styles.css');
@import url('/medalleros/navigation/header.css');
.showcase-embed,.showcase-embed body{height:100%;margin:0;overflow:hidden}.showcase-embed #route-site-header,.showcase-embed aside,.showcase-embed .visual nav,.showcase-embed .visual>.proxy,.showcase-embed .visual>.hint{display:none!important}.showcase-embed body main{display:block;width:100%;height:100dvh;min-height:0;padding:0;margin:0}.showcase-embed .visual{width:100%;height:100dvh;min-height:0}.showcase-embed .visual #viewer{height:100%;min-height:0}
.visual{position:relative;min-height:0;overflow:hidden;background:radial-gradient(circle at 50% 30%,#fff,#dbe2de)}
.visual #viewer{height:100%;background:transparent}
.visual nav{position:absolute;z-index:2;top:18px;left:18px;right:18px;display:flex;justify-content:flex-end;flex-wrap:wrap;gap:.5rem}
.visual nav button{border:1px solid #c7cfca;background:rgba(255,255,255,.9);padding:.65rem .9rem;border-radius:999px;font:700 .72rem system-ui;color:#263139;cursor:pointer;box-shadow:0 8px 24px rgba(28,39,34,.1)}
.visual nav button.active{border-color:#17212a;background:#17212a;color:#fff}
.proxy{position:absolute;bottom:40px;left:12px;right:12px;text-align:center;font-size:.75rem;font-weight:500}.proxy input{display:inline;width:auto;margin:0 .4rem 0 0}
.visual>.hint{position:absolute;bottom:10px;left:0;right:0;text-align:center;margin:0}
#loading{position:absolute;z-index:4;inset:0;display:grid;place-items:center;background:rgba(239,243,241,.72);color:#17212a;font:500 .85rem system-ui;padding:2rem;text-align:center}
[hidden],#loading[hidden]{display:none!important}
.hint{color:#6a746d;font-size:.75rem;line-height:1.5}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}.fields label:nth-child(-n+2){grid-column:1/-1}
details{margin:1.5rem 0;padding:1.1rem;border:1px solid #d8dfda;background:#f7f8f6}summary{font:700 .85rem system-ui;cursor:pointer}
.primary{border:0;border-radius:3px;padding:1rem;width:100%;background:#17212a;color:#fff;font:800 .8rem system-ui;cursor:pointer}
button:disabled{opacity:.5;cursor:wait}#error{color:#a83b2b;font-size:.8rem;line-height:1.5}
@media(max-width:800px){.visual{height:55vh;min-height:450px}.visual #viewer{height:100%;min-height:0}}

.custom-datum{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:1rem}.fields .custom-datum label{grid-column:auto}#update-status{font-size:.8rem;line-height:1.5;color:#42594b}#update{margin-top:1rem}aside[aria-busy="true"]{cursor:progress}

.update-controls{position:sticky;top:0;z-index:3;background:#fff;padding:.4rem 0 .8rem;border-bottom:1px solid #e2e7e3;margin-bottom:1.2rem}.update-controls #update{margin-top:0}.update-controls #update-status{margin:.4rem 0}

.price-summary{border:1px solid #dce1df;border-radius:10px;padding:1.2rem;margin:1.4rem 0}.price-summary h2{font-size:1.25rem;margin:0 0 1rem}.price-summary>div{display:flex;justify-content:space-between;gap:1rem}.price-summary ul{list-style:none;padding:0;margin:.7rem 0;font-size:.85rem}.price-summary li{display:flex;justify-content:space-between;gap:1rem;margin:.45rem 0}.price-total{border-top:1px solid #dce1df;padding-top:.9rem;font-size:1.1rem}.price-summary .hint{margin-bottom:0}

#rear-type-status.text-error{color:#a83b2b}

.purchase-controls{display:grid;gap:.7rem;margin:1.5rem 0}.purchase-controls p{font-size:.85rem;line-height:1.5}.purchase-controls #add-to-cart{background:#eb3d35}.cart-confirmation{position:fixed;z-index:20;bottom:2rem;right:2rem;max-width:350px;padding:1.5rem;background:#fff;border:1px solid #b8cdbb;box-shadow:0 8px 40px #0003}.cart-confirmation strong{font-size:1.2rem}.cart-confirmation a,.cart-confirmation button{margin-right:.7rem}

.city-recovery{margin:1.3rem 0;padding:1.1rem;border:1px solid #d6924b;background:#fff7e8}.city-recovery p{font-size:.85rem;line-height:1.5}.city-recovery button{margin-top:1rem;padding:.8rem;border:0;background:#17212a;color:white;font:700 .8rem system-ui;cursor:pointer}

/* The approved frame uses the metric values without separate captions. */
.custom-datum{display:block}.custom-datum>label[hidden]{display:none}

/* Keep controls outside the model and the action at the bottom of the form. */
.visual{display:flex;flex-direction:column}
.visual nav{position:relative;inset:auto;order:0;flex:none;margin:12px;align-items:center;gap:6px;justify-content:flex-end}
.visual nav .proxy{position:static;inset:auto;margin:0 auto 0 0;display:flex;align-items:center;max-width:180px;text-align:left;font-size:.7rem;line-height:1.3;background:#fffffff0;padding:8px;border-radius:8px}
.visual #viewer{order:1;flex:1;min-height:0;height:auto;position:relative}
.visual>.hint{order:2;position:static;flex:none;padding:8px}
aside{padding-bottom:140px}
.update-controls{position:fixed;top:auto;bottom:0;right:0;width:40%;box-sizing:border-box;z-index:8;margin:0;padding:10px 22px;background:#fff;border-top:1px solid #d8dfda;border-bottom:0;box-shadow:0 -4px 15px #0001}
.update-controls #update-status{margin:0 0 6px;font-size:.75rem}.update-controls #update{padding:12px}
@media(max-width:800px){.update-controls{width:100%;padding:8px 14px}.visual nav{margin:8px}.visual nav button{padding:8px}.visual nav .proxy{max-width:145px;font-size:.65rem}.visual{min-height:440px}aside{padding-bottom:145px}}