/* =============================================================================
   Account page — unified card grid
   Paste into: Admin → Journal → Settings → Custom CSS
   =============================================================================

   The page was rendering as two unrelated designs at once: the core sections
   (My Account, My Orders, Newsletter, Affiliate) as bare text links, and the
   Marketplace section as large icon cards. The mismatch is not Journal's doing —
   Webkul's account-page patch injects

       .account-list > li > a::before { content: unset !important; }

   which strips the icon off every account link on the page, including the ones
   the theme itself would have drawn.

   Everything below is scoped to #account-account, the wrapper this page alone
   uses, so no other screen is affected. Icon rules carry !important and a higher
   specificity than Webkul's rule so they win without editing its patch.
   ========================================================================== */

/* ---- section headings ---------------------------------------------------- */

#account-account h2.title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6b7280;
  margin: 32px 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eceef2;
}

#account-account h2.title:first-of-type { margin-top: 8px; }

/* ---- the grid ------------------------------------------------------------ */

#account-account .account-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 12px;
  margin: 0 0 8px;
  padding: 0;
}

/* Journal lays these out as full-width flex rows; the grid owns placement now. */
#account-account .account-list > li {
  width: auto;
  margin: 0;
  display: block;
}

/* ---- the card ------------------------------------------------------------ */

#account-account .account-list > li > a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 100%;
  min-height: 118px;
  padding: 20px 12px;
  text-align: center;
  background: #fff;
  border: 1px solid #e6e8ec;
  border-radius: 10px;
  color: #2b3038;
  font-size: 13px;
  line-height: 1.35;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

#account-account .account-list > li > a:hover {
  border-color: #c8cfda;
  box-shadow: 0 6px 18px rgba(20, 26, 38, .10);
  /* overrides Journal's scale-on-hover, which distorts a bordered card */
  transform: translateY(-2px);
}

#account-account .account-list > li > a:active { transform: translateY(0); }

#account-account .account-list > li > a:focus-visible {
  outline: 2px solid #1b3b6f;
  outline-offset: 2px;
}

/* ---- icons --------------------------------------------------------------- */

/* Core sections: the icon is restored through ::before. Webkul's
   `content: unset !important` is beaten here on specificity (id + class + class
   + element vs. class + element), so its patch does not need touching. */
#account-account .account-list > li > a::before {
  font-family: FontAwesome !important;
  font-weight: normal;
  font-size: 26px !important;
  line-height: 1 !important;
  color: #7c8698;
  margin: 0 !important;
  transition: color .18s ease;
}

#account-account .account-list > li > a:hover::before { color: #1b3b6f; }

#account-account .my-account       .edit-info        > a::before { content: "\f007" !important; } /* user        */
#account-account .my-account       .edit-pass        > a::before { content: "\f084" !important; } /* key         */
#account-account .my-account       .edit-address     > a::before { content: "\f041" !important; } /* map-marker  */
#account-account .my-account       .edit-wishlist    > a::before { content: "\f004" !important; } /* heart       */

#account-account .my-orders        .edit-order       > a::before { content: "\f07a" !important; } /* cart        */
#account-account .my-orders        .edit-subscription> a::before { content: "\f021" !important; } /* refresh     */
#account-account .my-orders        .edit-downloads   > a::before { content: "\f019" !important; } /* download    */
#account-account .my-orders        .edit-rewards     > a::before { content: "\f005" !important; } /* star        */
#account-account .my-orders        .edit-returns     > a::before { content: "\f112" !important; } /* reply       */
#account-account .my-orders        .edit-transactions> a::before { content: "\f09d" !important; } /* credit-card */
#account-account .my-orders        .edit-recurring   > a::before { content: "\f021" !important; } /* refresh     */

#account-account .my-affiliates    .affiliate-add    > a::before { content: "\f234" !important; } /* user-plus   */
#account-account .my-affiliates    .affiliate-edit   > a::before { content: "\f0c0" !important; } /* users       */
#account-account .my-affiliates    .affiliate-track  > a::before { content: "\f201" !important; } /* line-chart  */

#account-account .my-newsletter    li > a::before    { content: "\f0e0" !important; } /* envelope    */
#account-account .my-cards         li > a::before    { content: "\f09d" !important; } /* credit-card */

/* Marketplace: these already ship an <i class="fa"> inside the link, sized 60px
   by an inline style. Match it to the rest rather than letting one section
   shout. */
#account-account .account-list.check > li > a > i.fa {
  font-size: 26px !important;
  line-height: 1 !important;
  color: #7c8698;
  transition: color .18s ease;
}

#account-account .account-list.check > li > a:hover > i.fa { color: #1b3b6f; }

/* ---- narrow screens ------------------------------------------------------ */

@media (max-width: 480px) {
  #account-account .account-list {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
  }
  #account-account .account-list > li > a {
    min-height: 100px;
    padding: 16px 8px;
    font-size: 12px;
  }
  #account-account .account-list > li > a::before,
  #account-account .account-list.check > li > a > i.fa { font-size: 22px !important; }
}
/* =============================================================================
   Seller area — modern form styling
   Append to: Admin → Journal → Settings → Custom CSS (below account-page.css)
   =============================================================================

   Covers Add Product, Profile, Category, Information, Cross-sell, Shipping,
   Downloads, Reasons and Notifications — the pages a seller actually works in.

   Everything is scoped to the seller form ids and to #tabs.htabs, a class that
   exists in exactly seven templates, all of them under account/customerpartner.
   Nothing else on the store is touched.

   These templates ship their own <style> block inside <body>, which therefore
   wins over anything in <head> at equal specificity. Rules below out-specify it
   rather than editing the template, so a Webkul update cannot undo the design
   and nothing has to be re-applied after one.
   ========================================================================== */

:root {
  --sf-ink:        #1f2430;
  --sf-muted:      #6b7280;
  --sf-line:       #e3e7ee;
  --sf-line-soft:  #eef1f6;
  --sf-surface:    #ffffff;
  --sf-canvas:     #f7f9fc;
  --sf-accent:     #1b3b6f;
  --sf-accent-sub: #eaf0fa;
  --sf-danger:     #c4361c;
  --sf-radius:     10px;
}

/* ---- tab bar -------------------------------------------------------------
   Replaces the brown border and lavender fill the template hard-codes. Scrolls
   sideways instead of wrapping, so a long tab row never stacks into a block. */

#tabs.nav-tabs,
#tabs.htabs {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 2px;
  margin: 0 0 22px !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--sf-line) !important;
  background: transparent !important;
  scrollbar-width: thin;
}

#tabs.nav-tabs::-webkit-scrollbar { height: 3px; }
#tabs.nav-tabs::-webkit-scrollbar-thumb { background: var(--sf-line); border-radius: 3px; }

#tabs.nav-tabs > li { float: none !important; margin: 0 !important; }

#tabs.nav-tabs > li > a {
  display: block;
  white-space: nowrap;
  margin: 0 !important;
  padding: 11px 18px !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--sf-muted) !important;
  font-size: 13px;
  font-weight: 500;
  transition: color .15s ease, border-color .15s ease;
}

#tabs.nav-tabs > li > a:hover { color: var(--sf-ink) !important; }

#tabs.nav-tabs > li.active > a,
#tabs.nav-tabs > li.active > a:hover,
#tabs.nav-tabs > li.active > a:focus {
  color: var(--sf-accent) !important;
  border-bottom-color: var(--sf-accent) !important;
  background: transparent !important;
  font-weight: 600;
}

/* ---- form shell ---------------------------------------------------------- */

:is(#form-save, #form-profile, #form-category, #form-information,
    #form-crosssell, #form-shipping, #form-insert, #form-reason,
    #form-notification, #form-download, #form-product) .tab-pane.tab-content {
  padding: 4px 0 0;
  border: 0;
}

/* Each labelled row becomes a quiet band with a hairline under it, which reads
   far better than 50 ungrouped rows running together. */
:is(#form-save, #form-profile, #form-category, #form-information,
    #form-crosssell, #form-shipping, #form-insert, #form-reason,
    #form-notification) .form-group {
  margin: 0;
  padding: 16px 0;
  border-bottom: 1px solid var(--sf-line-soft);
}

:is(#form-save, #form-profile, #form-category, #form-information,
    #form-crosssell, #form-shipping, #form-insert, #form-reason,
    #form-notification) .form-group:last-child { border-bottom: 0; }

:is(#form-save, #form-profile, #form-category, #form-information,
    #form-crosssell, #form-shipping, #form-insert, #form-reason,
    #form-notification) .control-label {
  padding-top: 9px;
  color: var(--sf-ink);
  font-size: 13px;
  font-weight: 600;
  text-align: inherit;
}

/* the red asterisk Webkul puts on required fields */
:is(#form-save, #form-profile, #form-category, #form-information) .text-danger {
  color: var(--sf-danger);
  font-weight: 600;
}

/* ---- fields -------------------------------------------------------------- */

:is(#form-save, #form-profile, #form-category, #form-information,
    #form-crosssell, #form-shipping, #form-insert, #form-reason,
    #form-notification) .form-control {
  height: auto;
  min-height: 40px;
  padding: 9px 12px;
  border: 1px solid var(--sf-line);
  border-radius: 8px;
  background: var(--sf-surface);
  box-shadow: none;
  color: var(--sf-ink);
  font-size: 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

:is(#form-save, #form-profile, #form-category, #form-information,
    #form-crosssell, #form-shipping, #form-insert, #form-reason,
    #form-notification) .form-control:focus {
  border-color: var(--sf-accent);
  box-shadow: 0 0 0 3px var(--sf-accent-sub);
  outline: none;
}

:is(#form-save, #form-profile, #form-category, #form-information) textarea.form-control {
  min-height: 110px;
  line-height: 1.55;
}

/* The template forces .input-group to display:block, which drops the calendar
   and +/- buttons onto their own line. Restored so a field and its button sit
   together as Bootstrap intends. */
:is(#form-save, #form-profile, #form-category, #form-information) .input-group {
  display: flex !important;
  align-items: stretch;
}

:is(#form-save, #form-profile, #form-category, #form-information) .input-group .form-control {
  float: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

:is(#form-save, #form-profile, #form-category, #form-information) .input-group-btn > .btn {
  height: 100%;
  min-height: 40px;
  border-radius: 0 8px 8px 0;
}

/* ---- buttons ------------------------------------------------------------- */

:is(#form-save, #form-profile, #form-category, #form-information,
    #form-crosssell, #form-shipping, #form-insert, #form-reason,
    #form-notification) .btn {
  padding: 9px 18px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: none;
  transition: background-color .15s ease, border-color .15s ease, transform .12s ease;
}

:is(#form-save, #form-profile, #form-category, #form-information,
    #form-crosssell, #form-shipping, #form-insert, #form-reason,
    #form-notification) .btn:active { transform: translateY(1px); }

:is(#form-save, #form-profile, #form-category, #form-information,
    #form-crosssell, #form-shipping, #form-insert, #form-reason,
    #form-notification) .btn-primary {
  background: var(--sf-accent);
  border-color: var(--sf-accent);
  color: #fff;
}

:is(#form-save, #form-profile, #form-category, #form-information,
    #form-crosssell, #form-shipping, #form-insert, #form-reason,
    #form-notification) .btn-primary:hover { background: #16305c; border-color: #16305c; }

:is(#form-save, #form-profile, #form-category, #form-information,
    #form-crosssell, #form-shipping, #form-insert, #form-reason,
    #form-notification) .btn-default {
  background: var(--sf-surface);
  border-color: var(--sf-line);
  color: var(--sf-ink);
}

:is(#form-save, #form-profile, #form-category, #form-information,
    #form-crosssell, #form-shipping, #form-insert, #form-reason,
    #form-notification) .btn-danger {
  background: var(--sf-danger);
  border-color: var(--sf-danger);
  color: #fff;
}

/* the small circular add/remove controls on option and image rows */
:is(#form-save, #form-profile) .fa-plus-circle,
:is(#form-save, #form-profile) .fa-minus-circle { font-size: 17px; }

/* ---- panels and tables --------------------------------------------------- */

:is(#form-save, #form-profile, #form-category, #form-information) .well,
:is(#form-save, #form-profile) .addproduct_well {
  padding: 16px;
  border: 1px solid var(--sf-line);
  border-radius: var(--sf-radius);
  background: var(--sf-canvas);
  box-shadow: none;
}

:is(#form-save, #form-profile, #form-category, #form-information,
    #form-crosssell, #form-shipping, #form-download, #form-product) .table {
  margin-bottom: 0;
  border: 1px solid var(--sf-line);
  border-radius: var(--sf-radius);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}

:is(#form-save, #form-profile, #form-category, #form-information,
    #form-crosssell, #form-shipping, #form-download, #form-product) .table > thead > tr > td,
:is(#form-save, #form-profile, #form-category, #form-information,
    #form-crosssell, #form-shipping, #form-download, #form-product) .table > thead > tr > th {
  padding: 11px 14px;
  border-bottom: 1px solid var(--sf-line) !important;
  background: var(--sf-canvas);
  color: var(--sf-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

:is(#form-save, #form-profile, #form-category, #form-information,
    #form-crosssell, #form-shipping, #form-download, #form-product) .table > tbody > tr > td {
  padding: 12px 14px;
  border-top: 1px solid var(--sf-line-soft) !important;
  vertical-align: middle;
  font-size: 13px;
}

:is(#form-save, #form-profile) .table-responsive {
  border: 0;
  border-radius: var(--sf-radius);
}

/* the template paints this raw blue */
#form-save .wk_category_select { color: var(--sf-accent) !important; }

/* ---- centred, readable column -------------------------------------------
   In "separate view" the template pins #content with an inline 18% side margin,
   which throws the form off-centre and clips labels on narrower screens. This
   re-centres it and caps the measure. Remove this block if you prefer the
   sidebar-offset layout. */

body:has(#tabs.htabs) #content[style] {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 1180px;
  padding-left: 20px;
  padding-right: 20px;
}

/* ---- narrow screens ------------------------------------------------------ */

@media (max-width: 767px) {
  #tabs.nav-tabs > li > a { padding: 10px 14px !important; font-size: 12.5px; }

  :is(#form-save, #form-profile, #form-category, #form-information,
      #form-crosssell, #form-shipping, #form-insert, #form-reason,
      #form-notification) .control-label {
    padding-top: 0;
    margin-bottom: 6px;
  }

  :is(#form-save, #form-profile, #form-category, #form-information,
      #form-crosssell, #form-shipping, #form-insert, #form-reason,
      #form-notification) .form-group { padding: 13px 0; }
}
/* =============================================================================
   Checkout — Porto-style treatment for OpenCart's stepped checkout
   Append to: Admin → Journal → Settings → Custom CSS
   =============================================================================

   Written for the checkout that is actually live: Journal → Skin → Active
   Checkout = Opencart, which renders six collapsible panels inside
   #checkout-checkout. (Journal's own quick checkout uses entirely different
   markup; if you ever switch back, this file will not apply to it.)

   What the page lacks is hierarchy — six identical grey bars, no sense of where
   you are or how far is left. Porto's checkout gets its clarity from numbered
   steps, a clearly open current step, finished steps that recede, and one
   unmissable primary action. That is what this adds.

   Scoped to .route-checkout-checkout, the class Journal puts on this route.
   Nothing outside the checkout is touched.

   Deliberately conservative: this page takes money. Nothing here hides an
   element, removes one from flow, or touches pointer events — only colour,
   spacing, type and borders. Deleting this block restores the theme exactly.
   ========================================================================== */

.route-checkout-checkout {
  --co-ink:      #1c2028;
  --co-muted:    #767d89;
  --co-line:     #e2e6ec;
  --co-line-2:   #eef1f5;
  --co-card:     #ffffff;
  --co-canvas:   #f6f7f9;
  --co-accent:   #1b3b6f;
  --co-accent-d: #142c53;
  --co-ring:     #e8eef8;
  --co-radius:   3px;
}

/* ---- the stack ----------------------------------------------------------- */

.route-checkout-checkout #checkout-checkout #accordion {
  display: flex;
  flex-direction: column;
  gap: 12px;
  counter-reset: costep;
  border: 0;
  background: transparent;
}

/* ---- each step ----------------------------------------------------------- */

.route-checkout-checkout #accordion > .panel {
  margin: 0;
  border: 1px solid var(--co-line);
  border-radius: var(--co-radius);
  background: var(--co-card);
  box-shadow: none;
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}

/* The open step is the one the customer is working in — give it the weight. */
.route-checkout-checkout #accordion > .panel:has(> .panel-collapse.in) {
  border-color: #c3cfe2;
  box-shadow: 0 2px 14px rgba(20, 26, 38, .07);
}

/* ---- step header --------------------------------------------------------- */

.route-checkout-checkout .panel-heading {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--co-card);
}

.route-checkout-checkout .panel-title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.route-checkout-checkout .panel-title > a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 17px 20px;
  color: var(--co-ink);
  text-decoration: none;
  cursor: pointer;
}

/* Numbered discs, counted from the markup so the numbers stay correct even
   when a step is not rendered (a logged-in customer skips the account step). */
.route-checkout-checkout .panel-title > a::before {
  counter-increment: costep;
  content: counter(costep);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--co-canvas);
  border: 1px solid var(--co-line);
  color: var(--co-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.route-checkout-checkout .panel:has(> .panel-collapse.in) .panel-title > a::before {
  background: var(--co-accent);
  border-color: var(--co-accent);
  color: #fff;
}

.route-checkout-checkout .panel:has(> .panel-collapse.in) .panel-title > a {
  border-bottom: 1px solid var(--co-line);
}

/* ---- step body ----------------------------------------------------------- */

.route-checkout-checkout .panel-body {
  padding: 22px 20px;
  border: 0;
  background: var(--co-card);
}

/* ---- fields -------------------------------------------------------------- */

.route-checkout-checkout .form-group { margin-bottom: 16px; }

.route-checkout-checkout .control-label,
.route-checkout-checkout label {
  color: var(--co-ink);
  font-size: 13px;
  font-weight: 600;
}

.route-checkout-checkout .form-control {
  height: auto;
  min-height: 42px;
  padding: 10px 13px;
  border: 1px solid var(--co-line);
  border-radius: var(--co-radius);
  background: #fff;
  box-shadow: none;
  color: var(--co-ink);
  font-size: 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.route-checkout-checkout .form-control:focus {
  border-color: var(--co-accent);
  box-shadow: 0 0 0 3px var(--co-ring);
  outline: none;
}

.route-checkout-checkout select.form-control { cursor: pointer; }

/* the asterisk on required fields */
.route-checkout-checkout .text-danger { color: #c4361c; }

/* ---- choices ------------------------------------------------------------- */

/* Shipping and payment options become pickable rows rather than loose radios —
   the biggest readability gain in steps 4 and 5. */
.route-checkout-checkout .panel-body .radio,
.route-checkout-checkout .panel-body .checkbox {
  margin: 0 0 8px;
  padding: 13px 15px;
  border: 1px solid var(--co-line);
  border-radius: var(--co-radius);
  background: #fff;
  transition: border-color .15s ease, background-color .15s ease;
}

.route-checkout-checkout .panel-body .radio:hover,
.route-checkout-checkout .panel-body .checkbox:hover {
  border-color: #b9c4d4;
  background: #fcfdff;
}

.route-checkout-checkout .panel-body .radio label,
.route-checkout-checkout .panel-body .checkbox label {
  display: block;
  width: 100%;
  margin: 0;
  font-weight: 500;
  cursor: pointer;
}

/* the "I have read and agree" line sits better without a box around it */
.route-checkout-checkout #collapse-checkout-confirm .checkbox {
  border: 0;
  background: transparent;
  padding-left: 0;
  padding-right: 0;
}

/* ---- buttons ------------------------------------------------------------- */

.route-checkout-checkout .buttons {
  margin: 20px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--co-line-2);
}

.route-checkout-checkout .btn {
  padding: 12px 26px;
  border: 1px solid transparent;
  border-radius: var(--co-radius);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow: none;
  transition: background-color .15s ease, border-color .15s ease;
}

.route-checkout-checkout .btn-primary {
  background: var(--co-accent);
  border-color: var(--co-accent);
  color: #fff;
}

.route-checkout-checkout .btn-primary:hover,
.route-checkout-checkout .btn-primary:focus {
  background: var(--co-accent-d);
  border-color: var(--co-accent-d);
}

.route-checkout-checkout .btn-default {
  background: #fff;
  border-color: var(--co-line);
  color: var(--co-ink);
}

/* Confirming the order is the end of the funnel — make it the loudest control
   on the page and full width where there is room. */
.route-checkout-checkout #collapse-checkout-confirm .btn-primary,
.route-checkout-checkout #button-confirm {
  min-width: 240px;
  padding: 15px 30px;
  font-size: 14.5px;
}

/* ---- order summary table in step 6 --------------------------------------- */

.route-checkout-checkout .table {
  margin-bottom: 0;
  border: 1px solid var(--co-line);
  border-radius: var(--co-radius);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}

.route-checkout-checkout .table > thead > tr > td,
.route-checkout-checkout .table > thead > tr > th {
  padding: 12px 14px;
  border-bottom: 1px solid var(--co-line) !important;
  background: var(--co-canvas);
  color: var(--co-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.route-checkout-checkout .table > tbody > tr > td,
.route-checkout-checkout .table > tfoot > tr > td {
  padding: 12px 14px;
  border-top: 1px solid var(--co-line-2) !important;
  vertical-align: middle;
  font-size: 13px;
}

/* the grand total is the number the customer is looking for */
.route-checkout-checkout .table > tfoot > tr:last-child > td {
  background: var(--co-canvas);
  color: var(--co-ink);
  font-size: 16px;
  font-weight: 700;
}

/* ---- notices ------------------------------------------------------------- */

.route-checkout-checkout .alert {
  margin-bottom: 14px;
  padding: 12px 15px;
  border-radius: var(--co-radius);
  font-size: 13px;
}

/* ---- narrow screens ------------------------------------------------------ */

@media (max-width: 767px) {
  .route-checkout-checkout .panel-title > a { padding: 15px; gap: 10px; font-size: 12px; }
  .route-checkout-checkout .panel-title > a::before { width: 23px; height: 23px; font-size: 11px; }
  .route-checkout-checkout .panel-body { padding: 18px 15px; }
  .route-checkout-checkout .btn { width: 100%; }
  .route-checkout-checkout .buttons .pull-right,
  .route-checkout-checkout .buttons .pull-left { float: none !important; }
}