/* ABOUTME: Awnings page layout — variant gallery + specs beside description column, */
/* ABOUTME: with flat/arched icon switcher buttons ([wsllc_awning_products]). */

.wsllc-awn {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 44px;
    align-items: start;
    padding: 10px 0 30px;
}

.wsllc-awn__variant.is-hidden,
.wsllc-awn__colorset.is-hidden {
    display: none;
}

/* ── Specs under the gallery ── */

.wsllc-awn__specs {
    margin-top: 28px;
}
.wsllc-awn__specs h3 {
    font-size: 18px;
    margin: 0 0 12px;
}
.wsllc-awn__specs ul {
    margin: 0;
    padding-left: 18px;
}
.wsllc-awn__specs li {
    margin-bottom: 6px;
}
/* Explicit left/right spec columns (the arched split is 4/2, which a
   balanced CSS column layout can't express). Stacks on narrow screens. */
.wsllc-awn__specs-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 44px;
}
@media (max-width: 899px) {
    .wsllc-awn__specs-cols {
        grid-template-columns: 1fr;
    }
}

/* ── Info column ── */

.wsllc-awn__info h2 {
    margin-top: 0;
}

/* ── Color picker — simple circles, orange outline on hover/selected ── */

.wsllc-awn__colors {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
}
.wsllc-awn__colors-label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: #4a5568;
}
.wsllc-awn__swatch {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    padding: 3px;
    background: #fff;
    border: 2px solid #d9dfe5;
    cursor: pointer;
    display: flex;
    transition: border-color 0.2s;
}
.wsllc-awn__swatch span {
    flex: 1;
    border-radius: 50%;
}
.wsllc-awn__swatch[data-color="white"] span {
    background: #fff;
    box-shadow: inset 0 0 0 1px #e3e6ea;   /* keep the white dot visible on white */
}
.wsllc-awn__swatch[data-color="brown"] span {
    background: #6e4b33;
}
.wsllc-awn__swatch:hover,
.wsllc-awn__swatch.is-active {
    border-color: #ca511d;
}

/* ── Variant switcher buttons (line-art awning icons) ── */

.wsllc-awn__switch {
    display: flex;
    gap: 14px;
    margin-top: 26px;
}
.wsllc-awn__switch-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px 12px 14px;
    background: #fff;
    border: 1px solid #d9dfe5;
    border-radius: 12px;
    cursor: pointer;
    color: #4a5568;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    line-height: 1.2;
    transition: border-color 0.2s, box-shadow 0.2s, color 0.2s, transform 0.2s;
}
.wsllc-awn__switch-btn svg {
    width: 46px;
    height: 46px;
}
.wsllc-awn__switch-btn:hover {
    border-color: #ca511d;
    color: #1a1a2e;
    transform: translateY(-2px);
}
.wsllc-awn__switch-btn.is-active {
    border-color: #ca511d;
    box-shadow: 0 0 0 2px #ca511d;
    color: #ca511d;
}

/* ── Responsive: single column; description + switcher lead so the buttons
      that control the gallery are visible before it ── */

@media (max-width: 900px) {
    .wsllc-awn {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .wsllc-awn__info {
        order: -1;
    }
}