.salesDatesPanel{box-sizing:border-box;width:100%;min-width:0;margin:12px 0;padding:14px 16px;background:#fff8f0;border:1px solid #dec4af;border-left:4px solid #7d180b;border-radius:10px;color:#30201c}.salesDatesPanel h2{font-size:1rem;margin:0 0 10px}.salesDatesList{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:12px}.salesDateItem{display:flex;flex-direction:column;gap:3px;min-width:0;font-size:13px;line-height:1.45;overflow-wrap:anywhere}.salesDateName{color:#7d180b}.salesDateState{font-weight:700}.salesDateDeadline{color:#7d180b}.customerPeriod .salesDateItem{font-size:14px;margin-top:7px}.saleCopy .salesDateItem{font-size:11px;line-height:1.3;gap:2px;padding-top:5px;border-top:1px solid #e8ded7}.periodPanel>.salesDatesPanel{flex:1 0 100%;margin-bottom:0}.salesDatesPanel p{margin:0}.staffView[data-view=orders] .salesDatesPanel,.staffView[data-view=overview] .salesDatesPanel{display:block}
/* På mobil får försäljningstiderna plats bredvid bilden i varje kort. */
@media(max-width:700px){.shopStart:has(.salesDateItem) .saleGrid{grid-template-columns:1fr;gap:6px}.shopStart:has(.salesDateItem) .saleCard{display:grid;grid-template-columns:64px minmax(0,1fr);border-radius:12px}.shopStart:has(.salesDateItem) .saleVisual{height:100%;min-height:64px}.shopStart:has(.salesDateItem) .saleCopy{position:relative;padding:7px 33px 7px 9px;gap:4px}.shopStart:has(.salesDateItem) .saleCopy h2{font-size:16px;line-height:1.15}.shopStart:has(.salesDateItem) .saleCopy>.smallLabel,.shopStart:has(.salesDateItem) .saleCopy>p{display:none}.shopStart:has(.salesDateItem) .saleCta{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;margin:0;padding:0;min-height:28px}.shopStart:has(.salesDateItem) .saleCta span:first-child{display:none}.shopStart:has(.salesDateItem) .saleCopy .salesDateItem{font-size:11px;line-height:1.3;gap:1px;padding-top:3px}.shopStart:has(.salesDateItem) .saleCta span:last-child{width:22px;height:22px}}
@media(max-height:650px){.shopStart:has(.salesDateItem) .startLead,.shopStart:has(.salesDateItem) .startEyebrow{display:none}.shopStart:has(.salesDateItem) .startWelcome h1{font-size:20px;margin-bottom:2px}.shopStart:has(.salesDateItem) .saleCopy>p{display:none}}
@media(max-width:700px) and (max-height:650px){.shopStart:has(.salesDateItem) .startHeader .brandHome img{height:40px;width:90px}.shopStart:has(.salesDateItem) .howToOrder span{width:16px;height:16px}.shopStart:has(.salesDateItem) .howToOrder p{font-size:9px}}
@media(min-width:701px) and (max-height:800px){.shopStart:has(.salesDateItem) .saleVisual{height:clamp(45px,10dvh,90px)}.shopStart:has(.salesDateItem) .saleCopy>p{display:none}}
@media(min-width:701px) and (max-height:460px){.shopStart:has(.salesDateItem) .saleVisual{height:30px}.shopStart:has(.salesDateItem) .saleCopy>.smallLabel{display:none}}

.paymentDeadline{display:flex;flex-direction:column;gap:4px;padding:10px 12px;margin:8px 0;border:1px solid #dec4af;border-left:4px solid #7d180b;border-radius:8px;background:#fff8f0;color:#30201c;line-height:1.4;overflow-wrap:anywhere}.paymentDeadline>span{font-weight:750;color:#7d180b}.paymentDeadline>small{font-size:12px}.paymentSchedulePanel label{display:grid;gap:6px}.paymentSchedulePanel input{padding:10px;width:min(100%,320px)}
.staffView[data-view=overview] .paymentSchedulePanel,.staffView[data-view=orders] .paymentSchedulePanel{display:none}