.pswa-gib{--gib-green:#159735;--gib-text:#101820;--gib-muted:#4b5560;--gib-border:#dfe5e8;--gib-card:#fff;--gib-light:#f7f9f8;max-width:1680px;margin:0 auto;padding:28px 24px 0;color:var(--gib-text);font-family:Arial,Helvetica,sans-serif;box-sizing:border-box;overflow:hidden}.pswa-gib *{box-sizing:border-box}.pswa-gib-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:50px;align-items:start}.pswa-gib-breadcrumb{font-size:14px;margin:0 0 24px}.pswa-gib-breadcrumb span{margin:0 10px;color:#8b949e}.pswa-gib h1{font-size:42px;line-height:1.05;margin:0 0 24px;font-weight:900}.pswa-gib p{font-size:17px;color:var(--gib-muted);line-height:1.5;margin:0 0 12px}.pswa-gib-features{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:45px}.pswa-gib-feature{display:flex;gap:14px;align-items:flex-start;border-right:1px solid var(--gib-border);padding-right:16px}.pswa-gib-feature:last-child{border-right:0}.pswa-gib-feature span{color:var(--gib-green);font-size:28px}.pswa-gib-feature svg{width:28px;height:28px;fill:var(--gib-green)}.pswa-gib-feature strong{display:block;font-size:13px;font-weight:900;margin-bottom:8px}.pswa-gib-feature small{display:block;color:var(--gib-muted);font-size:12px;line-height:1.5}.pswa-gib-hero{min-height:305px;border-radius:8px;background:#eee center/cover no-repeat;position:relative;overflow:hidden}.pswa-gib-hero:empty:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#ddd,#f9f9f9)}.pswa-gib-circle{position:absolute;right:28px;top:24px;width:170px;height:170px;border-radius:50%;border:9px solid #fff;overflow:hidden;box-shadow:0 8px 25px rgba(0,0,0,.2);background:#fff}.pswa-gib-circle img{width:100%;height:100%;object-fit:cover}.pswa-gib-step{margin-top:28px}.pswa-gib-step h2{font-size:20px;margin:0 0 12px;font-weight:900}.pswa-gib-step>p{font-size:13px;color:#111;margin-bottom:18px}.pswa-gib-panel-options{display:grid;grid-template-columns:repeat(2,minmax(0,360px));gap:24px}.pswa-gib-card{border:1px solid var(--gib-border);border-radius:8px;background:var(--gib-card);padding:28px 22px;text-align:center;position:relative;cursor:pointer;min-height:170px}.pswa-gib-card.active{border-color:var(--gib-green);box-shadow:0 0 0 1px var(--gib-green)}.pswa-gib-card.active:after{content:"✓";position:absolute;right:-10px;top:-10px;width:22px;height:22px;border-radius:50%;background:var(--gib-green);color:#fff;font-weight:900;display:flex;align-items:center;justify-content:center}.pswa-door-icon{width:84px;height:54px;border:3px solid #bbb;margin:0 auto 18px;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);gap:1px;background:#ccc}.pswa-door-icon span{background:#f5f5f5}.pswa-gib-card strong{display:block;font-size:17px;margin-bottom:9px}.pswa-gib-card small{font-size:14px}.pswa-gib-mid{display:grid;grid-template-columns:1fr 1.1fr;gap:34px}.pswa-gib-info{grid-column:2;background:var(--gib-light);border:1px solid var(--gib-border);border-radius:8px;margin-top:14px;padding:26px 28px;display:grid;grid-template-columns:1fr 300px;gap:28px;align-items:center}.pswa-gib-info h3{margin:0 0 20px;font-size:18px}.pswa-gib-info ul{list-style:none;margin:0;padding:0;display:grid;gap:18px}.pswa-gib-info li{font-size:14px;color:#1e2933}.pswa-gib-info li:before{content:"✓";color:var(--gib-green);border:1px solid var(--gib-green);border-radius:50%;font-size:10px;margin-right:12px;padding:1px 3px}.pswa-gib-diagram{position:relative;height:160px}.pswa-gib-diagram div{position:absolute;left:20px;top:30px;width:210px;height:120px;border:2px solid #aaa;background:linear-gradient(#fff,#f6f6f6)}.pswa-gib-diagram span{position:absolute;left:55px;top:0;color:var(--gib-green);font-weight:900;font-size:12px}.pswa-gib-diagram em{position:absolute;right:0;top:55px;color:var(--gib-green);font-style:normal;font-weight:900;font-size:12px}.pswa-gib-diagram b{position:absolute;right:18px;bottom:0;color:var(--gib-green);font-size:12px}.pswa-gib-main{display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:44px;align-items:start}.pswa-gib-selects{display:flex;gap:18px;margin-bottom:20px}.pswa-gib-selects label{font-weight:700;font-size:13px}.pswa-gib-selects select{height:38px;border:1px solid var(--gib-green);border-radius:5px;background:#fff;padding:0 16px;margin-left:12px}.pswa-gib-panels-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.pswa-gib-panel-input{border:1px solid var(--gib-border);border-radius:8px;padding:14px;background:#fff}.pswa-gib-panel-input strong{display:block;margin-bottom:13px}.pswa-gib-panel-input .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.pswa-gib-panel-input label{font-size:11px;font-weight:700}.pswa-gib-panel-input input{width:100%;height:36px;border:1px solid #ccd5db;border-radius:4px;padding:0 10px;margin-top:6px}.pswa-gib-note{font-size:13px!important;margin-top:18px!important}.pswa-gib-note::first-letter{color:var(--gib-green)}.pswa-gib-summary{background:#fff;border:1px solid var(--gib-border);border-radius:8px;padding:26px 26px;box-shadow:0 15px 35px rgba(0,0,0,.04);position:sticky;top:20px}.pswa-gib-summary h3{font-size:22px;margin:0 0 22px}.pswa-gib-summary div:not(.pswa-gib-price){display:flex;justify-content:space-between;gap:20px;margin:0 0 22px;font-size:14px}.pswa-gib-summary span{color:var(--gib-muted)}.pswa-gib-summary hr{border:0;border-top:1px solid var(--gib-border);margin:22px 0}.pswa-gib-summary small{display:block;font-weight:700;margin-bottom:8px}.pswa-gib-price{font-size:27px;font-weight:900;margin-bottom:18px}.pswa-gib-price span{font-size:12px;font-weight:500;color:#111}.pswa-gib-add{width:100%;height:46px;background:var(--gib-green);border:0;border-radius:5px;color:#fff;font-weight:900;cursor:pointer}.pswa-gib-upload{height:44px;border:1px solid var(--gib-green);border-radius:5px;color:var(--gib-green);font-weight:900;text-decoration:none;display:flex;align-items:center;justify-content:center;margin-top:12px;font-size:13px}.pswa-gib-bottom{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;margin-top:36px;background:#fff;border-top:1px solid var(--gib-border);padding:28px 0}.pswa-gib-bottom div{display:flex;gap:16px;align-items:center;justify-content:center}.pswa-gib-bottom span{color:var(--gib-green);font-size:30px}.pswa-gib-bottom svg{width:30px;height:30px;fill:var(--gib-green)}.pswa-gib-bottom strong{display:block;font-size:15px}.pswa-gib-bottom small{display:block;color:var(--gib-muted);font-size:13px;margin-top:6px}@media(max-width:1100px){.pswa-gib-top,.pswa-gib-main,.pswa-gib-mid{grid-template-columns:1fr}.pswa-gib-info{grid-column:auto}.pswa-gib-summary{position:relative}.pswa-gib-panels-grid{grid-template-columns:repeat(2,1fr)}.pswa-gib-features{grid-template-columns:repeat(2,1fr)}.pswa-gib-bottom{grid-template-columns:repeat(2,1fr)}}@media(max-width:767px){.pswa-gib{padding:22px 14px}.pswa-gib h1{font-size:34px}.pswa-gib-hero{min-height:220px}.pswa-gib-circle{width:120px;height:120px}.pswa-gib-panel-options,.pswa-gib-panels-grid,.pswa-gib-info,.pswa-gib-bottom,.pswa-gib-features{grid-template-columns:1fr}.pswa-gib-selects{display:grid}.pswa-gib-selects select{margin:7px 0 0;width:100%}.pswa-gib-info{padding:20px}.pswa-gib-main{gap:20px}}

/* Dimension diagram update */
.pswa-gib-mid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:34px!important;
}
.pswa-gib-info{
    grid-column:auto!important;
    background:var(--gib-light)!important;
    border:1px solid var(--gib-border)!important;
    border-radius:8px!important;
    margin-top:14px!important;
    padding:26px 34px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1.1fr) 360px!important;
    gap:42px!important;
    align-items:center!important;
}
.pswa-gib-info-text{
    min-width:0;
}
.pswa-gib-info h3{
    margin:0 0 22px!important;
    font-size:18px!important;
    font-weight:900!important;
}
.pswa-gib-info ul{
    list-style:none!important;
    margin:0!important;
    padding:0!important;
    display:grid!important;
    gap:18px!important;
}
.pswa-gib-info li{
    font-size:14px!important;
    line-height:1.5!important;
    color:#1e2933!important;
    display:flex!important;
    align-items:flex-start!important;
    gap:12px!important;
}
.pswa-gib-info li:before{
    content:"✓"!important;
    color:var(--gib-green)!important;
    border:1px solid var(--gib-green)!important;
    border-radius:50%!important;
    font-size:10px!important;
    width:17px!important;
    height:17px!important;
    min-width:17px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    margin:2px 0 0 0!important;
    padding:0!important;
}
.pswa-gib-diagram{
    position:relative!important;
    height:205px!important;
    width:330px!important;
    max-width:100%!important;
    justify-self:end!important;
    overflow:visible!important;
}
.pswa-gib-diagram .pswa-dim-box{
    position:absolute!important;
    left:34px!important;
    top:54px!important;
    width:235px!important;
    height:122px!important;
    border:2px solid #9fa3a6!important;
    background:linear-gradient(#fff,#f7f7f7)!important;
}
.pswa-gib-diagram .pswa-dim-top{
    position:absolute!important;
    left:34px!important;
    top:16px!important;
    width:235px!important;
    height:24px!important;
    border-top:2px solid var(--gib-green)!important;
}
.pswa-gib-diagram .pswa-dim-top:before,
.pswa-gib-diagram .pswa-dim-top:after{
    content:""!important;
    position:absolute!important;
    top:-6px!important;
    width:0!important;
    height:0!important;
    border-top:5px solid transparent!important;
    border-bottom:5px solid transparent!important;
}
.pswa-gib-diagram .pswa-dim-top:before{
    left:-1px!important;
    border-right:8px solid var(--gib-green)!important;
}
.pswa-gib-diagram .pswa-dim-top:after{
    right:-1px!important;
    border-left:8px solid var(--gib-green)!important;
}
.pswa-gib-diagram .pswa-dim-top span{
    position:absolute!important;
    top:-24px!important;
    left:0!important;
    right:0!important;
    text-align:center!important;
    color:var(--gib-green)!important;
    font-size:12px!important;
    font-weight:900!important;
}
.pswa-gib-diagram .pswa-dim-right{
    position:absolute!important;
    left:288px!important;
    top:54px!important;
    width:24px!important;
    height:122px!important;
    border-right:2px solid var(--gib-green)!important;
}
.pswa-gib-diagram .pswa-dim-right:before,
.pswa-gib-diagram .pswa-dim-right:after{
    content:""!important;
    position:absolute!important;
    right:-6px!important;
    width:0!important;
    height:0!important;
    border-left:5px solid transparent!important;
    border-right:5px solid transparent!important;
}
.pswa-gib-diagram .pswa-dim-right:before{
    top:-1px!important;
    border-bottom:8px solid var(--gib-green)!important;
}
.pswa-gib-diagram .pswa-dim-right:after{
    bottom:-1px!important;
    border-top:8px solid var(--gib-green)!important;
}
.pswa-gib-diagram .pswa-dim-right span{
    position:absolute!important;
    left:18px!important;
    top:42px!important;
    color:var(--gib-green)!important;
    font-size:12px!important;
    font-weight:900!important;
    line-height:1.25!important;
    white-space:nowrap!important;
}
.pswa-gib-diagram .pswa-dim-bottom{
    position:absolute!important;
    left:194px!important;
    top:190px!important;
    width:75px!important;
    height:18px!important;
    border-top:2px solid var(--gib-green)!important;
}
.pswa-gib-diagram .pswa-dim-bottom:before,
.pswa-gib-diagram .pswa-dim-bottom:after{
    content:""!important;
    position:absolute!important;
    top:-6px!important;
    width:0!important;
    height:0!important;
    border-top:5px solid transparent!important;
    border-bottom:5px solid transparent!important;
}
.pswa-gib-diagram .pswa-dim-bottom:before{
    left:-1px!important;
    border-right:8px solid var(--gib-green)!important;
}
.pswa-gib-diagram .pswa-dim-bottom:after{
    right:-1px!important;
    border-left:8px solid var(--gib-green)!important;
}
.pswa-gib-diagram .pswa-dim-bottom span{
    position:absolute!important;
    top:-24px!important;
    left:-8px!important;
    color:var(--gib-green)!important;
    font-size:12px!important;
    font-weight:900!important;
    white-space:nowrap!important;
}
@media(max-width:1100px){
    .pswa-gib-info{
        grid-template-columns:1fr!important;
    }
    .pswa-gib-diagram{
        justify-self:start!important;
    }
}
@media(max-width:767px){
    .pswa-gib-info{
        padding:22px!important;
        gap:26px!important;
    }
    .pswa-gib-diagram{
        transform:scale(.86)!important;
        transform-origin:left top!important;
        height:180px!important;
    }
}


/* Same-row layout for panel choice + important info */
.pswa-gib-selection-row{
    display:grid!important;
    grid-template-columns:minmax(0, 48%) minmax(0, 52%)!important;
    gap:34px!important;
    align-items:stretch!important;
    margin-top:28px!important;
    margin-bottom:28px!important;
    width:100%!important;
}
.pswa-gib-selection-row .pswa-gib-step{
    margin-top:0!important;
}
.pswa-gib-panel-section{
    min-width:0!important;
}
.pswa-gib-selection-row .pswa-gib-info{
    grid-column:auto!important;
    margin-top:0!important;
    height:100%!important;
    align-self:stretch!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 330px!important;
    gap:30px!important;
    align-items:center!important;
    padding:24px 28px!important;
}
.pswa-gib-selection-row .pswa-gib-panel-options{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:24px!important;
    width:100%!important;
}
.pswa-gib-selection-row .pswa-gib-card{
    min-height:168px!important;
}
.pswa-gib-selection-row .pswa-gib-diagram{
    justify-self:end!important;
    width:320px!important;
}
@media(max-width:1200px){
    .pswa-gib-selection-row{
        grid-template-columns:1fr!important;
    }
    .pswa-gib-selection-row .pswa-gib-info{
        grid-template-columns:minmax(0,1fr) 330px!important;
    }
}
@media(max-width:767px){
    .pswa-gib-selection-row{
        gap:22px!important;
    }
    .pswa-gib-selection-row .pswa-gib-panel-options{
        grid-template-columns:1fr!important;
    }
    .pswa-gib-selection-row .pswa-gib-info{
        grid-template-columns:1fr!important;
    }
    .pswa-gib-selection-row .pswa-gib-diagram{
        justify-self:start!important;
    }
}


/* Strong mobile responsiveness fixes */
html,
body{
    max-width:100%!important;
    overflow-x:hidden!important;
}

.pswa-gib{
    width:100%!important;
    max-width:100%!important;
    overflow:hidden!important;
}

.pswa-gib *{
    max-width:100%;
}

@media(max-width:900px){
    .pswa-gib{
        padding-left:14px!important;
        padding-right:14px!important;
    }

    .pswa-gib-top,
    .pswa-gib-selection-row,
    .pswa-gib-main,
    .pswa-gib-info,
    .pswa-gib-mid,
    .pswa-gib-bottom,
    .pswa-gib-features{
        display:flex!important;
        flex-direction:column!important;
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        grid-template-columns:none!important;
    }

    .pswa-gib-top{
        gap:22px!important;
    }

    .pswa-gib h1{
        font-size:32px!important;
        line-height:1.08!important;
    }

    .pswa-gib p{
        font-size:15px!important;
    }

    .pswa-gib-hero{
        min-height:220px!important;
        width:100%!important;
    }

    .pswa-gib-circle{
        width:110px!important;
        height:110px!important;
        right:18px!important;
        top:18px!important;
        border-width:6px!important;
    }

    .pswa-gib-features{
        gap:14px!important;
        margin-top:24px!important;
    }

    .pswa-gib-feature{
        border-right:0!important;
        border-bottom:1px solid var(--gib-border)!important;
        padding:0 0 14px 0!important;
        width:100%!important;
    }

    .pswa-gib-selection-row{
        gap:22px!important;
        margin-top:24px!important;
        margin-bottom:24px!important;
        overflow:visible!important;
    }

    .pswa-gib-panel-section,
    .pswa-gib-selection-row .pswa-gib-step{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
    }

    .pswa-gib-panel-options,
    .pswa-gib-selection-row .pswa-gib-panel-options{
        display:grid!important;
        grid-template-columns:1fr!important;
        gap:14px!important;
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
    }

    .pswa-gib-card,
    .pswa-gib-selection-row .pswa-gib-card{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        min-height:145px!important;
        padding:22px 16px!important;
        display:block!important;
        touch-action:manipulation!important;
        -webkit-tap-highlight-color:rgba(21,151,53,.15)!important;
        cursor:pointer!important;
        position:relative!important;
        z-index:5!important;
    }

    .pswa-gib-card.active:after{
        right:8px!important;
        top:8px!important;
    }

    .pswa-gib-info,
    .pswa-gib-selection-row .pswa-gib-info{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        padding:20px!important;
        gap:24px!important;
        align-self:auto!important;
        height:auto!important;
        overflow:hidden!important;
    }

    .pswa-gib-info-text,
    .pswa-gib-info ul{
        width:100%!important;
        max-width:100%!important;
    }

    .pswa-gib-diagram,
    .pswa-gib-selection-row .pswa-gib-diagram{
        width:300px!important;
        max-width:300px!important;
        height:190px!important;
        justify-self:start!important;
        align-self:flex-start!important;
        transform:scale(.82)!important;
        transform-origin:left top!important;
        margin-bottom:-26px!important;
    }

    .pswa-gib-selects{
        display:flex!important;
        flex-direction:column!important;
        gap:12px!important;
        width:100%!important;
    }

    .pswa-gib-selects label{
        width:100%!important;
        display:block!important;
    }

    .pswa-gib-selects select{
        width:100%!important;
        max-width:100%!important;
        margin:7px 0 0!important;
        height:44px!important;
    }

    .pswa-gib-panels-grid{
        display:grid!important;
        grid-template-columns:1fr!important;
        gap:12px!important;
        width:100%!important;
    }

    .pswa-gib-panel-input{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
    }

    .pswa-gib-panel-input .row{
        grid-template-columns:1fr 1fr!important;
        gap:10px!important;
    }

    .pswa-gib-panel-input input{
        height:42px!important;
        font-size:16px!important;
    }

    .pswa-gib-summary{
        position:static!important;
        top:auto!important;
        width:100%!important;
        max-width:100%!important;
        margin-top:10px!important;
        padding:22px!important;
    }

    .pswa-gib-summary div:not(.pswa-gib-price){
        display:grid!important;
        grid-template-columns:1fr!important;
        gap:6px!important;
    }

    .pswa-gib-add,
    .pswa-gib-upload{
        width:100%!important;
        min-height:48px!important;
        font-size:14px!important;
    }

    .pswa-gib-bottom{
        gap:16px!important;
        padding:22px 0!important;
    }

    .pswa-gib-bottom div{
        justify-content:flex-start!important;
        width:100%!important;
        border-bottom:1px solid var(--gib-border)!important;
        padding-bottom:14px!important;
    }
}

@media(max-width:420px){
    .pswa-gib{
        padding-left:12px!important;
        padding-right:12px!important;
    }

    .pswa-gib h1{
        font-size:28px!important;
    }

    .pswa-door-icon{
        transform:scale(.9)!important;
        transform-origin:center!important;
    }

    .pswa-gib-panel-input .row{
        grid-template-columns:1fr!important;
    }

    .pswa-gib-diagram,
    .pswa-gib-selection-row .pswa-gib-diagram{
        transform:scale(.72)!important;
        margin-bottom:-44px!important;
    }
}


/* Correct garage door icons: 8 panels = 2x4, 16 panels = 4x4 */
.pswa-door-icon{
    margin:0 auto 18px!important;
    border:3px solid #bfc3c6!important;
    background:#d9dcde!important;
    gap:2px!important;
    padding:0!important;
    box-sizing:border-box!important;
}

.pswa-door-icon span{
    display:block!important;
    background:#f7f7f7!important;
    border:0!important;
}

.pswa-door-icon-8{
    width:84px!important;
    height:54px!important;
    display:grid!important;
    grid-template-columns:repeat(4,1fr)!important;
    grid-template-rows:repeat(2,1fr)!important;
}

.pswa-door-icon-16{
    width:84px!important;
    height:84px!important;
    display:grid!important;
    grid-template-columns:repeat(4,1fr)!important;
    grid-template-rows:repeat(4,1fr)!important;
}

@media(max-width:767px){
    .pswa-door-icon-8{
        width:84px!important;
        height:54px!important;
    }
    .pswa-door-icon-16{
        width:84px!important;
        height:84px!important;
    }
}
