:root{--aside-width:400px;--cart-aside-summary-height-with-discount:300px;--cart-aside-summary-height:250px;--grid-item-width:355px;--header-height:64px;--color-dark:#000;--color-light:#fff}aside{width:100%;height:100vh;max-width:var(--aside-width);right:calc(-1 * var(--aside-width));transition:transform .2s ease-in-out;position:fixed;top:0;box-shadow:0 0 50px #0000004d}aside header{border-bottom:1px solid var(--color-gray-200);height:var(--header-height);justify-content:space-between;align-items:center;padding:0 20px;display:flex}aside header h3{margin:0}aside header .close{opacity:.8;width:20px;font-weight:700;text-decoration:none;transition:all .2s}aside header .close:hover{opacity:1}aside header h2{margin-top:0;margin-bottom:.6rem}aside main{margin:1rem}aside p{margin:0 0 .25rem}aside p:last-child{margin:0}aside li{margin-bottom:.125rem}.overlay{opacity:0;pointer-events:none;visibility:hidden;z-index:100;background:#0003;transition:opacity .4s;position:fixed;inset:0}.overlay .close-outside{color:#0000;height:100%;width:calc(100% - var(--aside-width));background:0 0;border:none;position:absolute;top:0;left:0}.overlay .light{background:#ffffff80}.overlay .cancel{cursor:default;width:100%;height:100%;position:absolute}.overlay.expanded{opacity:1;pointer-events:auto;visibility:visible}.overlay.expanded aside{transform:translateX(calc(var(--aside-width) * -1))}