/*
 * M.A.V.E. — Elektrický ohradník konfigurátor
 * Tyto styly jsou namespace-ované pod .mave-configurator,
 * neovlivní tedy zbytek webu. Nahrát přes FTP do /user/documents/.
 */

:root{
    --bg:        #FFFFFF;
    --bg-warm:   #F5F7FB;
    --surface:   #FFFFFF;
    --ink:       #0F172A;
    --ink-soft:  #475569;
    --ink-muted: #94A3B8;
    --line:      #E2E8F0;
    --line-soft: #F1F5F9;
    --primary:   #1E3A8A;
    --primary-2: #2950C8;
    --primary-soft:#EEF2FF;
    --accent:    #1E3A8A;
    --accent-soft:#EEF2FF;
    --danger:    #B91C1C;
    --radius:    10px;
    --radius-sm: 6px;
    --shadow-sm: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.03);
    --shadow-md: 0 2px 4px rgba(15,23,42,.04), 0 8px 20px rgba(15,23,42,.06);
    --shadow-lg: 0 4px 12px rgba(15,23,42,.06), 0 20px 40px rgba(15,23,42,.08);
  }

@keyframes pulse{
    0%,100%{opacity:1;transform:scale(1)}
    50%{opacity:.5;transform:scale(1.3)}
  }

.mave-configurator {
  font-family:'Nunito', system-ui, sans-serif;
    background:var(--bg);
    color:var(--ink);
    font-size:16px;
    line-height:1.55;
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
}

.mave-configurator *{box-sizing:border-box}

.mave-configurator .app{
    max-width:100%;
    margin:0 auto;
    padding:28px 0 80px;
  }

/* ===== Header ===== */

.mave-configurator .topbar{
    display:none;
  }

/* ===== Layout ===== */

.mave-configurator .stage{
    display:grid;
    grid-template-columns:1fr 360px;
    gap:32px;
    align-items:start;
  }

.mave-configurator .stage.single{grid-template-columns:1fr; max-width:1100px; margin:0 auto}

@media (max-width:960px){
    .mave-configurator .stage{grid-template-columns:1fr}
  }

/* ===== Panels ===== */

.mave-configurator .panel{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:36px 40px;
    box-shadow:var(--shadow-sm);
  }

@media (max-width:640px){
    .mave-configurator .panel{padding:24px 20px}
  }

/* ===== Progress ===== */

.mave-configurator .progress-wrap{
    margin-bottom:24px;
    display:flex;
    align-items:center;
    gap:16px;
  }

.mave-configurator .progress-bar{
    flex:1;
    height:3px;
    background:var(--line-soft);
    border-radius:999px;
    overflow:hidden;
    position:relative;
  }

.mave-configurator .progress-bar > span{
    display:block;
    height:100%;
    background:linear-gradient(90deg,var(--primary),var(--primary-2));
    border-radius:999px;
    transition:width .5s cubic-bezier(.22,1,.36,1);
  }

.mave-configurator .progress-text{
    font-size:12px;
    color:var(--ink-muted);
    font-weight:500;
    letter-spacing:.06em;
    text-transform:uppercase;
    white-space:nowrap;
  }

/* ===== Typography ===== */

.mave-configurator h1.display{
    font-family:'Nunito', system-ui, sans-serif;
    font-weight:400;
    font-size:clamp(30px,4.5vw,48px);
    line-height:1.1;
    letter-spacing:-.02em;
    margin:0 0 16px;
    color:var(--ink);
  }

.mave-configurator h1.display em{
    font-style:italic;
    font-weight:400;
    color:var(--primary);
  }

.mave-configurator h2.step-heading{
    font-family:'Nunito', system-ui, sans-serif;
    font-weight:450;
    font-size:clamp(26px,3.5vw,38px);
    letter-spacing:-.02em;
    line-height:1.15;
    margin:0 0 10px;
  }

.mave-configurator h2.step-heading .step-num{
    font-family:'Nunito', system-ui, sans-serif;
    font-size:12px;
    color:var(--primary);
    font-weight:600;
    letter-spacing:.12em;
    text-transform:uppercase;
    display:block;
    margin-bottom:10px;
  }

.mave-configurator .lede{
    font-size:17px;
    color:var(--ink-soft);
    max-width:60ch;
    margin:0 0 36px;
  }

.mave-configurator .hint{
    font-size:14px;
    color:var(--ink-muted);
    margin-top:12px;
  }

/* ===== Option cards (big tile picker) ===== */

.mave-configurator .options-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
    gap:14px;
    margin-top:8px;
  }

.mave-configurator .options-grid.cols-2{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}

.mave-configurator .options-grid.cols-3{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}

.mave-configurator .tile{
    position:relative;
    background:var(--surface);
    border:1.5px solid var(--line);
    border-radius:var(--radius);
    padding:22px 20px 20px;
    cursor:pointer;
    transition:all .2s ease;
    text-align:left;
    font-family:inherit;
    font-size:inherit;
    color:inherit;
    display:flex;
    flex-direction:column;
    gap:10px;
    min-height:140px;
  }

.mave-configurator .tile:hover{
    border-color:var(--primary);
    transform:translateY(-2px);
    box-shadow:var(--shadow-md);
  }

.mave-configurator .tile.active{
    border-color:var(--primary);
    background:var(--primary-soft);
    box-shadow:0 0 0 3px rgba(47,74,42,.12);
  }

.mave-configurator .tile.active::after{
    content:'';
    position:absolute;
    top:14px;right:14px;
    width:22px;height:22px;
    border-radius:50%;
    background:var(--primary);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-size:14px;
    background-repeat:no-repeat;
    background-position:center;
  }

.mave-configurator .tile .ico{
    width:44px;height:44px;
    display:flex;align-items:center;justify-content:center;
    color:var(--primary);
  }

.mave-configurator .tile .ico svg{width:100%;height:100%}

.mave-configurator .tile .tile-title{
    font-family:'Nunito', system-ui, sans-serif;
    font-weight:500;
    font-size:20px;
    letter-spacing:-.01em;
    line-height:1.2;
  }

.mave-configurator .tile .tile-desc{
    font-size:13px;
    color:var(--ink-soft);
    line-height:1.45;
  }

.mave-configurator .tile .tile-meta{
    margin-top:auto;
    font-size:12px;
    color:var(--ink-muted);
    letter-spacing:.04em;
    text-transform:uppercase;
    font-weight:500;
  }

/* ===== Compact pill picker ===== */

.mave-configurator .pills{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
  }

.mave-configurator .pill{
    padding:10px 16px;
    border:1.5px solid var(--line);
    background:var(--surface);
    border-radius:999px;
    cursor:pointer;
    font-family:inherit;
    font-size:14px;
    font-weight:500;
    transition:all .15s ease;
    color:var(--ink);
  }

.mave-configurator .pill:hover{border-color:var(--primary)}

.mave-configurator .pill.active{
    background:var(--primary);
    color:white;
    border-color:var(--primary);
  }

/* ===== Number input ===== */

.mave-configurator .field{margin-bottom:22px}

.mave-configurator .field-label{
    display:block;
    font-weight:600;
    font-size:15px;
    margin-bottom:6px;
  }

.mave-configurator .field-help{
    display:block;
    font-size:13px;
    color:var(--ink-muted);
    margin-bottom:10px;
  }

.mave-configurator .num-input{
    display:flex;
    align-items:center;
    gap:0;
    max-width:220px;
    border:1.5px solid var(--line);
    border-radius:var(--radius-sm);
    overflow:hidden;
    background:var(--surface);
  }

.mave-configurator .num-input:focus-within{border-color:var(--primary)}

.mave-configurator .num-input button{
    width:44px;height:44px;
    border:none;background:var(--bg-warm);
    cursor:pointer;
    font-size:20px;
    color:var(--primary);
    transition:background .15s;
    font-family:inherit;
  }

.mave-configurator .num-input button:hover{background:var(--line-soft)}

.mave-configurator .num-input input{
    flex:1;
    border:none;
    text-align:center;
    font-size:17px;
    font-weight:600;
    padding:10px;
    background:transparent;
    font-family:inherit;
    color:var(--ink);
    width:100%;
    outline:none;
  }

.mave-configurator .num-input .unit{
    padding:0 14px;
    color:var(--ink-muted);
    font-size:14px;
    background:var(--bg-warm);
    height:44px;
    display:flex;align-items:center;
    border-left:1px solid var(--line);
  }

/* ===== Slider ===== */

.mave-configurator .slider-group{margin:18px 0 8px}

.mave-configurator .slider-row{
    display:flex;align-items:baseline;justify-content:space-between;
    margin-bottom:10px;
  }

.mave-configurator .slider-value{
    font-family:'Nunito', system-ui, sans-serif;
    font-size:34px;
    font-weight:500;
    color:var(--primary);
    letter-spacing:-.02em;
  }

.mave-configurator .slider-value small{
    font-family:'Nunito', system-ui, sans-serif;
    font-size:13px;color:var(--ink-muted);font-weight:500;
    margin-left:6px;
  }

.mave-configurator input[type=range]{
    -webkit-appearance:none;
    width:100%;
    height:6px;
    background:var(--line-soft);
    border-radius:999px;
    outline:none;
  }

.mave-configurator input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none;
    width:22px;height:22px;border-radius:50%;
    background:var(--primary);
    cursor:pointer;
    border:3px solid white;
    box-shadow:0 1px 4px rgba(0,0,0,.2);
  }

.mave-configurator input[type=range]::-moz-range-thumb{
    width:22px;height:22px;border-radius:50%;
    background:var(--primary);
    cursor:pointer;
    border:3px solid white;
  }

/* ===== Nav buttons ===== */

.mave-configurator .nav{
    margin-top:36px;
    display:flex;
    gap:12px;
    justify-content:space-between;
    align-items:center;
    padding-top:24px;
    border-top:1px solid var(--line-soft);
  }

.mave-configurator .btn{
    padding:14px 26px;
    border-radius:999px;
    font-family:inherit;
    font-size:15px;
    font-weight:500;
    cursor:pointer;
    transition:all .15s ease;
    border:1.5px solid transparent;
    display:inline-flex;align-items:center;gap:8px;
    line-height:1;
  }

.mave-configurator .btn-primary{
    background:var(--primary);
    color:white;
  }

.mave-configurator .btn-primary:hover{
    background:var(--primary-2);
    transform:translateY(-1px);
    box-shadow:var(--shadow-md);
  }

.mave-configurator .btn-primary:disabled{
    background:var(--line);
    color:var(--ink-muted);
    cursor:not-allowed;
    transform:none;
    box-shadow:none;
  }

.mave-configurator .btn-ghost{
    background:transparent;
    color:var(--ink-soft);
    border-color:var(--line);
  }

.mave-configurator .btn-ghost:hover{border-color:var(--ink-soft);color:var(--ink)}

.mave-configurator .btn-accent{
    background:var(--surface);
    color:var(--primary);
    border-color:var(--primary);
  }

.mave-configurator .btn-accent:hover{
    background:var(--primary-soft);
    transform:translateY(-1px);
  }

/* ===== Summary sidebar ===== */

.mave-configurator .summary{
    position:sticky;
    top:24px;
    background:var(--surface);
    border:1px solid var(--line-soft);
    border-radius:var(--radius);
    padding:26px 28px;
    box-shadow:var(--shadow-sm);
  }

.mave-configurator .summary h3{
    font-family:'Nunito', system-ui, sans-serif;
    font-weight:500;
    font-size:20px;
    margin:0 0 14px;
    letter-spacing:-.01em;
    display:flex;align-items:baseline;gap:8px;
  }

.mave-configurator .summary h3 .dot{
    width:6px;height:6px;border-radius:50%;
    background:var(--primary);
    display:inline-block;
  }

.mave-configurator .sum-list{
    list-style:none;padding:0;margin:0 0 18px;
    display:flex;flex-direction:column;gap:10px;
  }

.mave-configurator .sum-list li{
    display:flex;justify-content:space-between;
    padding:10px 0;
    border-bottom:1px dashed var(--line-soft);
    font-size:14px;
    gap:16px;
  }

.mave-configurator .sum-list li:last-child{border-bottom:none}

.mave-configurator .sum-list .lbl{color:var(--ink-muted);min-width:0}

.mave-configurator .sum-list .val{color:var(--ink);font-weight:500;text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis}

.mave-configurator .sum-list .val.empty{color:var(--ink-muted);font-style:italic;font-weight:400}

.mave-configurator .sum-price{
    background:var(--primary-soft);
    padding:14px 16px;
    border-radius:var(--radius-sm);
    display:flex;align-items:baseline;justify-content:space-between;
    margin-top:6px;
  }

.mave-configurator .sum-price .lbl{
    font-size:13px;color:var(--primary);
    text-transform:uppercase;letter-spacing:.08em;font-weight:600;
  }

.mave-configurator .sum-price .val{
    font-family:'Nunito', system-ui, sans-serif;
    font-weight:500;
    font-size:22px;
    letter-spacing:-.02em;
    color:var(--primary);
  }

.mave-configurator .sum-tip{
    margin-top:14px;
    font-size:12px;
    color:var(--ink-muted);
    display:flex;gap:8px;align-items:flex-start;
  }

.mave-configurator .sum-tip svg{flex-shrink:0;margin-top:1px;color:var(--primary)}

/* ===== Loading screen ===== */

.mave-configurator .loading-panel{
    padding:80px 56px 76px !important;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:18px;
  }

.mave-configurator .loading-spinner{
    color:var(--primary);
    animation:spin 1.1s linear infinite;
    transform-origin:50% 50%;
  }

@keyframes spin{
    from{transform:rotate(0deg)}
    to{transform:rotate(360deg)}
  }

.mave-configurator .loading-title{
    font-family:'Nunito', system-ui, sans-serif;
    font-size:24px;
    font-weight:700;
    color:var(--ink);
    margin:8px 0 0;
    line-height:1.3;
  }

.mave-configurator .loading-detail{
    font-size:14px;
    color:var(--ink-soft);
    margin:0;
    line-height:1.5;
  }

@media (max-width:640px){
    .mave-configurator .loading-panel{padding:60px 28px 56px !important}
    .mave-configurator .loading-title{font-size:20px}
  }

/* ===== Welcome ===== */

.mave-configurator .hero-chip{
    display:inline-flex;align-items:center;gap:8px;
    padding:6px 14px;
    border:1px solid var(--line);
    border-radius:999px;
    font-size:12px;
    font-weight:500;
    color:var(--ink-soft);
    letter-spacing:.06em;
    text-transform:uppercase;
    margin-bottom:24px;
    background:var(--surface);
  }

.mave-configurator .hero-chip .dot{
    width:6px;height:6px;border-radius:50%;
    background:var(--primary);
    animation:pulse 2s ease-in-out infinite;
  }

.mave-configurator .welcome-paths{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:18px;
    margin-top:40px;
  }

.mave-configurator .path-card{
    position:relative;
    background:var(--surface);
    border:1.5px solid var(--line);
    border-radius:var(--radius);
    padding:32px 30px;
    text-align:left;
    cursor:pointer;
    transition:all .2s ease;
    font-family:inherit;
    color:inherit;
    overflow:hidden;
  }

.mave-configurator .path-card:hover{
    border-color:var(--primary);
    transform:translateY(-3px);
    box-shadow:var(--shadow-lg);
  }

.mave-configurator .path-card .pc-ico{
    width:52px;height:52px;
    border-radius:12px;
    background:var(--primary-soft);
    display:flex;align-items:center;justify-content:center;
    color:var(--primary);
    margin-bottom:18px;
  }

.mave-configurator .path-card.accent .pc-ico{background:var(--primary-soft);color:var(--primary)}

.mave-configurator .path-card h3{
    font-family:'Nunito', system-ui, sans-serif;
    font-weight:500;
    font-size:22px;
    margin:0 0 8px;
    letter-spacing:-.01em;
  }

.mave-configurator .path-card p{
    color:var(--ink-soft);
    font-size:14px;
    margin:0 0 18px;
    line-height:1.55;
  }

.mave-configurator .path-card .pc-arrow{
    display:inline-flex;align-items:center;gap:8px;
    color:var(--primary);
    font-weight:500;
    font-size:14px;
  }

.mave-configurator .path-card:hover .pc-arrow{gap:12px}

.mave-configurator .path-card.accent .pc-arrow{color:var(--primary)}

/* ===== Scenarios ===== */

.mave-configurator .scenarios-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
    gap:14px;
  }

.mave-configurator .scenario{
    background:var(--surface);
    border:1.5px solid var(--line);
    border-radius:var(--radius);
    padding:18px;
    cursor:pointer;
    transition:all .2s ease;
    font-family:inherit;
    color:inherit;
    text-align:left;
    display:flex;flex-direction:column;gap:10px;
  }

.mave-configurator .scenario:hover{
    border-color:var(--primary);
    transform:translateY(-2px);
    box-shadow:var(--shadow-md);
  }

.mave-configurator .scenario .sc-ico{
    height:88px;border-radius:10px;
    background:var(--bg-warm);
    display:flex;align-items:center;justify-content:center;
    color:var(--primary);
    margin-bottom:4px;
  }

.mave-configurator .scenario.wolf .sc-ico{
    background:linear-gradient(135deg,#1E3A8A 0%,#0F1E4C 100%);
    color:#DBEAFE;
  }

.mave-configurator .scenario h4{
    font-family:'Nunito', system-ui, sans-serif;
    font-weight:500;
    font-size:17px;
    margin:0;
    letter-spacing:-.01em;
  }

.mave-configurator .scenario p{
    font-size:13px;
    color:var(--ink-soft);
    margin:0;
    line-height:1.45;
  }

.mave-configurator .scenario .tag{
    margin-top:auto;
    display:inline-flex;align-items:center;gap:6px;
    padding:4px 10px;
    background:#FEF3C7;
    color:#92400E;
    border-radius:999px;
    font-size:11px;
    font-weight:600;
    letter-spacing:.04em;
    text-transform:uppercase;
    align-self:flex-start;
  }

/* ===== Result ===== */

.mave-configurator .result-head{
    display:flex;align-items:flex-start;justify-content:space-between;
    gap:24px;
    padding-bottom:28px;
    border-bottom:1px solid var(--line-soft);
    margin-bottom:28px;
    flex-wrap:wrap;
  }

.mave-configurator .result-head .tag-row{
    display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;
  }

.mave-configurator .chip{
    display:inline-flex;align-items:center;gap:6px;
    padding:4px 12px;
    background:var(--primary-soft);
    color:var(--primary);
    border-radius:999px;
    font-size:12px;
    font-weight:500;
    letter-spacing:.02em;
  }

.mave-configurator .price-big{
    font-family:'Nunito', system-ui, sans-serif;
    font-size:44px;
    font-weight:500;
    color:var(--primary);
    letter-spacing:-.02em;
    line-height:1;
  }

.mave-configurator .price-big small{
    display:block;
    font-family:'Nunito', system-ui, sans-serif;
    font-size:13px;
    color:var(--ink-muted);
    font-weight:500;
    letter-spacing:.04em;
    text-transform:uppercase;
    margin-bottom:8px;
  }

.mave-configurator .product-list{
    display:flex;flex-direction:column;gap:0;
    margin:0 -8px;
  }

.mave-configurator .product{
    display:grid;
    grid-template-columns:56px 1fr auto auto;
    gap:16px;
    padding:16px 8px;
    border-bottom:1px solid var(--line-soft);
    align-items:center;
  }

.mave-configurator .product:last-child{border-bottom:none}

.mave-configurator .product-img{
    width:56px;height:56px;
    background:var(--bg-warm);
    border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    color:var(--primary);
    overflow:hidden;
    flex-shrink:0;
  }

.mave-configurator .product-img img{
    width:100%;height:100%;
    object-fit:contain;
    padding:4px;
  }

/* Stock status chips inside product code line */

.mave-configurator .stock-ok{
    color:#16A34A;
    font-weight:600;
  }

.mave-configurator .stock-order{
    color:#D97706;
    font-weight:600;
  }

.mave-configurator .stock-none{
    color:#DC2626;
    font-weight:600;
  }

/* Product properties (from filteringProperty + textProperty in Shoptet export) */

.mave-configurator .product-props{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:6px;
  }

.mave-configurator .prop-chip{
    font-size:11px;
    color:var(--ink-soft);
    background:var(--bg-warm);
    padding:2px 8px;
    border-radius:4px;
    line-height:1.4;
  }

.mave-configurator .prop-chip .prop-key{
    color:var(--ink-muted);
    font-weight:500;
  }

/* Data freshness note on result page */

.mave-configurator .live-data-note{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:20px;
    padding:10px 14px;
    background:var(--bg-warm);
    border-radius:var(--radius-sm);
    font-size:12px;
    color:var(--ink-muted);
  }

.mave-configurator .live-data-note svg{
    color:var(--primary);
    flex-shrink:0;
  }

.mave-configurator .product-info h5{
    font-family:'Nunito', system-ui, sans-serif;
    font-weight:500;
    font-size:15px;
    margin:0 0 2px;
  }

.mave-configurator .product-info .code{
    font-size:12px;
    color:var(--ink-muted);
  }

.mave-configurator .product-qty{
    font-family:'Nunito', system-ui, sans-serif;
    font-size:18px;
    font-weight:500;
    color:var(--ink);
    min-width:52px;
    text-align:right;
  }

.mave-configurator .product-qty small{
    display:block;
    font-family:'Nunito', system-ui, sans-serif;
    font-size:11px;
    color:var(--ink-muted);
    font-weight:400;
  }

.mave-configurator .product-price{
    font-weight:500;
    font-size:15px;
    min-width:90px;
    text-align:right;
    color:var(--ink);
  }

.mave-configurator .product-price small{
    display:block;
    font-size:11px;
    color:var(--ink-muted);
    font-weight:400;
  }

.mave-configurator .result-actions{
    display:flex;gap:12px;
    justify-content:flex-end;
    margin-top:32px;
    flex-wrap:wrap;
    padding-top:24px;
    border-top:1px solid var(--line-soft);
  }

.mave-configurator .result-actions .btn-primary{
    padding:16px 32px;
    font-size:16px;
  }

.mave-configurator .subsidy-banner{
    background:linear-gradient(135deg,#1E3A8A,#0F1E4C);
    color:#DBEAFE;
    padding:20px 24px;
    border-radius:var(--radius);
    margin-top:18px;
    display:flex;gap:16px;align-items:flex-start;
  }

.mave-configurator .subsidy-banner svg{flex-shrink:0;color:#FCD34D}

.mave-configurator .subsidy-banner h4{
    font-family:'Nunito', system-ui, sans-serif;
    font-weight:500;
    margin:0 0 6px;
    color:white;
    font-size:17px;
  }

.mave-configurator .subsidy-banner p{
    margin:0;font-size:14px;
    color:#C7D2FE;
    line-height:1.5;
  }

.mave-configurator .subsidy-banner a{
    color:#FCD34D;
    font-weight:500;
    text-decoration:underline;
    text-underline-offset:3px;
  }

/* ===== Tier comparison ===== */

.mave-configurator .tier-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:14px;
  }

.mave-configurator .tier-card{
    border:1.5px solid var(--line);
    border-radius:var(--radius);
    padding:24px;
    cursor:pointer;
    background:var(--surface);
    transition:all .2s ease;
    text-align:left;
    font-family:inherit;
    color:inherit;
    display:flex;flex-direction:column;gap:10px;
    position:relative;
  }

.mave-configurator .tier-card:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:var(--shadow-md)}

.mave-configurator .tier-card.active{border-color:var(--primary);background:var(--primary-soft);box-shadow:0 0 0 3px rgba(47,74,42,.12)}

.mave-configurator .tier-card .tier-name{
    font-family:'Nunito', system-ui, sans-serif;
    font-weight:500;
    font-size:22px;
    letter-spacing:-.01em;
  }

.mave-configurator .tier-card .tier-price{
    font-size:13px;color:var(--ink-muted);
  }

.mave-configurator .tier-card .tier-price strong{color:var(--primary);font-weight:600;font-size:14px}

.mave-configurator .tier-card ul{
    list-style:none;padding:0;margin:10px 0 0;
    display:flex;flex-direction:column;gap:8px;
    font-size:13px;
    color:var(--ink-soft);
  }

.mave-configurator .tier-card ul li{
    display:flex;gap:8px;align-items:flex-start;
  }

.mave-configurator .tier-card ul li::before{
    content:'';
    width:14px;height:14px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F4A2A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center/contain;
    flex-shrink:0;
    margin-top:3px;
  }

.mave-configurator .tier-badge{
    position:absolute;top:-10px;right:16px;
    background:var(--primary);color:white;
    font-size:11px;font-weight:600;
    padding:4px 10px;border-radius:999px;
    letter-spacing:.04em;
    text-transform:uppercase;
  }

/* ===== Mini visual fence diagram ===== */

.mave-configurator .fence-viz{
    margin:20px 0 0;
    padding:20px;
    background:var(--bg-warm);
    border-radius:var(--radius-sm);
    border:1px dashed var(--line);
  }

.mave-configurator .fence-viz svg{display:block;margin:0 auto;max-width:100%;height:auto}

/* ===== Small helpers ===== */

.mave-configurator .back-link{
    display:inline-flex;align-items:center;gap:8px;
    color:var(--ink-soft);
    font-size:14px;
    cursor:pointer;
    background:none;border:none;
    padding:0;
    margin-bottom:20px;
    font-family:inherit;
  }

.mave-configurator .back-link:hover{color:var(--ink)}

.mave-configurator .section-sep{
    height:1px;background:var(--line-soft);margin:28px 0;border:none;
  }

.mave-configurator .two-col{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
  }

@media (max-width:640px){
    .mave-configurator .two-col{grid-template-columns:1fr;gap:20px}
  }

/* !important on positioning is defensive — Shoptet templates sometimes target
     generic class names (.modal, .modal-overlay) with their own rules and would
     otherwise override our layout. */

/* ===== Native <dialog> element styling =====
   The dialog element opened with showModal() renders in the browser's top
   layer. Its ::backdrop pseudo-element provides the dark overlay behind it.
   These rules must be at the top level (not scoped under .mave-configurator)
   because ::backdrop is in the top layer and not a DOM descendant. */

#mave-inquiry-dialog{
  font-family:'Nunito', system-ui, sans-serif;
  color:#0F172A;
  border:none;
  border-radius:16px;
  padding:0;
  max-width:640px;
  width:calc(100vw - 32px);
  max-height:calc(100vh - 48px);
  background:#fff;
  box-shadow:0 25px 50px -12px rgba(0,0,0,0.25);
  overflow:hidden;
  /* Center vertically and horizontally — dialog defaults are usually OK,
     but explicit rules help */
  margin:auto;
}

#mave-inquiry-dialog::backdrop{
  background:rgba(15,23,42,0.55);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  animation:dialogBackdropFadeIn .18s ease-out;
}

@keyframes dialogBackdropFadeIn{
  from{opacity:0}
  to{opacity:1}
}

/* When dialog is open, give it a slide-in animation */
#mave-inquiry-dialog[open]{
  animation:dialogSlideIn .22s cubic-bezier(.22,1,.36,1);
}

@keyframes dialogSlideIn{
  from{opacity:0;transform:translateY(-20px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

.mave-configurator .modal-overlay{
    position:fixed !important;
    inset:0 !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:100vw !important;
    height:100vh !important;
    background:rgba(15,23,42,.55);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    display:flex !important;
    align-items:center;
    justify-content:center;
    padding:24px 16px;
    z-index:99999 !important;
    margin:0 !important;
    animation:modalFadeIn .18s ease-out;
  }

/* ===== Inquiry modal ===== */

@keyframes modalFadeIn{
    from{opacity:0}
    to{opacity:1}
  }

.mave-configurator .modal{
    background:var(--surface);
    border-radius:16px;
    max-width:640px;
    width:100%;
    max-height:calc(100vh - 48px);
    box-shadow:var(--shadow-lg);
    position:relative;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    animation:modalSlideIn .22s cubic-bezier(.22,1,.36,1);
  }

@keyframes modalSlideIn{
    from{opacity:0;transform:translateY(-20px) scale(.98)}
    to{opacity:1;transform:translateY(0) scale(1)}
  }

.mave-configurator .modal-close{
    position:absolute;
    top:14px;right:14px;
    width:34px;height:34px;
    border-radius:50%;
    border:none;
    background:var(--bg-warm);
    color:var(--ink-soft);
    font-size:22px;
    line-height:1;
    cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:background .15s, color .15s;
    font-family:inherit;
    z-index:2;
  }

.mave-configurator .modal-close:hover{
    background:var(--line);
    color:var(--ink);
  }

/* Inquiry-specific modal layout — header + scrollable body + sticky bottom */

.mave-configurator .modal-header{
    padding:28px 36px 18px;
    border-bottom:1px solid var(--line-soft);
    flex-shrink:0;
  }

.mave-configurator .modal-title{
    font-family:'Nunito', system-ui, sans-serif;
    font-size:22px;
    font-weight:700;
    color:var(--ink);
    margin:0 0 8px;
    line-height:1.25;
  }

.mave-configurator .modal-subtitle{
    font-size:13.5px;
    color:var(--ink-soft);
    line-height:1.5;
    margin:0;
  }

.mave-configurator .inquiry-form{
    display:flex;
    flex-direction:column;
    flex:1;
    min-height:0;
    overflow:hidden;
  }

/* Single scroll container — the form itself is split into:
     - scrollable middle (everything except .form-section-bottom)
     - sticky bottom with consent + actions
     We achieve this by making the bottom flex-shrink:0 and putting all
     non-bottom sections inside an implicit scroll region. */

.mave-configurator .inquiry-form-body{
    flex:1;
    overflow-y:auto;
    overscroll-behavior:contain;
    min-height:0;
  }

.mave-configurator .form-section{
    padding:18px 36px;
    flex-shrink:0;
  }

.mave-configurator .form-section + .form-section{
    border-top:1px solid var(--line-soft);
  }

.mave-configurator .form-section-bottom{
    background:var(--bg-warm);
    padding:16px 36px 20px;
    flex-shrink:0;
    border-top:1px solid var(--line-soft);
  }

.mave-configurator .form-section-title{
    font-size:11px;
    font-weight:700;
    color:var(--ink-muted);
    letter-spacing:.06em;
    text-transform:uppercase;
    margin-bottom:14px;
  }

.mave-configurator .form-row{
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
  }

.mave-configurator .form-row + .form-row{
    margin-top:12px;
  }

.mave-configurator .form-row-2{
    grid-template-columns:1fr 1fr;
  }

.mave-configurator .form-field{
    display:flex;
    flex-direction:column;
    gap:5px;
  }

.mave-configurator .form-field .field-label{
    font-family:'Nunito', system-ui, sans-serif;
    font-size:13px;
    font-weight:600;
    color:var(--ink);
  }

.mave-configurator .form-field .field-label .req{
    color:#DC2626;
    font-weight:700;
    margin-left:2px;
  }

.mave-configurator .form-field input[type=text],
  .mave-configurator .form-field input[type=email],
  .mave-configurator .form-field input[type=tel],
  .mave-configurator .form-field textarea{
    padding:10px 14px;
    border:1.5px solid var(--line);
    border-radius:8px;
    font-family:'Nunito', system-ui, sans-serif;
    font-size:14px;
    color:var(--ink);
    background:var(--surface);
    transition:border-color .15s, box-shadow .15s;
    width:100%;
    box-sizing:border-box;
  }

.mave-configurator .form-field input::placeholder,
  .mave-configurator .form-field textarea::placeholder{
    color:var(--ink-muted);
    opacity:.7;
  }

.mave-configurator .form-field input:focus,
  .mave-configurator .form-field textarea:focus{
    outline:none;
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(30,58,138,.1);
  }

.mave-configurator .form-field textarea{
    resize:vertical;
    min-height:72px;
    font-family:'Nunito', system-ui, sans-serif;
  }

/* Preview block — chips at top + BOM table */

.mave-configurator .form-preview{
    background:var(--bg-warm);
    border:1px solid var(--line-soft);
    border-radius:10px;
    padding:14px;
  }

.mave-configurator .preview-chips{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-bottom:14px;
  }

.mave-configurator .preview-chip{
    background:var(--surface);
    border:1px solid var(--line);
    color:var(--ink);
    font-size:12px;
    font-weight:500;
    padding:3px 10px;
    border-radius:12px;
    line-height:1.5;
  }

.mave-configurator .preview-bom{
    background:var(--surface);
    border-radius:8px;
    overflow:hidden;
    border:1px solid var(--line-soft);
  }

.mave-configurator .preview-bom-table{
    width:100%;
    border-collapse:collapse;
    font-size:13px;
  }

.mave-configurator .preview-bom-table th{
    background:var(--bg-warm);
    color:var(--ink-muted);
    font-size:10.5px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.05em;
    padding:8px 12px;
    text-align:left;
    border-bottom:1px solid var(--line-soft);
  }

.mave-configurator .preview-bom-table th.num,
  .mave-configurator .preview-bom-table td.num{
    text-align:right;
    white-space:nowrap;
  }

.mave-configurator .preview-bom-table td{
    padding:9px 12px;
    border-top:1px solid var(--line-soft);
    vertical-align:top;
  }

.mave-configurator .preview-bom-table tbody tr:first-child td{
    border-top:none;
  }

.mave-configurator .preview-bom-table td.num small{
    color:var(--ink-muted);
    font-size:11px;
  }

.mave-configurator .preview-bom-name{
    color:var(--ink);
    font-weight:500;
    line-height:1.35;
  }

.mave-configurator .preview-bom-code{
    color:var(--ink-muted);
    font-size:11px;
    margin-top:1px;
  }

.mave-configurator .preview-bom-total td{
    background:var(--bg-warm);
    font-weight:700;
    color:var(--primary);
    border-top:1.5px solid var(--line);
    font-size:14px;
  }

/* The "Kontaktní formuláře" Shoptet add-on renders its own form inside this
     container. We don't know its exact internal markup, so these styles target
     common field patterns and apply our visual language (Nunito, our radii,
     our primary color). If something looks off, the add-on supports CSS
     overrides — see https://navody.webotvurci.cz/kb/jak-upravit-design-formulare-pomoci-css/ */

.mave-configurator .webotvurci-form-mount{
    /* Make any input/textarea inside match our visual style */
    font-family:'Nunito', system-ui, sans-serif;
  }

/* ===== Webotvurci form mount ===== */

.mave-configurator .webotvurci-form-mount input[type=text],
  .mave-configurator .webotvurci-form-mount input[type=email],
  .mave-configurator .webotvurci-form-mount input[type=tel],
  .mave-configurator .webotvurci-form-mount textarea,
  .mave-configurator .webotvurci-form-mount select{
    font-family:'Nunito', system-ui, sans-serif !important;
    font-size:14px !important;
    padding:10px 14px !important;
    border:1.5px solid var(--line) !important;
    border-radius:8px !important;
    color:var(--ink) !important;
    background:var(--surface) !important;
    width:100% !important;
    box-sizing:border-box !important;
    transition:border-color .15s, box-shadow .15s;
  }

.mave-configurator .webotvurci-form-mount input:focus,
  .mave-configurator .webotvurci-form-mount textarea:focus,
  .mave-configurator .webotvurci-form-mount select:focus{
    outline:none !important;
    border-color:var(--primary) !important;
    box-shadow:0 0 0 3px rgba(30,58,138,.1) !important;
  }

.mave-configurator .webotvurci-form-mount label{
    font-family:'Nunito', system-ui, sans-serif;
    font-size:13px;
    font-weight:600;
    color:var(--ink);
    display:block;
    margin-bottom:5px;
  }

.mave-configurator .webotvurci-form-mount button[type=submit],
  .mave-configurator .webotvurci-form-mount input[type=submit]{
    font-family:'Nunito', system-ui, sans-serif !important;
    font-weight:600 !important;
    font-size:14px !important;
    padding:12px 22px !important;
    background:var(--primary) !important;
    color:#fff !important;
    border:none !important;
    border-radius:10px !important;
    cursor:pointer !important;
    transition:background .15s, transform .12s !important;
  }

.mave-configurator .webotvurci-form-mount button[type=submit]:hover,
  .mave-configurator .webotvurci-form-mount input[type=submit]:hover{
    background:#152a66 !important;
  }

.mave-configurator .webotvurci-form-mount button[type=submit]:active,
  .mave-configurator .webotvurci-form-mount input[type=submit]:active{
    transform:translateY(1px);
  }

/* Hide the hidden Konfigurace + Kusovník inputs robustly — even if the add-on
     keeps them as type=text, we want the user to see only contact fields. */

.mave-configurator .webotvurci-form-mount [name="Konfigurace"],
  .mave-configurator .webotvurci-form-mount [name="Kusovník"]{
    display:none !important;
  }

/* Consent + actions in sticky bottom section */

.mave-configurator .form-consent{
    display:flex;
    gap:10px;
    align-items:flex-start;
    font-size:12.5px;
    color:var(--ink-soft);
    line-height:1.5;
    cursor:pointer;
    margin-bottom:14px;
  }

.mave-configurator .form-consent input[type=checkbox]{
    margin-top:2px;
    accent-color:var(--primary);
    width:16px;height:16px;
    cursor:pointer;
    flex-shrink:0;
  }

.mave-configurator .form-consent a{
    color:var(--primary);
    text-decoration:underline;
  }

.mave-configurator .form-actions{
    display:flex;
    gap:10px;
    justify-content:flex-end;
    flex-wrap:wrap;
  }

/* Mobile adjustments */

@media (max-width:640px){
    .mave-configurator .modal{
      max-height:calc(100vh - 24px);
      border-radius:14px;
    }
    .mave-configurator .modal-header{padding:24px 22px 16px}
    .mave-configurator .modal-title{font-size:19px}
    .mave-configurator .form-section{padding:16px 22px}
    .mave-configurator .form-section-bottom{padding:14px 22px 18px}
    .mave-configurator .form-row-2{grid-template-columns:1fr}
    .mave-configurator .form-actions{flex-direction:column-reverse}
    .mave-configurator .form-actions .btn{width:100%;justify-content:center}
  }