#content .acctsection { margin: 1.6rem 0 0.6rem; font-size: 1.15em; }
#content #accountcol > h1 + .acctsection { margin-top: 0.4rem; }
.accttable { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--panel-bg); border-radius: var(--rounded, 5px); overflow: hidden; margin: 0 0 1rem; }
.accttable th { padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--grey-dd); text-align: left; font-size: 0.8rem; font-weight: bold; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-faint); white-space: nowrap; background: none; }
#content .accttable th a { color: inherit; text-decoration: none; }
#content .accttable th a:hover { color: var(--brightblue); }
.accttable td { padding: 0.8rem 0.9rem; border-bottom: 1px solid var(--grey-ee); vertical-align: middle; background: none; }
.accttable tbody tr:last-child td { border-bottom: 0; }
.accttable tbody tr:hover td { background: var(--blue-tint); }
.accttable .money { text-align: right; white-space: nowrap; }
.accttable .nowrap { white-space: nowrap; }
.acctsub { display: block; white-space: nowrap; margin-top: 0.15rem; font-size: 0.85em; color: var(--text-faint); }
#content .acctprimary a { text-decoration: none; }
#content .acctprimary a:hover { text-decoration: underline; }
.accttable td.acctactions { text-align: right; white-space: nowrap; }
.acctactions { display: flex; gap: 0.4rem; justify-content: flex-end; flex-wrap: wrap; }
.accttable td.acctactions { display: table-cell; }
.accttable td.acctactions > * + * { margin-left: 0.4rem; }
#content a.acctbtn, #content button.acctbtn, .acctbtn {
display: inline-flex; align-items: center; gap: 0.35rem; margin: 0;
padding: 0.35rem 0.7rem; border: 1px solid var(--grey-dd); border-radius: 6px;
background: var(--panel-bg); color: var(--black); font-size: 0.9rem; line-height: 1.3;
text-decoration: none; white-space: nowrap; cursor: pointer; font-family: inherit;
}
#content a.acctbtn:hover, #content button.acctbtn:hover { border-color: var(--brightblue); color: var(--brightblue); text-decoration: none; }
.acctbtn .icon { width: 0.9em; height: 0.9em; fill: currentColor; }
#content a.acctbtn--go { color: var(--brightblue); }
#content a.acctbtn--danger:hover, #content button.acctbtn--danger:hover { border-color: var(--hdred); color: var(--hdred); }
.acctbadge { display: inline-block; padding: 0.12rem 0.55rem; border-radius: 1rem; background: var(--grey-ee); color: var(--black); font-size: 0.75rem; font-weight: bold; line-height: 1.5; white-space: nowrap; }
.acctbadge--due { background: color-mix(in srgb, var(--hdred) 14%, transparent); color: var(--hdred); }
.acctbadge--ok { background: color-mix(in srgb, var(--instock-bright) 16%, transparent); color: var(--instock-bright); }
.money .acctbadge { display: table; margin: 0.25rem 0 0 auto; }
.acctempty { background: var(--panel-bg); border-radius: var(--rounded, 5px); padding: 1.5rem; text-align: center; }
#content .acctempty p { margin: 0 0 0.8rem; }
#content .acctempty p:last-child { margin: 0; }
#content .acctempty .buttons { display: inline-block; }
.acctpager { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 1rem 0 2rem; color: var(--text-faint); font-size: 0.92rem; }
@media screen and (max-width: 699px) {
.accttable:not(.accttable--cards) .acctwide { display: none; }
.accttable:not(.accttable--cards) th, .accttable:not(.accttable--cards) td { padding: 0.7rem 0.6rem; }
.accttable--cards, .accttable--cards tbody { display: block; }
.accttable--cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.accttable--cards tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 1rem; padding: 0.9rem; border-bottom: 1px solid var(--grey-ee); }
.accttable--cards tbody tr:last-child { border-bottom: 0; }
.accttable--cards tbody tr:hover td { background: none; }
.accttable--cards td { display: block; padding: 0; border: 0; }
.accttable--cards td.acctprimary { grid-column: 1; grid-row: 1; }
.accttable--cards td.money { grid-column: 2; grid-row: 1 / span 2; }
.accttable--cards td.nowrap { grid-column: 1; grid-row: 2; font-size: 0.9em; color: var(--text-faint); }
.accttable--cards td.acctwide { grid-column: 1 / -1; font-size: 0.9em; }
.accttable--cards td.acctwide:empty { display: none; }
.accttable--cards td.acctwide::before { content: attr(data-label) ": "; color: var(--text-faint); }
.accttable--cards td.acctactions { grid-column: 1 / -1; display: flex; justify-content: flex-start; margin-top: 0.5rem; text-align: left; }
.accttable--cards td.acctactions:empty { display: none; }
.accttable--cards td.acctactions > * + * { margin-left: 0; }
}
.acctswitch { display: inline-flex; margin: 0 0 1rem; padding: 0.2rem; border-radius: 2rem; background: var(--panel-bg); border: 1px solid var(--grey-dd); }
#content .acctswitch a { padding: 0.4rem 1rem; border-radius: 2rem; color: var(--black); font-weight: bold; font-size: 0.95rem; text-decoration: none; }
#content .acctswitch a:hover { color: var(--brightblue); }
#content .acctswitch a[aria-current] { background: var(--brightblue); color: var(--white); }
#content a.acctback { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0 0 0.6rem; font-size: 0.92rem; text-decoration: none; }
#content a.acctback:hover { text-decoration: underline; }
.acctback .icon { width: 0.8em; height: 0.8em; fill: currentColor; }
.accthead { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
#content .accthead h1 { margin: 0; }
#content .accthead .acctsub { white-space: normal; font-size: 0.95em; margin-top: 0.3rem; }
.acctbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.acctbar form { margin: 0; }
#content .acctbar .buttons.acctbarmain { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0; padding: 0.55rem 1rem; width: auto; font-size: 1rem; }
#content .acctbar .acctbtn { padding: 0.5rem 0.85rem; font-size: 0.95rem; }
#content .acctnote { margin: 0.6rem 0 0; font-size: 0.85rem; color: var(--text-faint); }
#content .accthead .buttons.acctheadbtn { display: inline-flex; align-items: center; gap: 0.45rem; flex: none; width: auto; margin: 0.2rem 0 0; padding: 0.55rem 1rem; font-size: 1rem; }
#content .acctlead { margin: 0 0 0.9rem; }
.acctfilterbox { max-width: 24rem; margin: 0 0 1rem; }
#content .acctfilterbox input { width: 100%; box-sizing: border-box; margin: 0; }
.acctcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; margin: 0 0 2rem; }
.acctcard { position: relative; display: flex; flex-direction: column; padding: 1.1rem 1.2rem; background: var(--panel-bg); border: 1px solid var(--panel-bg); border-radius: var(--rounded, 5px); }
.acctcard[hidden] { display: none; }
#content .acctcardtitle { margin: 0 0 0.35rem; font-weight: bold; }
#content .acctcardbody { margin: 0 0 1rem; line-height: 1.5; color: var(--text-faint); }
.acctcardbadge { align-self: flex-start; margin: 0 0 0.6rem; }
.acctcardactions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: auto; }
.acctcardactions form { margin: 0; }
#content .acctcardnote { margin: 0; font-size: 0.88em; color: var(--text-faint); }
#content .acctcardinfo { margin: -0.4rem 0 1rem; padding: 0.5rem 0.7rem; border-left: 3px solid var(--grey-dd); background: var(--panel-bg); font-size: 0.92em; overflow-wrap: anywhere; }
.acctcardinfolabel { display: block; font-size: 0.85em; font-weight: bold; color: var(--text-faint); }
.pltoast {
position: fixed; left: 50%; bottom: calc(5.5rem + env(safe-area-inset-bottom)); z-index: 200; transform: translateX(-50%);
display: flex; align-items: center; gap: 0.8rem; width: max-content; max-width: calc(100vw - 2rem); box-sizing: border-box;
padding: 0.75rem 0.6rem 0.75rem 1.1rem; border-radius: 6px; background: #222; color: #fff;
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.3); font-size: 0.95rem; line-height: 1.35;
}
.pltoast button { flex: none; width: 2rem; height: 2rem; margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.pltoast button:hover { background: rgba(255, 255, 255, 0.15); }
@media screen and (min-width: 800px) {
.pltoast { bottom: 1.5rem; }
}
#content .snerror { margin: 0.5rem 0 0; color: var(--hdred); font-size: 0.92em; }
.plconfirm { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; flex-basis: 100%; }
#content .plconfirm p { margin: 0 0.3rem 0 0; flex-basis: 100%; font-weight: bold; font-size: 0.92em; }
#content button.plconfirmyes { background: var(--hdred); border-color: var(--hdred); color: var(--white); }
#content button.plconfirmyes:hover { color: var(--white); filter: brightness(1.08); }
.acctcardicon { width: 1.1em; height: 1.1em; fill: var(--brightblue); vertical-align: -0.15em; margin-right: 0.3rem; }
.acctcardnumber { font-size: 1.15em; letter-spacing: 0.08em; color: var(--black); }
.accttable .acctcheckcol { text-align: center; white-space: normal; }
.accttable th.acctcheckcol { width: 6rem; }
@media screen and (min-width: 1200px) {
#userstable td.acctactions { width: 1%; white-space: nowrap; text-align: left; }
}
@media screen and (min-width: 700px) and (max-width: 1199px) {
#userstable, #userstable tbody { display: block; }
#userstable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
#userstable tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem 1rem; padding: 0.9rem; border-bottom: 1px solid var(--grey-ee); }
#userstable tbody tr:last-child { border-bottom: 0; }
#userstable tbody tr:hover td { background: none; }
#userstable td { display: block; padding: 0; border: 0; }
#userstable td.acctprimary { grid-column: 1 / 3; grid-row: 1; min-width: 0; }
#userstable td.acctprimary .acctsub { white-space: normal; overflow-wrap: anywhere; }
#userstable td.acctactions { grid-column: 3 / 5; grid-row: 1; justify-self: end; width: 11rem; text-align: left; white-space: nowrap; }
#userstable td.acctcheckcol { grid-row: 2; display: flex; align-items: center; gap: 0.5rem; text-align: left; font-size: 0.9em; }
#userstable td.acctcheckcol::before { content: none; }
#userstable td.acctcheckcol::after { content: attr(data-label); color: var(--text-faint); }
}
.accttable .acctcheckcol input { width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--brightblue); }
@media screen and (max-width: 699px) {
.accttable--cards td.acctcheckcol { display: flex; align-items: center; justify-content: space-between; text-align: left; }
.accttable--cards td.acctcheckcol::before { content: attr(data-label); }
}
.mailingmessage { margin: 0 0 1.2em 0; clear: both; }
.acctproduct { display: flex; align-items: center; gap: 0.85rem; }
.acctproductimg { flex: none; width: 3.5rem; height: 3.5rem; border-radius: 6px; background-color: #fff; background-size: contain; background-repeat: no-repeat; background-position: center; }
.acctproductimg--none { background-color: transparent; border: 1px dashed var(--grey-dd); box-sizing: border-box; }
.acctsub.acctwrap { white-space: normal; }
#content .productlist.acctproducts { padding-top: 0; grid-template-columns: repeat(auto-fill, minmax(13em, 1fr)); }
@media screen and (max-width: 575px) {
#content .productlist.acctproducts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
#content .productlist.acctproducts .plitem { position: relative; }
#content .productlist.acctproducts .plitem .favourite {
display: flex; align-items: center; justify-content: center; position: absolute; top: 0.5rem; right: 0.5rem; z-index: 2;
width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--panel-bg); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
font-size: 0; cursor: pointer;
}
#content .productlist.acctproducts .plitem .favourite svg { width: 1.1rem; height: 1.1rem; fill: var(--hdred); }
.acctfieldset { margin: 0 0 1.2rem; padding: 0; border: 0; min-width: 0; }
.acctfieldset legend { margin: 0 0 0.5rem; padding: 0; font-weight: bold; }
.cochoices.acctchoices { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); max-width: 40rem; }
#content .buttons.acctsubmit { display: inline-flex; align-items: center; gap: 0.5rem; width: auto; margin: 0.3rem 0 0; padding: 0.7rem 1.3rem; font-size: 1.05rem; }
.acctnotice { max-width: 40rem; padding: 0.9rem 1rem; background: var(--blue-tint); border-radius: var(--rounded, 5px); }
#content .acctnotice p { margin: 0; }
#content #accountcol .pl-form, #content #accountcol .form-container, #content #accountcol .acctform { max-width: 40rem; }
.acctconfirm { display: flex; align-items: center; gap: 1.2rem; margin-top: 1.4rem; }
#content .acctconfirm .buttons.acctdanger { display: inline-flex; align-items: center; gap: 0.45rem; width: auto; margin: 0; padding: 0.6rem 1.1rem; font-size: 1rem; background: var(--hdred); }
#content .acctconfirm .buttons.acctdanger .icon { fill: currentColor; }
.acctfigures { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0 0 1.2rem; }
.acctfigures > div { flex: 1 1 12rem; max-width: 18rem; padding: 1.1rem 1.25rem; background: var(--panel-bg); border-radius: var(--rounded, 5px); }
.acctfigurelabel { display: block; font-size: 0.8rem; font-weight: bold; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 0.3rem; }
.acctfigure { display: block; font-size: 1.9rem; font-weight: bold; line-height: 1.2; }
.acctfigure--quiet { color: var(--text-faint); font-weight: normal; }
.acctfacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.8rem 1.5rem; margin: 1.2rem 0; padding: 1rem 1.1rem; background: var(--panel-bg); border-radius: var(--rounded, 5px); }
.acctfacts:empty { display: none; }
.acctfacts dt { font-size: 0.8rem; font-weight: bold; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 0.2rem; }
.acctfacts dd { margin: 0; }
.acctlines .acctqty { width: 4rem; }
.accttotals { margin: 0 0 2rem auto; max-width: 18rem; padding: 0 0.9rem; }
.accttotals > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.2rem 0; }
.accttotals dt { color: var(--text-faint); }
.accttotals dd { margin: 0; }
.accttotals .accttotal { margin-top: 0.4rem; padding-top: 0.6rem; border-top: 1px solid var(--grey-dd); font-size: 1.2em; font-weight: bold; }
.accttotals .accttotal dt { color: inherit; }