/* Option A is separate from the original sidebar stylesheet for easy rollback. */
#unlockControls[data-layout="centre"] { border:0; background:transparent; box-shadow:none; }
#unlockControls[data-layout="centre"] .unlock-panel-login {
    display:flex; flex-wrap:wrap; align-items:center; gap:6px;
    padding:6px; border:1px solid #bdc8d0; border-radius:5px; background:#eaf4fc;
}
#unlockControls[data-layout="centre"] .unlock-panel-account-icon { width:18px; height:21px; flex-basis:18px; color:#fff; }
#unlockControls[data-layout="centre"] :is(#unlockPanelLogin,#unlockSidebarBuy) {
    display:flex; flex:1 1 0; align-items:center; justify-content:center; gap:6px;
    float:none; width:auto; min-width:0; min-height:38px; height:auto; margin:0; padding:6px;
    border:1px solid transparent; border-radius:4px; box-shadow:none;
    color:#fff; font:700 15px/22px Arial,Helvetica,sans-serif;
    text-align:center; text-decoration:none; white-space:nowrap; cursor:pointer;
}
#unlockControls[data-layout="centre"] #unlockSidebarBuy { background:#65943b; border-color:#547e30; }
#unlockControls[data-layout="centre"] #unlockSidebarBuy:hover { background:#4c7529; }
#unlockControls[data-layout="centre"] #unlockSidebarBuy:focus-visible { outline:2px solid #294d81; outline-offset:2px; }
#unlockControls[data-layout="centre"] .unlock-panel-login:has(#unlockPanelLoginArea:not([hidden])) #unlockSidebarBuy { display:none; }
#unlockControls[data-layout="centre"] #unlockPanelLoginArea { flex-basis:100%; }

#unlockCentreCard, #unlockCentreCard *, #unlockCentreCard *::before { box-sizing:border-box; }
#unlockCentreCard {
    /* A drag starting on this fixed card must not select the map's SVG labels.
       Keep this local to the card: map gestures and editable fields are untouched. */
    -webkit-user-select:none;
    user-select:none;
    position:fixed;
    left:calc((100vw + var(--map-sidebar-edge, 261px)) / 2);
    top:calc((100dvh + var(--map-toolbar-bottom, 49px) - var(--map-footer-height, 22px)) / 2);
    transform:translate(-50%, -50%);
    z-index:1100;
    /* Use the available map width, so collapsing the sidebar also gives the
       offer room to grow again. Compact layouts use their map-area dimensions below. */
    width:clamp(240px, calc((100vw - var(--map-sidebar-edge, 261px)) * .3), 330px);
    max-width:calc(100vw - var(--map-sidebar-edge, 261px) - 24px);
    container:unlock-offer / inline-size;
    max-height:calc(100dvh - var(--map-toolbar-bottom, 49px) - var(--map-footer-height, 22px) - 24px);
    overflow:auto; overscroll-behavior:contain;
    margin:0; padding:0; border:1px solid #aab5c0; border-radius:9px;
    background:#fff; color:#20252c; box-shadow:0 3px 10px #0005;
    font:14px/1.35 Arial, Helvetica, sans-serif;
}
#unlockCentreCard[hidden], body.google-map-view #unlockCentreCard { display:none !important; }
#unlockCentreCard #unlockPanelHeading { margin:0; padding:5px 10px; background:#244b80; color:#fff; font:700 22px/1.1 Arial,Helvetica,sans-serif; text-align:center; }
#unlockCentreProduct { padding:4px 10px; background:#e8edf4; color:#203a62; font-size:13px; font-weight:700; line-height:1.25; text-align:center; }
#unlockCentreCard #buyButtonBox { width:100%; height:auto; margin:0; padding:5px 10px; border:0; background:#fff; box-shadow:none; text-align:left; }
#unlockCentreCard .unlock-panel-benefits { display:grid; gap:2px; margin:0 0 5px; padding:0; list-style:none; }
#unlockCentreCard .unlock-panel-benefits li { position:relative; margin:0; padding:0 0 0 25px; font:12px/17px Arial,Helvetica,sans-serif; }
#unlockCentreCard .unlock-panel-benefits li::before { content:''; position:absolute; top:3px; left:3px; width:13px; height:8px; border-left:3px solid #56943b; border-bottom:3px solid #56943b; transform:rotate(-45deg); }
#unlockCentreCard .unlock-centre-price-row { display:flex; align-items:center; justify-content:center; gap:10px; padding:4px 0; border-top:1px solid #cdd4dd; }
#unlockCentreCard .unlock-panel-price { flex-shrink:0; }
#unlockCentreCard #unlockPanelPrice { color:#192f53; font-size:30px; line-height:1.1; font-weight:700; letter-spacing:-.8px; white-space:nowrap; }
#unlockCentreCard .unlock-panel-vat { font-size:12px; }
#unlockCentreCard .unlock-centre-price-detail { display:grid; gap:1px; padding-left:10px; border-left:1px solid #b8bec6; font-size:11px; }
#unlockCentreCard .unlock-centre-price-detail strong { font-size:12px; font-weight:400; }
#unlockCentreCard .unlock-centre-tax-short { display:none; }
#unlockCentreCard #buyItNow { width:100%; max-width:230px; margin:0 auto; }
#unlockCentreCard #buyItNow a { display:flex; align-items:center; justify-content:center; min-height:34px; margin:0; padding:4px 10px; border:1px solid #547e30; border-radius:5px; background:#65943b; color:#fff; font:700 16px/20px Arial,Helvetica,sans-serif; text-decoration:none; text-align:center; }
#unlockCentreCard #buyItNow a:hover { background:#4c7529; }
#unlockCentreCard .unlock-centre-payment-note { margin:3px 0 0; font:10px/14px Arial,Helvetica,sans-serif; text-align:center; }
#unlockCentreCard .unlock-centre-links { display:none; align-items:center; justify-content:space-between; gap:8px; }
#unlockCentreCard .unlock-centre-links a, #unlockCentreCard .unlock-centre-links button { display:inline; float:none; width:auto; min-height:24px; height:auto; margin:0; padding:2px 0; border:0; border-radius:0; box-shadow:none; background:transparent; color:#244b80; font:13px/20px Arial,Helvetica,sans-serif; text-decoration:underline; cursor:pointer; }
#unlockCentreCard a:focus-visible, #unlockCentreCard button:focus-visible { outline:2px solid #294d81; outline-offset:2px; }
@container unlock-offer (max-width:350px) {
    #unlockCentreCard #unlockPanelHeading { padding:5px 10px; font-size:21px; }
    #unlockCentreProduct { padding:4px 10px; font-size:13px; }
    #unlockCentreCard #buyButtonBox { padding:5px 10px; }
    #unlockCentreCard .unlock-panel-benefits { gap:2px; margin-bottom:5px; }
    #unlockCentreCard .unlock-panel-benefits li { padding-left:21px; font-size:12px; line-height:17px; }
    #unlockCentreCard #unlockPanelPrice { font-size:30px; }
    #unlockCentreCard .unlock-centre-price-row { gap:10px; }
    #unlockCentreCard .unlock-centre-price-detail { padding-left:10px; font-size:12px; }
    #unlockCentreCard .unlock-centre-price-detail strong { font-size:13px; }
    #unlockCentreCard #buyItNow a { font-size:16px; min-height:34px; }
    #unlockCentreCard .unlock-centre-links a, #unlockCentreCard .unlock-centre-links button { font-size:12px; }
}
@container unlock-offer (max-width:310px) {
    #unlockCentreCard .unlock-centre-tax-full, #unlockCentreCard .unlock-centre-price-detail strong { display:none; }
    #unlockCentreCard .unlock-centre-tax-short { display:inline; }
    #unlockCentreCard .unlock-centre-price-detail { border-left:0; padding-left:0; }
}
@media (min-width:901px) and (max-height:600px) {
    #unlockCentreCard #unlockPanelHeading { padding-top:5px; padding-bottom:5px; font-size:22px; }
    #unlockCentreCard .unlock-panel-benefits { gap:2px; margin-bottom:5px; }
    #unlockCentreCard .unlock-centre-price-row { padding:5px 0; }
}
/* JavaScript measures the map viewport and fitted page, choosing a layout without
   scaling text or doing work on wheel/pan events. Original CSS is the fallback. */
#unlockCentreCard[data-fit] {
    left:var(--unlock-centre-x); top:var(--unlock-centre-y);
    width:var(--unlock-fit-width); max-width:var(--unlock-available-width);
    max-height:var(--unlock-available-height);
}
#unlockCentreCard[data-fit]:not([data-fit="full"]) #unlockPanelHeading { padding:4px 8px; font-size:18px; }
#unlockCentreCard[data-fit]:not([data-fit="full"]) #unlockCentreProduct { padding:3px 8px; font-size:11px; }
#unlockCentreCard[data-fit]:not([data-fit="full"]) #buyButtonBox { padding:4px 7px; }
#unlockCentreCard[data-fit]:not([data-fit="full"]) .unlock-panel-benefits { display:none; }
#unlockCentreCard[data-fit]:not([data-fit="full"]) .unlock-centre-price-row { border:0; padding:1px 0 3px; gap:6px; }
#unlockCentreCard[data-fit]:not([data-fit="full"]) #unlockPanelPrice { font-size:26px; }
#unlockCentreCard[data-fit]:not([data-fit="full"]) .unlock-centre-price-detail { border:0; padding:0; font-size:11px; }
#unlockCentreCard[data-fit]:not([data-fit="full"]) .unlock-centre-tax-full,
#unlockCentreCard[data-fit]:not([data-fit="full"]) .unlock-centre-price-detail strong { display:none; }
#unlockCentreCard[data-fit]:not([data-fit="full"]) .unlock-centre-tax-short { display:inline; }
#unlockCentreCard[data-fit]:not([data-fit="full"]) #buyItNow a { min-height:34px; padding:4px 8px; font-size:14px; line-height:18px; }
#unlockCentreCard[data-fit]:not([data-fit="full"]) .unlock-centre-payment-note { margin:3px 0 0; font-size:10px; line-height:13px; }
#unlockCentreCard[data-fit]:not([data-fit="full"]) .unlock-centre-links { gap:6px; }
#unlockCentreCard[data-fit]:not([data-fit="full"]) .unlock-centre-links :is(a,button) { min-height:32px; font-size:11px; line-height:24px; padding:4px 0; }
#unlockCentreCard[data-fit]:is([data-fit="strip"],[data-fit="mini"]) :is(#unlockCentreProduct,.unlock-centre-links,.unlock-centre-payment-note) { display:none; }
#unlockCentreCard[data-fit]:is([data-fit="strip"],[data-fit="mini"]) #buyButtonBox { display:flex; align-items:center; gap:8px; }
#unlockCentreCard[data-fit]:is([data-fit="strip"],[data-fit="mini"]) .unlock-centre-price-row { flex-direction:column; gap:0; padding:0; }
#unlockCentreCard[data-fit]:is([data-fit="strip"],[data-fit="mini"]) #unlockPanelPrice { font-size:22px; }
#unlockCentreCard[data-fit]:is([data-fit="strip"],[data-fit="mini"]) .unlock-panel-purchase-row { flex:1; }
#unlockCentreCard[data-fit="mini"] #unlockPanelHeading { display:none; }
@media print { #unlockCentreCard { display:none !important; } }

/* Retain a practical touch target without making the desktop button oversized. */
body.mcs-small-screen #unlockCentreCard[data-fit] #buyItNow a { min-height:40px; }
@media (any-pointer:coarse) { #unlockCentreCard[data-fit][data-fit] #buyItNow a { min-height:40px; } }