used as the client-side row template; the card-on-file .template wrapper is
real content, so only the table variant is hidden. */
#accountContent .table.template,
#accountContent .hidden,
#accountContent .pending-releases-alert,
#accountContent .allocation-pending-releases-alert,
#accountContent .jqmDialog {
display: none !important;
}
/* Header and data rows are separate grid containers, so they only line up if
every row is given the *same explicit* track sizes — content-derived tracks
(auto/fr from each row's own text) can never match across rows. */
#accountContent .table {
display: block;
width: 100%;
border: 1px solid var(--acct-line);
border-radius: 8px;
overflow: hidden;
}
#accountContent .table .row {
display: grid;
grid-template-columns: minmax(0, 1fr) 150px 150px 210px;
align-items: center;
gap: 16px;
padding: 14px 16px;
margin: 0;
border-bottom: 1px solid var(--acct-line-soft);
}
#accountContent .table .row:last-child {
border-bottom: none;
}
#accountContent .table .row.h {
padding-top: 10px;
padding-bottom: 10px;
background: var(--acct-surface);
border-bottom: 1px solid var(--acct-line-strong);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--acct-gray-500);
}
#accountContent .table .row:not(.h):hover {
background: var(--acct-surface-hover);
}
#accountContent .table .row > div {
min-width: 0;
padding: 0;
border: none;
}
#accountContent .table .row span {
font-size: 14px;
color: var(--acct-gray-700);
overflow-wrap: anywhere;
}
#accountContent .mobile-label {
display: none;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--acct-gray-400);
}
/* Row actions — stacked so every button is exactly the same width,
whether or not the "Edit Club Order" button is present on that row. */
#accountContent .table .cmd,
#accountContent .cmd.align-right {
display: flex !important;
flex-direction: column;
align-items: stretch;
justify-content: center;
gap: 8px;
text-align: center;
}
/* the pending-order wrapper must not shrink its button */
#accountContent .table .cmd .pending-order {
display: block;
width: 100%;
}
#accountContent .table .cmd .btn,
#accountContent .div-add-card-on-file .btn,
#accountContent .customer-service-box .btn,
#accountContent a#hlnkChangePassword {
display: block;
width: 100%;
margin: 0 !important;
padding: 8px 14px !important;
font-size: 13px !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
text-transform: none !important;
border-radius: var(--acct-radius) !important;
white-space: nowrap;
}
/* secondary action styling for the non-primary row button */
#accountContent .table .cmd .btn:not(.modal-popup),
#accountContent .table .cmd .pending-order + input + .btn {
background: var(--acct-white) !important;
color: var(--acct-gray-700) !important;
border: 1px solid var(--acct-btn-border) !important;
}
#accountContent .table .cmd .btn:not(.modal-popup):hover,
#accountContent .table .cmd .pending-order + input + .btn:hover {
background: var(--acct-btn-hover-bg) !important;
color: var(--acct-gray-800) !important;
border-color: var(--acct-btn-border-hover) !important;
}
#accountContent .info-text {
margin: 0 0 14px;
padding: 12px 14px;
background: var(--acct-panel);
border: 1px solid var(--acct-line);
border-radius: 8px;
font-size: 13px;
color: var(--acct-gray-600);
}
#accountContent .section > .content > br,
#accountContent .card-on-file > br,
#accountContent .card-on-file .template > br,
#accountContent .account_address > .column > br {
display: none;
}
/* A value that starts with
(empty address line 1) opens with a blank
row and knocks the label out of alignment. */
#accountContent .ciRegularView .col > span > br:first-child {
display: none;
}
#accountContent .div-add-card-on-file {
margin-top: 14px;
}
/* ---------- Empty states ---------- */
#accountContent .empty,
#accountContent .customer-order-history > div {
padding: 28px 16px !important;
background: var(--acct-surface);
border: 1px dashed #e0e0e0;
border-radius: 8px;
text-align: center;
font-size: 14px;
color: var(--acct-gray-500);
}
#accountContent .customer-order-history h2 {
margin: 0 !important;
font-family: var(--acct-font) !important;
font-size: 15px !important;
font-weight: 500 !important;
color: var(--acct-gray-500) !important;
}
/* ---------- Scroll-to highlight (set by goToWineClubReleases) ---------- */
#accountContent .section-highlight {
border-color: var(--acct-primary);
box-shadow: 0 0 0 3px var(--acct-primary-ring);
transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
/* ---------- Responsive ---------- */
@media only screen and (max-width: 860px) {
#accountContent .table {
display: block;
border: none;
border-radius: 0;
overflow: visible;
}
#accountContent .table .row.h {
display: none !important;
}
#accountContent .table .row {
display: block;
padding: 14px;
margin-bottom: 10px;
border: 1px solid var(--acct-line);
border-radius: 8px;
}
#accountContent .table .row > div {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding: 4px 0;
}
#accountContent .mobile-label {
display: block;
flex: 0 0 auto;
}
#accountContent .table .row > div span {
text-align: right;
}
#accountContent .table .cmd,
#accountContent .cmd.align-right {
justify-content: stretch;
padding-top: 12px !important;
margin-top: 8px;
border-top: 1px solid var(--acct-line-soft);
}
#accountContent .table .cmd .btn {
flex: 1 1 auto;
text-align: center;
}
}
@media only screen and (max-width: 640px) {
#accountContent {
padding: 0 var(--acct-space-xs);
}
#accountContent .section > .header {
padding: 14px 16px !important;
font-size: 14px !important;
}
#accountContent .section > .content {
padding: 16px;
}
#accountContent .ciRegularView .row {
grid-template-columns: 1fr;
gap: 2px;
}
}
/* ==========================================================================
WINE CLUB MEMBERSHIP POPUP — remaining panels
Variants of this page also render a nested "pending shipment" section, the
waiting-list / on-hold table, and the standalone checkbox row that sits
outside its table. None of those were covered by the field-row styles.
========================================================================== */
/* The popup renders standalone (no site chrome), so give the page some air */
body:not(.has-overlay) #pageContent > .wine-club-membership-details,
body:not(.has-overlay) #pageContent > .wine-club-shipment-details,
#pageContent > div[id$="upd"] > .wine-club-membership-details {
margin-top: var(--acct-space-md);
}
/* ---------- Nested section (pending wine club release) ---------- */
.wine-club-membership-details .section:not(.data) {
display: block;
margin: var(--acct-space-lg) 0 0;
padding: var(--acct-space-md);
background: var(--acct-panel);
border: 1px solid var(--acct-line);
border-radius: 8px;
}
.wine-club-membership-details .section:not(.data) > .header {
margin: 0 0 var(--acct-space-2xs);
padding: 0;
background: none !important;
border: none;
color: var(--acct-gray-700) !important;
font-family: var(--acct-font) !important;
font-size: 14px !important;
font-weight: 600 !important;
line-height: 1.4;
letter-spacing: 0 !important;
text-align: left !important;
text-transform: none !important;
}
/* the inert row template above the real row */
.wine-club-membership-details .table.template {
display: none !important;
}
/* the real row sits *outside* the table, so style it directly */
.wine-club-membership-details .section:not(.data) > .row {
display: flex;
align-items: center;
gap: var(--acct-space-2xs);
width: 100%;
margin: 0;
padding: var(--acct-space-2xs) 0 0;
border: none;
font-size: 14px;
color: var(--acct-gray-700);
}
.wine-club-membership-details .section:not(.data) > .row > div {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
width: 100%;
}
/* ---------- Checkboxes (pending release, waiting list, privileges) ---------- */
.wine-club-membership-details input[type="checkbox"],
.wine-club-shipment-details input[type="checkbox"] {
width: 16px;
height: 16px;
margin: 0 4px 0 0;
accent-color: var(--acct-primary);
cursor: pointer;
flex: 0 0 auto;
}
.wine-club-membership-details input[type="checkbox"]:disabled {
cursor: default;
opacity: 0.6;
}
.wine-club-membership-details input[type="checkbox"] + label,
.wine-club-membership-details .aspNetDisabled label {
margin: 0;
font-family: var(--acct-font);
font-size: 14px;
font-weight: 400 !important;
color: var(--acct-gray-700);
cursor: pointer;
}
.wine-club-membership-details .aspNetDisabled {
display: inline-flex !important;
align-items: center;
gap: 4px;
font-weight: 400 !important;
}
/* ---------- "On Hold Until" date field ----------
Hidden by the page today (inline display:none), styled so it reads correctly
whenever the club config turns holds on. */
.wine-club-membership-details .col > strong {
display: block;
margin-bottom: var(--acct-space-3xs);
font-family: var(--acct-font);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.5px;
text-transform: uppercase;
color: var(--acct-text-dark);
}
.wine-club-membership-details .col > span:has(> .txt.calendar) {
display: flex;
align-items: center;
gap: var(--acct-space-2xs);
width: 100%;
}
.wine-club-membership-details .txt.calendar {
flex: 1 1 auto;
min-width: 0;
min-height: 44px;
padding: 0 var(--acct-space-xs);
border: 1px solid var(--acct-border);
border-radius: var(--acct-radius);
font-family: var(--acct-font);
font-size: 14px;
color: var(--acct-text-dark);
}
.wine-club-membership-details .txt.calendar:focus {
border-color: var(--acct-primary);
outline: none;
}
.wine-club-membership-details .calendar-img {
flex: 0 0 auto;
width: 20px;
height: 20px;
margin: 0;
}
/* jQuery UI datepicker popup, when the hold field is enabled */
#ui-datepicker-div {
font-family: var(--acct-font) !important;
font-size: 13px !important;
border: 1px solid var(--acct-line-strong) !important;
border-radius: 8px !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
z-index: 10001 !important;
overflow: hidden;
}
/* loader styling lives in the APP BOOT / LOADING STATE block */
@media only screen and (max-width: 640px) {
.wine-club-membership-details .section:not(.data) {
padding: var(--acct-space-sm);
}
}
/* ==========================================================================
AUTH PAGES — sign in / sign up / guest / forgot password
Angular components (app-sign-in etc.) inside :is(.container-fluid.auth, .container-fluid.forgot-password).
Unbranded card on Inter, matching the account dashboard.
========================================================================== */
:is(.container-fluid.auth, .container-fluid.forgot-password) {
box-sizing: border-box;
width: 100%;
max-width: 460px !important;
margin: var(--acct-space-2xl) auto !important;
padding: 32px !important;
background: var(--acct-white);
border: 1px solid var(--acct-line-strong);
border-radius: 12px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
color: var(--acct-gray-700);
font-size: 14px;
line-height: 1.5;
text-align: left;
}
:is(.container-fluid.auth, .container-fluid.forgot-password) * {
box-sizing: border-box;
}
:is(.container-fluid.auth, .container-fluid.forgot-password) > .container-fluid,
:is(.container-fluid.auth, .container-fluid.forgot-password) form {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* ---------- Heading ----------
sign-in leads with an h1, but sign-up and the guest/reset panes head their
sections with an h2 — both are page furniture and take the same face */
:is(.container-fluid.auth, .container-fluid.forgot-password) h1 {
margin: 0 0 24px !important;
font-size: 22px !important;
line-height: 1.3 !important;
color: var(--acct-gray-800) !important;
text-align: center;
}
:is(.container-fluid.auth, .container-fluid.forgot-password) h2 {
margin: 0 0 16px !important;
font-size: 17px !important;
font-weight: 600 !important;
letter-spacing: -0.01em !important;
line-height: 1.4 !important;
color: var(--acct-gray-800) !important;
text-transform: none !important;
}
/* ---------- Fields ---------- */
:is(.container-fluid.auth, .container-fluid.forgot-password) .form-group {
margin-bottom: 16px;
}
:is(.container-fluid.auth, .container-fluid.forgot-password) label {
display: block;
margin-bottom: 6px;
font-size: 13px;
font-weight: 500;
color: var(--acct-gray-600);
}
:is(.container-fluid.auth, .container-fluid.forgot-password) .required-asterisk {
margin-left: 2px;
color: var(--acct-error);
}
:is(.container-fluid.auth, .container-fluid.forgot-password) .form-control,
:is(.container-fluid.auth, .container-fluid.forgot-password) input[type="text"],
:is(.container-fluid.auth, .container-fluid.forgot-password) input[type="email"],
:is(.container-fluid.auth, .container-fluid.forgot-password) input[type="password"],
:is(.container-fluid.auth, .container-fluid.forgot-password) input[type="tel"],
:is(.container-fluid.auth, .container-fluid.forgot-password) select {
width: 100%;
min-height: 44px;
padding: 10px 14px;
background: var(--acct-white);
border: 1px solid var(--acct-btn-border);
border-radius: 8px;
font-family: var(--acct-font);
font-size: 14px;
color: var(--acct-gray-800);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
:is(.container-fluid.auth, .container-fluid.forgot-password) .form-control::placeholder {
color: var(--acct-gray-400);
}
:is(.container-fluid.auth, .container-fluid.forgot-password) .form-control:focus,
:is(.container-fluid.auth, .container-fluid.forgot-password) input:focus,
:is(.container-fluid.auth, .container-fluid.forgot-password) select:focus {
border-color: var(--acct-primary);
box-shadow: 0 0 0 3px var(--acct-primary-ring);
outline: none;
}
/* Angular validation states */
:is(.container-fluid.auth, .container-fluid.forgot-password) .form-control.ng-invalid.ng-dirty,
:is(.container-fluid.auth, .container-fluid.forgot-password) .form-control.is-invalid {
border-color: var(--acct-error);
}
:is(.container-fluid.auth, .container-fluid.forgot-password) .invalid-feedback,
:is(.container-fluid.auth, .container-fluid.forgot-password) .error {
display: block;
margin-top: 6px;
font-size: 12px;
color: var(--acct-error);
}
/* ---------- Buttons ---------- */
:is(.container-fluid.auth, .container-fluid.forgot-password) .btn,
:is(.container-fluid.auth, .container-fluid.forgot-password) .btn.btn-block {
display: block;
width: 100%;
min-height: 44px;
margin: 0 !important;
padding: 11px 16px !important;
border-radius: 8px !important;
font-family: var(--acct-font) !important;
font-size: 14px !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
line-height: 1.4 !important;
text-align: center;
text-transform: none !important;
text-decoration: none !important;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
/* Continue / Sign In — same neutral treatment as every other button */
:is(.container-fluid.auth, .container-fluid.forgot-password) .btn.sign-in {
background: var(--acct-white) !important;
border: 1px solid var(--acct-btn-border) !important;
color: var(--acct-gray-700) !important;
}
:is(.container-fluid.auth, .container-fluid.forgot-password) .btn.sign-in:hover {
background: var(--acct-btn-hover-bg) !important;
border-color: var(--acct-btn-border-hover) !important;
color: var(--acct-gray-800) !important;
}
/* secondary: Create an Account / Shop as Guest / Join Club */
:is(.container-fluid.auth, .container-fluid.forgot-password) .btn.sign-up,
:is(.container-fluid.auth, .container-fluid.forgot-password) .btn.shop-as-guest,
:is(.container-fluid.auth, .container-fluid.forgot-password) .btn.quick-order {
background: var(--acct-white) !important;
border: 1px solid var(--acct-btn-border) !important;
color: var(--acct-gray-700) !important;
}
:is(.container-fluid.auth, .container-fluid.forgot-password) .btn.sign-up:hover,
:is(.container-fluid.auth, .container-fluid.forgot-password) .btn.shop-as-guest:hover,
:is(.container-fluid.auth, .container-fluid.forgot-password) .btn.quick-order:hover {
background: var(--acct-btn-hover-bg) !important;
border-color: var(--acct-btn-border-hover) !important;
color: var(--acct-gray-800) !important;
}
/* `form.disabled` is present on a valid, fillable form, so it must not be
treated as a disabled state — only a real :disabled attribute dims. */
:is(.container-fluid.auth, .container-fluid.forgot-password) .btn:disabled {
opacity: 0.55;
}
/* ---------- Links ---------- */
:is(.container-fluid.auth, .container-fluid.forgot-password) .forgot-password {
display: inline-block;
width: 100%;
font-size: 13px;
color: var(--acct-gray-600);
text-align: center;
text-decoration: none;
}
/* Password field: label left, "Forgot your password?" right, input below.
The component floats that link, which dropped it out of flow and shoved
the input up beside the label. */
:is(.container-fluid.auth, .container-fluid.forgot-password) .form-group.password {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 6px 12px;
}
:is(.container-fluid.auth, .container-fluid.forgot-password) .form-group.password > label {
flex: 1 1 auto;
margin-bottom: 0;
}
:is(.container-fluid.auth, .container-fluid.forgot-password) .form-group.password > .forgot-password {
float: none !important;
flex: 0 0 auto;
width: auto;
margin: 0 !important;
text-align: right;
}
:is(.container-fluid.auth, .container-fluid.forgot-password) .form-group.password > .form-control,
:is(.container-fluid.auth, .container-fluid.forgot-password) .form-group.password > input {
flex: 1 1 100%;
}
:is(.container-fluid.auth, .container-fluid.forgot-password) .forgot-password:hover {
color: var(--acct-primary);
text-decoration: underline;
}
/* ---------- Divider between sign-in and the alternatives ---------- */
:is(.container-fluid.auth, .container-fluid.forgot-password) .form-group.spacer {
margin: 24px 0 20px !important;
}
:is(.container-fluid.auth, .container-fluid.forgot-password) hr {
margin: 0;
border: none;
border-top: 1px solid var(--acct-line);
}
:is(.container-fluid.auth, .container-fluid.forgot-password) .container-fluid.sign-up {
margin-top: 0 !important;
}
/* ---------- Join club promo ---------- */
:is(.container-fluid.auth, .container-fluid.forgot-password) .form-group.join-club {
margin-top: 20px !important;
padding-top: 20px;
border-top: 1px solid var(--acct-line);
}
:is(.container-fluid.auth, .container-fluid.forgot-password) .form-group.join-club p {
margin: 0 0 10px;
font-size: 13px;
color: var(--acct-gray-600);
text-align: center;
}
@media only screen and (max-width: 520px) {
:is(.container-fluid.auth, .container-fluid.forgot-password) {
margin: var(--acct-space-md) auto !important;
padding: 20px !important;
border-radius: 10px;
}
:is(.container-fluid.auth, .container-fluid.forgot-password) h1 {
font-size: 20px !important;
}
}
/* ---------- Sign-up / forgot-password variants ----------
Sign-up nests a Bootstrap `.row > .col-12.col-md-5` inside the card, which
squeezed the form to ~40% of an already narrow column. Forgot-password
ships an intro paragraph and a "Sign In" back link instead of the
alternatives block. */
:is(.container-fluid.auth, .container-fluid.forgot-password) .row {
display: block !important;
width: 100% !important;
margin: 0 !important;
}
:is(.container-fluid.auth, .container-fluid.forgot-password) .row > [class*="col-"] {
flex: 1 1 100% !important;
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
/* Sign-up's submit has no `.sign-in` class — treat any unqualified
block button in an auth card as the primary action. */
:is(.container-fluid.auth, .container-fluid.forgot-password)
.btn.btn-block:not(.sign-up):not(.shop-as-guest):not(.quick-order) {
background: var(--acct-white) !important;
border: 1px solid var(--acct-btn-border) !important;
color: var(--acct-gray-700) !important;
}
:is(.container-fluid.auth, .container-fluid.forgot-password)
.btn.btn-block:not(.sign-up):not(.shop-as-guest):not(.quick-order):hover {
background: var(--acct-btn-hover-bg) !important;
border-color: var(--acct-btn-border-hover) !important;
color: var(--acct-gray-800) !important;
}
:is(.container-fluid.auth, .container-fluid.forgot-password)
.btn.btn-block:disabled:hover {
background: var(--acct-white) !important;
border-color: var(--acct-btn-border) !important;
color: var(--acct-gray-700) !important;
}
/* Intro copy above the field */
:is(.container-fluid.auth, .container-fluid.forgot-password) > form p,
:is(.container-fluid.auth, .container-fluid.forgot-password) form > .container-fluid > p {
margin: 0 0 18px;
font-size: 13px;
line-height: 1.5;
color: var(--acct-gray-500);
text-align: center;
}
/* "Sign In" back link under the submit */
:is(.container-fluid.auth, .container-fluid.forgot-password) .form-group.cancel {
margin-top: 16px !important;
padding-top: 16px;
border-top: 1px solid var(--acct-line);
text-align: center;
}
:is(.container-fluid.auth, .container-fluid.forgot-password) .form-group.cancel a {
font-size: 13px;
font-weight: 500;
color: var(--acct-gray-600);
text-decoration: none;
}
:is(.container-fluid.auth, .container-fluid.forgot-password) .form-group.cancel a:hover {
color: var(--acct-primary);
text-decoration: underline;
}
/* the hidden anti-autofill password input the components inject */
:is(.container-fluid.auth, .container-fluid.forgot-password) input.d-none {
display: none !important;
}
/* empty breadcrumb slot above the auth card */
#auth-breadcrumb:empty,
app-bread-crumb:empty {
display: none;
}
app-auth-layout > .mb-3:has(app-bread-crumb:empty) {
margin-bottom: 0 !important;
}
/* ---------- Sign-up: full registration step ----------
Adds a username summary line, Bootstrap `.form-row` wrappers, a custom
checkbox and a password-requirements panel that the first step doesn't
render. */
:is(.container-fluid.auth, .container-fluid.forgot-password) .form-row {
display: block !important;
width: 100% !important;
margin: 0 !important;
}
:is(.container-fluid.auth, .container-fluid.forgot-password) .form-row > [class*="col-"] {
flex: 1 1 100% !important;
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
/* Username summary ("Username: test@example.com change") */
:is(.container-fluid.auth, .container-fluid.forgot-password) .form-group:has(.change-username) {
margin-bottom: 20px !important;
padding: 14px 16px !important;
background: var(--acct-panel);
border: 1px solid var(--acct-line);
border-radius: 8px;
font-size: 14px;
color: var(--acct-gray-700);
overflow-wrap: anywhere;
}
:is(.container-fluid.auth, .container-fluid.forgot-password) .form-group:has(.change-username) label {
display: block;
margin-bottom: 6px;
font-size: 12px;
font-weight: 500;
color: var(--acct-gray-500);
}
:is(.container-fluid.auth, .container-fluid.forgot-password) .form-group:has(.change-username) br {
display: none;
}
/* the email + "change" link share a line, whether wrapped in a div or not */
:is(.container-fluid.auth, .container-fluid.forgot-password) .form-group:has(.change-username) > div {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 0 4px;
min-width: 0;
}
:is(.container-fluid.auth, .container-fluid.forgot-password) .form-group:has(.change-username) .d-none {
display: none !important;
}
:is(.container-fluid.auth, .container-fluid.forgot-password) .change-username {
margin: 0 0 0 8px !important;
font-size: 13px;
font-weight: 500;
color: var(--acct-primary);
text-decoration: none;
white-space: nowrap;
}
:is(.container-fluid.auth, .container-fluid.forgot-password) .change-username:hover {
text-decoration: underline;
}
/* Submit row spacing */
:is(.container-fluid.auth, .container-fluid.forgot-password) .form-row.mt-4 {
margin-top: 22px !important;
}
/* "Keep me signed in" — Bootstrap custom-control without Bootstrap's CSS */
:is(.container-fluid.auth, .container-fluid.forgot-password) .custom-control.custom-checkbox {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
padding: 0 !important;
margin-top: 12px;
}
:is(.container-fluid.auth, .container-fluid.forgot-password) .custom-control-input {
position: static !important;
flex: 0 0 auto;
width: 16px;
height: 16px;
margin: 0;
opacity: 1 !important;
accent-color: var(--acct-primary);
cursor: pointer;
}
:is(.container-fluid.auth, .container-fluid.forgot-password) .custom-control-label {
margin: 0;
font-size: 13px;
font-weight: 400 !important;
color: var(--acct-gray-600);
cursor: pointer;
}
:is(.container-fluid.auth, .container-fluid.forgot-password) .custom-control-label::before,
:is(.container-fluid.auth, .container-fluid.forgot-password) .custom-control-label::after {
content: none !important;
}
:is(.container-fluid.auth, .container-fluid.forgot-password) .custom-checkbox a {
margin: 0 !important;
font-size: 13px;
color: var(--acct-gray-500);
text-decoration: underline;
}
:is(.container-fluid.auth, .container-fluid.forgot-password) .custom-checkbox a:hover {
color: var(--acct-primary);
}
/* Password requirements panel */
:is(.container-fluid.auth, .container-fluid.forgot-password) .password-requirements {
margin-top: 22px !important;
padding: 14px 16px !important;
background: var(--acct-panel);
border: 1px solid var(--acct-line);
border-radius: 8px;
font-size: 12px !important;
line-height: 1.6;
color: var(--acct-gray-500);
}
:is(.container-fluid.auth, .container-fluid.forgot-password) .password-requirements strong {
display: block;
margin-bottom: 8px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--acct-gray-600);
}
:is(.container-fluid.auth, .container-fluid.forgot-password) .password-requirements .pl-3 {
padding-left: 0 !important;
}
/* each requirement gets a bullet instead of relying on Bootstrap padding */
:is(.container-fluid.auth, .container-fluid.forgot-password) .password-requirements .pl-3 > div {
position: relative;
padding-left: 16px;
}
:is(.container-fluid.auth, .container-fluid.forgot-password) .password-requirements .pl-3 > div::before {
content: "";
position: absolute;
top: 8px;
left: 4px;
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--acct-gray-400);
}
/* readonly hidden username input the component injects */
:is(.container-fluid.auth, .container-fluid.forgot-password) input[readonly].d-none {
display: none !important;
}
.fax {
display: none !important;
visibility: hidden !important;
}
#accountContent .label::after {
content: ":";
}
/* ==========================================================================
ADDRESS BOOK POPUP (PopupCustomerAddresses.aspx)
Legacy layout positioned the header cells with percentage padding
(7% / 17%) and painted the row wrapper with a gray background. Replaced
with a real grid + card list on Inter, matching the account dashboard.
========================================================================== */
body.popup {
min-width: 0;
width: 100%;
background: var(--acct-white);
font-family: var(--acct-font);
color: var(--acct-gray-700);
}
body.popup #pageContent {
max-width: 720px;
margin: 0 auto;
padding: 24px 20px 28px;
box-sizing: border-box;
}
.addr-popup {
overflow: visible;
font-size: 14px;
line-height: 1.5;
text-align: left;
}
/* the CMS pads this page with bare
tags */
.addr-popup > br,
.addr-popup h2 + br {
display: none;
}
.addr-popup h2 {
margin: 0 0 4px !important;
font-family: var(--acct-font) !important;
font-size: 20px !important;
font-weight: 600 !important;
letter-spacing: -0.01em;
text-transform: none !important;
color: var(--acct-gray-800) !important;
}
.addr-popup #ctl00_cphBody_divMess:empty {
display: none;
}
/* ---------- Add new address ---------- */
.addr-popup .btn-row {
display: flex;
justify-content: flex-start;
margin: 16px 0 !important;
}
.addr-popup .btn-row .btn {
padding: 9px 16px !important;
font-size: 13px !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
text-transform: none !important;
border-radius: 8px !important;
}
/* ---------- Address list ---------- */
.addr-popup .addr-table {
display: block;
width: 100%;
margin: 0 0 20px;
border: 1px solid var(--acct-line);
border-radius: 10px;
overflow: hidden;
background: var(--acct-white);
}
/* header + rows share one explicit template so the columns line up */
.addr-popup .addr-table .divRowHeader,
.addr-popup .addr-table > div {
display: grid !important;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 132px;
align-items: start;
gap: 16px;
width: 100% !important;
margin: 0 !important;
padding: 14px 16px !important;
background: var(--acct-white) !important;
border-bottom: 1px solid var(--acct-line-soft);
flex-wrap: nowrap !important;
}
.addr-popup .addr-table > div:last-child {
border-bottom: none;
}
.addr-popup .addr-table .divRowHeader {
padding-top: 10px !important;
padding-bottom: 10px !important;
background: var(--acct-surface) !important;
border-bottom: 1px solid var(--acct-line-strong);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--acct-gray-500);
}
.addr-popup .addr-table .divRowHeader > div {
padding: 0 !important;
border: none !important;
}
.addr-popup .addr-table .divRowHeader b {
font-weight: 600;
}
/* the percentage-padding hacks that used to fake column positions */
.addr-popup .divRowHeader .headerCellAddress,
.addr-popup .divRowHeader .headerCellContact {
padding-left: 0 !important;
}
/* Cells */
.addr-popup .addr-table > div .col,
.addr-popup .default-ship .col {
display: block !important;
width: auto !important;
min-width: 0;
padding: 0 !important;
border: none !important;
font-size: 14px !important;
color: var(--acct-gray-700);
overflow-wrap: anywhere;
}
/* the legacy gray fill behind each row */
.addr-popup .default-ship {
background-color: transparent !important;
}
/* "[ PRIMARY ]" flag */
.addr-popup .addr-table > div .col > b:first-child {
display: inline-block;
margin-bottom: 4px;
padding: 2px 8px;
background: var(--acct-primary-tint);
border-radius: 999px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
color: var(--acct-primary);
}
.addr-popup .addr-table > div .col > b:first-child + br {
display: none;
}
.addr-popup .addr-main,
.addr-popup .addr-secondary {
display: block !important;
vertical-align: top;
}
.addr-popup .addr-secondary:not(:empty) {
margin-top: 2px;
color: var(--acct-gray-500);
}
/* Action cell */
.addr-popup .addr-table > div .col.cmd,
.addr-popup .default-ship .col:last-child {
display: flex !important;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 8px;
width: auto !important;
text-align: center;
}
.addr-popup .addr-table > div .col.cmd .btn,
.addr-popup .addr-table > div .col:last-child .btn {
margin: 0 !important;
padding: 8px 12px !important;
font-size: 13px !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
text-transform: none !important;
border-radius: 8px !important;
background: var(--acct-white) !important;
border: 1px solid var(--acct-btn-border) !important;
color: var(--acct-gray-700) !important;
white-space: nowrap;
}
.addr-popup .addr-table > div .col.cmd .btn:hover,
.addr-popup .addr-table > div .col:last-child .btn:hover {
background: var(--acct-btn-hover-bg) !important;
border-color: var(--acct-btn-border-hover) !important;
color: var(--acct-gray-800) !important;
}
/* radio/checkbox selection column, when the page renders one */
.addr-popup .addr-table > div .selection,
.addr-popup .default-ship .col .selection {
width: auto !important;
padding: 0 !important;
border: none !important;
}
/* mobile labels are desktop-hidden */
.addr-popup .mobile-label {
display: none;
margin-bottom: 2px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--acct-gray-400);
}
/* ---------- Done ---------- */
.addr-popup > div[style*="text-align: center"] {
display: flex;
justify-content: center;
padding-top: 4px;
}
.addr-popup > div[style*="text-align: center"] .btn {
min-width: 160px;
padding: 10px 20px !important;
font-size: 14px !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
text-transform: none !important;
border-radius: 8px !important;
}
/* ---------- Responsive ---------- */
@media only screen and (max-width: 600px) {
body.popup #pageContent {
padding: 16px;
}
.addr-popup .addr-table {
border: none;
border-radius: 0;
background: none;
}
.addr-popup .addr-table .divRowHeader {
display: none !important;
}
.addr-popup .addr-table > div {
display: block !important;
margin-bottom: 10px !important;
padding: 14px !important;
border: 1px solid var(--acct-line);
border-radius: 10px;
}
.addr-popup .addr-table > div .col {
margin-bottom: 10px;
}
.addr-popup .mobile-label {
display: block;
}
.addr-popup .addr-table > div .col.cmd {
margin-bottom: 0;
}
.addr-popup .addr-table > div .col.cmd .btn {
width: 100%;
}
}
/* ---------- Address column heading + its Change action ----------
main.js lifts the "change" link out of the Name row and drops it here. */
#accountContent .account_address .column-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}
#accountContent .account_address .column-head h3 {
margin: 0 !important;
flex: 1 1 auto;
min-width: 0;
}
#accountContent .btn-change-address {
flex: 0 0 auto;
padding: 6px 12px;
background: var(--acct-white);
border: 1px solid var(--acct-btn-border);
border-bottom: 1px solid var(--acct-btn-border);
border-radius: var(--acct-radius);
color: var(--acct-gray-700) !important;
font-size: 12px;
font-weight: 500;
line-height: 1.4;
text-decoration: none !important;
white-space: nowrap;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
#accountContent .btn-change-address:hover {
background: var(--acct-btn-hover-bg);
border-color: var(--acct-btn-border-hover);
color: var(--acct-gray-800) !important;
}
/* the emptied wrapper the link used to live in */
#accountContent .ciRegularView .col:last-child > span[style]:not(:has(a:not([style*="display: none"]))) {
display: none;
}
/* ==========================================================================
BASE .btn INSIDE THE ACCOUNT SURFACES
main.css styles a bare `.btn` with the storefront's brand colour. Anything
in these surfaces that wasn't given an explicit treatment above inherited
it. This block neutralises `.btn` for every account root; the outlined /
secondary variants declared earlier keep winning via !important.
========================================================================== */
#accountContent .btn,
.activeCart-panel .btn,
.wine-club-membership-details .btn,
.wine-club-shipment-details .btn,
.addr-popup .btn,
body.popup .btn,
.ui-dialog.ui-widget .btn,
:is(.container-fluid.auth, .container-fluid.forgot-password) .btn {
display: inline-block;
background: var(--acct-white);
background-color: var(--acct-white);
color: var(--acct-gray-700);
border: 1px solid var(--acct-btn-border);
border-radius: var(--acct-radius);
padding: 9px 16px;
font-family: var(--acct-font);
font-size: 13px;
font-weight: 500;
line-height: 1.4;
letter-spacing: 0;
text-transform: none;
text-decoration: none;
text-align: center;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease,
color 0.2s ease;
-webkit-font-smoothing: antialiased;
}
#accountContent .btn:hover,
.activeCart-panel .btn:hover,
.wine-club-membership-details .btn:hover,
.wine-club-shipment-details .btn:hover,
.addr-popup .btn:hover,
body.popup .btn:hover,
.ui-dialog.ui-widget .btn:hover,
:is(.container-fluid.auth, .container-fluid.forgot-password) .btn:hover {
background: var(--acct-btn-hover-bg);
background-color: var(--acct-btn-hover-bg);
border-color: var(--acct-btn-border-hover);
color: var(--acct-gray-800);
transform: none;
opacity: 1;
}
/* `.btn.checkout` carries !important in main.css — restate it here */
#accountContent .btn.checkout,
.wine-club-membership-details .btn.checkout,
.wine-club-shipment-details .btn.checkout,
.addr-popup .btn.checkout,
body.popup .btn.checkout,
.ui-dialog.ui-widget .btn.checkout {
background-color: var(--acct-white) !important;
border: 1px solid var(--acct-btn-border) !important;
color: var(--acct-gray-700) !important;
border-radius: var(--acct-radius) !important;
letter-spacing: 0 !important;
}
#accountContent .btn.checkout:hover,
.wine-club-membership-details .btn.checkout:hover,
.wine-club-shipment-details .btn.checkout:hover,
.addr-popup .btn.checkout:hover,
body.popup .btn.checkout:hover,
.ui-dialog.ui-widget .btn.checkout:hover {
background-color: var(--acct-btn-hover-bg) !important;
border-color: var(--acct-btn-border-hover) !important;
color: var(--acct-gray-800) !important;
}
/* ==========================================================================
CHANGE PASSWORD POPUP (ChangePassword.aspx)
Legacy markup lays the rows out as `display: table` with a 150px label
cell. Rebuilt as a stacked form card on the shared account tokens.
========================================================================== */
.change-password {
box-sizing: border-box;
width: 100%;
max-width: 460px;
margin: 0 auto;
padding: var(--acct-space-lg);
background: var(--acct-white);
border: 1px solid var(--acct-line-strong);
border-radius: var(--acct-radius-card);
font-family: var(--acct-font);
font-size: 14px;
line-height: 1.5;
color: var(--acct-gray-700);
text-align: left;
}
.change-password * {
box-sizing: border-box;
}
.change-password h2 {
margin: 0 0 6px !important;
font-family: var(--acct-font) !important;
font-size: 20px !important;
font-weight: 600 !important;
letter-spacing: -0.01em;
text-transform: none !important;
color: var(--acct-gray-800) !important;
}
/* the requirements hint */
.change-password > p {
margin: 0 0 20px !important;
font-size: 13px;
color: var(--acct-text-light);
}
.change-password > p i {
font-style: normal;
}
.change-password #ctl00_cphBody_divMess:empty {
display: none;
}
.change-password #ctl00_cphBody_divMess:not(:empty) {
margin-bottom: 16px;
padding: 12px 14px;
background: #fdf2f2;
border: 1px solid #f5c6cb;
border-radius: var(--acct-radius);
font-size: 13px;
color: #9b2c2c;
}
/* ---------- Fields: label above input ---------- */
.change-password .row {
display: block !important;
width: 100% !important;
margin: 0 0 16px !important;
}
.change-password .col,
.change-password .col:first-child {
display: block !important;
width: 100% !important;
padding: 0 !important;
vertical-align: baseline;
}
.change-password .label,
.change-password label {
display: block;
margin-bottom: 6px;
font-size: 13px;
font-weight: 500;
color: var(--acct-gray-600);
}
.change-password input[type="password"],
.change-password .txtbig,
.change-password .txt {
width: 100% !important;
min-height: 44px;
padding: 10px 14px;
background: var(--acct-white);
border: 1px solid var(--acct-btn-border);
border-radius: var(--acct-radius);
font-family: var(--acct-font);
font-size: 14px;
color: var(--acct-gray-800);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.change-password input[type="password"]:focus,
.change-password .txtbig:focus {
border-color: var(--acct-primary);
box-shadow: 0 0 0 3px var(--acct-primary-ring);
outline: none;
}
/* ---------- Save ---------- */
.change-password #div1 {
height: auto !important;
margin-top: 22px;
padding-top: 18px;
border-top: 1px solid var(--acct-line);
text-align: center;
}
.change-password .btn,
.change-password .btn.lnk {
display: block;
width: 100%;
padding: 11px 16px;
font-size: 14px;
font-weight: 500;
text-decoration: none !important;
border-radius: var(--acct-radius);
}
@media only screen and (max-width: 520px) {
.change-password {
padding: var(--acct-space-sm);
border: none;
border-radius: 0;
}
}
/* ==========================================================================
BASKET (app-basket / #basket.basket)
Angular + Bootstrap grid. The grid itself is fine — this restyles the card,
the line items, the qty control and the footer actions onto the shared
account tokens, and neutralises Bootstrap's `.btn-primary`.
========================================================================== */
#basket.basket {
box-sizing: border-box;
width: 100%;
max-width: 1100px;
margin: 0 auto;
padding: 0 var(--acct-space-sm);
font-family: var(--acct-font);
font-size: 14px;
line-height: 1.5;
color: var(--acct-gray-700);
}
#basket.basket * {
box-sizing: border-box;
}
/* ---------- Card shell ---------- */
#basket.basket .section.card {
margin: 0 0 var(--acct-space-lg);
padding: 0;
background: var(--acct-white);
border: 1px solid var(--acct-line-strong);
border-radius: var(--acct-radius-card);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
overflow: hidden;
}
/* ---------- Header bar ---------- */
#basket.basket .row.header {
display: flex;
align-items: center;
margin: 0;
padding: 16px 20px !important;
background: var(--acct-surface) !important;
border: none;
border-bottom: 1px solid var(--acct-line-strong);
border-radius: 0;
color: var(--acct-gray-800) !important;
font-family: var(--acct-font) !important;
font-size: 15px !important;
font-weight: 600;
line-height: 1.3;
text-align: left !important;
text-transform: none;
overflow: visible;
}
#basket.basket .row.header .icon {
margin-right: 8px;
color: var(--acct-gray-500);
font-size: 14px;
}
/* "Unit Price" column label */
#basket.basket .row.header .text-right {
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--acct-gray-500) !important;
}
/* ---------- Line items ---------- */
#basket.basket .row.content {
margin: 0;
}
#basket.basket .row.content > .col {
padding: 0;
}
#basket.basket [id^="line-item-"] {
margin: 0 !important;
padding: 16px 20px !important;
border-top: 1px solid var(--acct-line-soft);
}
#basket.basket [id^="line-item-"]:first-child {
border-top: none;
}
#basket.basket [id^="line-item-"]:hover {
background: var(--acct-surface-hover);
}
/* Thumbnail */
#basket.basket .img-thumbnail {
width: 100%;
max-width: 72px;
height: auto;
padding: 0;
background: none;
border: none !important;
border-radius: var(--acct-radius);
}
/* Product title */
#basket.basket h3.product-title {
margin: 0 0 4px !important;
font-family: var(--acct-font) !important;
font-size: 15px !important;
font-weight: 600 !important;
line-height: 1.35 !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
#basket.basket h3.product-title a {
color: var(--acct-gray-800) !important;
text-decoration: none;
}
#basket.basket h3.product-title a:hover {
color: var(--acct-primary) !important;
text-decoration: underline;
}
/* ---------- Qty selector ---------- */
#basket.basket .product-qty {
padding-top: 6px !important;
}
#basket.basket .qty-selector .btn,
#basket.basket #button-qty-selector {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 8px;
width: auto !important;
min-width: 96px;
min-height: 38px;
padding: 6px 12px !important;
background: var(--acct-white) !important;
border: 1px solid var(--acct-btn-border) !important;
border-radius: var(--acct-radius) !important;
color: var(--acct-gray-700) !important;
font-family: var(--acct-font) !important;
font-size: 13px !important;
font-weight: 500 !important;
text-transform: none !important;
letter-spacing: 0 !important;
box-shadow: none !important;
}
#basket.basket .qty-selector .btn:hover,
#basket.basket #button-qty-selector:hover {
background: var(--acct-btn-hover-bg) !important;
border-color: var(--acct-btn-border-hover) !important;
color: var(--acct-gray-800) !important;
}
#basket.basket .qty-selector .caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
border-top: 4px solid currentColor;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
/* dropdown panel, when open */
#basket.basket .qty-selector .dropdown-menu {
padding: 4px 0;
border: 1px solid var(--acct-line-strong);
border-radius: var(--acct-radius);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
font-size: 13px;
}
/* ---------- Discounts ---------- */
#basket.basket .discounts ul {
margin: 6px 0 0;
padding: 0;
list-style: none;
}
#basket.basket .discounts li {
font-size: 12px !important;
line-height: 1.5;
color: var(--acct-gray-500) !important;
}
/* ---------- Price ---------- */
#basket.basket app-product-price {
display: block;
}
#basket.basket .price {
font-family: var(--acct-font) !important;
font-size: 15px !important;
font-weight: 600 !important;
color: var(--acct-gray-800) !important;
white-space: nowrap;
}
#basket.basket .price.retail.del,
#basket.basket .price.del {
margin-top: 2px;
font-size: 12px !important;
font-weight: 400 !important;
text-decoration: line-through;
color: var(--acct-gray-500) !important;
}
/* ---------- Footer ---------- */
#basket.basket .row.content.footer {
padding: 16px 20px;
background: var(--acct-surface);
border-top: 1px solid var(--acct-line-strong);
}
#basket.basket .row.content.footer .border-top {
border-top: none !important;
}
#basket.basket .row.content.footer strong {
margin-left: 6px;
font-size: 18px;
font-weight: 600;
color: var(--acct-gray-800);
}
/* Actions — all three share the account button treatment */
#basket.basket .btn,
#basket.basket .btn.btn-primary {
min-height: 42px;
padding: 10px 18px !important;
background: var(--acct-white) !important;
background-color: var(--acct-white) !important;
border: 1px solid var(--acct-btn-border) !important;
border-radius: var(--acct-radius) !important;
color: var(--acct-gray-700) !important;
font-family: var(--acct-font) !important;
font-size: 14px !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
line-height: 1.4 !important;
text-transform: none !important;
text-decoration: none !important;
box-shadow: none !important;
transition: background-color 0.2s ease, border-color 0.2s ease,
color 0.2s ease;
}
#basket.basket .btn:hover,
#basket.basket .btn.btn-primary:hover {
background: var(--acct-btn-hover-bg) !important;
background-color: var(--acct-btn-hover-bg) !important;
border-color: var(--acct-btn-border-hover) !important;
color: var(--acct-gray-800) !important;
}
/* Checkout is only wider — same neutral treatment as every other button */
#basket.basket .btn.checkout,
#basket.basket .btn.btn-lg.checkout {
min-width: 180px;
font-size: 15px !important;
}
/* ---------- Responsive ---------- */
@media only screen and (max-width: 767px) {
#basket.basket {
padding: 0 var(--acct-space-xs);
}
#basket.basket [id^="line-item-"] {
padding: 14px !important;
}
#basket.basket .img-thumbnail {
max-width: 100%;
}
#basket.basket .row.content.footer {
padding: 14px;
}
#basket.basket .btn,
#basket.basket .btn.btn-primary {
width: 100%;
margin-left: 0 !important;
}
}
/* ==========================================================================
CHECKOUT (app-checkout) — layout rebuild
--------------------------------------------------------------------------
The template is a flat stack of Bootstrap rows:
.row.deliveryoptions heading col │ content col │ (action col)
.row.border-bottom <- empty divider element
.row payment heading col │ action col
.row payment body (separate row!)
.row.border-bottom
.row.giftoptions / .ordernotes / .cartitems …
Each step therefore reads as three disconnected columns with a rule under
them, and the payment step is split across two sibling rows. This block
turns every step into a self-contained card laid out on a 2-column grid
(title + action on one line, content spanning both), re-joins the payment
pair, and drops the divider elements the cards make redundant.
========================================================================== */
app-checkout {
display: block;
font-family: var(--acct-font);
font-size: 14px;
line-height: 1.55;
color: var(--acct-gray-700);
}
app-checkout * {
box-sizing: border-box;
}
app-checkout .checkout {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: var(--acct-space-md) var(--acct-space-sm) var(--acct-space-2xl);
}
/* ---------- Page columns ----------
Bootstrap owns the grid; we only set the rail width and the gutter. */
app-checkout .checkout > .row {
margin-left: -8px;
margin-right: -8px;
align-items: flex-start;
}
app-checkout .checkout > .row > [class*="col-"] {
padding-left: 8px;
padding-right: 8px;
}
/* ==========================================================================
STEP CARDS
The template's 3-column rhythm (title rail | content | action) is kept —
it is the right layout — but each row becomes a card so a step and its
content read as one unit, and the columns get a shared baseline.
========================================================================== */
app-checkout .checkout > .row > [class*="col-md-9"] > .row {
margin: 0 0 var(--acct-space-sm);
padding: var(--acct-space-md) var(--acct-space-sm);
background: var(--acct-white);
border: 1px solid var(--acct-line-strong);
border-radius: var(--acct-radius-card);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
/* the empty divider rows are redundant once each step is a card */
app-checkout .checkout > .row > [class*="col-md-9"] > .row.border-bottom,
app-checkout .checkout > .row > [class*="col-md-9"] > .row:empty {
display: none !important;
}
/* even gutters for every column inside a step card */
app-checkout .checkout > .row > [class*="col-md-9"] > .row > [class*="col-"] {
padding-left: var(--acct-space-2xs);
padding-right: var(--acct-space-2xs);
}
/* content column: no extra bottom padding, it owns its own spacing */
app-checkout .checkout .row > [class*="col-md-8"].pb-3 {
padding-bottom: 0 !important;
}
/* the template narrows and centres step content on small screens */
app-checkout .w-max-90 {
max-width: 100% !important;
}
/* ---------- Payment step: two sibling rows, one card ---------- */
app-checkout .checkout > .row > [class*="col-md-9"] > .row:has(h3.selected) {
margin-bottom: 0;
padding-bottom: var(--acct-space-2xs);
border-bottom: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
app-checkout
.checkout
> .row
> [class*="col-md-9"]
> .row:has(h3.selected)
+ .row {
padding-top: 0;
border-top: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
/* the active step is outlined a little stronger */
app-checkout .checkout > .row > [class*="col-md-9"] > .row:has(h3.selected),
app-checkout
.checkout
> .row
> [class*="col-md-9"]
> .row:has(h3.selected)
+ .row {
border-color: var(--acct-gray-400);
}
/* ---------- Collapsed steps ----------
A step that has not been reached yet renders an empty content column —
`
` and nothing else — so the card showed a title,
a wide blank gutter, then a lonely "Change" link.
The test is made on the COLUMN, not the row: an earlier version keyed off
`.row:not(:has(ng-component))`, which was fragile and hid populated columns
(Gift options disappeared once it rendered its component). A column is only
hidden when it itself contains no rendered component. */
app-checkout
.checkout
> .row
> [class*="col-md-9"]
> .row
> [class*="col-md-8"]:not(:has(ng-component)):not(:has(app-gift-options)):not(:has(app-cart-items)):not(:has(app-delivery-options)):not(:has(app-payment-methods)):not(:has(app-ordering-prefs)):not(:has(form)) {
display: none !important;
}
/* …and the row compacts to a single line only in that same case */
app-checkout
.checkout
> .row
> [class*="col-md-9"]
> .row:not(:has(ng-component)):not(:has(app-gift-options)) {
display: flex;
align-items: center;
flex-wrap: nowrap;
padding-top: var(--acct-space-sm);
padding-bottom: var(--acct-space-sm);
background: var(--acct-surface);
}
app-checkout
.checkout
> .row
> [class*="col-md-9"]
> .row:not(:has(ng-component)):not(:has(app-gift-options))
> [class*="col-8"] {
flex: 1 1 auto;
max-width: none;
}
app-checkout
.checkout
> .row
> [class*="col-md-9"]
> .row:not(:has(ng-component)):not(:has(app-gift-options))
> [class*="col-4"] {
flex: 0 0 auto;
max-width: none;
width: auto;
}
app-checkout
.checkout
> .row
> [class*="col-md-9"]
> .row:not(:has(ng-component)):not(:has(app-gift-options))
h3.font-weight-bold {
color: var(--acct-gray-600) !important;
}
/* a rendered step component is always visible, whatever the detection above */
app-checkout app-gift-options,
app-checkout app-cart-items,
app-checkout app-delivery-options,
app-checkout app-payment-methods,
app-checkout ng-component {
display: block !important;
}
app-checkout .checkout .row > [class*="col-md-8"]:has(ng-component),
app-checkout .checkout .row > [class*="col-md-8"]:has(app-gift-options) {
display: block !important;
}
/* the routing placeholder never needs to occupy space */
app-checkout div[approuteroutlet] {
display: none !important;
}
/* ---------- Step heading ---------- */
app-checkout h3.font-weight-bold {
display: flex !important;
align-items: center;
gap: 10px;
margin: 0 !important;
min-height: 34px;
font-family: var(--acct-font) !important;
font-size: 15px !important;
font-weight: 600 !important;
letter-spacing: -0.01em !important;
line-height: 1.3 !important;
text-transform: none !important;
color: var(--acct-gray-800) !important;
}
/* step number badge */
app-checkout h3.font-weight-bold > div:first-child,
app-checkout h3.font-weight-bold > span:first-child {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 26px;
min-width: 26px;
height: 26px;
min-height: 26px;
padding: 0 !important;
margin: 0 !important;
text-align: center;
background: var(--acct-surface);
border: 1px solid var(--acct-line-strong);
border-radius: 50%;
font-size: 12px;
font-weight: 600;
line-height: 1;
color: var(--acct-gray-600);
}
/* the template puts `.align-self-stretch` on both halves, which stretches the
badge and knocks the number off the title's centre line */
app-checkout h3.font-weight-bold > *,
app-checkout h3.font-weight-bold > .align-self-stretch {
align-self: center !important;
}
app-checkout h3.selected > div:first-child,
app-checkout h3.selected > span:first-child,
app-checkout h3.active > div:first-child,
app-checkout h3.active > span:first-child {
background: var(--acct-primary);
border-color: var(--acct-primary);
color: var(--acct-white);
}
app-checkout h3.cursor-pointer {
cursor: pointer;
}
/* action links sit on the heading baseline */
/* the action column tracks the step title, so it aligns to the TOP of the
card rather than centring itself against the whole step's content.
It is `col-4 col-md-1` — barely 8% of the row on desktop — so a button
inside it overflowed and overlapped the content column. The column is
allowed to size to its content instead, and the content column takes
whatever is left. */
app-checkout .checkout .row > [class*="col-4"] {
display: flex;
align-items: flex-start;
justify-content: flex-end;
align-self: flex-start;
min-height: 34px;
padding-left: var(--acct-space-2xs) !important;
}
/* The content column is `col-12 col-md-8`: below md it is meant to wrap onto
its own line under the title. Only widen it — and let the action column
shrink to its content — from md up, or the step content gets squeezed into
a sliver beside the heading on phones. */
@media only screen and (min-width: 768px) {
app-checkout .checkout .row > [class*="col-4"] {
flex: 0 0 auto !important;
width: auto !important;
max-width: none !important;
}
app-checkout
.checkout
> .row
> [class*="col-md-9"]
> .row
> [class*="col-md-8"] {
flex: 1 1 0 !important;
min-width: 0;
max-width: none !important;
}
}
/* Change / Review / cancel read as buttons, not loose links, and sit level
with the step heading */
app-checkout .row > [class*="col-4"] > a.small,
app-checkout a.small.text-lowercase,
app-checkout .row > [class*="col-4"] > a {
display: inline-flex;
align-items: center;
justify-content: center;
align-self: flex-start;
min-height: 32px;
min-width: 76px;
margin-top: 1px; /* optical match to the 34px title row */
padding: 6px 12px;
background: var(--acct-white);
border: 1px solid var(--acct-btn-border);
border-radius: var(--acct-radius);
font-family: var(--acct-font);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
line-height: 1.3;
color: var(--acct-gray-700) !important;
text-decoration: none !important;
text-transform: uppercase !important;
white-space: nowrap;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease,
color 0.2s ease;
}
app-checkout .row > [class*="col-4"] > a.small:hover,
app-checkout a.small.text-lowercase:hover,
app-checkout .row > [class*="col-4"] > a:hover {
background: var(--acct-btn-hover-bg);
border-color: var(--acct-btn-border-hover);
color: var(--acct-gray-800) !important;
}
@media only screen and (max-width: 575px) {
app-checkout .row > [class*="col-4"] > a.small,
app-checkout a.small.text-lowercase {
min-width: 0;
padding: 6px 10px;
}
}
/* ==========================================================================
STEP CONTENT
========================================================================== */
/* ---------- Delivery options ---------- */
app-checkout .delivery-options .row {
display: flex;
flex-wrap: wrap;
gap: var(--acct-space-2xs);
margin: 0 !important;
}
app-checkout .delivery-option {
flex: 1 1 200px;
max-width: none;
margin: 0 !important;
padding: 0 !important;
}
app-checkout .delivery-option .custom-control.custom-radio {
align-items: center;
height: 100%;
margin: 0;
padding: 0;
background: var(--acct-white);
border: 1px solid var(--acct-btn-border) !important;
border-radius: var(--acct-radius) !important;
cursor: pointer;
transition: border-color 0.2s ease, background-color 0.2s ease,
box-shadow 0.2s ease;
}
app-checkout .delivery-option .custom-control.hoverable:hover {
border-color: var(--acct-btn-border-hover) !important;
background: var(--acct-surface-hover);
}
app-checkout .delivery-option .custom-control.active {
border-color: var(--acct-primary) !important;
box-shadow: 0 0 0 3px var(--acct-primary-ring);
}
app-checkout .delivery-option .custom-control-input {
position: static !important;
flex: 0 0 auto;
width: 16px;
height: 16px;
margin: 0 0 0 14px !important;
opacity: 1 !important;
accent-color: var(--acct-primary);
cursor: pointer;
}
app-checkout .delivery-option .custom-control-label {
flex: 1 1 auto;
margin: 0;
padding: 13px 14px !important;
font-size: 14px;
font-weight: 500 !important;
color: var(--acct-gray-700);
text-align: left;
cursor: pointer;
}
app-checkout .custom-control-label::before,
app-checkout .custom-control-label::after {
content: none !important;
}
/* ---------- Payment methods ----------
These render their own Bootstrap cards inside the step card. Flatten them
so there is never a card inside a card. */
app-checkout .payment-method-list.card,
app-checkout .payment-account-list,
app-checkout app-payment-methods .card {
margin: 0 !important;
background: none !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
}
app-checkout .payment-method-list .card-header,
app-checkout .payment-account-list .card-header {
display: flex;
align-items: center;
margin: 0 !important;
padding: 0 0 10px !important;
background: none !important;
border: none !important;
border-bottom: 1px solid var(--acct-line) !important;
border-radius: 0 !important;
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: 0.02em;
color: var(--acct-gray-700) !important;
}
app-checkout .payment-method-list .card-body,
app-checkout .payment-account-list .card-body {
padding: 14px 0 !important;
}
app-checkout .payment-method-list .card-footer {
margin-top: var(--acct-space-2xs);
padding: 14px 0 0 !important;
background: none;
border: none;
border-top: 1px solid var(--acct-line);
}
app-checkout .card-header h4 {
margin: 0;
font-family: var(--acct-font) !important;
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: 0.02em;
text-transform: none !important;
color: var(--acct-gray-700) !important;
}
app-checkout .card-header i,
app-checkout .card-header .fas,
app-checkout .card-header .fa {
margin-right: 6px;
color: var(--acct-gray-500);
font-size: 12px;
}
/* "Add a credit/debit card" reads as an action */
app-checkout .card-header .commands a {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 7px 12px;
background: var(--acct-white);
border: 1px solid var(--acct-btn-border);
border-radius: var(--acct-radius);
font-size: 13px;
font-weight: 500;
color: var(--acct-gray-700);
text-decoration: none;
transition: background-color 0.2s ease, border-color 0.2s ease;
}
app-checkout .card-header .commands a:hover {
background: var(--acct-btn-hover-bg);
border-color: var(--acct-btn-border-hover);
text-decoration: none;
}
app-checkout .card-header .commands a i {
margin: 0;
padding: 0 4px 0 0 !important;
font-size: 11px;
}
/* empty payment list */
app-checkout .card-body .h6.text-primary,
app-checkout .card-body .text-primary {
margin: 0;
padding: 22px 16px !important;
background: var(--acct-surface);
border: 1px dashed var(--acct-line-strong);
border-radius: var(--acct-radius);
font-size: 13px !important;
font-weight: 400 !important;
color: var(--acct-gray-500) !important;
}
/* the "Promotions" block sits below the cards */
app-checkout .other {
margin-top: var(--acct-space-sm);
}
app-checkout .other .card-header {
margin: 0 !important;
padding: 0 0 10px !important;
}
app-checkout .other .card-body {
padding: 14px 0 0 !important;
}
/* the decorative "+" beside the promo field */
app-checkout .other .card-body > .row > .d-flex > i.fas.fa-plus {
display: none;
}
app-checkout .other .card-body .col-11 {
flex: 1 1 auto;
max-width: 100%;
padding: 0;
}
/* ---------- Promo code ---------- */
app-checkout .promo-code label {
display: block;
margin-bottom: 6px;
font-size: 13px;
font-weight: 500;
color: var(--acct-gray-600);
}
app-checkout .promo-code .input-group {
display: flex;
flex-wrap: nowrap;
gap: 8px;
width: 100% !important;
max-width: 420px;
}
app-checkout .promo-code .form-control {
flex: 1 1 auto;
min-width: 0;
min-height: 42px;
padding: 10px 14px;
background: var(--acct-white);
border: 1px solid var(--acct-btn-border);
border-radius: var(--acct-radius) !important;
font-family: var(--acct-font);
font-size: 14px;
color: var(--acct-gray-800);
}
app-checkout .promo-code .input-group-append {
flex: 0 0 auto;
margin: 0;
}
app-checkout .promo-code .input-group-append .btn {
width: auto !important;
min-width: 96px;
}
/* ---------- Items and shipping ---------- */
app-checkout .cart-items .container,
app-checkout .cart-items .container.view {
width: 100%;
max-width: 100%;
padding: 0;
margin: 0;
}
app-checkout .cart-items .row {
margin-left: 0;
margin-right: 0;
}
/* pickup / shipping destination block */
app-checkout .shipping-options {
margin-bottom: var(--acct-space-2xs);
padding: 14px;
background: var(--acct-surface);
border: 1px solid var(--acct-line);
border-radius: var(--acct-radius);
}
app-checkout .shipping-options .row {
margin: 0;
}
app-checkout .shipping-options .border-bottom {
margin: 0 !important;
padding: 0 !important;
border-bottom: none !important;
}
app-checkout .shipping-options .address .title strong {
font-size: 14px;
font-weight: 600;
color: var(--acct-gray-800);
}
app-checkout .shipping-options .address span {
font-size: 13px;
line-height: 1.5;
color: var(--acct-gray-600);
}
/* "Delivery: Pickup" line */
app-checkout .cart-items .container.view > .row + div,
app-checkout .cart-items .fa-truck {
color: var(--acct-gray-600);
}
app-checkout .cart-items .fa-truck {
margin-right: 6px !important;
}
/* line items */
app-checkout .cart-items > .cart-items > .row,
app-checkout app-cart-items .row.align-items-stretch {
align-items: center !important;
margin: 0 !important;
padding: 12px 0 !important;
border-top: 1px solid var(--acct-line-soft) !important;
}
app-checkout app-cart-items .row.align-items-stretch:first-of-type {
border-top: none !important;
}
app-checkout .img-thumbnail {
width: 100%;
max-width: 64px;
height: auto;
padding: 0;
background: none;
border: none !important;
border-radius: var(--acct-radius);
}
app-checkout h3.product-title,
app-checkout label.product-title {
display: block;
margin: 0 0 2px !important;
font-family: var(--acct-font) !important;
font-size: 14px !important;
font-weight: 600 !important;
line-height: 1.35 !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: var(--acct-gray-800) !important;
}
app-checkout .image-missing {
width: 44px;
height: 44px;
fill: var(--acct-gray-400);
}
/* ==========================================================================
RIGHT COLUMN — sticky summary
========================================================================== */
app-checkout .cart-summary.card.border {
overflow: hidden;
background: var(--acct-white);
border: 1px solid var(--acct-line-strong) !important;
border-radius: var(--acct-radius-card);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
app-checkout .sticky-top {
top: var(--acct-space-md);
}
/* primary action block at the top of the summary */
app-checkout .cart-summary app-payment-methods > .card.container {
padding: var(--acct-space-md) !important;
border: none !important;
}
app-checkout .cart-summary app-payment-methods .row {
margin: 0;
}
app-checkout .cart-summary app-payment-methods .row + .row {
padding-top: 10px !important;
}
app-checkout .cart-summary .btn {
width: 100%;
}
app-checkout .cart-summary .small {
font-size: 12px;
line-height: 1.5;
color: var(--acct-gray-500);
}
/* divider the template renders between blocks */
app-checkout .cart-summary > .border-bottom {
margin: 0 !important;
border-bottom: 1px solid var(--acct-line) !important;
}
/* item list inside the summary */
app-checkout .cart-summary app-cart-items .container.view > div {
margin: 0 !important;
padding: var(--acct-space-sm) var(--acct-space-md);
}
app-checkout .cart-summary app-cart-items .row {
margin: 0 !important;
padding: 0 !important;
border: none !important;
}
app-checkout .cart-summary app-cart-items .row.pt-3 {
padding-top: 12px !important;
align-items: center;
}
app-checkout .cart-summary app-cart-items .row.align-items-stretch {
padding: 2px 0 10px !important;
border-bottom: 1px solid var(--acct-line-soft) !important;
}
app-checkout .cart-summary app-cart-items > .cart-items > .container > div > div:last-child .row.align-items-stretch {
border-bottom: none !important;
}
app-checkout .cart-summary .img-thumbnail {
max-width: 100%;
}
app-checkout .cart-summary .product-title {
font-size: 13px !important;
}
app-checkout .cart-summary app-cart-items span {
font-size: 13px;
color: var(--acct-gray-600);
}
/* ---------- Order Summary totals ---------- */
app-checkout app-cart-summary .card {
margin: 0 !important;
background: var(--acct-surface) !important;
border: none !important;
border-top: 1px solid var(--acct-line) !important;
border-radius: 0 !important;
}
app-checkout app-cart-summary .card-body {
padding: var(--acct-space-md) !important;
}
app-checkout app-cart-summary .card-title {
margin: 0 0 10px !important;
}
app-checkout app-cart-summary .card-title .label {
padding: 0 0 10px;
border-bottom: 1px solid var(--acct-line-strong);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--acct-gray-600);
}
app-checkout app-cart-summary .row {
display: flex;
margin: 0;
padding: 4px 0;
font-size: 13px;
}
app-checkout app-cart-summary .row > [class*="col-"] {
padding: 0;
}
app-checkout app-cart-summary .text {
color: var(--acct-gray-600);
}
app-checkout app-cart-summary .value {
font-weight: 500;
color: var(--acct-gray-800);
}
/* a discount is information, not an error */
app-checkout app-cart-summary .discount,
app-checkout app-cart-summary .discount .text,
app-checkout app-cart-summary .discount .value,
app-checkout .text-danger {
color: var(--acct-gray-600) !important;
}
/* the template draws rules with empty grid cells — normalise them */
app-checkout app-cart-summary .total-before-tax-border {
margin: 6px 0 !important;
padding: 0 !important;
}
app-checkout app-cart-summary .total-before-tax-border .border-top {
border-top: 1px solid var(--acct-line-strong) !important;
}
app-checkout app-cart-summary .border-line-2 {
margin: 10px 0 !important;
border-bottom: 1px solid var(--acct-line-strong) !important;
}
app-checkout app-cart-summary .grand-total {
padding-top: 2px;
}
app-checkout app-cart-summary .grand-total .text,
app-checkout app-cart-summary .grand-total .value {
font-size: 16px;
font-weight: 600;
color: var(--acct-gray-800);
}
/* ==========================================================================
BUTTONS
========================================================================== */
app-checkout .btn,
app-checkout .btn.btn-primary {
min-height: 42px;
padding: 10px 18px !important;
background: var(--acct-white) !important;
background-color: var(--acct-white) !important;
border: 1px solid var(--acct-btn-border) !important;
border-radius: var(--acct-radius) !important;
color: var(--acct-gray-700) !important;
font-family: var(--acct-font) !important;
font-size: 14px !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
line-height: 1.4 !important;
text-transform: none !important;
text-decoration: none !important;
box-shadow: none !important;
transition: background-color 0.2s ease, border-color 0.2s ease,
color 0.2s ease;
}
app-checkout .btn:hover,
app-checkout .btn.btn-primary:hover {
background: var(--acct-btn-hover-bg) !important;
background-color: var(--acct-btn-hover-bg) !important;
border-color: var(--acct-btn-border-hover) !important;
color: var(--acct-gray-800) !important;
}
app-checkout .btn:disabled,
app-checkout .btn.btn-primary:disabled {
opacity: 0.5;
}
app-checkout .btn .small {
font-size: 14px;
color: inherit;
}
/* ==========================================================================
RESPONSIVE
========================================================================== */
@media only screen and (max-width: 991px) {
/* stays flex — `display: block` would discard the template's order-* classes
and drop the summary rail below the steps */
app-checkout .checkout > .row {
display: flex;
flex-direction: column;
}
app-checkout .checkout > .row > [class*="col-md-3"],
app-checkout .checkout > .row > [class*="col-md-9"] {
max-width: 100%;
flex: 0 0 auto;
width: 100%;
}
/* summary first on small screens, matching the template's order-0 */
app-checkout .checkout > .row > [class*="col-md-3"] {
margin-bottom: var(--acct-space-sm);
}
app-checkout .sticky-top {
position: static !important;
}
}
@media only screen and (max-width: 575px) {
app-checkout .checkout {
padding: var(--acct-space-sm) var(--acct-space-xs) var(--acct-space-xl);
}
app-checkout .checkout > .row > [class*="col-md-9"] > .row {
padding: var(--acct-space-sm);
}
app-checkout h3.font-weight-bold {
font-size: 14px !important;
}
app-checkout .delivery-option {
flex: 1 1 100%;
}
app-checkout .promo-code .input-group {
flex-wrap: wrap;
}
app-checkout .promo-code .input-group-append,
app-checkout .promo-code .input-group-append .btn {
width: 100% !important;
}
/* full-width only for the real call-to-action buttons — the qty selector and
the "Apply coupon" chip are inline controls and must stay their own size */
app-checkout .btn.btn-primary,
app-checkout .btn.btn-lg {
width: 100%;
}
app-checkout .qty-selector .btn,
app-checkout .coupon-code .btn,
app-checkout .btn-xs {
width: auto !important;
}
/* the price column is `col-12 col-md-2 text-md-right`, so on phones it drops
to its own full-width line with no alignment of its own */
app-checkout #basket .row[id^="line-item-"] > .col > .row > [class*="col-md-2"] {
margin-top: var(--acct-space-2xs);
text-align: right;
}
}
/* ==========================================================================
SHARED PRIMITIVES — consistency pass across every account surface
========================================================================== */
/* ---------- Empty Angular alert slots ----------
Every component renders
whether or not there is a message. `:empty` alone is unreliable here: the
holds a comment placeholder, and the wrapper is never
empty because it always contains that . Match on "has no rendered
element inside" instead, and kill the Bootstrap spacing utilities that
would otherwise leave a gap. */
app-alert:not(:has(.alert)),
alert:not(:has(*)),
alert:empty,
app-alert:empty {
display: none !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
}
/* a rendered alert should never inherit card chrome from its container */
app-alert > alert,
app-alert {
display: block;
background: none;
border: none;
}
/* ---------- Consistent surfaces ----------
One card recipe everywhere: same border colour, radius and shadow. */
#accountContent .section,
.wine-club-membership-details,
.wine-club-shipment-details,
.change-password,
.addr-popup .addr-table,
:is(.container-fluid.auth, .container-fluid.forgot-password),
#basket.basket .section.card,
app-checkout .card,
app-checkout .cart-summary.card.border,
app-checkout .payment-method-list.card {
border-color: var(--acct-line-strong) !important;
border-radius: var(--acct-radius-card) !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
/* ---------- Consistent form controls ----------
Same height, radius, border and focus ring for every input in the UI. */
#accountContent input:not([type="checkbox"]):not([type="radio"]),
#accountContent select,
#accountContent textarea,
.wine-club-membership-details input[type="text"],
.wine-club-shipment-details input[type="text"],
.wine-club-shipment-details textarea,
.addr-popup input:not([type="checkbox"]):not([type="radio"]),
.change-password input,
:is(.container-fluid.auth, .container-fluid.forgot-password) .form-control,
app-checkout .form-control,
#basket.basket .form-control {
min-height: 42px;
border-radius: var(--acct-radius);
font-family: var(--acct-font);
font-size: 14px;
}
#accountContent input:focus,
#accountContent select:focus,
#accountContent textarea:focus,
.wine-club-membership-details input:focus,
.wine-club-shipment-details input:focus,
.wine-club-shipment-details textarea:focus,
.addr-popup input:focus,
.change-password input:focus,
:is(.container-fluid.auth, .container-fluid.forgot-password) .form-control:focus,
app-checkout .form-control:focus,
#basket.basket .form-control:focus {
border-color: var(--acct-primary) !important;
box-shadow: 0 0 0 3px var(--acct-primary-ring) !important;
outline: none !important;
}
/* ---------- Consistent section headings ----------
Card titles all sit at 15–16px semibold; sub-labels at 13px uppercase. */
#accountContent .section > .header,
#basket.basket .row.header,
app-checkout .card-header,
app-checkout .cart-summary .card-title .label {
font-family: var(--acct-font) !important;
font-size: 15px !important;
font-weight: 600 !important;
letter-spacing: -0.005em !important;
text-transform: none !important;
color: var(--acct-gray-800) !important;
}
/* ---------- Consistent muted meta text ---------- */
#accountContent .mobile-label,
#accountContent .table .row.h > div,
.addr-popup .addr-table .divRowHeader,
#basket.basket .row.header .text-right,
.wine-club-shipment-details #tabContentProducts .row.h {
font-family: var(--acct-font) !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
color: var(--acct-gray-500) !important;
}
/* ---------- Bootstrap accent colours we never want ---------- */
app-checkout .text-primary,
#basket.basket .text-primary,
:is(.container-fluid.auth, .container-fluid.forgot-password) .text-primary {
color: var(--acct-gray-600) !important;
}
app-checkout .bg-light,
#basket.basket .bg-light {
background-color: var(--acct-white) !important;
}
/* ---------- Focus visibility for keyboard users ---------- */
#accountContent a:focus-visible,
#accountContent .btn:focus-visible,
app-checkout a:focus-visible,
app-checkout .btn:focus-visible,
#basket.basket .btn:focus-visible,
:is(.container-fluid.auth, .container-fluid.forgot-password) .btn:focus-visible,
.addr-popup .btn:focus-visible {
outline: 2px solid var(--acct-primary);
outline-offset: 2px;
}
/* ---------- Empty containers that reserve space ---------- */
app-checkout .row:empty,
app-checkout .col:empty,
#accountContent .content:empty,
app-checkout div[approuteroutlet]:empty {
display: none !important;
}
/* keep the deliberate rule separators, which are also empty */
app-checkout .row.border-bottom:empty,
app-checkout .border-top:empty,
app-checkout .border-bottom:empty {
display: block !important;
}
/* ==========================================================================
ALERTS — one component for every surface
Markup (Angular + ngx-bootstrap):
Important Notices
Bootstrap's own CSS is only partly present, so `.sr-only`, `.h4`, `.close`
and the FA sizing classes all have to be handled here.
========================================================================== */
app-alert .alert,
alert .alert,
alert[class*="alert-"] > [role="alert"] {
position: relative;
display: block;
box-sizing: border-box;
margin: 0 0 var(--acct-space-md) !important;
padding: 14px 44px 14px 16px !important;
background: var(--acct-surface);
border: 1px solid var(--acct-line-strong);
border-left: 3px solid var(--acct-gray-400);
border-radius: var(--acct-radius) !important;
font-family: var(--acct-font);
font-size: 13px;
line-height: 1.55;
color: var(--acct-gray-700);
box-shadow: none;
}
/* ---------- Heading row ---------- */
app-alert .alert-heading,
alert .alert-heading {
display: flex;
align-items: center;
gap: 8px;
margin: 0 !important;
padding: 0;
border: none;
}
/* the icon ships with `.h4` — cut it back to a 15px glyph */
app-alert .alert-icon,
alert .alert-icon,
app-alert .alert-icon.h4,
alert .alert-icon.h4 {
display: inline-flex !important;
align-items: center;
flex: 0 0 auto;
width: 16px;
height: 16px;
margin: 0 !important;
font-size: 15px !important;
line-height: 1 !important;
}
app-alert .alert-icon svg,
alert .alert-icon svg {
width: 15px !important;
height: 15px !important;
display: block;
}
app-alert .alert-title,
alert .alert-title {
font-size: 14px;
font-weight: 600;
letter-spacing: -0.005em;
color: var(--acct-gray-800) !important;
}
/* ---------- Divider + body ---------- */
app-alert .alert hr,
alert .alert hr {
margin: 10px 0 !important;
border: none !important;
border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
opacity: 1;
}
app-alert .alert-body,
alert .alert-body {
margin: 0 !important;
padding: 0 !important;
list-style: none;
}
app-alert .alert-body > li,
alert .alert-body > li {
position: relative;
margin: 0;
padding: 0 0 0 14px;
}
app-alert .alert-body > li + li,
alert .alert-body > li + li {
margin-top: 6px;
}
app-alert .alert-body > li::before,
alert .alert-body > li::before {
content: "";
position: absolute;
top: 8px;
left: 2px;
width: 4px;
height: 4px;
border-radius: 50%;
background: currentColor;
opacity: 0.45;
}
/* a single-item list reads better without a bullet */
app-alert .alert-body > li:only-child,
alert .alert-body > li:only-child {
padding-left: 0;
}
app-alert .alert-body > li:only-child::before,
alert .alert-body > li:only-child::before {
content: none;
}
app-alert .alert-body p,
alert .alert-body p,
app-alert .alert p,
alert .alert p {
margin: 0 !important;
font-size: 13px;
line-height: 1.55;
}
/* ---------- Close ---------- */
app-alert .alert .close,
alert .alert .close {
position: absolute;
top: 8px;
right: 8px;
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0 !important;
margin: 0 !important;
background: none !important;
border: none !important;
border-radius: var(--acct-radius);
font-size: 18px;
line-height: 1;
color: var(--acct-gray-500);
opacity: 1 !important;
text-shadow: none;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease;
}
app-alert .alert .close:hover,
alert .alert .close:hover {
background: rgba(0, 0, 0, 0.05) !important;
color: var(--acct-gray-800);
}
/* Bootstrap's screen-reader helper — hide it in case Bootstrap isn't loaded,
otherwise the word "Close" prints next to the ✕ */
app-alert .sr-only,
alert .sr-only,
.addr-popup .sr-only,
#accountContent .sr-only,
app-checkout .sr-only,
#basket.basket .sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* ---------- Variants ---------- */
app-alert .alert-warning,
alert .alert-warning {
background: #fdf8ec;
border-color: #f0e0b6;
border-left-color: #d9a441;
}
app-alert .alert-danger,
alert .alert-danger {
background: #fdf2f2;
border-color: #f3d2d5;
border-left-color: #c0555c;
}
app-alert .alert-success,
alert .alert-success {
background: #f2f9f4;
border-color: #cfe6d5;
border-left-color: #4f9464;
}
app-alert .alert-info,
alert .alert-info {
background: var(--acct-panel);
border-color: var(--acct-line-strong);
border-left-color: var(--acct-gray-500);
}
/* icon + title inherit the variant tone, not Bootstrap's utility colours */
app-alert .alert-warning .alert-icon,
alert .alert-warning .alert-icon,
app-alert .alert-warning .text-warning,
alert .alert-warning .text-warning {
color: #b7791f !important;
}
app-alert .alert-danger .alert-icon,
alert .alert-danger .alert-icon,
app-alert .alert-danger .text-danger,
alert .alert-danger .text-danger {
color: #9b2c2c !important;
}
app-alert .alert-success .alert-icon,
alert .alert-success .alert-icon,
app-alert .alert-success .text-success,
alert .alert-success .text-success {
color: #2f6f43 !important;
}
/* the outer is only a wrapper — it must never paint or space */
app-alert > alert,
app-alert > alert[class*="mt-"],
app-alert {
display: block;
margin: 0 !important;
padding: 0 !important;
background: none !important;
border: none !important;
}
/* ==========================================================================
APP BOOT / LOADING STATE
The page ships an inline