/* ==========================================================================
   Account sub-pages (/_myacct/*): brand layer over the old Bootstrap markup
   Double Shot Growth, Sep 2026. Scoped to the customer body classes and skips the
   dashboard (.section_account) and login/register (.section_account-access), which
   carry their own styles. Uses the Webflow export's tokens (ati-site.css).
   ========================================================================== */

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer):not(:has(.section_account, .section_account-access)) {
  --account-slant: .9rem;
}

/* ---------- Layout ---------- */
:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer):not(:has(.section_account, .section_account-access)) #mainContent {
  width: 100%;
  max-width: calc(80rem + 5rem) !important;
  margin-left: auto;
  margin-right: auto;
  /* Top padding is left to the theme: it clears the fixed navbar. */
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  padding-bottom: 5rem;
  color: var(--text-neutrals--text-color-dark);
}

/* ---------- Breadcrumb ---------- */
:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: 1.5rem 0;
  padding: 0;
  list-style: none;
  background: none;
  font-size: .875rem;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .breadcrumb li + li::before {
  content: "/";
  margin-right: .5rem;
  color: #767676;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .breadcrumb a {
  color: var(--text-neutrals--text-color-dark);
  text-decoration: none;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .breadcrumb li:last-child a {
  font-weight: 600;
  pointer-events: none;
}

/* ---------- Headings and text ---------- */
:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer):not(:has(.section_account, .section_account-access)) #mainContent h1 {
  margin: 0 0 1rem;
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: .9;
  text-wrap: balance;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer):not(:has(.section_account, .section_account-access)) #mainContent :is(h2, h3, h4) {
  margin: 2rem 0 1rem;
  font-family: var(--_font-family---font-styles--heading-archivo);
  font-size: 1.5rem;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--text-neutrals--text-color-dark) !important;
  text-wrap: balance;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer):not(:has(.section_account, .section_account-access)) #mainContent :is(h4, h5, h6) {
  font-size: 1.125rem;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer):not(:has(.section_account, .section_account-access)) #mainContent .page-header {
  margin: 0 0 2rem;
  padding: 0;
  border: 0;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer):not(:has(.section_account, .section_account-access)) #mainContent p {
  margin-bottom: 1rem; /* the Webflow base sets p { margin-bottom: 0 }, which collapsed these Bootstrap pages */
  line-height: 1.6;
  text-wrap: pretty;
}

/* A paragraph that only holds a button (e.g. "Open A New Dispute") gets room above and below */
:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer):not(:has(.section_account, .section_account-access)) #mainContent p:has(> .btn) {
  margin-top: 1.5rem;
  margin-bottom: 2rem;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent li::marker {
  color: currentColor;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent hr {
  margin: 2rem 0;
  border: 0;
  border-top: 1px solid var(--border-colour--border-dark);
  opacity: 1;
}

/* ---------- Forms ---------- */
:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent label,
:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .control-label {
  margin-bottom: .375rem;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--text-neutrals--text-color-dark);
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .form-group {
  margin-bottom: 1.25rem;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent :is(.form-control, input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], select, textarea):not([type="checkbox"]):not([type="radio"]):not(.btn) {
  width: 100%;
  min-height: 3rem;
  height: auto;
  padding: .75rem;
  border: 1px solid var(--border-colour--border-dark);
  border-radius: 0;
  background-color: var(--background-neutrals--background-light);
  color: var(--text-neutrals--text-color-dark);
  font-size: 1rem;
  line-height: 1.4;
  box-shadow: none;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent :is(.form-control, input, select, textarea):focus {
  border-color: var(--border-colour--border-sunray);
  outline: 2px solid var(--border-colour--border-sunray);
  outline-offset: 0;
  box-shadow: none;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent ::placeholder {
  color: #767676;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent :is(input[type="checkbox"], input[type="radio"]) {
  width: 1.125rem;
  height: 1.125rem;
  accent-color: var(--_primitives---colors--sunray);
}

/* "Required" hints: quiet grey, not alarm red */
:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent :is(label, .form-group) .text-danger.small,
:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .form-group > .text-danger {
  font-size: .75rem;
  font-weight: 400;
  color: #595959 !important; /* Bootstrap's .text-danger is !important */
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .help-block {
  margin-top: .375rem;
  font-size: .875rem;
  color: #595959;
}

/* ---------- Panels ---------- */
:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent :is(.well, .card, .panel) {
  margin-bottom: 1.5rem;
  padding: 1.5rem;
  border: 1px solid var(--border-colour--border-dark);
  border-radius: 0;
  background-color: #f1f1f1;
  box-shadow: none;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent :is(.card-header, .panel-heading, .card-body, .panel-body) {
  padding: 0;
  border: 0;
  background: none;
}

/* ---------- Alerts ---------- */
:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .alert {
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--border-colour--border-dark);
  border-left-width: 4px;
  border-radius: 0;
  background-color: var(--background-neutrals--background-light);
  color: var(--text-neutrals--text-color-dark);
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .alert-danger { border-color: #b3261e; background-color: #fdf1f0; }
:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .alert-warning { border-color: var(--border-colour--border-sunray); background-color: #fdf3ea; }
:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .alert-success { border-color: #2e7d4f; background-color: #eef7f1; }
:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .alert-info { border-color: #1b4a60; background-color: #eef5f8; }

/* ---------- Status labels ---------- */
:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent :is(.label, .badge) {
  display: inline-block;
  padding: .25rem .625rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-neutrals--text-color-dark);
  background-color: #e6e6e6;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent :is(.label-success, .badge-success) { background-color: #dcefe3; color: #1e5b36; }
:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent :is(.label-warning, .label-primary, .badge-warning, .badge-primary) { background-color: #fbe6d4; color: #7a3d0d; }
:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent :is(.label-info, .badge-info) { background-color: #dcebf2; color: #1b4a60; }
:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent :is(.label-danger, .label-important, .badge-danger) { background-color: #f6dcda; color: #8c1d18; }

/* ---------- Tables ---------- */
:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent table {
  width: 100%;
  margin-bottom: 1.5rem;
  border-collapse: collapse;
  border: 1px solid var(--border-colour--border-dark);
  background-color: var(--background-neutrals--background-light);
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent :is(th, td) {
  padding: .875rem 1rem;
  border: 0;
  border-bottom: 1px solid #d9d9d9;
  text-align: left;
  vertical-align: middle;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent thead th {
  background-color: #f1f1f1;
  border-bottom: 1px solid var(--border-colour--border-dark);
  font-weight: 600;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .table-striped tbody tr:nth-of-type(odd) {
  background-color: transparent;
}

/* ---------- Buttons ----------
   Brand shape without skewing the label: the button itself stays upright and a ::before layer
   draws the -20deg slant with the fill, border, 4px radius and shadow. Submit inputs were
   converted to <button> in the templates so they get the same treatment. */
:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .btn {
  position: relative;
  z-index: 0;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 3rem;
  margin: .5rem .75rem .5rem .5rem;
  padding: .75rem 2rem;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
  font-family: var(--_font-family---font-styles--heading-gulams);
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--text-neutrals--text-color-dark) !important;
  transform: none !important;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1px solid var(--background-coloured--background-sunray);
  border-radius: 4px;
  background-color: var(--background-coloured--background-sunray);
  box-shadow: 0 4px 4px #00000026;
  transform: skew(-20deg);
  transition: transform .3s, background-color .3s, border-color .3s;
}

/* Secondary: light fill, dark outline */
:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent :is(.btn-default, .btn-secondary, .btn-outline-secondary, .btn-light, .btn-danger)::before {
  border-color: var(--border-colour--border-dark);
  background-color: var(--background-neutrals--background-light);
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .btn:is(:hover, :focus-visible)::before {
  border-color: var(--background-coloured--background-seafoam);
  background-color: var(--background-coloured--background-seafoam);
  transform: scale(1.03) skew(-20deg);
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .btn:focus-visible {
  outline: 2px solid var(--border-colour--border-dark);
  outline-offset: 6px;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .btn .fa {
  display: none;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .btn-lg {
  min-height: 3.5rem;
  font-size: 1.625rem;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent :is(.btn-sm, .btn-xs) {
  min-height: 2.5rem;
  padding: .5rem 1.5rem;
  font-size: 1.125rem;
}

/* Full-width buttons: inset by the slant so the skewed corners stay inside the column */
:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .btn-block {
  display: flex;
  width: calc(100% - 1.5rem);
  margin-left: .75rem;
  margin-right: .75rem;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .btn-block + :is(.btn-block, br + .btn-block) {
  margin-top: 1rem;
}

/* Submit rows sit clear of the last field */
:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent form :is(.btn[type="submit"], button[type="submit"].btn) {
  margin-top: 1.5rem;
}

/* Any <input> button left (none expected): same shape via clip-path */
:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent input.btn {
  clip-path: polygon(.9rem 0, 100% 0, calc(100% - .9rem) 100%, 0 100%);
  background-color: var(--background-coloured--background-sunray) !important;
}

/* ---------- Mobile ---------- */
@media screen and (max-width: 767px) {
  :is(body.custom-rivyl-customer_account, body.custom-rivyl-customer):not(:has(.section_account, .section_account-access)) #mainContent {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 3rem;
  }

  :is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent table {
    display: block;
    overflow-x: auto;
  }
}

/* ==========================================================================
   Account forms: Edit account + Address book (Eugene, 18 Sep 2026)
   "professional and ecommerce ux friendly that also goes with the address book".
   Cards like the login/register panels (fog, dark 1px border), paired fields,
   "Required" hints on the label row, one action bar. Classes: account-form_*.
   ========================================================================== */
:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-form_layout {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 1.5rem;
  align-items: start;
}

/* Wholesale registration: two equal columns (login + contact | company). */
:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-form_layout.is-even {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Address book: the address picker sits on the right on desktop, first on mobile. */
:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-form_layout.is-address .account-form_column.is-aside {
  order: 2;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-form_column {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 0;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-form_card {
  margin: 0;
  padding: 2rem;
  border: 1px solid var(--border-colour--border-dark);
  background-color: var(--background-neutrals--background-muted);
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-form .account-form_card-title,
:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-form_card .account-form_card-title {
  display: block;
  margin: 0 0 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-colour--border-dark);
  font-family: var(--_font-family---font-styles--heading-archivo);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  text-wrap: balance;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-form_fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem 1rem;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-form_field {
  display: flex;
  flex-direction: column;
  grid-column: 1 / -1;
  min-width: 0;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-form_field.is-half {
  grid-column: auto;
}

/* Payment method + order instructions: a quiet rule separates them from the address. */
:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-form_field-divider {
  margin-top: .5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(0, 0, 0, .15);
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-form_label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .375rem;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-form_label-row label {
  margin: 0;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-form_required {
  flex: none;
  font-size: .75rem;
  color: #595959;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-form_field :is(.form-control, select, textarea) {
  background-color: var(--background-neutrals--background-light);
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-form_field input[readonly] {
  background-color: transparent;
  color: #595959;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-form_field textarea {
  min-height: 7rem;
  resize: vertical;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-form_stack {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-form_field .help-block,
:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-form_note {
  margin: .375rem 0 0;
  font-size: .875rem;
  line-height: 1.5;
  color: #595959;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-form_checkbox {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin: 0;
  font-weight: 400;
  line-height: 1.5;
  cursor: pointer;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-form_checkbox input {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin: .15rem 0 0;
}

/* One action bar under the form: Save on the right; Delete (address book) on the left. */
:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-form_actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
  padding: 1.5rem .75rem 0;
  border-top: 1px solid var(--border-colour--border-dark);
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-form_actions.is-end {
  justify-content: flex-end;
}

/* :is(.btn[type], .btn) outranks the generic form-submit margin rule above. */
:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-form_actions :is(.btn[type], .btn) {
  min-width: 13rem;
  margin: 0;
}

@media screen and (max-width: 991px) {
  :is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-form_layout,
  :is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-form_layout.is-even {
    grid-template-columns: 1fr;
  }

  :is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-form_layout.is-address .account-form_column.is-aside {
    order: 0;
  }
}

@media screen and (max-width: 767px) {
  :is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-form_card {
    padding: 1.5rem;
  }

  :is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-form_fields {
    grid-template-columns: 1fr;
  }

  :is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-form_actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  :is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-form_actions :is(.btn[type], .btn) {
    width: 100%;
    min-width: 0;
  }
}

/* ---------- Top padding (Eugene, 18 Sep 2026: "slightly increase the top padding") ----------
   The theme's 140px / 125px only just clears the fixed navbar; sub-pages get 2.5rem / 2rem more. */
:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer):not(:has(.section_account, .section_account-access)) #mainContent {
  padding-top: calc(140px + 2.5rem);
}

@media screen and (max-width: 991.98px) {
  :is(body.custom-rivyl-customer_account, body.custom-rivyl-customer):not(:has(.section_account, .section_account-access)) #mainContent {
    padding-top: calc(125px + 2rem);
  }
}

/* ==========================================================================
   My Stores, Edit Store, Manage Logo (Eugene, 18 Sep 2026: "Why the layout doesnt look ux friendly")
   Same card system as the account forms (account-form_*), plus store and logo pieces.
   ========================================================================== */
/* Page header with an action on the right (My Stores: Add Store) */
:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer):not(:has(.section_account, .section_account-access)) #mainContent .account-form_page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-form_page-header h1 {
  margin-bottom: 0;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-form_page-header .btn {
  margin: 0 .75rem 0 0;
}

/* Edit Store: cards stacked full width */
:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-form_layout.is-single {
  grid-template-columns: minmax(0, 1fr);
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-store_address-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-store_map {
  position: sticky;
  top: 10rem;
  border: 1px solid var(--border-colour--border-dark);
  background-color: var(--background-neutrals--background-light);
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-store_map #geo_map {
  height: 32rem;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent #geo_getloc_btn {
  align-self: flex-start;
  margin: 0 .75rem;
  white-space: normal;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-store_split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

/* Product Range: scrollable checkbox list with indented sub-categories */
:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .categorysel {
  max-height: 28rem;
  overflow-y: auto;
  padding: .75rem 1rem;
  border: 1px solid var(--border-colour--border-dark);
  background-color: var(--background-neutrals--background-light);
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .categorylist,
:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .categorylist ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .categorylist ul {
  padding-left: 1.5rem;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .categorylist li {
  padding: .25rem 0;
  line-height: 1.5;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .categorylist input[type="checkbox"] {
  margin-right: .5rem;
  vertical-align: -.15em;
}

/* Images: one row per logo slot */
:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .imagelist {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1rem 0 0;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .imagelist > li {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  border: 1px solid rgba(0, 0, 0, .15);
  background-color: var(--background-neutrals--background-light);
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .imagethumb {
  font-size: .8125rem;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .imagethumb img {
  display: block;
  width: 5rem;
  height: 5rem;
  object-fit: contain;
  border: 1px solid rgba(0, 0, 0, .15);
  background-color: #fff;
}

/* My Stores list */
:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-store_list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-store_card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-store_title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
  margin-bottom: .75rem;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer):not(:has(.section_account, .section_account-access)) #mainContent h2.account-store_name {
  margin: 0;
  font-size: 1.25rem;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-store_name a {
  color: inherit;
  text-decoration: none;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-store_name a:hover {
  text-decoration: underline;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-store_address {
  margin: 0 0 .5rem;
  font-style: normal;
  line-height: 1.6;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer):not(:has(.section_account, .section_account-access)) #mainContent .account-store_meta {
  margin: 0;
  font-size: .875rem;
  color: #595959;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent :is(.account-store_edit, .account-store_empty .btn) {
  margin: 0 .75rem;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-store_empty {
  display: flex;
  justify-content: center;
  padding: 2.5rem 1.5rem;
}

/* Manage Logo */
:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-logo_card {
  max-width: 48rem;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-logo_layout {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-logo_preview {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  padding: 1rem;
  border: 1px solid var(--border-colour--border-dark);
  background-color: var(--background-neutrals--background-light);
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-logo_preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-logo_controls input[type="file"] {
  padding: .6rem .75rem;
  cursor: pointer;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-logo_actions {
  margin-top: 1.5rem;
  padding-left: .75rem;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-logo_actions :is(.btn[type], .btn) {
  min-width: 13rem;
  margin: 0;
}

@media screen and (max-width: 991px) {
  :is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent :is(.account-store_address-layout, .account-store_split) {
    grid-template-columns: minmax(0, 1fr);
  }

  :is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-store_map {
    position: static;
  }

  :is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-store_map #geo_map {
    height: 22rem;
  }
}

@media screen and (max-width: 767px) {
  :is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-logo_layout {
    grid-template-columns: minmax(0, 1fr);
  }

  :is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-logo_preview {
    width: 8rem;
  }

  :is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent :is(.account-store_card, .account-form_page-header) {
    flex-direction: column;
    align-items: stretch;
  }

  :is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent :is(.account-store_edit, .account-form_page-header .btn, .account-logo_actions .btn, #geo_getloc_btn) {
    width: calc(100% - 1.5rem);
  }
}

/* ==========================================================================
   Form review (Eugene, 18 Sep 2026): "Layouts like the forgot password form should be fixed and stacked in a form ...
   make the forms ux friendly. JUST THE PAGES WE ARE WORKING ON". Wholesale registration, forgot password/username,
   reset/change password, track/view order, wishlists, warranty dispute steps, approve/dismiss quote.
   ========================================================================== */
/* Narrow single-purpose forms: one centred card (is-left keeps it on the content edge) */
:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-form_narrow {
  width: 100%;
  max-width: 34rem;
  margin-left: auto;
  margin-right: auto;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-form_narrow.is-left {
  margin-left: 0;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-form_fields.is-stacked {
  grid-template-columns: minmax(0, 1fr);
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer):not(:has(.section_account, .section_account-access)) #mainContent .account-form_intro {
  margin: 0 0 1.5rem;
  line-height: 1.6;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-form_card > .account-form_actions {
  margin-top: 1.75rem;
  padding-top: 0;
  border-top: 0;
}

/* Full-width submit inside a narrow card (the .75rem inset keeps the slant inside the card) */
:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-form_actions.is-block :is(.btn[type], .btn) {
  width: calc(100% - 1.5rem);
  margin: 0 .75rem;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-form_actions.is-block {
  padding-left: 0;
  padding-right: 0;
}

/* Action bar above content (approve quote) and grouped buttons */
:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-form_actions.is-top {
  margin: 0 0 2rem;
  padding-top: 0;
  border-top: 0;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-form_actions-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-inline-form {
  display: inline-block;
  margin: 0;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-inline-form :is(.btn[type], .btn) {
  margin: 0;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer):not(:has(.section_account, .section_account-access)) #mainContent .account-form_empty {
  margin: 0 0 2rem;
  padding: 1.5rem;
  border: 1px dashed var(--border-colour--border-dark);
  font-size: 1rem;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer):not(:has(.section_account, .section_account-access)) #mainContent .account-form_section-title {
  margin: 3rem 0 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-colour--border-dark);
}

/* Cards stacked with space when not inside a layout column (warranty steps, wholesale agreements) */
:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-form > .account-form_card + .account-form_card,
:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-form > .account-choice_grid + .account-form_card {
  margin-top: 1.5rem;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-form_agreements {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 2rem;
}

/* Selectable option cards (warranty steps): the whole card is the radio's label */
:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-choice_grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent label.account-choice {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  height: 100%;
  margin: 0;
  padding: 1.5rem;
  border: 1px solid var(--border-colour--border-dark);
  background-color: var(--background-neutrals--background-muted);
  font-weight: 400;
  cursor: pointer;
  transition: background-color .2s, box-shadow .2s;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent label.account-choice:hover {
  background-color: var(--background-neutrals--background-light);
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent label.account-choice:has(input:checked) {
  background-color: var(--background-neutrals--background-light);
  box-shadow: inset 0 0 0 2px var(--border-colour--border-sunray);
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent label.account-choice:has(input:focus-visible) {
  outline: 2px solid var(--border-colour--border-dark);
  outline-offset: 2px;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent label.account-choice input {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin: .15rem 0 0;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-choice_title {
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.35;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-choice_text {
  margin-top: .375rem;
  font-size: .9375rem;
  line-height: 1.5;
  color: #595959;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-choice_text p {
  margin: 0;
}

/* Warranty step 2: order picker */
:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-dispute_order-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-dispute_order-select {
  flex: 1 1 18rem;
  max-width: 28rem;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-dispute_order-link {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Warranty step 3: order summary in two columns */
:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-dispute_summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem 2rem;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer):not(:has(.section_account, .section_account-access)) #mainContent .account-dispute_summary p {
  margin: 0;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-dispute_form #linepl {
  margin-top: 1.5rem;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-dispute_form #linepl input.form-control {
  display: inline-block;
  width: 4.5rem;
  margin-right: .375rem;
}

@media screen and (max-width: 767px) {
  :is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent :is(.account-choice_grid, .account-dispute_summary) {
    grid-template-columns: minmax(0, 1fr);
  }

  :is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-form_actions-group {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  :is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent :is(.account-form_actions-group .btn, .account-inline-form, .account-inline-form .btn) {
    width: 100%;
  }
}

/* ==========================================================================
   Account pages pass 2 (Eugene, 18 Sep 2026: "improve them you know which of them isn't UX friendly")
   Confirmation cards, order summaries, standing orders, dispute messages.
   ========================================================================== */
/* Confirmation / not-found card (same look as the logout card) */
:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-status {
  display: flex;
  justify-content: center;
  padding: 1rem 0 2rem;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-status_card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  width: 100%;
  max-width: 40rem;
  padding: 3rem 2.5rem;
  border: 1px solid var(--border-colour--border-dark);
  background-color: var(--background-neutrals--background-muted);
  text-align: center;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-status_icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 999px;
  background-color: var(--background-coloured--background-sunray);
  color: var(--text-neutrals--text-color-dark);
  font-size: 1.5rem;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer):not(:has(.section_account, .section_account-access)) #mainContent h1.account-status_heading {
  margin: 0;
  font-family: var(--_font-family---font-styles--heading-archivo);
  font-size: var(--_typography---heading--heading-h4);
  line-height: 1.2;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer):not(:has(.section_account, .section_account-access)) #mainContent .account-status_message {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.5;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-status_message a {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-status_actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 1.5rem;
  margin-top: .75rem;
  padding: 0 .75rem;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-status_actions :is(.btn[type], .btn) {
  min-width: 12rem;
  margin: 0;
}

/* Order tracking: status + ship-to cards side by side, then the items table */
:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-order_summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer):not(:has(.section_account, .section_account-access)) #mainContent .account-order_card :is(p, .account-order_title) {
  margin: 0 0 .5rem;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer):not(:has(.section_account, .section_account-access)) #mainContent h2.account-order_title {
  margin-top: 0;
  font-size: 1.25rem;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer):not(:has(.section_account, .section_account-access)) #mainContent .account-order_status {
  margin-bottom: 1rem;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-order_address {
  line-height: 1.6;
}

/* Standing orders */
:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-standing_grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: 1.5rem;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-standing_card table {
  margin: 0;
  background: transparent;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-standing_card.is-stopped {
  border-left: 4px solid #b3261e;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-standing_actions {
  margin-top: 1.25rem;
  padding-left: .75rem;
}

/* Dispute conversation: company replies tinted, roomy reply box */
:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-dispute_messages {
  margin-top: 2rem;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-dispute_messages .list-group-item {
  position: relative;
  padding: 1rem 1.25rem;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, .12);
  background-color: var(--background-neutrals--background-light);
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-dispute_messages .list-group-item-warning {
  background-color: #fdf3ea;
  border-left: 4px solid var(--border-colour--border-sunray);
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-dispute_messages .list-group-item .badge {
  float: right;
  padding: .25rem .625rem;
  border-radius: 999px;
  background-color: #eceae6;
  color: #3a3a3a;
  font-size: .75rem;
  font-weight: 600;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer):not(:has(.section_account, .section_account-access)) #mainContent .account-dispute_messages .list-group-item p.small {
  margin: 0 0 .25rem;
  font-weight: 700;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-dispute_reply {
  padding: 1.25rem;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-dispute_reply .account-form_actions {
  margin-top: 1rem;
  padding-top: 0;
  border-top: 0;
}

@media screen and (max-width: 767px) {
  :is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-status_card {
    padding: 2rem 1.5rem;
  }

  :is(body.custom-rivyl-customer_account, body.custom-rivyl-customer):not(:has(.section_account, .section_account-access)) #mainContent h1.account-status_heading {
    font-size: 1.5rem;
  }

  :is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-status_actions :is(.btn[type], .btn) {
    width: 100%;
  }

  :is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-order_summary {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Live logged-in check fixes (18 Sep 2026) ----------
   Address book: Maropost's show_message boxes (.errorbox / .successbox) were unstyled bullets
   ("Shipping Address not found. ()" shows on a fresh visit). Calm notice styling; the message logic is Maropost's. */
:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent :is(.errorbox, .successbox) {
  margin: 0 0 1.5rem;
  padding: .875rem 1.25rem;
  border: 1px solid var(--border-colour--border-sunray);
  border-left-width: 4px;
  background-color: #fdf3ea;
  font-size: .9375rem;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .successbox {
  border-color: #2e7d4f;
  background-color: #eef7f1;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent :is(.errorbox, .successbox) ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent :is(.errorbox, .successbox) + br {
  display: none;
}

/* My Stores: with no stores the empty card already holds "Add Store", so the header copy is hidden (no duplicate CTA). */
:is(body.custom-rivyl-customer_account, body.custom-rivyl-customer) #mainContent .account-form_page-header:has(~ .account-store_list .account-store_empty) .btn {
  display: none;
}