/* Firmeoo - uStore Doors configurator page. */

.firmeoo-door-page {
    margin: 0; padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: #f4f2f8; color: #1c1c1c;
}

.firmeoo-door-header {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 74px; padding: 12px max(28px, calc((100vw - 1240px) / 2)); background:#050507; border-bottom:1px solid rgba(255,255,255,.1);
    backdrop-filter: blur(16px);
}
.firmeoo-door-logo { display:inline-flex; align-items:center; min-width:120px; font-size:18px; font-weight:700; color:#7b2ff7; text-decoration:none; }
.firmeoo-door-logo img,.firmeoo-door-logo-image { display:block; width:auto; height:28px; max-width:150px; object-fit:contain; }
.firmeoo-door-header-info { text-align: right; font-size: 13px; color: #57506b; }
.firmeoo-door-header-info strong { display: block; font-size: 15px; color: #1c1c1c; }
.firmeoo-door-layout-switch{display:flex;justify-content:flex-end;gap:5px;margin:0}.firmeoo-door-layout-switch a{padding:6px 12px;border:1px solid rgba(255,255,255,.2);border-radius:99px;color:#b9b4c4;text-decoration:none;font-size:10px;font-weight:700}.firmeoo-door-layout-switch a:hover{border-color:rgba(255,255,255,.48);color:#fff}.firmeoo-door-layout-switch a.is-active{border-color:#8758ff;background:#7b2ff7;color:#fff}

.firmeoo-door-layout {
    display: grid; grid-template-columns: minmax(420px, 42fr) minmax(520px, 58fr); gap: 34px;
    width:100%; max-width: 1560px; box-sizing:border-box; margin: 32px auto; padding: 0 28px; align-items: start;
}
@media (max-width: 900px) { .firmeoo-door-layout { grid-template-columns: 1fr; } }

/* ---- Left: layered preview. ---- */
.firmeoo-door-preview-col { position: sticky; top: 24px; }
.firmeoo-door-preview-frame {
    position: relative; width: 100%; min-height:540px;
    background: #fff; border-radius: 12px; overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.firmeoo-door-assembly{position:absolute;inset:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:.25s ease}
.firmeoo-door-assembly-row{display:flex;align-items:stretch;justify-content:center;height:min(500px,calc(100% - 8px));max-width:100%}
.firmeoo-door-core{position:relative;height:100%;aspect-ratio:154/336;flex:0 0 auto}
.firmeoo-door-sidelight{position:relative;display:none;flex:0 0 auto;overflow:hidden;--sidelight-scale:.65}
.firmeoo-door-sidelight.is-active{display:block}
.firmeoo-door-sidelight-left,.firmeoo-door-sidelight-right{height:100%;width:calc((68 / 336) * 500px * var(--sidelight-scale))}
.firmeoo-door-sidelight-top{height:calc(68px * var(--sidelight-scale));width:min(100%,calc(290 / 336 * 500px));min-height:38px}
.firmeoo-door-sidelight img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}.firmeoo-door-sidelight-glass{z-index:1}.firmeoo-door-sidelight-frame{z-index:2}
.firmeoo-door-preview-frame[data-sidelight-layout="none"] .firmeoo-door-assembly-row{height:min(500px,calc(100% - 8px))}
.firmeoo-door-security-badge {
    display:flex; align-items:center; gap:7px; flex:0 0 auto;
    padding:8px 11px; border:1px solid rgba(123,47,247,.24); border-radius:999px;
    background:linear-gradient(135deg,#211732,#302048); color:#fff; box-shadow:0 5px 16px rgba(55,28,93,.18);
    font-size:9px; line-height:1; font-weight:800; letter-spacing:.035em;
    text-transform:uppercase; pointer-events:none; animation:firmeoo-security-pulse 2.8s ease-in-out infinite;
}
.firmeoo-door-security-badge-icon { color:#cfb0ff; font-size:14px; line-height:1; }
@keyframes firmeoo-security-pulse {
    0%,100% { transform:scale(1); box-shadow:0 5px 16px rgba(55,28,93,.16); }
    50% { transform:scale(1.025); box-shadow:0 5px 21px rgba(123,47,247,.34),0 0 0 4px rgba(123,47,247,.055); }
}
@media (prefers-reduced-motion: reduce) { .firmeoo-door-security-badge { animation:none; } }
.firmeoo-door-layer {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: fill; transition: opacity 0.15s ease;
}
.firmeoo-door-layer-color { z-index: 1; }
.firmeoo-door-layer-finish { z-index: 2; }
.firmeoo-door-layer-glazing { z-index: 3; }
/* shape_image_url is the fixed hinge overlay for this catalog. */
.firmeoo-door-layer-shape { z-index: 4; }
.firmeoo-door-layer-hardware { z-index: 5; }
.firmeoo-door-layer-handle { z-index: 6; }

/* Hides every layer until all four have finished loading, then reveals them together - see the waitForLayerLoaded() logic in ustore-door-configurator.js for why. */
.firmeoo-door-preview-frame.is-loading .firmeoo-door-layer,
.firmeoo-door-house-mockup-frame.is-loading .firmeoo-door-layer,
.firmeoo-door-house-mockup-frame.is-loading .firmeoo-door-house-mockup-photo { opacity: 0; }
.firmeoo-door-preview-frame.is-loading::after,
.firmeoo-door-house-mockup-frame.is-loading::after {
    content: ''; position: absolute; top: 50%; left: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px;
    border: 3px solid #e5e0ee; border-top-color: #7b2ff7; border-radius: 50%;
    animation: firmeoo-door-spin 0.8s linear infinite;
}
@keyframes firmeoo-door-spin { to { transform: rotate(360deg); } }

.firmeoo-door-house-mockup-section { margin-top: 20px; }
.firmeoo-door-house-mockup-title { font-size: 14px; font-weight: 700; margin: 0 0 8px; color: #1c1c1c; }
.firmeoo-door-house-mockup-frame {
    position: relative; width: 100%; border-radius: 12px; overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08); background: #fff;
}
.firmeoo-door-house-mockup-photo { width: 100%; display: block; transition: opacity 0.15s ease; }
.firmeoo-door-house-mockup-door-slot { position: absolute; overflow: hidden; }
.firmeoo-door-house-mockup-door-slot .firmeoo-door-layer { transition: opacity 0.15s ease; }

.firmeoo-door-metallic-note {
    margin-top: 10px; padding: 10px 14px; background: #fff3cd; color: #7a5c00;
    border-radius: 8px; font-size: 12px;
}
.firmeoo-door-preview-caption{margin:10px auto 0;max-width:310px;color:#8a7f9c;font-size:10px;line-height:1.5;text-align:center}

/* Alternative product layout: the complete layered canvas is reduced as one unit. */
.firmeoo-door-product-layout-compact .firmeoo-door-layout{grid-template-columns:minmax(420px,42fr) minmax(520px,58fr);max-width:1560px;gap:34px}
.firmeoo-door-product-layout-compact .firmeoo-door-preview-col{padding:22px 18px;border:1px solid #e8e3ef;border-radius:18px;background:linear-gradient(155deg,#fff,#f5f2fa);box-shadow:0 18px 45px rgba(44,26,72,.09)}
.firmeoo-door-product-layout-compact .firmeoo-door-preview-frame{width:100%;margin:0 auto;border-radius:12px;box-shadow:0 12px 32px rgba(28,18,45,.16)}
.firmeoo-door-product-layout-compact .firmeoo-door-core .firmeoo-door-layer{inset:0;width:100%;height:100%}
.firmeoo-door-product-layout-compact .firmeoo-door-configurator-col{padding:30px;border-radius:18px}
.firmeoo-door-product-layout-compact .firmeoo-door-price-tag{background:linear-gradient(135deg,#17132a,#2c1d49);color:#fff}
.firmeoo-door-product-layout-compact .firmeoo-door-price-label{color:#c8bed5}
.firmeoo-door-product-layout-compact .firmeoo-door-price-value{color:#d8b7ff}
.firmeoo-door-checkout-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px}.firmeoo-door-checkout-fields input{width:100%;padding:11px 12px;border:1px solid #e5e0ee;border-radius:8px;box-sizing:border-box}.firmeoo-door-checkout-fields input:first-child{grid-column:1/-1}.firmeoo-door-checkout-note{margin:10px 0;color:#756c82;font-size:11px;line-height:1.5}.firmeoo-door-cart-confirmed{padding:18px;border:1px solid #b9ecd1;border-radius:12px;background:#e3f9ec;color:#146b41;text-align:center}.firmeoo-door-cart-confirmed a{color:#6c26d9;font-weight:700}
@media(max-width:900px){.firmeoo-door-product-layout-compact .firmeoo-door-layout{grid-template-columns:1fr}.firmeoo-door-product-layout-compact .firmeoo-door-preview-col{position:relative;top:auto}.firmeoo-door-product-layout-compact .firmeoo-door-preview-frame{width:min(230px,72vw)}}
@media(max-width:560px){.firmeoo-door-checkout-fields{grid-template-columns:1fr}.firmeoo-door-checkout-fields input:first-child{grid-column:auto}}

.firmeoo-door-inside-color-badge {
    margin: 10px 0; align-items: center; gap: 8px; padding: 8px 12px;
    background: rgba(123,47,247,0.06); border: 1px solid rgba(123,47,247,0.2);
    border-radius: 8px; font-size: 12px; color: #57506b;
}
.firmeoo-door-inside-color-badge-swatch {
    width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
    border: 1px solid rgba(0,0,0,0.15); display: block;
}
.firmeoo-door-inside-color-badge-label { font-weight: 600; }

.firmeoo-door-color-watermark {
    position: absolute; top: 50%; left: 50%; z-index: 5;
    transform: translate(-50%, -50%) rotate(-35deg);
    font-size: 20px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    color: rgba(46, 194, 126, 0.85); text-shadow: 0 1px 2px rgba(255,255,255,0.6);
    pointer-events: none; white-space: nowrap; text-align: center;
}

.firmeoo-door-price-tag {
    margin-bottom: 20px; padding: 16px 20px; background: #fff; border-radius: 12px;
    display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap:wrap;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.firmeoo-door-product-code { display:flex; flex-direction:column; gap:2px; min-width:0; color:#51475e; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.firmeoo-door-product-code small { color:#9990a5; font-size:8px; font-weight:700; letter-spacing:.11em; }
.firmeoo-door-price-total { display:flex; align-items:baseline; justify-content:flex-end; gap:12px; margin-left:auto; }
.firmeoo-door-price-label { font-size: 13px; color: #57506b; }
.firmeoo-door-price-value { font-size: 24px; font-weight: 700; color: #7b2ff7; }

/* ---- Right: step wizard. ---- */
.firmeoo-door-configurator-col { background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 2px 10px rgba(0,0,0,0.06); }

.firmeoo-door-steps-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; }
.firmeoo-door-step-pill {
    padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 600;
    background: #f4f2f8; color: #8a7f9c; white-space: nowrap;
}
.firmeoo-door-step-pill.is-active { background: #7b2ff7; color: #fff; }
.firmeoo-door-step-pill.is-done { background: #e3f9ec; color: #1a9b5c; }

.firmeoo-door-step-content h2 { font-size: 18px; margin: 0 0 6px; }
.firmeoo-door-step-content div.firmeoo-door-step-hint { font-size: 13px; color: #57506b; margin: 0 0 16px; }
.firmeoo-door-step-content div.firmeoo-door-step-hint p { margin: 0 0 8px; }
.firmeoo-door-step-content div.firmeoo-door-step-hint p:last-child { margin-bottom: 0; }

.firmeoo-door-option-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px;
}
.firmeoo-door-option-card {
    border: 2px solid #e5e0ee; border-radius: 10px; padding: 8px; cursor: pointer;
    text-align: center; background: #fff; transition: border-color 0.15s ease;
}
.firmeoo-door-option-card:hover { border-color: #c9b8f5; }
.firmeoo-door-option-card.is-selected { border-color: #7b2ff7; background: #f6f1ff; }
.firmeoo-door-option-card img {
    width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; margin-bottom: 6px; background: #f4f2f8;
}
.firmeoo-door-option-swatch {
    width: 100%; aspect-ratio: 1; border-radius: 6px; margin-bottom: 6px;
    background: repeating-linear-gradient(45deg, #eee, #eee 6px, #ddd 6px, #ddd 12px);
    display: flex; align-items: center; justify-content: center; font-size: 10px; color: #8a7f9c;
}
.firmeoo-door-option-name { font-size: 11px; font-weight: 600; display: block; line-height: 1.3; }
.firmeoo-door-option-meta { font-size: 10px; color: #57506b; display: block; margin-top: 2px; line-height: 1.3; }

.firmeoo-door-option-surcharge { font-size: 10px; color: #7b2ff7; display: block; margin-top: 2px; }

.firmeoo-door-color-group-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #8a7f9c; margin: 18px 0 8px; }
.firmeoo-door-color-group-title:first-child { margin-top: 0; }

.firmeoo-door-list-options { display: flex; flex-direction: column; gap: 10px; }
.firmeoo-door-list-option {
    display: flex; justify-content: space-between; align-items: center;
    border: 2px solid #e5e0ee; border-radius: 10px; padding: 12px 16px; cursor: pointer;
}
.firmeoo-door-list-option:hover { border-color: #c9b8f5; }
.firmeoo-door-list-option.is-selected { border-color: #7b2ff7; background: #f6f1ff; }
.firmeoo-door-list-option-label { font-size: 13px; font-weight: 600; }
.firmeoo-door-list-option-meta { font-size: 11px; color: #57506b; display: block; margin-top: 2px; }
.firmeoo-door-list-option-photo { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; margin-right: 12px; flex-shrink: 0; }
.firmeoo-door-list-option-price { font-size: 13px; font-weight: 700; color: #7b2ff7; }

.firmeoo-door-summary-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #eee; font-size: 13px; }
.firmeoo-door-summary-row:last-of-type { border-bottom: none; }
.firmeoo-door-summary-total { display: flex; justify-content: space-between; padding: 16px 0 0; font-size: 18px; font-weight: 700; }

.firmeoo-door-step-actions { display: flex; justify-content: space-between; margin-top: 24px; }
.firmeoo-door-btn {
    padding: 10px 24px; border-radius: 8px; border: 0; font-size: 14px; font-weight: 600; cursor: pointer;
}
.firmeoo-door-btn-primary { background: #7b2ff7; color: #fff; margin-left: auto; }
.firmeoo-door-btn-primary:disabled { background: #ccc; cursor: not-allowed; }
.firmeoo-door-btn-ghost { background: none; border: 1px solid #e5e0ee; color: #57506b; }

.firmeoo-door-saved-box { text-align: center; padding: 20px; }
.firmeoo-door-saved-box a { display: inline-block; margin-top: 14px; padding: 10px 24px; background: #7b2ff7; color: #fff; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 13px; }
.firmeoo-door-order-form { margin-top: 24px; padding-top: 20px; border-top: 1px solid #eee; text-align: left; }
.firmeoo-door-order-form-intro { font-size: 13px; color: #57506b; margin-bottom: 10px; text-align: center; }
.firmeoo-door-order-form input { width: 100%; padding: 10px 12px; margin-bottom: 8px; border: 1px solid #e5e0ee; border-radius: 8px; font-size: 13px; box-sizing: border-box; }
.firmeoo-door-order-confirmed { text-align: center; color: #1a9b5c; font-weight: 600; padding: 10px 0; }
#firmeoo-door-order-result { font-size: 12px; color: #ff4d6d; text-align: center; margin-top: 6px; }

/* Thermal standard - deliberately themed apart from the rest (green, eco-leaning) since heating/insulation is the one choice that genuinely saves the customer money every year, not just a one-time cosmetic pick. */
.firmeoo-door-step-eco h2 { color: #1a9b5c; }
.firmeoo-door-step-eco div.firmeoo-door-step-hint { color: #2f7a53; }
.firmeoo-door-eco-banner {
    background: #e3f9ec; color: #146b41; border: 1px solid #b9ecd1; border-radius: 10px;
    padding: 12px 16px; font-size: 13px; font-weight: 600; margin-bottom: 16px;
}
.firmeoo-door-step-eco .firmeoo-door-list-option.is-selected { border-color: #1a9b5c; background: #e3f9ec; }
.firmeoo-door-step-eco .firmeoo-door-list-option-price { color: #1a9b5c; }
.firmeoo-door-step-eco .firmeoo-door-list-option { min-height:132px; align-items:center; }
.firmeoo-door-step-eco .firmeoo-door-list-option-photo {
    width:86px; height:116px; padding:4px; object-fit:contain; object-position:center;
    background:#f7fbf8; border:1px solid #dcefe4; box-sizing:border-box;
}
.firmeoo-door-step-eco .firmeoo-door-option-grid { grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); }
.firmeoo-door-step-eco .firmeoo-door-option-card { display:flex; flex-direction:column; min-height:275px; }
.firmeoo-door-step-eco .firmeoo-door-option-card img {
    width:100%; height:205px; aspect-ratio:auto; padding:6px; object-fit:contain; object-position:center;
    background:#f7fbf8; border:1px solid #dcefe4; box-sizing:border-box;
}

/* ---- Handle/handbar and door size steps. ---- */
.firmeoo-door-step-back-link {
    display: inline-block; background: none; border: none; color: #7b2ff7; font-size: 12px;
    font-weight: 600; cursor: pointer; padding: 0; margin-bottom: 14px;
}
.firmeoo-door-step-back-link:hover { text-decoration: underline; }

.firmeoo-door-custom-size { margin-top: 16px; padding-top: 16px; border-top: 1px solid #eee; }
.firmeoo-door-custom-size-drawing {
    position: relative; display: flex; justify-content: center; margin-bottom: 16px;
}
.firmeoo-door-custom-size-svg { width: 100px; height: 130px; }
.firmeoo-door-custom-size-svg rect { fill: #f4f2f8; stroke: #7b2ff7; stroke-width: 3; }
.firmeoo-door-custom-size-dim { position: absolute; font-size: 11px; font-weight: 700; color: #57506b; }
.firmeoo-door-custom-size-dim-h { top: 50%; left: calc(50% - 62px); transform: translateY(-50%) rotate(-90deg); }
.firmeoo-door-custom-size-dim-w { bottom: -4px; left: 50%; transform: translateX(-50%); }
.firmeoo-door-custom-size-label { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 4px; }
.firmeoo-door-custom-size-label strong { color: #7b2ff7; }
.firmeoo-door-custom-size-slider { width: 100%; accent-color: #7b2ff7; }

/* Entrance layouts and configurable sidelights. Icons are drawn in CSS. */
.firmeoo-door-layout-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}
.firmeoo-door-layout-option{appearance:none;padding:14px 9px 12px;border:1.5px solid #e5e0ee;border-radius:12px;background:#fff;color:#332c3d;cursor:pointer;text-align:center;transition:.16s ease}
.firmeoo-door-layout-option:hover{transform:translateY(-2px);border-color:#bca5f2;box-shadow:0 9px 20px rgba(82,47,130,.09)}.firmeoo-door-layout-option.is-selected{border-color:#7b2ff7;background:#f7f2ff;box-shadow:0 0 0 3px rgba(123,47,247,.08)}
.firmeoo-door-layout-option strong,.firmeoo-door-layout-option small{display:block}.firmeoo-door-layout-option strong{font-size:11px}.firmeoo-door-layout-option small{margin-top:3px;color:#8a7f9c;font-size:8px;line-height:1.25}
.firmeoo-door-layout-icon{position:relative;display:block;width:62px;height:62px;margin:0 auto 8px}.firmeoo-door-layout-icon i{position:absolute;display:block;border:2px solid #7452d3;background:#faf8ff;box-sizing:border-box}.firmeoo-door-layout-icon .door{left:21px;top:13px;width:22px;height:44px;border-radius:2px}.firmeoo-door-layout-icon .door::after{content:"";position:absolute;right:3px;top:21px;width:3px;height:3px;border-radius:50%;background:#7452d3}.firmeoo-door-layout-icon .left{left:8px;top:13px;width:13px;height:44px}.firmeoo-door-layout-icon .right{right:6px;top:13px;width:13px;height:44px}.firmeoo-door-layout-icon .top{left:8px;top:2px;width:49px;height:11px}
.firmeoo-door-sidelight-glass-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.firmeoo-door-sidelight-glass-option{appearance:none;padding:9px;border:2px solid #e5e0ee;border-radius:11px;background:#fff;cursor:pointer}.firmeoo-door-sidelight-glass-option.is-selected{border-color:#7b2ff7;background:#f7f2ff}.firmeoo-door-sidelight-glass-option span{display:block;height:105px;border-radius:7px;background:linear-gradient(125deg,#dde1df 0%,#fff 46%,#cbc9c8 100%);background-position:center;background-size:cover;background-repeat:no-repeat;box-shadow:inset 0 0 0 5px #1a1a1d}.firmeoo-door-sidelight-glass-option strong{display:block;margin-top:7px;font-size:11px}
.firmeoo-door-sidelight-size-list{display:grid;gap:12px}.firmeoo-door-sidelight-size-list label{display:grid;grid-template-columns:1fr auto;gap:8px 18px;padding:15px;border:1px solid #e7e1ef;border-radius:12px;background:#fbfaff}.firmeoo-door-sidelight-size-list label>span strong,.firmeoo-door-sidelight-size-list label>span small{display:block}.firmeoo-door-sidelight-size-list label>span strong{font-size:13px}.firmeoo-door-sidelight-size-list label>span small{margin-top:3px;color:#8a7f9c;font-size:10px}.firmeoo-door-sidelight-size-list output{font-size:12px;font-weight:700;color:#392d48}.firmeoo-door-sidelight-size-list output b{margin-left:7px;color:#7b2ff7}.firmeoo-door-sidelight-size-list input{grid-column:1/-1;width:100%;accent-color:#7b2ff7}
@media(max-width:1100px){.firmeoo-door-layout-options{grid-template-columns:repeat(2,1fr)}.firmeoo-door-sidelight-glass-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.firmeoo-door-product-layout-compact .firmeoo-door-layout,.firmeoo-door-layout{grid-template-columns:1fr}.firmeoo-door-preview-frame{min-height:520px}.firmeoo-door-preview-col{position:relative;top:auto}}
@media(max-width:560px){.firmeoo-door-layout{padding:0 12px}.firmeoo-door-preview-frame{min-height:430px}.firmeoo-door-assembly-row{height:390px}.firmeoo-door-sidelight-top{width:min(100%,337px)}.firmeoo-door-layout-options{grid-template-columns:repeat(2,1fr)}}

/* ---- AI-composited hero banner, full width, between price and steps. ---- */
.firmeoo-door-ai-banner { width: 100%; margin-bottom: 20px; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.06); }
.firmeoo-door-ai-banner img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }

/* ---- Product hero section, above the configurator - description, price, CTA that scrolls down to it. ---- */
.firmeoo-door-product-hero {
    position:relative; isolation:isolate; overflow:hidden; max-width:none; min-height:540px; margin:0;
    padding:72px max(32px,calc((100vw - 1200px)/2)); display:flex; gap:76px; align-items:center;
    background:
      radial-gradient(circle at 78% 16%,rgba(143,102,255,.34),transparent 28%),
      radial-gradient(circle at 14% 88%,rgba(218,71,255,.14),transparent 32%),
      linear-gradient(125deg,#0d0b17 0%,#171128 48%,#261944 100%); color:#fff;
}
.firmeoo-door-product-hero::before{content:"";position:absolute;z-index:-1;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(90deg,#000,transparent 82%)}
.firmeoo-door-product-hero::after{content:"";position:absolute;z-index:-1;width:420px;height:420px;right:8%;top:50%;transform:translateY(-50%);border:1px solid rgba(255,255,255,.09);border-radius:50%;box-shadow:0 0 0 70px rgba(255,255,255,.025),0 0 0 140px rgba(255,255,255,.015)}
.firmeoo-door-product-hero-photo { position:relative; order:2; flex:0 0 390px; padding:13px; border:1px solid rgba(255,255,255,.17); border-radius:24px; background:rgba(255,255,255,.07); box-shadow:0 32px 80px rgba(0,0,0,.52); transform:rotate(1.2deg); }
.firmeoo-door-product-hero-photo::before{content:"PRODUCT CONFIGURATOR";position:absolute;z-index:2;right:-12px;top:22px;padding:8px 12px;border-radius:99px;background:#fff;color:#25153e;font-size:9px;font-weight:800;letter-spacing:.13em;box-shadow:0 10px 24px rgba(0,0,0,.25)}
.firmeoo-door-product-hero-photo img { width:100%; height:390px; border-radius:14px; display:block; object-fit:cover; }
.firmeoo-door-product-hero-info { order:1; flex:1; max-width:620px; }
.firmeoo-door-product-hero-collection { display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:800;color:#d9c8ff;text-transform:uppercase;letter-spacing:.18em; }
.firmeoo-door-product-hero-collection::before{content:"";width:28px;height:2px;background:linear-gradient(90deg,#8b5cff,#ef57ff)}
.firmeoo-door-product-hero-info h1 { max-width:650px;font-size:clamp(46px,5.4vw,74px);line-height:.98;letter-spacing:-.055em;margin:18px 0 24px;color:#fff;text-wrap:balance; }
.firmeoo-door-product-hero-desc { font-size:17px;color:#c9c3d7;line-height:1.7;margin-bottom:27px;max-width:590px; }
.firmeoo-door-product-hero-price { margin-bottom: 18px; }
.firmeoo-door-product-hero-price-label { font-size:11px;color:#a8a0b8;display:block;text-transform:uppercase;letter-spacing:.14em;font-weight:700; }
.firmeoo-door-product-hero-price-value { display:block;margin-top:3px;font-size:30px;font-weight:800;color:#fff;letter-spacing:-.03em; }
.firmeoo-door-product-hero-cta { display:inline-block;padding:15px 29px;font-size:13px;font-weight:800;text-decoration:none;border-radius:9px;background:linear-gradient(135deg,#7653ff,#b936ec);box-shadow:0 14px 30px rgba(118,83,255,.27); }

/* Five model-selectable product headers. */
.firmeoo-door-header-template-editorial .firmeoo-door-product-hero { align-items:stretch; padding-top:64px; padding-bottom:64px; }
.firmeoo-door-header-template-editorial .firmeoo-door-product-hero-photo { flex-basis:52%; padding:14px; border:1px solid #d8d0e5; background:#fff; box-shadow:16px 16px 0 #eee9f6; }
.firmeoo-door-header-template-editorial .firmeoo-door-product-hero-photo img { height:100%; min-height:430px; object-fit:cover; border-radius:2px; }
.firmeoo-door-header-template-editorial .firmeoo-door-product-hero-info { display:flex; flex-direction:column; justify-content:center; padding-left:30px; }
.firmeoo-door-header-template-editorial .firmeoo-door-product-hero-info h1 { font-family:Georgia,serif; font-size:52px; font-weight:500; }

.firmeoo-door-header-template-dark .firmeoo-door-product-hero { max-width:none; padding:70px max(30px,calc((100vw - 1200px)/2)); background:radial-gradient(circle at 20% 20%,#38275e,#11101a 58%); color:#fff; }
.firmeoo-door-header-template-dark .firmeoo-door-product-hero-photo { flex-basis:46%; }
.firmeoo-door-header-template-dark .firmeoo-door-product-hero-photo img { height:520px; object-fit:cover; box-shadow:0 30px 70px rgba(0,0,0,.55); }
.firmeoo-door-header-template-dark .firmeoo-door-product-hero-collection,.firmeoo-door-header-template-dark .firmeoo-door-product-hero-desc,.firmeoo-door-header-template-dark .firmeoo-door-product-hero-price-label { color:#c9c1db; }
.firmeoo-door-header-template-dark .firmeoo-door-product-hero-info h1 { font-size:54px; }
.firmeoo-door-header-template-dark .firmeoo-door-product-hero-price-value { color:#d6b36a; }

.firmeoo-door-header-template-full-bleed .firmeoo-door-product-hero { position:relative; max-width:none; min-height:670px; padding:0; overflow:hidden; background:#17131e; }
.firmeoo-door-header-template-full-bleed .firmeoo-door-product-hero-photo { position:absolute; inset:0; }
.firmeoo-door-header-template-full-bleed .firmeoo-door-product-hero-photo::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(8,6,12,.9),rgba(8,6,12,.42) 52%,rgba(8,6,12,.05)); }
.firmeoo-door-header-template-full-bleed .firmeoo-door-product-hero-photo img { width:100%; height:100%; object-fit:cover; border-radius:0; }
.firmeoo-door-header-template-full-bleed .firmeoo-door-product-hero-info { position:relative; z-index:2; max-width:600px; margin-left:max(30px,calc((100vw - 1200px)/2)); color:#fff; }
.firmeoo-door-header-template-full-bleed .firmeoo-door-product-hero-info h1 { font-size:64px; }
.firmeoo-door-header-template-full-bleed .firmeoo-door-product-hero-collection,.firmeoo-door-header-template-full-bleed .firmeoo-door-product-hero-desc,.firmeoo-door-header-template-full-bleed .firmeoo-door-product-hero-price-label { color:#eee9f6; }

.firmeoo-door-header-template-minimal .firmeoo-door-product-hero { flex-direction:column; text-align:center; padding-top:56px; }
.firmeoo-door-header-template-minimal .firmeoo-door-product-hero-photo { flex:auto; width:min(760px,100%); order:2; }
.firmeoo-door-header-template-minimal .firmeoo-door-product-hero-photo img { width:100%; height:440px; object-fit:cover; border-radius:0; }
.firmeoo-door-header-template-minimal .firmeoo-door-product-hero-info { order:1; }
.firmeoo-door-header-template-minimal .firmeoo-door-product-hero-info h1 { font-size:48px; letter-spacing:-.04em; }
.firmeoo-door-header-template-minimal .firmeoo-door-product-hero-desc { margin-left:auto; margin-right:auto; }

@media (max-width: 800px) {
    .firmeoo-door-header{padding:10px 16px}.firmeoo-door-logo img,.firmeoo-door-logo-image{height:23px;max-width:120px}.firmeoo-door-header-info strong{max-width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .firmeoo-door-product-hero { flex-direction:column;min-height:0;padding:48px 20px;text-align:center;gap:38px; }
    .firmeoo-door-product-hero-photo { order:2;flex-basis:auto;width:min(380px,90%);max-width:none;transform:none; }
    .firmeoo-door-product-hero-photo img{height:auto;aspect-ratio:1/1;}
    .firmeoo-door-product-hero-info{order:1}.firmeoo-door-product-hero-info h1{font-size:44px}.firmeoo-door-product-hero-collection{justify-content:center}.firmeoo-door-product-hero-collection::before{display:none}
    .firmeoo-door-product-hero-desc { max-width: none; }
    .firmeoo-door-header-template-editorial .firmeoo-door-product-hero-info { padding-left:0; }
    .firmeoo-door-header-template-editorial .firmeoo-door-product-hero-photo,.firmeoo-door-header-template-dark .firmeoo-door-product-hero-photo { width:100%; max-width:none; }
    .firmeoo-door-header-template-full-bleed .firmeoo-door-product-hero { min-height:620px; justify-content:center; }
    .firmeoo-door-header-template-full-bleed .firmeoo-door-product-hero-info { margin:0; padding:28px; }
    .firmeoo-door-header-template-full-bleed .firmeoo-door-product-hero-info h1 { font-size:44px; }
}

/* ---- Stats row (category / views / purchases), under the configurator. ---- */
.firmeoo-door-stats-section {
    max-width: 1200px; margin: 0 auto; padding: 24px 24px 0;
}
.firmeoo-door-stats-inner {
    background: #fff; border: 1px solid #e5e0ee; border-radius: 12px;
    padding: 20px 28px; display: flex; flex-wrap: wrap; gap: 12px 40px;
}
.firmeoo-door-stat-row { display: flex; align-items: baseline; gap: 8px; font-size: 14px; }
.firmeoo-door-stat-label { color: #8a7f9c; font-weight: 600; white-space: nowrap; }
.firmeoo-door-stat-value { color: #1c1c1c; font-weight: 700; }
.firmeoo-door-category-links { display:inline-flex; flex-wrap:wrap; align-items:center; gap:6px; }
.firmeoo-door-category-links a { color:#6c26d9; text-decoration:none; border-bottom:1px solid transparent; }
.firmeoo-door-category-links a:hover { border-bottom-color:currentColor; }

/* ---- Related products, full-bleed background with a centred, readable row of cards inside. ---- */
.firmeoo-door-related-section {
    width: 100%; margin-top: 40px; padding: 40px 24px 60px;
    background: linear-gradient(180deg, #fff 0%, #f4f2f8 100%);
    border-top: 1px solid #e5e0ee;
}
.firmeoo-door-related-inner { max-width: 1200px; margin: 0 auto; }
.firmeoo-door-related-title { font-size: 22px; margin: 0 0 20px; color: #1c1c1c; }
.firmeoo-door-related-grid {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px;
}
.firmeoo-door-related-card {
    display: block; background: #fff; border: 1px solid #e5e0ee; border-radius: 12px;
    overflow: hidden; text-decoration: none; color: inherit;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04); transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.firmeoo-door-related-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(123,47,247,0.15); }
.firmeoo-door-related-card img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.firmeoo-door-related-card-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.firmeoo-door-related-card-name { font-weight: 700; font-size: 15px; color: #1c1c1c; }
.firmeoo-door-related-card-price { font-size: 13px; color: #7b2ff7; font-weight: 600; }

@media (max-width: 640px) {
    .firmeoo-door-stats-inner { flex-direction: column; gap: 10px; }
    .firmeoo-door-price-tag { align-items:center; gap:10px; }
    .firmeoo-door-security-badge { padding:7px 9px; font-size:8px; }
    .firmeoo-door-price-total { width:100%; flex-direction:row; align-items:baseline; justify-content:space-between; gap:8px; padding-top:9px; border-top:1px solid #eee9f4; }
    .firmeoo-door-step-eco .firmeoo-door-list-option-photo { width:72px; height:98px; }
    .firmeoo-door-step-eco .firmeoo-door-option-card { min-height:235px; }
    .firmeoo-door-step-eco .firmeoo-door-option-card img { height:165px; }
}
@media (max-width: 1050px) and (min-width: 641px) { .firmeoo-door-related-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width: 640px) { .firmeoo-door-related-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } }
@media (max-width: 390px) { .firmeoo-door-related-grid { grid-template-columns:1fr; } }
