/** * Size guide accordion and lightbox printed on the product page. * * The rules are heavily specified on purpose: themes style buttons, links and * images inside the product summary aggressively, and the guide has to keep its * own layout. The modal is moved to by the script so no ancestor with a * transform, an overflow or a z-index of its own can clip it. */ .heimdal-size-guide { clear: both; margin: 1.25rem 0; color: #222; } .heimdal-size-guide__accordion { box-sizing: border-box; width: 100%; border: 1px solid #ddd; border-radius: 6px; overflow: hidden; color: #222 !important; background: #fff !important; } .heimdal-size-guide__accordion summary { box-sizing: border-box; padding: .75rem .9rem; color: #222 !important; background: #fff !important; font-weight: 600; cursor: pointer; user-select: none; } .heimdal-size-guide__accordion summary:focus-visible { outline: 2px solid currentColor; outline-offset: -3px; } .heimdal-size-guide__content { box-sizing: border-box; width: 100%; padding: 4px; text-align: center; background: #fff !important; } .heimdal-size-guide__open { all: unset; box-sizing: border-box !important; display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; cursor: zoom-in !important; } .heimdal-size-guide__open img { box-sizing: border-box; display: block !important; width: 100% !important; max-width: none !important; height: auto !important; max-height: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; object-fit: contain; background: #fff !important; } .heimdal-size-guide__download { box-sizing: border-box !important; position: static !important; display: flex !important; float: none !important; clear: both !important; align-items: center !important; justify-content: center !important; width: calc( 100% - 8px ) !important; min-width: 0 !important; max-width: none !important; height: auto !important; min-height: 46px !important; max-height: none !important; margin: 8px 4px 4px !important; padding: 11px 16px !important; overflow: visible !important; border: 1px solid #222 !important; border-radius: 4px !important; color: #fff !important; background: #222 !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.3 !important; text-align: center !important; text-decoration: none !important; white-space: normal !important; box-shadow: none !important; transform: none !important; } .heimdal-size-guide__download:hover, .heimdal-size-guide__download:focus { color: #fff !important; background: #444 !important; } /* Lightbox. */ .heimdal-size-guide__modal { box-sizing: border-box !important; position: fixed !important; z-index: 2147483647 !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; min-width: 0 !important; max-width: none !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 56px 12px 12px !important; border: 0 !important; border-radius: 0 !important; transform: none !important; overflow: auto !important; align-items: center !important; justify-content: center !important; background: rgba( 0, 0, 0, .9 ) !important; cursor: zoom-out !important; } .heimdal-size-guide__modal[aria-hidden="true"] { display: none !important; } .heimdal-size-guide__modal.is-open { display: flex !important; } .heimdal-size-guide__image { box-sizing: border-box !important; display: block !important; position: static !important; width: auto !important; height: auto !important; max-width: calc( 100vw - 24px ) !important; max-height: calc( 100vh - 68px ) !important; margin: auto !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; transform: none !important; object-fit: contain !important; cursor: default !important; background: #fff !important; box-shadow: 0 4px 30px rgba( 0, 0, 0, .4 ) !important; } .heimdal-size-guide__close { all: unset; box-sizing: border-box !important; position: fixed !important; z-index: 2 !important; top: 10px !important; right: 12px !important; left: auto !important; bottom: auto !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; margin: 0 !important; padding: 0 !important; border: 1px solid rgba( 255, 255, 255, .7 ) !important; border-radius: 50% !important; color: #fff !important; background: rgba( 0, 0, 0, .65 ) !important; font: 400 30px/1 Arial, sans-serif !important; text-align: center !important; box-shadow: none !important; transform: none !important; cursor: pointer !important; } body.heimdal-size-guide-open { overflow: hidden !important; } @media ( max-width: 600px ) { .heimdal-size-guide__accordion summary { padding: .7rem .75rem; } .heimdal-size-guide__content { padding: 2px; } .heimdal-size-guide__modal { padding: 54px 6px 6px !important; } .heimdal-size-guide__image { max-width: calc( 100vw - 12px ) !important; max-height: calc( 100vh - 60px ) !important; } .heimdal-size-guide__close { top: 7px !important; right: 7px !important; } }