/* Visual styling matched to doors/order.php. Stable choices and pricing stay in their own page. */

        .lock-options {
            display: none; /* Hide initially */
        }
        #accordion-11 > .card {border:1px solid #dfe3da;box-shadow:0 3px 12px rgba(0,0,0,.06);overflow:hidden}
        #accordion-11 .u-accordion__header a {background:#f8faf5;font-weight:600}
        #accordion-11 .u-accordion__header a {align-items:center}
        .order-stage-number {display:inline-flex;align-items:center;justify-content:center;flex:0 0 26px;width:26px;height:26px;margin-right:9px;border-radius:50%;background:#527f1d;color:#fff;font-size:13px;font-weight:700}
        .order-stage-title {font-weight:700}
        #accordion-11 .u-accordion__header a:focus-visible,
        #order input:focus-visible,#order select:focus-visible,#order button:focus-visible {outline:3px solid #527f1d;outline-offset:2px}
        .colour-card {position:relative;border:2px solid transparent;border-radius:7px;padding:8px;transition:border-color .15s,box-shadow .15s,transform .15s}
        .colour-card:hover {border-color:#79a94a;transform:translateY(-1px)}
        .colour-card:has(input:checked) {border-color:#527f1d!important;background:#fff!important;box-shadow:0 0 0 3px rgba(82,127,29,.15)}
        .colour-card .colour-tick {display:none!important}
        .colour-selection-status {margin:0 0 15px;padding:10px 12px;border-left:4px solid #79a94a;background:#f3f9ed;color:#344824;font-weight:600}
        .colour-selection-status:empty {display:none}
        .colour-card__price {display:block;margin-top:4px;color:#b51f24;font-size:11px;font-weight:700}
        .option-price-label {display:inline-block;margin-left:6px;color:#b51f24;font-size:12px;font-weight:700}
        .option-price-label--inline {margin-left:3px}
        .hinge-choice-grid {display:grid;grid-template-columns:repeat(2,minmax(0,180px));gap:12px;margin-top:12px}
        .hinge-choice {position:relative;display:grid;grid-template-columns:42px 1fr;gap:10px;align-items:center;padding:13px;border:2px solid #d9dde2;border-radius:7px;background:#fff;cursor:pointer}
        .hinge-choice:hover {border-color:#79a94a}
        .hinge-choice:has(input:checked) {border-color:#527f1d;background:#fff;box-shadow:0 0 0 3px rgba(82,127,29,.15)}
        .hinge-choice input {position:absolute;opacity:0}
        .hinge-choice input:focus-visible + .hinge-choice__diagram {outline:3px solid #527f1d;outline-offset:3px}
        .hinge-choice__diagram {position:relative;width:38px;height:48px;border:3px solid #50555b;background:#fff}
        .hinge-choice__diagram::before {content:'';position:absolute;top:5px;width:5px;height:7px;border-radius:1px;background:#202326;box-shadow:0 14px 0 #202326,0 28px 0 #202326}
        .hinge-choice--left .hinge-choice__diagram::before {left:-5px}.hinge-choice--right .hinge-choice__diagram::before {right:-5px}
        .hinge-choice__diagram::after {content:'';position:absolute;top:22px;width:5px;height:5px;border-radius:50%;background:#b51f24}
        .hinge-choice--left .hinge-choice__diagram::after {right:5px}.hinge-choice--right .hinge-choice__diagram::after {left:5px}
        .hinge-choice__name {display:block;font-weight:700}.hinge-choice__view {display:block;margin-top:2px;color:#666;font-size:11px}
        .delivery-reassurance {margin:0 0 18px;padding:16px;border:1px solid #b8dba5;border-radius:7px;background:#f3f9ed;color:#344824}
        .delivery-reassurance__title {display:block;margin-bottom:8px;font-size:16px;font-weight:700}
        .delivery-reassurance ul {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 18px;margin:0;padding:0;list-style:none}
        .delivery-reassurance li::before {content:'\2713';margin-right:7px;color:#527f1d;font-weight:700}
        #submit {min-height:54px;font-weight:700;box-shadow:0 4px 12px rgba(0,0,0,.14)}
        .native-validation-message {display:block;color:#b42318;font-size:.875rem;margin-top:-4px;margin-bottom:10px}
        .native-validation-message[hidden] {display:none}
        #order .is-invalid {border-color:#b42318;box-shadow:0 0 0 1px rgba(180,35,24,.15)}
        .door-hinge-preview {transition:transform .2s ease;transform-origin:center}
        .door-hinge-preview.is-left-hinged {transform:scaleX(-1)}
        .product-gallery-main {border:1px solid #e1e4e8;border-radius:7px;background:#fafafa;box-shadow:0 2px 9px rgba(0,0,0,.07);overflow:hidden}
        .product-gallery-main .js-slide > a {display:flex!important;height:440px;align-items:center;justify-content:center;padding:12px;overflow:hidden}
        .product-gallery-main__image {display:block;width:auto!important;max-width:100%;height:100%;max-height:416px;object-fit:contain}
        .product-gallery-main__product {padding:0;border:1px solid #d8d8d8;background:#fff}
        .product-gallery-thumbs {margin-top:10px;padding:7px 28px;border:1px solid #e1e4e8;border-radius:7px;background:#fff}
        .product-gallery-thumb {height:92px;padding:4px;border:1px solid #dedede;border-radius:4px;background:#f7f7f7;cursor:pointer;overflow:hidden}
        .product-gallery-thumb img,.product-gallery-thumb svg {display:block;width:100%!important;height:100%;object-fit:cover}
        .product-gallery-thumb--product img,.product-gallery-thumb--product svg {object-fit:contain}
        .product-gallery-thumbs .slick-current .product-gallery-thumb {border:2px solid #527f1d;box-shadow:0 0 0 2px rgba(82,127,29,.16)}
        @media(max-width:991px){.product-gallery-main .js-slide > a{height:360px}.product-gallery-main__image{max-height:336px}.product-gallery-thumb{height:78px}}
        .door-upgrades {margin-top:24px}
        .door-upgrades__eyebrow {margin:0 0 4px;color:#b51f24;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
        .door-upgrades__heading {margin:0 0 5px;font-size:22px;font-weight:700}
        .door-upgrades__intro {margin:0 0 16px;color:#666;line-height:1.45}
        .door-upgrade-card {position:relative;display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:12px;align-items:start;margin-bottom:12px;padding:16px;border:2px solid #d9dde2;border-radius:7px;background:#fff;cursor:pointer;transition:border-color .15s,background-color .15s,box-shadow .15s}
        .door-upgrade-card:hover {border-color:#79a94a}
        .door-upgrade-card:has(input:checked) {border-color:#527f1d;background:#fff;box-shadow:0 0 0 3px rgba(82,127,29,.15)}
        .door-upgrade-card input {position:absolute;opacity:0;pointer-events:none}
        .door-upgrade-card__check {display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:2px solid #999;border-radius:50%;background:#fff;color:#fff;font-size:14px;font-weight:700;line-height:1}
        .door-upgrade-card input:checked + .door-upgrade-card__check {border-color:#527f1d;background:#527f1d}
        .door-upgrade-card input:checked + .door-upgrade-card__check::after {content:'\2713'}
        .door-upgrade-card input:focus-visible + .door-upgrade-card__check {outline:3px solid #527f1d;outline-offset:3px}
        .door-upgrade-card__title {font-size:17px;font-weight:700;color:#222}
        .door-upgrade-card__description {display:block;margin-top:4px;color:#666;font-size:14px;line-height:1.45}
        .door-upgrade-card__price {color:#b51f24;font-size:16px;font-weight:700;white-space:nowrap}
        .door-upgrade-card__badge {display:inline-block;margin-left:6px;padding:3px 6px;border-radius:3px;background:#e8f4ea;color:#17662a;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;vertical-align:2px}
        .door-upgrade-card__more {position:relative;z-index:2;display:inline-block;margin:0 0 12px 44px;color:#b51f24;text-decoration:underline}
        .door-upgrades__note {margin:6px 0 0;color:#666;font-size:13px}
        .door-upgrade-modal {position:relative;max-height:calc(100vh - 40px);padding:28px!important;border:1px solid #dfe3da;border-radius:8px;background:#fff;box-shadow:0 12px 35px rgba(0,0,0,.18)}
        .door-upgrade-modal > .close {position:absolute;z-index:2;top:12px;right:12px;display:flex;width:32px;height:32px;align-items:center;justify-content:center;margin:0;border:1px solid #d9dde2;border-radius:50%;background:#fff;color:#333;opacity:1}
        .door-upgrade-modal > .close:hover {border-color:#79a94a;color:#527f1d}
        .door-upgrade-modal > h4,.door-upgrade-modal > h5,.door-upgrade-modal > .h5 {margin:0 40px 18px 0!important;color:#222;font-size:22px;font-weight:700;line-height:1.3}
        .door-upgrade-modal > p,.door-upgrade-modal > ul {color:#555;line-height:1.55}
        .door-upgrade-modal > ul {margin:0;padding:0;list-style:none}
        .door-upgrade-modal > ul li {position:relative;margin:0 0 12px;padding-left:25px}
        .door-upgrade-modal > ul li::before {content:'\2713';position:absolute;left:0;color:#527f1d;font-weight:700}
        .door-upgrade-modal > p > img,.door-upgrade-modal > img {display:block;max-width:100%;height:auto;margin:14px auto;border:1px solid #e1e4e8;border-radius:6px;background:#fff;padding:8px}
        .door-upgrade-modal .row img {max-width:100%;height:auto}
        .door-upgrade-modal iframe {display:block;width:100%;max-width:100%;height:min(600px,70vh);border:0}
        .door-upgrade-modal__lead {margin:0 0 18px;color:#555;font-size:16px;line-height:1.55}
        .door-upgrade-modal__content {display:grid;grid-template-columns:minmax(150px,34%) minmax(0,1fr);gap:22px;align-items:start}
        .door-upgrade-modal__image {display:block;width:100%;height:auto;max-height:210px;object-fit:contain;border:1px solid #e1e4e8;border-radius:6px;background:#fff;padding:8px}
        .door-upgrade-modal__benefits {margin:0;padding:0;list-style:none}
        .door-upgrade-modal__benefits li {position:relative;margin:0 0 12px;padding-left:25px;color:#444;line-height:1.45}
        .door-upgrade-modal__benefits li::before {content:'\2713';position:absolute;left:0;top:0;color:#527f1d;font-weight:700}
        .door-upgrade-modal__note {margin:16px 0 0;padding:12px 14px;border-left:4px solid #79a94a;background:#f3f9ed;color:#3d522b;font-size:14px;line-height:1.45}
        .hardware-visual-selector {margin-bottom:22px}
        .hardware-selector-step {margin-bottom:22px}
        .hardware-selector-step[hidden] {display:none}
        .hardware-selector-title {display:flex;align-items:center;gap:7px;margin:0 0 5px;font-size:18px;font-weight:700;color:#222}
        .hardware-selector-help {margin:0 0 12px;color:#666;font-size:13px}
        .hardware-selector-info {color:#b51f24;font-size:12px;font-weight:600;text-decoration:underline}
        .hardware-selector-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
        .hardware-selector-grid--finishes {grid-template-columns:repeat(4,minmax(0,1fr))}
        .hardware-selector-grid--handles {grid-template-columns:repeat(3,minmax(0,1fr))}
        .hardware-selector-grid--letterboxes {grid-template-columns:repeat(2,minmax(0,220px))}
        .hardware-selector-grid--knockers {grid-template-columns:repeat(4,minmax(0,1fr))}
        .hardware-choice {position:relative;display:flex;min-width:0;min-height:100%;flex-direction:column;align-items:center;padding:0 0 12px;border:2px solid #d9dde2;border-radius:7px;background:#fff;color:#222;text-align:center;cursor:pointer;overflow:hidden;transition:border-color .15s,box-shadow .15s,transform .15s}
        .hardware-choice:hover:not(:disabled) {border-color:#79a94a;transform:translateY(-1px)}
        .hardware-choice.is-selected {border-color:#527f1d;box-shadow:0 0 0 3px rgba(82,127,29,.15)}
        .hardware-choice.is-selected::after {content:'\2713';position:absolute;top:7px;right:7px;display:flex;width:24px;height:24px;align-items:center;justify-content:center;border-radius:50%;background:#527f1d;color:#fff;font-size:14px;font-weight:700}
        .hardware-choice:disabled {opacity:.5;cursor:not-allowed}
        .hardware-choice__image {display:block;width:100%;height:115px;margin-bottom:10px;background:#f7f7f7;object-fit:contain}
        .hardware-choice--finish .hardware-choice__image {width:calc(100% - 20px);height:105px;margin:10px 10px 8px;padding:5px;background:#fff}
        .hardware-choice--finish .hardware-choice__image--white-finish {width:66px;margin-right:auto;margin-left:auto;border:1px solid #d9dde2;box-sizing:border-box}
        .hardware-choice--handle .hardware-choice__image {height:135px;padding:5px}
        .hardware-choice--handle .hardware-choice__image--sweet {padding:5px;background:#fff;object-fit:contain}
        .hardware-choice--handle .hardware-choice__image--standard {padding:0;background:transparent}
        .hardware-choice--handle .hardware-choice__image--contemporary {background:transparent}
        .hardware-choice--letterbox .hardware-choice__image {height:105px;padding:12px;border-bottom:1px solid #edf0f2;background:#f7f7f7;object-fit:contain}
        .hardware-choice--knocker .hardware-choice__image {height:170px;padding:10px;border-bottom:1px solid #edf0f2;background:#fff;object-fit:contain}
        .hardware-choice--knocker .hardware-choice__image--knocker {transform:scale(.75)}
        .hardware-choice--knocker .hardware-choice__image--spyhole {transform:scale(.5)}
        .hardware-choice__name {padding:0 8px;font-size:13px;font-weight:700;line-height:1.3}
        .hardware-choice__meta {margin-top:5px;padding:0 8px;color:#687078;font-size:11px;line-height:1.3}
        .hardware-choice__price {margin-top:6px;color:#b51f24;font-size:12px;font-weight:700}
        .hardware-native-control {margin:0!important}
        .hardware-native-control > label,.hardware-native-control > select,.hardware-native-control > a {position:absolute!important;width:1px!important;height:1px!important;margin:0!important;padding:0!important;opacity:0!important;overflow:hidden!important;pointer-events:none!important}
        #group7 .colour-item[hidden] {display:none!important}
        /* Keep the same selected-state language throughout the visual configurator. */
        #order .form-group > label.u-check:not(.colour-card) {position:relative;display:inline-flex;align-items:center;min-height:44px;margin:0 10px 10px 0!important;padding:5px 36px 5px 10px!important;border:2px solid #d9dde2;border-radius:7px;background:#fff;cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s}
        #order .form-group > label.u-check:not(.colour-card):hover {border-color:#79a94a;transform:translateY(-1px)}
        #order .form-group > label.u-check:not(.colour-card):has(> input:checked) {border-color:#527f1d;box-shadow:0 0 0 3px rgba(82,127,29,.15)}
        #order .form-group > label.u-check:not(.colour-card) > .u-check-icon-radio-v4 {display:none}
        .colour-card:has(input:checked)::after,
        .hinge-choice:has(input:checked)::after,
        #order .form-group > label.u-check:not(.colour-card):has(> input:checked)::after {content:'\2713';position:absolute;top:7px;right:7px;display:flex;width:24px;height:24px;align-items:center;justify-content:center;border-radius:50%;background:#527f1d;color:#fff;font-size:14px;font-weight:700;line-height:1}
        @media (min-width:768px) {
          #group1,#group2,#group11 {display:flex;flex-wrap:nowrap;align-items:stretch;gap:8px}
          #order #group1 > label.u-check,#order #group2 > label.u-check,#order #group11 > label.u-check {flex:0 0 auto;margin-right:0!important;padding:5px 34px 5px 8px!important;font-size:12px;white-space:nowrap}
          #group1 .option-price-label,#group2 .option-price-label,#group11 .option-price-label {margin-left:4px;font-size:11px}
        }
        @media (max-width:575px) {.door-upgrade-card {grid-template-columns:28px minmax(0,1fr)}.door-upgrade-card__price {grid-column:2}.door-upgrade-card__badge {display:table;margin:5px 0 0}.door-upgrade-card__more {margin-left:40px}.hinge-choice-grid,.delivery-reassurance ul {grid-template-columns:1fr}}
        @media (max-width:575px) {.door-upgrade-modal__content {grid-template-columns:1fr}.door-upgrade-modal__image {max-width:230px;margin:0 auto}}
        @media (max-width:767px) {.hardware-selector-grid,.hardware-selector-grid--finishes,.hardware-selector-grid--handles,.hardware-selector-grid--knockers {grid-template-columns:repeat(2,minmax(0,1fr))}.hardware-choice__image{height:100px}.hardware-choice--handle .hardware-choice__image{height:120px}.hardware-choice--knocker .hardware-choice__image{height:150px}}
 
.stable-hardware-native.is-enhanced {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(min-width:768px){#order #group2{flex-wrap:wrap}}

/* Reduce letterbox artwork without changing the option card dimensions. */
#stable-hardware-selector .hardware-choice--letterbox .hardware-choice__image {transform:scale(.8);transform-origin:center;}

@media (min-width:768px) {
  #stable-hardware-selector .hardware-selector-grid--letterboxes {grid-template-columns:repeat(3,minmax(0,1fr));}
}
