/* Issue 1322 L2: ordering two-liner and the "How ordering works" note. Loaded only with the shop.orderingNote switch on. */
.dcOrdLine{margin:14px 0 6px;padding:12px 0 0;border-top:1px solid #D5D9DD;font:400 13px/1.5 Montserrat,sans-serif;color:#434D56;max-width:380px}
.dcOrdLine b{display:block;font-weight:600;color:#14171A;font-size:14px;margin-bottom:2px}
.dcOrdLine a{color:#14171A;text-decoration:underline;font-weight:500;white-space:nowrap}
.dcOrdNote{font-family:Montserrat,sans-serif;color:#14171A;background:#fff;box-sizing:border-box;text-transform:none;letter-spacing:0}
.dcOrdNote[hidden],.dcOrdDim[hidden]{display:none !important}
.dcOrdNote h3{font:700 20px/1.3 'Libre Baskerville',Georgia,serif;margin:0 0 8px;color:#14171A;text-transform:none;letter-spacing:0}
.dcOrdNote p{margin:0;font-size:13px;line-height:1.5;color:#434D56;text-transform:none;letter-spacing:0}
.dcOrdNote .dcOrdIntro{margin-bottom:12px}
.dcOrdNote ol{list-style:none;margin:0;padding:0}
.dcOrdNote li{display:flex;gap:12px;padding:10px 0;border-top:1px solid #E4E7EA;list-style:none}
.dcOrdNote li .dcOrdN{flex:none;width:22px;height:22px;border:1.5px solid #14171A;font:600 11px/19px Montserrat,sans-serif;text-align:center;box-sizing:border-box}
.dcOrdNote li b{display:block;font-size:13px;font-weight:600;margin-bottom:2px;color:#14171A}
.dcOrdNote .dcOrdFoot{border-top:1px solid #E4E7EA;padding-top:10px;font-size:12px}
.dcOrdNote .dcOrdClose{position:absolute;top:18px;right:24px;font:500 12px Montserrat,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#14171A;background:#fff;border:1.5px solid #14171A;padding:6px 10px;cursor:pointer}
/* desktop: a right side panel over a dimmed page */
@media (min-width:768px){
  .dcOrdDim{position:fixed;inset:0;z-index:99998;background:rgba(20,23,26,.45)}
  .dcOrdNote{position:fixed;top:0;right:0;bottom:0;width:440px;max-width:100%;padding:64px 32px 28px;overflow:auto;z-index:99999;box-shadow:-8px 0 24px rgba(0,0,0,.18)}
}
/* phone: opens in place under the two-liner; the link says "Hide how ordering works" */
@media (max-width:767px){
  .dcOrdDim{display:none !important}
  .dcOrdNote{position:relative;margin:10px 0 4px;padding:16px;border:1px solid #D5D9DD;max-width:380px}
  .dcOrdNote .dcOrdClose{display:none}
}