.grey{background:#F6F7F7}.blue{background:#DFFBFC}.whitetogrey{background:linear-gradient(to bottom, #fff, #F6F7F7)}.greytowhite{background:linear-gradient(to bottom, #F6F7F7, #fff)}.whitetoblue{background:linear-gradient(to bottom, #fff, #DFFBFC)}.bluetowhite{background:linear-gradient(to bottom, #DFFBFC, #fff)}.rooflight-wrap{display:flex;flex-direction:column;width:100%;max-width:100%;background:#eee}@media(min-width: 1025px){.rooflight-wrap{flex-direction:row;height:calc(100vh - 80px);margin-top:80px;position:fixed;top:0}}.rooflight-visualiser{max-width:1000px;width:100%;margin:0 auto}.rooflight-visualiser-wrap{max-width:100%;width:100%;display:flex;justify-content:center;align-items:center;position:relative;background:#F6F7F7;background-size:cover;background-position:center;background-repeat:no-repeat;padding:24px}.rooflight-visualiser-wrap.textured{background-image:url("/wp-content/themes/theme/assets/media/roof-texture.jpg")}@media(min-width: 1025px){.rooflight-visualiser-wrap{order:1}}.rooflight-visualiser-svg{display:block;width:100%;height:auto;vertical-align:middle}@media(max-width: 1024px){.rooflight-visualiser-svg{max-height:400px}}@media(min-width: 1025px){.rooflight-visualiser-svg{height:calc(95vh - 80px)}}.rooflight-options{display:flex;flex-direction:column;gap:2rem;background:#FFFFFF;padding:40px 28px 260px;height:100%;overflow-y:scroll;scrollbar-width:thin;scrollbar-color:#999 transparent}.rooflight-options::-webkit-scrollbar{width:8px}.rooflight-options::-webkit-scrollbar-track{background:transparent}.rooflight-options::-webkit-scrollbar-thumb{background-color:#999;border-radius:10px}.rooflight-options::-webkit-scrollbar-thumb:hover{background-color:#777}@media(min-width: 1025px){.rooflight-options{width:360px;height:100%;flex-shrink:0;padding:26px 26px 260px}}.rooflight-texture-toggle{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:10px;border:1px solid #e6e6e6;border-radius:12px;background:rgba(255,255,255,.7);color:#293241;padding:10px 16px;font-size:15px;line-height:1.2;font-weight:400;cursor:pointer;transition:all .3s ease;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 0 1px rgba(0,0,0,.1)}@media(max-width: 1024px){.rooflight-texture-toggle{bottom:16px;right:16px}}@media(min-width: 1025px){.rooflight-texture-toggle{top:26px;right:26px}}.rooflight-texture-toggle__thumb{width:16px;height:16px;border-radius:100px;background:linear-gradient(135deg, #f1f1f1 0%, #dddddd 100%)}.rooflight-texture-toggle.is-active{border-color:transparent;background:rgba(255,255,255,.4)}.rooflight-texture-toggle.is-active .rooflight-texture-toggle__thumb{background-image:url("/wp-content/themes/theme/assets/media/roof-texture.jpg");background-size:cover;background-position:center}.rooflight-texture-toggle:hover{background:rgba(255,255,255,.6)}.rooflight-calculator-title{margin-bottom:1.5rem}.rooflight-calculator-grids{display:flex;flex-direction:column;gap:2rem}.rooflight-calculator-grids>*{width:100%;display:grid;gap:1.5rem 1rem}.rooflight-calculator-grid-counters{grid-template-columns:1fr}@media(min-width: 768px){.rooflight-calculator-grid-counters{grid-template-columns:repeat(3, 1fr)}}@media(min-width: 1025px){.rooflight-calculator-grid-counters{grid-template-columns:1fr}}.rooflight-calculator-grid-checkboxes{grid-template-columns:1fr}@media(min-width: 481px){.rooflight-calculator-grid-checkboxes{grid-template-columns:repeat(2, 1fr)}}@media(min-width: 1025px){.rooflight-calculator-grid-checkboxes{grid-template-columns:1fr}}.rooflight-calculator-input-group{width:100%}.rooflight-calculator-input-group label{display:block;margin-bottom:10px;font-weight:500;font-size:16px}.rooflight-calculator-input-group input{width:100%;padding:.5rem;font-size:16px}.rooflight-calculator-input-group.hidden{display:none !important}.rooflight-calculator .rooflight-counter{display:flex;gap:.5rem;align-items:stretch;position:relative}.rooflight-calculator .rooflight-counter input[type=number]{flex:1;max-width:none;margin:0;text-align:center;border:none;outline:1px solid #293241;border-radius:.35rem;background:#FFFFFF;height:50px;-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield}.rooflight-calculator .rooflight-counter input[type=number]:focus{background:#dffbfc57}.rooflight-calculator .rooflight-counter input[type=number]::-webkit-outer-spin-button,.rooflight-calculator .rooflight-counter input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.rooflight-calculator .rooflight-counter.is-focused input[type=number] input[type=number]{outline:1px solid #293241;outline-offset:2px}.rooflight-calculator .rooflight-counter-btn{border:0;background:transparent;color:#293241;font-size:16px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0 16px;position:absolute;top:0;height:100%}.rooflight-calculator .rooflight-counter-btn.left{left:0}.rooflight-calculator .rooflight-counter-btn.right{right:0}.rooflight-calculator .rooflight-counter-btn:hover{opacity:.92}.rooflight-calculator .rooflight-tag-checkbox{display:flex;align-items:center;gap:.75rem;outline:1px solid #293241;border-radius:.35rem;background:#FFFFFF;padding:16px 16px;transition:border-color .15s ease,background-color .15s ease;background-color:#fcfcfc;cursor:pointer}.rooflight-calculator .rooflight-tag-checkbox input[type=checkbox]{width:24px;height:24px;margin:0;flex:0 0 auto;accent-color:#293241;cursor:pointer}.rooflight-calculator .rooflight-tag-checkbox label{margin:0;cursor:pointer;font-weight:500}.rooflight-calculator .rooflight-tag-checkbox .rooflight-option-help{margin-left:auto;width:1.35rem;height:1.35rem;border:1px solid #293241;border-radius:999px;background:#FFFFFF;color:#293241;font-size:.82rem;font-weight:700;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background-color .15s ease,color .15s ease,border-color .15s ease}.rooflight-calculator .rooflight-tag-checkbox .rooflight-option-help:hover,.rooflight-calculator .rooflight-tag-checkbox .rooflight-option-help:focus-visible{background:#293241;color:#FFFFFF}.rooflight-calculator .rooflight-tag-checkbox:has(input[type=checkbox]:checked){outline-color:#293241;background:#DFFBFC}.rooflight-calculator .rooflight-ral-panel{display:flex;flex-direction:column;outline:1px solid #293241;border-radius:.35rem;background:#FFFFFF;background-color:#fcfcfc;gap:0;position:relative;overflow:hidden}.rooflight-calculator .rooflight-ral-panel[hidden]{display:none}.rooflight-calculator .rooflight-frame-colour-panel__header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 20px 0}.rooflight-calculator .rooflight-frame-colour-panel__title{margin:0;font-size:16px;font-weight:600;color:#293241}.rooflight-calculator .rooflight-frame-colour-panel .rooflight-option-help{flex-shrink:0;width:1.35rem;height:1.35rem;border:1px solid #293241;border-radius:999px;background:#FFFFFF;color:#293241;font-size:.82rem;font-weight:700;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background-color .15s ease,color .15s ease,border-color .15s ease}.rooflight-calculator .rooflight-frame-colour-panel .rooflight-option-help:hover,.rooflight-calculator .rooflight-frame-colour-panel .rooflight-option-help:focus-visible{background:#293241;color:#FFFFFF}.rooflight-calculator .rooflight-ral-group{display:flex;flex-direction:column;gap:10px}.rooflight-calculator .rooflight-ral-group__heading{margin:0 0 6px;font-size:15px;font-weight:600;color:#293241}.rooflight-calculator .rooflight-ral-group__options{display:grid;grid-template-columns:1fr;gap:6px;padding:0 0 12px}.rooflight-calculator .rooflight-ral-search{width:100%;border:none;outline:1px solid #293241;border-radius:.35rem;background:#FFFFFF;font-size:16px;padding:8px 14px;transition:outline-width .05s ease;height:45px}.rooflight-calculator .rooflight-ral-search:focus-visible{outline-width:1.5px}.rooflight-calculator .rooflight-ral-search-container{padding:14px 20px 0;position:relative;z-index:2}.rooflight-calculator .rooflight-ral-grid{display:grid;grid-template-columns:1fr;gap:6px;max-height:260px;overflow-y:auto;width:100%;padding:0 20px;scrollbar-width:none;-ms-overflow-style:none;position:relative}.rooflight-calculator .rooflight-ral-grid::-webkit-scrollbar{display:none}.rooflight-calculator .rooflight-ral-grid::after,.rooflight-calculator .rooflight-ral-grid::before{content:"";position:-webkit-sticky;position:sticky;inset:0;pointer-events:none;width:calc(100% + (20px * 2));margin-left:calc(20px * -1);height:16px}.rooflight-calculator .rooflight-ral-grid::before{top:0;bottom:auto;background:linear-gradient(to top, rgba(255, 255, 255, 0) 0%, #fcfcfc 100%)}.rooflight-calculator .rooflight-ral-grid::after{bottom:0;top:auto;background:linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%)}.rooflight-calculator .rooflight-ral-option{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px;margin:0;padding:8px;border:1px solid #e6e6e6;border-radius:.35rem;background:#FFFFFF;cursor:pointer;transition:border-color .15s ease,background-color .15s ease}.rooflight-calculator .rooflight-ral-option input{position:absolute;opacity:0;pointer-events:none}.rooflight-calculator .rooflight-ral-option__swatch{width:40px;height:40px;border-radius:100px;overflow:hidden;position:relative}.rooflight-calculator .rooflight-ral-option__swatch::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.15) 35%, rgba(255, 255, 255, 0) 60%);pointer-events:none}.rooflight-calculator .rooflight-ral-option__text{display:flex;flex-direction:column;font-size:15px}.rooflight-calculator .rooflight-ral-option:has(input:checked){border-color:#293241;background:#DFFBFC}.rooflight-calculator .rooflight-ral-option:focus-within{border-color:#293241}.rooflight-calculator .rooflight-ral-status{margin:0;font-size:15px;font-weight:500;color:#293241;line-height:1.4;display:flex;gap:10px}.rooflight-calculator .rooflight-ral-status-container{padding:20px;background:#FFFFFF}.rooflight-calculator .rooflight-ral-status-colour{width:20px;height:20px;display:block;border-radius:100px;overflow:hidden;position:relative;flex-shrink:0;outline:1px solid #293241;outline-offset:2px}.rooflight-calculator .rooflight-ral-status-colour::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.15) 35%, rgba(255, 255, 255, 0) 60%);pointer-events:none}.rooflight-calculator .rooflight-ral-status strong{font-size:14px}.rooflight-calculator-results-notice{font-size:13px;line-height:1.4;padding:10px 0 6px}.rooflight-calculator-results-placeholder,.rooflight-calculator-results-error{font-weight:500;font-size:14px;line-height:1.4;text-align:center;padding:16px 22px;border-radius:12px}.rooflight-calculator-results-placeholder{color:#293241;background:#F6F7F7}.rooflight-calculator-results-error{color:#E74A4A;background:#FFE5E5}.rooflight-calculator-summary--enquiry{font-weight:500;font-size:14px;line-height:1.4;text-align:center;padding:16px 22px;border-radius:12px;background:#F6F7F7}.rooflight-calculator-summary--enquiry p{margin:0;font-size:14px;line-height:1.4;font-weight:500;text-align:center}.rooflight-calculator-summary{display:flex;flex-direction:column;gap:8px}.rooflight-calculator-summary .rooflight-calculator-weight,.rooflight-calculator-summary .rooflight-calculator-lead-time,.rooflight-calculator-summary total{display:flex;flex-wrap:nowrap;gap:1rem;align-items:center;justify-content:space-between;margin:0}.rooflight-calculator-summary .rooflight-calculator-weight label,.rooflight-calculator-summary .rooflight-calculator-lead-time label,.rooflight-calculator-summary total label{display:block;font-size:16px}.rooflight-calculator-summary .rooflight-calculator-weight span,.rooflight-calculator-summary .rooflight-calculator-lead-time span,.rooflight-calculator-summary total span{font-size:22px;font-weight:600}.rooflight-calculator-summary .rooflight-calculator-weight span,.rooflight-calculator-summary .rooflight-calculator-lead-time span{font-size:16px;font-weight:500}.rooflight-calculator-summary details{margin-top:24px;display:none}.rooflight-calculator-summary details ul{margin:0;padding:0}.rooflight-calculator-summary details ul li{font-size:15px;display:flex;justify-content:space-between}.rooflight-calculator-summary details ul li span{font-weight:500}.rooflight-calculator-summary details ul li:not(:last-child){margin-bottom:6px;border-bottom:1px solid #e6e6e6;padding-bottom:6px}.rooflight-calculator-summary details[open] summary::after{transform:rotate(-90deg)}.rooflight-calculator-summary summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:.5rem;transition:all .3s ease}.rooflight-calculator-summary summary:hover{opacity:.8}.rooflight-calculator-summary summary::-webkit-details-marker{display:none}.rooflight-calculator-summary summary::marker{display:none}.rooflight-calculator-summary summary::after{content:"";display:block;width:12px;height:12px;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMC43MjMgMjAuNzIxIj48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik05LjY1NCAyMC40MjhhMSAxIDAgMCAxIDAtMS40MTNsNy42NTMtNy42NTVIMWExIDEgMCAwIDEtMS0xIDEgMSAwIDAgMSAxLTFoMTYuM0w5LjY1IDEuNzA3YTEgMSAwIDAgMSAwLTEuNDEzIDEgMSAwIDAgMSAxLjQxMyAwbDkuMzE3IDkuMzE3YTEgMSAwIDAgMSAuMzM4Ljc1IDEgMSAwIDAgMS0uMzE2LjcyOGwtOS4zMzkgOS4zMzlhMSAxIDAgMCAxLS43MDguMjkzIDEgMSAwIDAgMS0uNzAxLS4yOTMiIGRhdGEtbmFtZT0iVW5pb24gMyIvPjwvc3ZnPg==");background-size:100% 100%;background-repeat:no-repeat;background-position:center;transform:rotate(90deg);transition:transform .3s ease}.rooflight-calculator-breakdown{display:flex;flex-direction:column;gap:.5rem}.rooflight-calculator-breakdown ul{margin:.5rem 0 0 1.5rem;padding:0}.rooflight-calculator-actions{position:fixed;left:0;bottom:0;width:100%;background:#FFFFFF;background:linear-gradient(to bottom, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.95));z-index:1000;padding:16px 16px 32px;display:flex;flex-direction:column;gap:16px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-top:1px solid #e6e6e6}@media(min-width: 1025px){.rooflight-calculator-actions{width:360px}}.rooflight-add-to-cart-form{display:flex;flex-direction:column;gap:16px}.rooflight-add-to-basket-btn{padding:.75rem 1.5rem;font-size:1rem;font-weight:600;cursor:pointer;background:var(--color-accent, #1a191b);color:#fff;border:none;border-radius:4px;width:100%}.rooflight-add-to-basket-btn.is-disabled{opacity:.5;cursor:not-allowed}.rooflight-add-to-basket-btn.is-enquiry{background:#DFFBFC;color:#293241;outline:1px solid #293241}.rooflight-add-to-basket-btn:hover{opacity:.9}.rooflight-popup{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:1rem}.rooflight-popup[hidden]{display:none}.rooflight-popup-backdrop{position:absolute;inset:0;background:rgba(41,50,65,.2);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.rooflight-popup-content{position:relative;background:#fff;padding:2rem;border-radius:8px;max-width:24rem;box-shadow:0 8px 32px rgba(41,50,65,.2)}.rooflight-popup-title{font-size:1.35rem;margin-bottom:10px !important}.rooflight-popup-text{color:var(--color-muted, #666)}.rooflight-popup-actions{display:flex;flex-direction:column;gap:.75rem;margin-top:20px}.rooflight-popup-btn{display:inline-block;padding:.6rem 1.2rem;font-size:18px;font-weight:700;text-decoration:none;cursor:pointer;border:none;width:100%;text-align:center;transition:all 500ms;outline:1px solid;border-radius:100px}.rooflight-popup-btn:hover{opacity:.7}.rooflight-popup-btn-primary{outline-color:#293241;background:#293241;color:#fff}.rooflight-popup-btn-secondary{outline-color:#293241;background:#DFFBFC;color:#293241}.rooflight-cart-spec{font-weight:normal;color:inherit}.rooflight-totals-glass-weight{padding-bottom:20px}.rooflight-cart-total-glass-weight th,.rooflight-cart-total-glass-weight td{font-weight:500}.rooflight-shipping-note{display:inline-block;margin-top:4px;color:#202020;font-size:.85em;line-height:1.3}