/* Hygge Pergola Configurator v0.5.3 */
:root{
    --hpc-brand:#556052;
    --hpc-brand-dark:#414b3f;
    --hpc-sale:#9a1b1b;
    --hpc-add:#35a85f;
    --hpc-border:#d9ddd8;
    --hpc-muted:#6c706b;
    --hpc-soft:#f6f7f5;
    --hpc-text:#1f211f;
}

.hpc-configurator{
    margin:18px 0 14px;
    font-size:14px;
    color:var(--hpc-text);
}
.hpc-heading-row{
    display:block;
    margin-bottom:11px;
}
.hpc-title{
    font-weight:700;
    font-size:14px;
    line-height:1.3;
}
.hpc-subtitle{
    font-size:12px;
    margin-top:3px;
    color:#50544f;
}
.hpc-saving-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:25px;
    font-size:11px;
    line-height:1;
    font-weight:700;
    background:#eef2ed;
    color:var(--hpc-brand);
    border-radius:3px;
    padding:6px 9px;
    white-space:nowrap;
}
.hpc-layout-message{
    border:1px solid #e2e4e1;
    background:#fafbfa;
    padding:12px 13px;
    border-radius:4px;
    color:#666b65;
    font-size:12px;
}

/* v0.4 side selection cards: two meaningful cards per row rather than four cramped tiles. */
/* v0.5 side selection cards: 4 across on desktop, 2 across on mobile. */
.hpc-side-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
}
.hpc-side-card{
    appearance:none;
    -webkit-appearance:none;
    display:grid;
    width:100%;
    height:auto !important;
    max-height:none !important;
    box-sizing:border-box;
    margin:0;
    line-height:normal;
    white-space:normal;
    font:inherit;
    grid-template-columns:1fr;
    grid-template-rows:auto auto minmax(62px,auto) auto;
    min-width:0;
    min-height:0;
    position:relative;
    background:#fff;
    border:1px solid #d3d7d2;
    border-radius:5px;
    padding:0;
    text-align:left;
    overflow:hidden;
    cursor:pointer;
    color:inherit;
    box-shadow:none;
    transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease,background .16s ease;
}
.hpc-side-card:hover{
    border-color:var(--hpc-brand);
    box-shadow:0 0 0 1px var(--hpc-brand),0 5px 16px rgba(51,61,49,.08);
    transform:translateY(-1px);
}
.hpc-side-card:focus-visible{outline:2px solid var(--hpc-brand);outline-offset:2px}
.hpc-side-card.is-selected{
    border-color:var(--hpc-brand);
    box-shadow:inset 0 0 0 1px var(--hpc-brand);
    background:#fcfdfc;
}
.hpc-side-card-topline{
    grid-column:1;
    grid-row:1;
    min-height:34px;
    padding:7px 9px 6px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:6px;
    border-bottom:1px solid #eceeeb;
    background:#fafbfa;
    font-size:10px;
    line-height:1.15;
    color:#555a55;
}
.hpc-side-card.is-selected .hpc-side-card-topline{background:#f4f7f3}
.hpc-side-position{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-weight:600;
}
.hpc-side-state{display:flex;align-items:center;justify-content:flex-end;flex:0 0 auto;gap:5px}
.hpc-side-width-chip{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:20px;
    padding:3px 7px;
    border:1px solid #d9ddd8;
    border-radius:999px;
    background:#fff;
    color:#686d68;
    font-size:9px;
    line-height:1;
    font-weight:650;
}
.hpc-selected-badge{display:none}
.hpc-side-media{
    grid-column:1;
    grid-row:2;
    width:100%;
    height:auto;
    min-height:0;
    aspect-ratio:1 / 1;
    background:linear-gradient(180deg,#cbd1d6 0%,#eef0f1 100%);
    overflow:hidden;
    border-bottom:1px solid #eceeeb;
}
.hpc-side-image{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.hpc-side-placeholder{position:relative;width:100%;height:100%;display:grid;place-items:center}
.hpc-frame-graphic{position:relative;width:58%;height:48%;margin-top:4px}
.hpc-frame-top,.hpc-frame-left,.hpc-frame-right{position:absolute;display:block;background:#343a3d;border-radius:1px}
.hpc-frame-top{left:0;right:0;top:0;height:7px}
.hpc-frame-left{left:2px;top:5px;bottom:0;width:6px}
.hpc-frame-right{right:2px;top:5px;bottom:0;width:6px}
.hpc-placeholder-code{
    position:absolute;top:7px;right:7px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.88);color:#41474a;font-size:10px;font-weight:700;
}
.hpc-side-card-body{
    grid-column:1;
    grid-row:3;
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    width:100%;
    padding:7px 8px 8px;
    text-align:center;
}
.hpc-side-choice{
    font-weight:650;
    font-size:10px;
    line-height:1.28;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
}
.hpc-side-meta{
    font-size:9px;
    line-height:1.3;
    color:#747974;
    margin-top:4px;
    white-space:normal;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
}
.hpc-side-price{
    font-size:10px;
    line-height:1.2;
    font-weight:700;
    color:var(--hpc-sale);
    margin-top:5px;
}
.hpc-side-action{
    grid-column:1;
    grid-row:4;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    width:100%;
    margin-top:auto;
    background:var(--hpc-brand);
    color:#fff;
    text-align:center;
    font-size:10px;
    line-height:1;
    font-weight:650;
    padding:6px 7px;
    min-height:24px;
}
.hpc-side-action-arrow{font-size:12px;line-height:1;transition:transform .15s ease}
.hpc-side-card:hover .hpc-side-action,.hpc-side-card.is-selected .hpc-side-action{background:var(--hpc-brand-dark)}
.hpc-side-card:hover .hpc-side-action-arrow{transform:translateX(2px)}

.hpc-config-summary{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:9px;
    margin-top:10px;
    padding:8px 10px;
    border:1px solid #dfe4dc;
    background:#f6f8f5;
    border-radius:4px;
}
.hpc-summary-check{
    display:grid;
    place-items:center;
    width:20px;
    height:20px;
    border-radius:50%;
    background:var(--hpc-brand);
    color:#fff;
    font-size:11px;
    font-weight:700;
}
.hpc-summary-copy{display:block;min-width:0}
.hpc-summary-copy strong{font-size:11px;font-weight:650}
.hpc-summary-copy small{font-size:9px;color:#6d716d;line-height:1.25}
.hpc-summary-total{
    color:var(--hpc-brand-dark);
    font-size:12px;
    font-weight:700;
    white-space:nowrap;
}

/* Modal */
.hpc-modal{
    position:fixed;
    inset:0;
    z-index:999999;
    display:none;
}
.hpc-modal.is-open{display:block}
.hpc-modal-backdrop{
    position:absolute;
    inset:0;
    background:rgba(26,29,27,.52);
    backdrop-filter:blur(1px);
}
.hpc-modal-dialog{
    position:relative;
    width:min(1180px,calc(100vw - 46px));
    max-height:calc(100vh - 52px);
    margin:26px auto;
    background:#fff;
    overflow:auto;
    padding:31px 34px 34px;
    box-shadow:0 22px 70px rgba(0,0,0,.28);
    border-radius:3px;
}
.hpc-modal-open{overflow:hidden}
.hpc-modal-close{
    position:absolute;
    z-index:3;
    top:15px;
    right:19px;
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border:0;
    background:transparent;
    color:#161816;
    font-size:36px;
    line-height:1;
    cursor:pointer;
    font-weight:250;
}
.hpc-modal-header h2{
    font-size:29px;
    line-height:1.15;
    margin:0 50px 4px 0;
    font-weight:600;
    letter-spacing:-.02em;
}
.hpc-modal-header p{
    font-size:14px;
    line-height:1.35;
    margin:0;
    color:#454945;
}
.hpc-modal-divider{
    height:1px;
    background:#777c77;
    margin:19px 0 20px;
    opacity:.62;
}
.hpc-modal-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin-bottom:14px;
}
.hpc-modal-toolbar>div{
    display:flex;
    flex-direction:column;
    gap:2px;
}
.hpc-modal-toolbar strong{font-size:12px;font-weight:650}
.hpc-modal-toolbar span{font-size:11px;color:#747874}
.hpc-products-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    align-items:stretch;
    gap:22px;
}
.hpc-product-card{
    min-width:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border:1px solid #e0e3df;
    border-radius:4px;
    background:#fff;
    transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;
}
.hpc-product-card:hover{
    border-color:#c1c7bf;
    box-shadow:0 7px 20px rgba(44,53,42,.08);
    transform:translateY(-1px);
}
.hpc-product-card.is-current{
    border-color:var(--hpc-brand);
    box-shadow:0 0 0 1px var(--hpc-brand),0 7px 22px rgba(44,53,42,.10);
    background:#fcfdfc;
}
.hpc-product-image-wrap{
    position:relative;
    width:100%;
    aspect-ratio:1.12/1;
    overflow:hidden;
    background:#e5e9eb;
}
.hpc-product-image{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}
.hpc-current-product{
    position:absolute;
    top:10px;
    left:10px;
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:6px 8px;
    border-radius:999px;
    background:rgba(85,96,82,.96);
    color:#fff;
    font-size:9px;
    line-height:1;
    font-weight:700;
    box-shadow:0 2px 8px rgba(0,0,0,.10);
}
.hpc-product-content{
    flex:1 1 auto;
    display:flex;
    flex-direction:column;
    padding:12px 12px 13px;
}
.hpc-product-card h3{
    font-size:16px;
    line-height:1.23;
    margin:0 0 5px;
    font-weight:550;
    letter-spacing:-.01em;
}
.hpc-product-desc{
    font-size:11.5px;
    line-height:1.38;
    color:#5c605c;
    min-height:32px;
    margin:0 0 8px;
}
.hpc-product-price{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:4px 7px;
    font-size:12px;
    margin:3px 0 10px;
}
.hpc-price-was{
    text-decoration:line-through;
    color:#858985;
    margin-right:1px;
}
.hpc-product-price strong,
.hpc-live-price strong{
    color:var(--hpc-sale);
    font-weight:650;
}
.hpc-offer-pill{
    display:inline-flex;
    align-items:center;
    min-height:20px;
    padding:3px 6px;
    border-radius:2px;
    background:#edf1ec;
    color:var(--hpc-brand);
    font-size:9px;
    line-height:1;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.03em;
}
.hpc-option-group{
    border-top:1px solid #eceeeb;
    padding-top:10px;
    margin-top:3px;
}
.hpc-option-label{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    font-size:11px;
    font-weight:650;
    margin:0 0 7px;
}
.hpc-option-label small{
    font-size:10px;
    font-weight:400;
    color:#777b77;
}
.hpc-colour-options,
.hpc-quantity-options{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
}
.hpc-colour{
    appearance:none;
    -webkit-appearance:none;
    width:32px;
    height:32px;
    padding:3px;
    border:1px solid transparent;
    border-radius:50%;
    background:#fff;
    display:grid;
    place-items:center;
    cursor:pointer;
}
.hpc-colour:hover{border-color:#afb5ad}
.hpc-colour.is-selected{
    border-color:var(--hpc-brand);
    box-shadow:0 0 0 1px var(--hpc-brand);
}
.hpc-colour-dot{
    display:block;
    width:23px;
    height:23px;
    border-radius:50%;
    border:1px solid #c9ccc8;
    background:#ddd;
}
.hpc-qty{
    appearance:none;
    -webkit-appearance:none;
    min-width:44px;
    height:34px;
    border:1px solid #d1d5d0;
    border-radius:3px;
    background:#fff;
    color:#292c29;
    padding:5px 11px;
    cursor:pointer;
    font-size:11px;
    font-weight:500;
}
.hpc-qty:hover{border-color:#9ca39a}
.hpc-qty.is-selected{
    border-color:var(--hpc-brand);
    background:var(--hpc-brand);
    color:#fff;
}
.hpc-card-footer{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:7px;
    margin-top:auto;
    padding-top:12px;
}
.hpc-live-price{
    min-height:20px;
    display:flex;
    align-items:baseline;
    gap:6px;
    flex-wrap:wrap;
    font-size:13px;
}
.hpc-live-price-label{
    font-size:10px;
    color:#777b77;
    margin-right:1px;
}
.hpc-unavailable{font-size:11px;color:var(--hpc-sale)}
.hpc-add-side{
    appearance:none;
    -webkit-appearance:none;
    width:100%;
    border:0;
    border-radius:4px;
    background:var(--hpc-add);
    color:#fff;
    padding:10px 13px;
    min-height:39px;
    font-size:13px;
    font-weight:650;
    cursor:pointer;
    transition:filter .15s ease,transform .15s ease;
}
.hpc-add-side:hover{filter:brightness(.95);transform:translateY(-1px)}
.hpc-add-side:disabled{opacity:.45;cursor:not-allowed;transform:none}
.hpc-clear-side{
    appearance:none;
    -webkit-appearance:none;
    border:1px solid #d7dad6;
    border-radius:3px;
    background:#fff;
    color:#3f433f;
    padding:8px 11px;
    font-size:11px;
    line-height:1.1;
    font-weight:550;
    cursor:pointer;
}
.hpc-clear-side:hover{border-color:#9fa59d;background:#f8f9f7}
.hpc-no-wall-footer{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin-top:24px;
    padding-top:18px;
    border-top:1px solid #e3e5e2;
    color:#6d716d;
    font-size:11px;
}
.hpc-loading,
.hpc-error,
.hpc-empty{
    min-height:140px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:30px;
    text-align:center;
    background:#fafbfa;
    border:1px solid #e5e7e4;
    color:#5f635f;
}
.hpc-error{color:var(--hpc-sale)}
.hpc-spinner{
    width:18px;
    height:18px;
    border:2px solid #d5d9d4;
    border-top-color:var(--hpc-brand);
    border-radius:50%;
    animation:hpc-spin .8s linear infinite;
}
@keyframes hpc-spin{to{transform:rotate(360deg)}}

@media(max-width:1100px){
    .hpc-products-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:767px){
    .hpc-configurator{
        margin:22px 0 16px;
        font-size:14px;
    }
    .hpc-heading-row{
        align-items:flex-start;
        gap:10px;
        margin-bottom:13px;
    }
    .hpc-title{
        font-size:16px;
        line-height:1.25;
        font-weight:700;
    }
    .hpc-subtitle{
        font-size:12px;
        line-height:1.4;
        margin-top:5px;
        max-width:290px;
    }
    .hpc-saving-badge{
        min-height:30px;
        padding:7px 10px;
        font-size:11px;
        border-radius:4px;
    }
    .hpc-side-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
    }
    .hpc-side-card{
        grid-template-columns:1fr;
        grid-template-rows:36px auto minmax(58px,auto) 28px;
        min-height:0 !important;
        height:auto !important;
        max-height:none !important;
        border-radius:6px;
        overflow:hidden;
        background:#fff;
    }
    .hpc-side-card-topline{
        min-height:36px;
        padding:8px 10px;
        font-size:11px;
    }
    .hpc-side-state{gap:5px}
    .hpc-selected-badge{display:none}
    .hpc-side-width-chip{
        min-height:23px;
        padding:4px 8px;
        font-size:10px;
    }
    .hpc-side-media{
        grid-column:1;
        grid-row:2;
        min-height:0;
        height:auto;
        aspect-ratio:1 / 1;
        border-right:0;
        border-bottom:1px solid #eceeeb;
    }
    .hpc-side-card-body{
        grid-column:1;
        grid-row:3;
        min-height:58px;
        justify-content:flex-start;
        padding:7px 7px 8px;
        overflow:hidden;
        text-align:center;
    }
    .hpc-side-choice{
        font-size:11px;
        line-height:1.25;
        -webkit-line-clamp:2;
    }
    .hpc-side-meta{
        font-size:9.5px;
        line-height:1.25;
        margin-top:4px;
        -webkit-line-clamp:2;
    }
    .hpc-side-price{
        font-size:10.5px;
        margin-top:4px;
    }
    .hpc-side-action{
        grid-column:1;
        grid-row:4;
        min-height:34px;
        height:34px;
        padding:8px 10px;
        font-size:10px;
    }
    .hpc-config-summary{
        grid-template-columns:minmax(0,1fr) auto;
        gap:8px;
        margin-top:10px;
        padding:10px;
    }
    .hpc-summary-copy strong{font-size:11px}
    .hpc-summary-copy small{display:none}
    .hpc-summary-total{
        grid-column:auto;
        justify-self:end;
        font-size:11px;
    }

    .hpc-modal-dialog{
        width:100vw;
        max-width:none;
        height:100dvh;
        max-height:100dvh;
        margin:0;
        padding:21px 14px 28px;
        border-radius:0;
        overscroll-behavior:contain;
    }
    .hpc-modal-header h2{
        font-size:22px;
        line-height:1.2;
        padding-right:42px;
        margin-right:0;
    }
    .hpc-modal-header p{
        font-size:12.5px;
        line-height:1.4;
        padding-right:32px;
    }
    .hpc-modal-divider{margin:15px 0 14px}
    .hpc-modal-toolbar{
        align-items:flex-start;
        flex-direction:column;
        gap:8px;
        margin-bottom:12px;
    }
    .hpc-modal-toolbar strong{font-size:12px}
    .hpc-modal-toolbar span{font-size:10.5px}
    .hpc-products-grid{
        grid-template-columns:1fr;
        gap:14px;
    }
    .hpc-modal-close{
        top:7px;
        right:7px;
        width:42px;
        height:42px;
        font-size:32px;
    }
    .hpc-product-card{
        border-radius:6px;
    }
    .hpc-product-image-wrap{
        aspect-ratio:1.45/1;
        max-height:245px;
    }
    .hpc-product-content{
        padding:12px 12px 13px;
    }
    .hpc-product-desc{min-height:0}
    .hpc-product-card h3{
        font-size:16px;
        line-height:1.25;
    }
    .hpc-product-price{margin-bottom:8px}
    .hpc-option-group{padding-top:9px}
    .hpc-colour{width:36px;height:36px}
    .hpc-colour-dot{width:27px;height:27px}
    .hpc-qty{min-width:48px;height:38px}
    .hpc-add-side{min-height:44px;font-size:14px}
    .hpc-no-wall-footer{
        flex-direction:column;
        align-items:stretch;
        text-align:center;
        margin-top:18px;
        padding-top:15px;
    }
}

@media(max-width:380px){
    .hpc-side-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
    .hpc-side-card{grid-template-rows:34px auto minmax(54px,auto) 26px;min-height:0 !important}
    .hpc-side-card-body{padding:7px 7px 8px}
    .hpc-side-choice{font-size:10.5px}
    .hpc-side-meta{font-size:9px}
    .hpc-side-price{font-size:10.5px}
    .hpc-side-action{font-size:9.5px;min-height:26px;height:26px}
    .hpc-summary-total{font-size:10.5px}
}

/* v0.2+ grouped cart presentation */
.hpc-cart-package-badge,
.hpc-cart-side-kicker{
    display:block;
    width:max-content;
    max-width:100%;
    margin:0 0 6px;
    font-size:11px;
    line-height:1.25;
    font-weight:650;
    letter-spacing:.01em;
}
.hpc-cart-package-badge{
    padding:5px 8px;
    border-radius:999px;
    background:#eef1ed;
    color:var(--hpc-brand);
}
.hpc-cart-side-kicker{
    color:var(--hpc-brand);
    text-transform:none;
}
.hpc-cart-child{position:relative}
.hpc-cart-child > td:first-child,
.hpc-cart-child .product-thumbnail:first-child,
.hpc-cart-child .product-name:first-child{
    border-left:3px solid #d9dfd6;
}
.hpc-cart-child .variation,
.hpc-cart-child .wc-item-meta{margin-top:6px}
.hpc-cart-child .variation dt,
.hpc-cart-child .variation dd,
.hpc-cart-child .wc-item-meta-label{font-size:12px}
.hpc-linked-quantity{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
    line-height:1.15;
}
.hpc-linked-quantity strong{font-size:14px;font-weight:600}
.hpc-linked-quantity span{font-size:10px;color:#777;white-space:nowrap}
.hpc-cart-price del{
    color:#777;
    opacity:.9;
    margin-right:4px;
    font-size:.9em;
}
.hpc-cart-price ins{
    text-decoration:none;
    color:var(--hpc-sale);
    font-weight:650;
}
@media(max-width:767px){
    .hpc-linked-quantity span{white-space:normal}
}

/* v0.5.3 refinements */
.hpc-saving-badge{display:none !important}

/* Uploaded no-side-wall images are square renders; always show the full artwork. */
.hpc-side-empty-image{object-fit:contain;background:#eef0f1}