/*
 * The client area.
 *
 * Every page behind "My account" was still stock vendor styling: grey bars
 * with orange labels, a display-sized page title, and lists that look nothing
 * like the cards the rest of the shop is built from.
 *
 * Same split as the checkout sheet: structure and shape here in neutral terms
 * that read correctly on any ground, colour in each design's own file. The
 * one thing this file will not do is restate a design's palette.
 */

/* The account pages are forms and lists, not posters — the designs' display
   sizes are meant for a hero. */
body.studio.my-account .page-heading,
body.studio.history .page-heading,
body.studio.order-detail .page-heading,
body.studio.guest-tracking .page-heading,
body.studio.order-confirmation .page-heading,
body.studio.addresses .page-heading,
body.studio.address .page-heading,
body.studio.identity .page-heading,
body.studio.discount .page-heading,
body.studio.order-follow .page-heading,
body.studio.order-slip .page-heading {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.15;
  margin-bottom: 10px;
}

/* ---- the hub ------------------------------------------------------------
 * The template splits the links across two <ul>s in two columns, so the two
 * halves fall out of step the moment one side has more entries than the
 * other. `display: contents` on the columns AND the lists drops both out of
 * the layout, leaving every <li> a child of one grid — one set of rows, every
 * card the same height, however the template divides them up.
 */
body.studio #my-account-menu {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0 24px;
}
body.studio #my-account-menu > div,
body.studio #my-account-menu ul.stacked-menu {
  display: contents;
}
body.studio #my-account-menu li { display: block; margin: 0; }
body.studio #my-account-menu li > a {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 100%;
  padding: 16px 18px;
  border-radius: var(--st-pay-radius, 12px);
  font-size: .98rem;
  font-weight: 400;
  text-decoration: none;
  transition: border-color .2s;
}
/* The icons are the theme's own Font Awesome, and they render — the problem
   was that they kept a vendor orange while everything around them had moved
   on. Size and alignment here, colour with the design. */
body.studio #my-account-menu li > a i {
  flex: 0 0 22px;
  width: 22px;
  text-align: center;
  font-size: 1.05rem;
}
body.studio #my-account-menu li > a span { min-width: 0; }

@media (max-width: 640px) {
  body.studio #my-account-menu { grid-template-columns: minmax(0, 1fr); }
}

/* The "back home" pager under the hub is a single link pretending to be
   pagination. */
body.studio.my-account .pager { border: 0; margin: 0; }
body.studio.my-account .pager li > a {
  border-radius: 999px;
  padding: 8px 18px;
  font-size: .85rem;
}

/* ---- buttons across the client area --------------------------------------
 * Same corner as the cards. Scoped to the account pages rather than set
 * globally: Bold squares its buttons deliberately across the storefront, and
 * a site-wide rule would take that away from it. These pages already follow
 * the checkout's shape, so they follow its token too.
 */
body.studio.my-account .btn,
body.studio.my-account button[type="submit"],
body.studio.my-account input[type="submit"],
body.studio.history .btn,
body.studio.order-detail .btn,
body.studio.guest-tracking .btn,
body.studio.order-confirmation .btn,
body.studio.addresses .btn,
body.studio.address .btn,
body.studio.address button[type="submit"],
body.studio.identity .btn,
body.studio.identity button[type="submit"],
body.studio.discount .btn,
body.studio.order-follow .btn,
body.studio.order-slip .btn {
  border-radius: var(--st-pay-radius, 12px) !important;
}

/* The deletion notice and the pager below it were touching — one paragraph of
   consequence, a button that acts on it, and a link back home, all in a
   single run. */
body.studio.my-account form[action*="delete"],
body.studio.my-account .st-account-delete { margin-bottom: 22px; }
body.studio.my-account .pager { margin-top: 22px; }

/* ---- order history -------------------------------------------------------
 * Cards, not a spreadsheet. The platform ships this as a bordered footable —
 * seven columns to read across for one fact, and a heading row that looks
 * like data. history.tpl now writes one card per order and the plugin is not
 * needed: nothing was laid out in columns to begin with, so it fits a phone
 * without a responsive table script.
 */
body.studio .st-orders { display: grid; gap: 12px; margin: 18px 0 0; }
body.studio .st-order {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: var(--st-pay-radius, 12px);
}
body.studio .st-order-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
body.studio .st-order-ref {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
}
body.studio .st-order-date { display: block; margin-top: 2px; font-size: .84rem; }

/* The status colour is the merchant's own: each order state carries it from
   Orders > Statuses and the platform prints it inline. Only the shape is the
   theme's business. */
body.studio .st-order .label {
  display: inline-block;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
}

body.studio .st-order-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 36px;
  margin: 0;
}
body.studio .st-order-facts dt {
  margin: 0 0 2px;
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
}
body.studio .st-order-facts dd { margin: 0; font-size: .95rem; }
body.studio .st-order-total { font-weight: 700; font-variant-numeric: tabular-nums; }

body.studio .st-order-actions { display: flex; flex-wrap: wrap; gap: 8px; }
body.studio .st-order-actions .btn { margin: 0; }

/* Every account page has the same "back" link under it. */
body.studio.history .pager,
body.studio.order-detail .pager,
body.studio.guest-tracking .pager,
body.studio.order-confirmation .pager,
body.studio.addresses .pager,
body.studio.identity .pager,
body.studio.discount .pager,
body.studio.order-follow .pager,
body.studio.order-slip .pager { border: 0; margin-top: 22px; }
body.studio.history .pager li > a,
body.studio.order-detail .pager li > a,
body.studio.guest-tracking .pager li > a,
body.studio.order-confirmation .pager li > a,
body.studio.addresses .pager li > a,
body.studio.identity .pager li > a,
body.studio.discount .pager li > a,
body.studio.order-follow .pager li > a,
body.studio.order-slip .pager li > a {
  border-radius: 999px;
  padding: 8px 18px;
  font-size: .85rem;
}

/* ---- order detail, and every other table in the client area --------------
 * Five bordered tables, address panels with a serif heading inside a list,
 * and section titles at hero size. The tables stay tables — an order's line
 * items ARE tabular, and one of them carries the merchandise-return
 * checkboxes, so turning them into cards would mean rebuilding a working
 * form. What goes is the chrome: a line around every cell, and headings that
 * look like data.
 */
body.studio.order-detail .table,
body.studio.guest-tracking .table,
body.studio.order-confirmation .table,
body.studio.order-slip .table,
body.studio.order-follow .table,
body.studio.discount .table,
body.studio.addresses .table {
  border: 1px solid rgba(128, 128, 128, .28) !important;
  border-radius: var(--st-pay-radius, 12px);
  border-collapse: separate !important;
  border-spacing: 0;
  overflow: hidden;
  margin-bottom: 18px;
}
body.studio.order-detail .table th,
body.studio.guest-tracking .table th,
body.studio.order-confirmation .table th,
body.studio.order-detail .table td,
body.studio.guest-tracking .table td,
body.studio.order-confirmation .table td,
body.studio.order-slip .table th,
body.studio.order-slip .table td,
body.studio.order-follow .table th,
body.studio.order-follow .table td,
body.studio.discount .table th,
body.studio.discount .table td,
body.studio.addresses .table th,
body.studio.addresses .table td {
  border: 0 !important;
  border-bottom: 1px solid rgba(128, 128, 128, .2) !important;
  padding: 13px 16px !important;
  vertical-align: middle;
}
body.studio.order-detail .table tr:last-child td,
body.studio.guest-tracking .table tr:last-child td,
body.studio.order-confirmation .table tr:last-child td,
body.studio.order-slip .table tr:last-child td,
body.studio.order-follow .table tr:last-child td,
body.studio.discount .table tr:last-child td { border-bottom: 0 !important; }
/* One ground per table, matching the address cards beside them. The cells
   were three different colours — a tinted heading row, transparent body rows
   letting the page show through, and the card's own fill next to it. The
   table carries the background and the cells carry none. */
body.studio.order-detail .table th,
body.studio.guest-tracking .table th,
body.studio.order-confirmation .table th,
body.studio.order-detail .table td,
body.studio.guest-tracking .table td,
body.studio.order-confirmation .table td,
body.studio.order-slip .table th,
body.studio.order-slip .table td,
body.studio.order-follow .table th,
body.studio.order-follow .table td,
body.studio.discount .table th,
body.studio.discount .table td {
  background: none !important;
}

body.studio.order-detail .table thead th,
body.studio.guest-tracking .table thead th,
body.studio.order-confirmation .table thead th,
body.studio.order-slip .table thead th,
body.studio.order-follow .table thead th,
body.studio.discount .table thead th,
body.studio.addresses .table thead th {
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
}

/* The status pill, wherever it appears in the client area. */
body.studio.order-detail .label,
body.studio.guest-tracking .label,
body.studio.order-confirmation .label,
body.studio.order-slip .label,
body.studio.order-follow .label {
  display: inline-block;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
}

/* Section titles inside a page are subheadings, not second page titles. */
/* Every heading on the order-detail page is a section label — the page's own
   title is the order reference at the top, not an <h1>. A :first-of-type
   exception missed them, because the first h1 IS a section heading here. */
body.studio.order-detail .page-heading,
body.studio.guest-tracking .page-heading,
body.studio.order-confirmation .page-heading,
body.studio.order-detail .page-subheading,
body.studio.guest-tracking .page-subheading,
body.studio.order-confirmation .page-subheading,
body.studio.order-slip .page-subheading,
body.studio.addresses .page-subheading,
/* These three were left at hero size: their heading is the only thing on the
   page when the account is new, so it looked like a title for the site
   rather than for a list. */
body.studio.order-slip .page-heading:not(:first-of-type),
body.studio.order-follow .page-heading:not(:first-of-type),
body.studio.discount .page-heading:not(:first-of-type) {
  font-size: 1.05rem !important;
  line-height: 1.25;
  margin: 26px 0 10px !important;
}

/* The two address panels are <ul class="box">s with the heading as the first
   item. Same card as everywhere else, and the heading reads as a label. */
body.studio.order-detail .box,
body.studio.guest-tracking .box,
body.studio.order-confirmation .box,
body.studio.addresses .box {
  border: 1px solid rgba(128, 128, 128, .28);
  border-radius: var(--st-pay-radius, 12px);
  padding: 18px;
  list-style: none;
}
body.studio.order-detail ul.box li { list-style: none; }
body.studio.order-detail ul.box .page-subheading,
body.studio.guest-tracking ul.box .page-subheading,
body.studio.order-confirmation ul.box .page-subheading {
  margin: 0 0 10px !important;
  font-size: .74rem !important;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Form controls on these pages follow the cards. */
body.studio.order-detail select,
body.studio.guest-tracking select,
body.studio.order-confirmation select,
body.studio.order-detail textarea,
body.studio.guest-tracking textarea,
body.studio.order-confirmation textarea,
body.studio.order-detail input[type="text"],
body.studio.guest-tracking input[type="text"],
body.studio.order-confirmation input[type="text"],
body.studio.order-follow select,
body.studio.order-follow textarea,
body.studio.identity input[type="text"],
body.studio.identity input[type="email"],
body.studio.identity input[type="password"],
body.studio.identity select,
body.studio.address input[type="text"],
body.studio.address select,
body.studio.address textarea {
  border-radius: var(--st-pay-radius, 12px) !important;
}

/* SQUARE CORNERS INSIDE A ROUNDED TABLE.
   The heading row paints its own background, and `overflow: hidden` on a
   <table> does not reliably clip a cell to the table's corner — so the grey
   header showed square corners sitting inside a rounded border, round and
   square at once. The corner cells carry the radius themselves. The
   .table_block wrapper is stripped for the same reason: it paints a square
   edge of its own around the table it holds. */
body.studio.order-detail .table_block,
body.studio.guest-tracking .table_block,
body.studio.order-confirmation .table_block,
body.studio.order-detail .table-responsive,
body.studio.guest-tracking .table-responsive,
body.studio.order-confirmation .table-responsive,
body.studio.order-slip .table_block,
body.studio.order-slip .table-responsive,
body.studio.order-follow .table_block,
body.studio.order-follow .table-responsive,
body.studio.discount .table_block,
body.studio.discount .table-responsive,
body.studio.addresses .table_block {
  border: 0 !important;
  background: none !important;
  border-radius: var(--st-pay-radius, 12px);
}
body.studio.order-detail .table thead th:first-child,
body.studio.guest-tracking .table thead th:first-child,
body.studio.order-confirmation .table thead th:first-child,
body.studio.order-slip .table thead th:first-child,
body.studio.order-follow .table thead th:first-child,
body.studio.discount .table thead th:first-child {
  border-top-left-radius: var(--st-pay-radius, 12px);
}
body.studio.order-detail .table thead th:last-child,
body.studio.guest-tracking .table thead th:last-child,
body.studio.order-confirmation .table thead th:last-child,
body.studio.order-slip .table thead th:last-child,
body.studio.order-follow .table thead th:last-child,
body.studio.discount .table thead th:last-child {
  border-top-right-radius: var(--st-pay-radius, 12px);
}
body.studio.order-detail .table tr:last-child td:first-child,
body.studio.guest-tracking .table tr:last-child td:first-child,
body.studio.order-confirmation .table tr:last-child td:first-child,
body.studio.order-slip .table tr:last-child td:first-child,
body.studio.order-follow .table tr:last-child td:first-child,
body.studio.discount .table tr:last-child td:first-child {
  border-bottom-left-radius: var(--st-pay-radius, 12px);
}
body.studio.order-detail .table tr:last-child td:last-child,
body.studio.guest-tracking .table tr:last-child td:last-child,
body.studio.order-confirmation .table tr:last-child td:last-child,
body.studio.order-slip .table tr:last-child td:last-child,
body.studio.order-follow .table tr:last-child td:last-child,
body.studio.discount .table tr:last-child td:last-child {
  border-bottom-right-radius: var(--st-pay-radius, 12px);
}


/* ---- the address book ----------------------------------------------------
 * One grid of cards. addresses.tpl no longer breaks a row every second
 * address, so a third card lines up under the first instead of starting a
 * fresh row of its own.
 */
body.studio .st-addr-grid {
  display: grid;
  /* 340px, not 290: Update and Delete together need about 290px, so a
     narrower card wrapped them onto two lines. */
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 12px;
  margin: 18px 0 22px;
}
body.studio.addresses .box {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
body.studio.addresses .box li { list-style: none; }
body.studio.addresses .box .page-subheading {
  margin: 0 0 10px !important;
  font-size: .74rem !important;
  letter-spacing: .1em;
  text-transform: uppercase;
}
body.studio.addresses .address_update {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
}
body.studio.addresses .address_update .btn { margin: 0; }

/* ---- personal information -----------------------------------------------
 * A 280px column of fields adrift in a 1320px box. The form is capped to a
 * readable width so it reads as a form rather than as something that failed
 * to fill its container, and the inputs fill that width instead of sitting
 * at whatever the vendor grid left them.
 */
body.studio.identity .box {
  border: 1px solid rgba(128, 128, 128, .28);
  border-radius: var(--st-pay-radius, 12px);
  padding: 24px;
}
body.studio.identity form.std { max-width: 560px; }
body.studio.identity form.std .form-group { margin-bottom: 16px; }
/* Same 280px ID-selector cap as the address form. */
body.studio.identity form.std input[type="text"],
body.studio.identity form.std input[type="email"],
body.studio.identity form.std input[type="password"],
body.studio.identity form.std select {
  width: 100% !important;
  max-width: 100% !important;
}
/* Day / month / year belong on one line. */
body.studio.identity .form-group select[name="days"],
body.studio.identity .form-group select[name="months"],
body.studio.identity .form-group select[name="years"] {
  width: auto !important;
  min-width: 96px;
  display: inline-block;
  margin-right: 8px;
}
body.studio.identity .page-heading { margin-top: 0; }

/* ---- the address form ----------------------------------------------------
 * Fourteen fields in one narrow column inside a full-width box: a lot of
 * scrolling to type an address, and the form looked like it had failed to
 * fill its container.
 *
 * Two columns, with the fields that deserve the full width taking it. Each
 * .form-group is a grid item, so the blocks the platform shows and hides by
 * country — the state select, the postcode — slot in and out without leaving
 * a hole, which a floated or hand-placed layout could not manage.
 */
body.studio.address .box {
  border: 1px solid rgba(128, 128, 128, .28);
  border-radius: var(--st-pay-radius, 12px);
  padding: 24px;
}
body.studio.address form.std {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px;
  max-width: 720px;
}
body.studio.address form.std > .form-group { margin-bottom: 16px; }
/* A street, a company name and the address's own label read badly in half a
   line; the rest pair up. */
body.studio.address form.std > .form-group:has(input[name="address1"]),
body.studio.address form.std > .form-group:has(input[name="address2"]),
body.studio.address form.std > .form-group:has(input[name="company"]),
body.studio.address form.std > .form-group:has(input[name="alias"]),
body.studio.address form.std > .form-group:has(textarea),
body.studio.address form.std > .form-group:has(input[name="vat_number"]),
body.studio.address form.std > p,
body.studio.address form.std > h1,
body.studio.address form.std > h3,
body.studio.address form.std > .submit,
body.studio.address form.std > .submit2 { grid-column: 1 / -1; }
/* The form still carries the float layout's empty clearers, and in a grid
   each one takes a cell — which is what pushed the mobile number off the
   home number's row. `display: contents` was not enough: stray text inside
   such a div becomes an anonymous grid item and keeps the cell. They are
   hidden outright, but only the ones holding no control, so a .clearfix that
   ever wraps something real is left alone. */
body.studio.address form.std > .clearfix:not(:has(input, select, textarea, button, a)) {
  display: none;
}
/* NOT .unvisible: the platform tags the postcode group with it for the
   country JS while still showing it, so spanning on that class stretched the
   zip across both columns. A group the platform really does hide is
   display:none and leaves no track behind anyway. */
/* The vendor sheet caps these at 280px from an ID selector —
   `#address form.std .form-control { max-width: 280px }` — which outranks
   any class rule here, so the fields sat at 280px in a 351px column however
   wide the grid made them. */
body.studio.address form.std input,
body.studio.address form.std select,
body.studio.address form.std textarea {
  width: 100% !important;
  max-width: 100% !important;
}

@media (max-width: 640px) {
  body.studio.address form.std { grid-template-columns: minmax(0, 1fr); }
}

/* ---- empty states and notices -------------------------------------------
 * "You do not have any vouchers." is the whole page on a new account, and it
 * was a square-cornered strip while every card around the client area is
 * rounded. The colour stays the platform's — an alert's tint carries its
 * meaning, and warning, success and error must keep saying different things.
 */
body.studio.my-account .alert,
body.studio.history .alert,
body.studio.order-detail .alert,
body.studio.guest-tracking .alert,
body.studio.order-confirmation .alert,
body.studio.order-slip .alert,
body.studio.order-follow .alert,
body.studio.discount .alert,
body.studio.addresses .alert,
body.studio.address .alert,
body.studio.identity .alert {
  border-radius: var(--st-pay-radius, 12px);
  padding: 16px 18px;
  margin-bottom: 18px;
}

/* ---- signing in, creating an account, resetting a password ---------------
 * The way in to everything above, and the last of the client area still in
 * vendor dress: a square panel, a square field and a square button.
 *
 * Scoped to these two controllers so the shared `.box` and `.btn` elsewhere
 * on the storefront are left to their designs.
 */
body.studio.authentication .box,
body.studio.password .box {
  border: 1px solid rgba(128, 128, 128, .28);
  border-radius: var(--st-pay-radius, 12px);
  padding: 24px;
  margin-bottom: 18px;
}
body.studio.authentication .page-heading,
body.studio.password .page-heading {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.15;
  margin-bottom: 10px;
}
/* The two panels carry their own headings — "Already registered?" and
   "Create an account" — which are labels for a card, not page titles. */
body.studio.authentication .box h3,
body.studio.authentication .page-subheading,
body.studio.password .box h3,
body.studio.password .page-subheading {
  font-size: 1.12rem !important;
  /* WEIGHT, not just size. This rule set a size and left the weight to the
     design, which on Luxe is a 300 display serif — so the heading rendered
     LIGHTER than the field labels beneath it, which are 600. A heading that
     loses to its own labels is not a heading, and the card read as unstyled.
     Size alone cannot carry it at this scale: 17.9px against a 14px label. */
  font-weight: 600 !important;
  line-height: 1.25;
  margin: 0 0 12px !important;
}
body.studio.authentication .form-group,
body.studio.password .form-group { margin-bottom: 16px; }
/* The vendor sheet caps these from an ID selector, the same trap the address
   and identity forms hit. */
body.studio.authentication input[type="text"],
body.studio.authentication input[type="email"],
body.studio.authentication input[type="password"],
body.studio.authentication select,
body.studio.password input[type="text"],
body.studio.password input[type="email"] {
  width: 100% !important;
  max-width: 420px !important;
  border-radius: var(--st-pay-radius, 12px) !important;
}
body.studio.authentication .btn,
body.studio.authentication button[type="submit"],
body.studio.password .btn,
body.studio.password button[type="submit"] {
  border-radius: var(--st-pay-radius, 12px) !important;
}
body.studio.authentication .alert,
body.studio.password .alert {
  border-radius: var(--st-pay-radius, 12px);
  padding: 16px 18px;
  margin-bottom: 18px;
}
body.studio.authentication .pager,
body.studio.password .pager { border: 0; margin-top: 22px; }
body.studio.authentication .pager li > a,
body.studio.password .pager li > a {
  border-radius: 999px;
  padding: 8px 18px;
  font-size: .85rem;
}
/* Side by side on a desktop, stacked on a phone — the platform's own columns
   already do this; the panels just need to be equal height so the pair reads
   as one choice rather than two unrelated blocks. */
@media (min-width: 768px) {
  /* The ROW has to be the flex container. Making only the columns flex left
     them sized by their own content, so the two panels came out 274px and
     384px — a pair of cards that plainly did not match. */
  body.studio.authentication #center_column .row:has(> [class*="col-sm-6"] > .box) {
    display: flex;
    align-items: stretch;
  }
  body.studio.authentication .row > [class*="col-sm-6"] { display: flex; }
  body.studio.authentication .row > [class*="col-sm-6"] > .box { width: 100%; }
}

/* ---- field hints and errors ----------------------------------------------
 * A rule is more use before it is broken than after. The hint sits under the
 * field it describes; the error keeps the platform's red, because red is the
 * point of it, and only gains the shape everything else here has.
 */
body.studio .st-field-hint {
  margin: 6px 0 0;
  font-size: .82rem;
}
body.studio.guest-tracking .alert-danger,
body.studio.order-confirmation .alert-danger,
body.studio.authentication .alert-danger,
body.studio.password .alert-danger,
body.studio.address .alert-danger,
body.studio.identity .alert-danger,
body.studio.order-detail .alert-danger,
body.studio.order-opc .alert-danger {
  border-radius: var(--st-pay-radius, 12px);
  padding: 16px 18px;
  margin-bottom: 18px;
}
/* The platform prints "There is 1 error" then an <ol> of them; the list
   marker and its indent are doing nothing a single error needs. */
body.studio .alert-danger ol,
body.studio .alert-danger ul {
  margin: 6px 0 0;
  padding-left: 18px;
}
body.studio .alert-danger ol:only-child li:only-child,
body.studio .alert-danger ul:only-child li:only-child {
  list-style: none;
  margin-left: -18px;
}

/* ---- password rules ------------------------------------------------------
 * A checklist that ticks itself as the rule is met, rather than an error
 * after the fact. Neutral colours: green and red carry the meaning and read
 * correctly on every design's ground.
 */
body.studio .st-pw-rules {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 3px;
  font-size: .82rem;
}
body.studio .st-pw-rules li {
  display: flex;
  align-items: center;
  gap: 7px;
  opacity: .72;
}
body.studio .st-pw-rules li::before {
  content: "";
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: .5;
}
body.studio .st-pw-rules li.is-ok { opacity: 1; }
body.studio .st-pw-rules li.is-ok::before {
  border-color: transparent;
  opacity: 1;
  background: #1a7f4b;
  -webkit-mask: var(--st-tick) center / 9px no-repeat;
  mask: var(--st-tick) center / 9px no-repeat;
  --st-tick: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path d="M1.5 6.5l3 3 6-7" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}
/* Only after a submit was actually stopped — not while someone is still
   halfway through typing. */
body.studio .st-pw-rules.is-failed li:not(.is-ok) { color: #b3261e; opacity: 1; }
body.studio .st-pw-rules.is-failed li:not(.is-ok)::before { border-color: #b3261e; opacity: 1; }

body.studio .st-pw-suggest {
  margin: 8px 0 0;
  padding: 7px 14px;
  border: 1px solid currentColor;
  /* The same corner as every card and field on these pages, rather than a
     pill — these sit under a rectangular input and read as part of it. */
  border-radius: var(--st-pay-radius, 12px);
  background: none;
  color: inherit;
  font-size: .8rem;
  cursor: pointer;
}
body.studio .st-pw-suggest:hover { border-color: currentColor; }
body.studio .st-pw-copy {
  margin: 8px 0 0 8px;
  padding: 7px 14px;
  border: 1px solid currentColor;
  border-radius: var(--st-pay-radius, 12px);
  background: none;
  color: inherit;
  font-size: .8rem;
  cursor: pointer;
}
body.studio .st-pw-copy.is-done { border-style: dashed; }

/* EVERY text-like field on these pages, not a list of types that has to be
   remembered. The earlier rules named text and missed email, so the guest
   tracking lookup had a square email box beside a rounded reference box. */
body.studio.my-account input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
body.studio.history input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
body.studio.order-detail input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
body.studio.guest-tracking input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
body.studio.order-confirmation input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
body.studio.order-slip input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
body.studio.order-follow input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
body.studio.discount input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
body.studio.addresses input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
body.studio.address input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
body.studio.identity input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
body.studio.authentication input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
body.studio.password input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
body.studio.my-account select, body.studio.history select, body.studio.order-detail select,
body.studio.guest-tracking select, body.studio.order-confirmation select,
body.studio.order-slip select, body.studio.order-follow select, body.studio.discount select,
body.studio.addresses select, body.studio.address select, body.studio.identity select,
body.studio.authentication select, body.studio.password select,
body.studio.my-account textarea, body.studio.order-detail textarea,
body.studio.guest-tracking textarea, body.studio.order-follow textarea,
body.studio.address textarea, body.studio.identity textarea {
  border-radius: var(--st-pay-radius, 12px) !important;
}


/* ---- the pages the audit found -------------------------------------------
 * Cross-referencing every front controller's page name against the selectors
 * in this sheet turned up customer-facing pages with forms that had never
 * been named here: the contact form, the merchandise-return request, the
 * comparison page and the 404. They are listed by page name, the same way
 * everything else here is.
 */
body.studio.contact .box,
body.studio.order-return .box,
body.studio.products-comparison .box,
body.studio.pagenotfound .box {
  border: 1px solid rgba(128, 128, 128, .28);
  border-radius: var(--st-pay-radius, 12px);
  padding: 24px;
}
body.studio.contact input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
body.studio.contact select,
body.studio.contact textarea,
body.studio.order-return input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
body.studio.order-return select,
body.studio.order-return textarea,
body.studio.pagenotfound input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]) {
  border-radius: var(--st-pay-radius, 12px) !important;
}
body.studio.contact .btn,
body.studio.contact button[type="submit"],
body.studio.order-return .btn,
body.studio.order-return button[type="submit"],
body.studio.products-comparison .btn,
body.studio.pagenotfound .btn,
body.studio.pagenotfound button[type="submit"] {
  border-radius: var(--st-pay-radius, 12px) !important;
}
body.studio.contact .table,
body.studio.order-return .table,
body.studio.stores .table,
body.studio.products-comparison .table {
  border: 1px solid rgba(128, 128, 128, .28) !important;
  border-radius: var(--st-pay-radius, 12px);
  border-collapse: separate !important;
  border-spacing: 0;
  overflow: hidden;
}
body.studio.contact .table th, body.studio.contact .table td,
body.studio.order-return .table th, body.studio.order-return .table td,
body.studio.stores .table th, body.studio.stores .table td,
body.studio.products-comparison .table th, body.studio.products-comparison .table td {
  border: 0 !important;
  border-bottom: 1px solid rgba(128, 128, 128, .2) !important;
  padding: 13px 16px !important;
}
body.studio.contact .alert,
body.studio.order-return .alert,
body.studio.products-comparison .alert,
body.studio.pagenotfound .alert {
  border-radius: var(--st-pay-radius, 12px);
  padding: 16px 18px;
}
body.studio.contact .page-heading,
body.studio.order-return .page-heading,
body.studio.products-comparison .page-heading,
body.studio.pagenotfound .page-heading {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.15;
  margin-bottom: 10px;
}

/* ---- catalogue and content pages -----------------------------------------
 * The same audit, run against the pages outside the client area. These were
 * named in no stylesheet at all: they inherit the designs' component styling,
 * which is why they mostly look right, but their panels, fields and buttons
 * kept the vendor's square corners.
 *
 * Only shape here. The product grids, prices and imagery belong to each
 * design and are left alone.
 */
body.studio.sitemap .box,
body.studio.stores .box,
body.studio.best-sales .box,
body.studio.new-products .box,
body.studio.prices-drop .box,
body.studio.manufacturer .box,
body.studio.supplier .box,
body.studio.cms .box,
body.studio.search .box,
body.studio.category .box {
  border-radius: var(--st-pay-radius, 12px);
}
body.studio.sitemap input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
body.studio.stores input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
body.studio.search input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
body.studio.cms input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
body.studio.manufacturer input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
body.studio.supplier input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
body.studio.stores select,
body.studio.search select,
body.studio.cms select,
body.studio.cms textarea,
body.studio.stores .btn,
body.studio.stores button[type="submit"],
body.studio.sitemap .btn,
body.studio.cms .btn,
body.studio.cms button[type="submit"] {
  border-radius: var(--st-pay-radius, 12px) !important;
}
body.studio.sitemap .alert,
body.studio.stores .alert,
body.studio.cms .alert,
body.studio.search .alert,
body.studio.category .alert,
body.studio.manufacturer .alert,
body.studio.supplier .alert,
body.studio.best-sales .alert,
body.studio.new-products .alert,
body.studio.prices-drop .alert {
  border-radius: var(--st-pay-radius, 12px);
  padding: 16px 18px;
}
/* NO grid on the sitemap. Gridding its rows scattered the four panels into a
   zigzag with holes between them: the markup nests a block per column inside
   rows, so making both a grid gave each panel its own track. The platform's
   own float layout already lines them up; only the corner needed changing. */


/* The stores list takes the design's SURFACE — its lightest ground — not the
   slightly darker fill the order tables use. Setting it to `none` was worse:
   a transparent table showed the page's own grey through it, so the cards sat
   grey on grey. The colour itself lives with each design. */
body.studio.stores .table thead th { background: none !important; }

/* The store glyph's SIZE is not set here — stores.tpl writes it inline from
   the shop's own medium image type, so it follows Preferences > Images. This
   only stops the cell squashing it: capping the width alone (which an earlier
   pass did) left the inline height untouched and stretched the glyph. */
body.studio.stores .store-image img { height: auto !important; }

/* The drawn shop front, for a store with no uploaded picture.
 *
 * Deliberately NOT a PNG. The placeholder that was here carried its colour
 * baked in — solid near-black ink — which read as a heavy blob on the light
 * designs and was all but invisible on Motion, whose card is near-black too.
 * A file cannot be right for ten designs at once, so the colour is not in the
 * file: this is a mask over `currentColor`, the same technique the shipping
 * rows use, so every design paints it in its own ink with nothing to update
 * when a palette changes.
 *
 * Softened rather than full strength — at full ink it competes with the store
 * name beside it, which is the actual heading of the row.
 *
 * The glyph is the same shop front the checkout shows for "Pick Up In Store",
 * so the two places a shop is represented agree with each other. */
body.studio.stores .st-store-mark {
  background: currentColor;
  opacity: .55;
  max-width: 100%;
  -webkit-mask: var(--st-store-icon) center / contain no-repeat;
  mask: var(--st-store-icon) center / contain no-repeat;
  --st-store-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6" stroke-linejoin="round"><path d="M3.4 9 5 4h14l1.6 5a2.6 2.6 0 0 1-4.3 1 2.6 2.6 0 0 1-4.3 0 2.6 2.6 0 0 1-4.3 0A2.6 2.6 0 0 1 3.4 9Z"/><path d="M5 11v9h14v-9"/><path d="M10 20v-5h4v5"/></svg>');
}

/* ---- page not found ------------------------------------------------------
 * The one page nobody designs, and the one a lost visitor actually reads.
 *
 * Its panel is Bootstrap's jumbotron with a hardcoded rgb(200,200,200) —
 * a flat mid-grey that belongs to no design here. On Clean's white ground it
 * landed like a slab; on Motion it will be a light block on a dark page. It
 * takes the design's own surface instead, and the corner the rest of the
 * theme uses.
 */
body.studio.pagenotfound .pagenotfound.jumbotron {
  background: none;
  border: 1px solid rgba(128, 128, 128, .28);
  border-radius: var(--st-pay-radius, 12px);
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 40px);
  color: inherit;
}

/* The way back. It is a bare <a> in a Bootstrap ul.pager with NO class at
   all, so it inherited the vendor's white-on-#ddd pill while every button
   around it wore the design — the one control on the page whose whole job is
   to be pressed, and the only one that did not look like a button. */
body.studio.pagenotfound .pager { margin: 18px 0 0; padding: 0; list-style: none; text-align: center; }
body.studio.pagenotfound .pager li { display: inline-block; }
body.studio.pagenotfound .pager li > a {
  display: inline-block;
  background: none;
  border: 1px solid rgba(128, 128, 128, .45);
  /* The pill every other "back" link in the client area already wears. */
  border-radius: 999px;
  padding: 10px 20px;
  color: inherit;
  font-size: .9rem;
  transition: border-color .15s, background-color .15s;
}
body.studio.pagenotfound .pager li > a:hover {
  border-color: currentColor;
  background: rgba(128, 128, 128, .1);
}

/* ---- "Viewed products" in the sidebar -------------------------------------
 * The thumbnail floats left at 162px inside a 266px column, leaving 89px for
 * the name — so every product wrapped mid-phrase ("Fountain / Pen") and its
 * description truncated to nothing worth reading. A float cannot share a row;
 * a flex line can.
 *
 * Shape only. The block's ground, its rules and its type belong to each
 * design, which already styles them.
 */
body.studio #viewed-products_block_left li article {
  display: flex;
  align-items: center;
  gap: 12px;
}
body.studio #viewed-products_block_left .products-block-image {
  float: none;
  flex: 0 0 64px;
  width: 64px;
}
body.studio #viewed-products_block_left .products-block-image img {
  display: block;
  width: 100%;
  height: auto;
}
/* min-width: 0 or the text refuses to shrink and pushes the row wider than
   the column — the usual flex default that turns "wraps badly" into
   "overflows instead". */
body.studio #viewed-products_block_left .product-content {
  flex: 1 1 auto;
  min-width: 0;
}
body.studio #viewed-products_block_left .product-content h5 { margin: 0; }
body.studio #viewed-products_block_left .product-content p { margin: 3px 0 0; }
/* Two lines of description, then stop. In a sidebar this narrow the vendor's
   own truncation lands mid-word and tells the reader nothing. */
body.studio #viewed-products_block_left .product-description {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- Share on X, in the product page's one share row ---------------------
 * The row is flex, and blocksharefb + sendtoafriend both arrive inside a
 * single hook, so the template cannot put anything between them. `order`
 * can: Facebook, X, Send to a friend, Print.
 */
body.studio #usefull_link_block > li { order: 2; }
body.studio #usefull_link_block > li.st-share-x { order: 3; }
body.studio #usefull_link_block > li.sendtofriend { order: 4; }
body.studio #usefull_link_block > li.st-print { order: 5; }

/* Font Awesome 4 is the icon set here and it predates the rename — it has
   the bird and no X. Rather than label an old logo with a new name, the mark
   is drawn: a mask over currentColor, so it takes each design's own ink like
   the shipping and shop-front marks do, and sits on the same icon-fw width
   as the icons either side of it. */
body.studio .st-icon-x::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -.12em;
  background: currentColor;
  -webkit-mask: var(--st-icon-x) center / contain no-repeat;
  mask: var(--st-icon-x) center / contain no-repeat;
  --st-icon-x: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M18.24 2.25h3.31l-7.23 8.26 8.5 11.24h-6.65l-5.22-6.82-5.96 6.82H1.68l7.73-8.84L1.25 2.25h6.82l4.71 6.23 5.46-6.23Zm-1.16 17.52h1.83L7.08 4.13H5.12l11.96 15.64Z"/></svg>');
}

/* ---- vendor tables, wherever they appear ---------------------------------
 * Everything above this point styles tables by NAMING THE PAGE — ninety-odd
 * rules listing order-detail, addresses, discount and the rest. That works
 * until a page nobody listed turns up, and then it keeps the vendor's
 * Bootstrap `table-bordered`: a grey line around every single cell and square
 * corners, against a theme whose panels have neither.
 *
 * The product page's Data sheet and Specifications were exactly that, and so
 * are the wishlist, loyalty, referral-programme and carrier-compare tables —
 * none of which were ever on the list either.
 *
 * So this matches the ELEMENT rather than the page. It needs no maintenance
 * when a page is added, and it reaches the module templates the enumeration
 * never could.
 */
body.studio .table-bordered,
body.studio .table-data-sheet {
  border: 1px solid rgba(128, 128, 128, .28) !important;
  border-radius: var(--st-pay-radius, 12px);
  border-collapse: separate !important;
  border-spacing: 0;
  overflow: hidden;
}
body.studio .table-bordered > thead > tr > th,
body.studio .table-bordered > tbody > tr > th,
body.studio .table-bordered > tfoot > tr > th,
body.studio .table-bordered > thead > tr > td,
body.studio .table-bordered > tbody > tr > td,
body.studio .table-bordered > tfoot > tr > td,
body.studio .table-data-sheet > tbody > tr > td,
body.studio .table-data-sheet > tbody > tr > th {
  border: 0 !important;
  border-bottom: 1px solid rgba(128, 128, 128, .2) !important;
  padding: 13px 16px !important;
  vertical-align: middle;
}
/* No rule under the last row: the table's own border closes it off, and a
   line there reads as a row that failed to load. */
body.studio .table-bordered > tbody > tr:last-child > td,
body.studio .table-bordered > tbody > tr:last-child > th,
body.studio .table-data-sheet > tbody > tr:last-child > td,
body.studio .table-data-sheet > tbody > tr:last-child > th {
  border-bottom: 0 !important;
}

/* THE CORNERS, which the radius alone does not give you.
 *
 * A table cannot clip its own children: overflow: hidden on a <table> does
 * nothing to a <td>, and the cell paints its own background square across
 * the rounded corner. So the corner CELLS have to carry the radii.
 *
 * The account tables solved this already — but keyed on `thead`, and the
 * product page's Data sheet has no thead at all, only a tbody. That is why
 * it stayed square while everything else came out round. These rules take
 * the first and last ROW, whichever section it lives in.
 */
body.studio .table-bordered > thead > tr:first-child > th:first-child,
body.studio .table-bordered > thead > tr:first-child > td:first-child,
body.studio .table-bordered > tbody:first-child > tr:first-child > th:first-child,
body.studio .table-bordered > tbody:first-child > tr:first-child > td:first-child,
body.studio .table-data-sheet > tbody:first-child > tr:first-child > th:first-child,
body.studio .table-data-sheet > tbody:first-child > tr:first-child > td:first-child {
  border-top-left-radius: var(--st-pay-radius, 12px);
}
body.studio .table-bordered > thead > tr:first-child > th:last-child,
body.studio .table-bordered > thead > tr:first-child > td:last-child,
body.studio .table-bordered > tbody:first-child > tr:first-child > th:last-child,
body.studio .table-bordered > tbody:first-child > tr:first-child > td:last-child,
body.studio .table-data-sheet > tbody:first-child > tr:first-child > th:last-child,
body.studio .table-data-sheet > tbody:first-child > tr:first-child > td:last-child {
  border-top-right-radius: var(--st-pay-radius, 12px);
}
body.studio .table-bordered > tbody:last-child > tr:last-child > th:first-child,
body.studio .table-bordered > tbody:last-child > tr:last-child > td:first-child,
body.studio .table-bordered > tfoot:last-child > tr:last-child > td:first-child,
body.studio .table-data-sheet > tbody:last-child > tr:last-child > th:first-child,
body.studio .table-data-sheet > tbody:last-child > tr:last-child > td:first-child {
  border-bottom-left-radius: var(--st-pay-radius, 12px);
}
body.studio .table-bordered > tbody:last-child > tr:last-child > th:last-child,
body.studio .table-bordered > tbody:last-child > tr:last-child > td:last-child,
body.studio .table-bordered > tfoot:last-child > tr:last-child > td:last-child,
body.studio .table-data-sheet > tbody:last-child > tr:last-child > th:last-child,
body.studio .table-data-sheet > tbody:last-child > tr:last-child > td:last-child {
  border-bottom-right-radius: var(--st-pay-radius, 12px);
}

/* The wrapper Bootstrap puts around a table for horizontal scrolling paints
   its own square border, so a rounded table sits inside a square box — two
   borders, and the table's bottom margin showing as an empty strip between
   them. It is a scroll container; it has no business drawing anything.
   Element-scoped for the same reason as the rules above: the account pages
   had this fixed by name, and the product page was not one of the names. */
body.studio .table-responsive {
  border: 0 !important;
  background: none !important;
  border-radius: var(--st-pay-radius, 12px);
}
body.studio .table-responsive > .table-bordered,
body.studio .table-responsive > .table { margin-bottom: 0 !important; }

/* gwcproductfields draws its own table and is not one of Bootstrap's, so the
   rules above do not reach it. It takes the same corner as everything else
   rather than being the one square table in a rounded design — which is what
   "consistent" has to mean if it means anything. */
body.studio .gwcfields-table {
  border: 1px solid rgba(128, 128, 128, .28);
  border-radius: var(--st-pay-radius, 12px);
  border-collapse: separate !important;
  border-spacing: 0;
  overflow: hidden;
}
body.studio .gwcfields-table > tbody > tr:first-child > th:first-child { border-top-left-radius: var(--st-pay-radius, 12px); }
body.studio .gwcfields-table > tbody > tr:first-child > td:last-child { border-top-right-radius: var(--st-pay-radius, 12px); }
body.studio .gwcfields-table > tbody > tr:last-child > th:first-child { border-bottom-left-radius: var(--st-pay-radius, 12px); }
body.studio .gwcfields-table > tbody > tr:last-child > td:last-child { border-bottom-right-radius: var(--st-pay-radius, 12px); }

/* ---- one corner, everywhere --------------------------------------------
 * The product page's section cards were the last square thing in a rounded
 * theme — a rounded table sitting inside a square box.
 *
 * Each design sets this element from its OWN radius token, and those tokens
 * disagree by design: Motion 22px, Clean 16px, Bold 6px, Luxe 0px. Wiring
 * the shared components to those tokens was tried and rejected — it made
 * Luxe square throughout, including the cart, which is not the look wanted
 * here. One rounded corner across every design is.
 *
 * !important because each design names this element in its own sheet, which
 * loads after this one.
 */
body.studio .page-product-box,
body.studio #product-features,
body.studio #product-description {
  border-radius: var(--st-pay-radius, 12px) !important;
  overflow: hidden;
}

/* ---- order detail: air, and facts that read as facts ---------------------
 * Two things Wayne caught on this page.
 *
 * THE CARDS WERE TOUCHING. The status table's bottom edge and the address
 * cards' top edge measured ZERO pixels apart, so two bordered blocks met on a
 * shared line and read as one collapsed thing. Every other block on the page
 * carries 20px below it; this row had nothing above it.
 */
/* Spacing is set on the PAGE'S OWN BLOCKS, not on one pair of them. The
   first attempt added air above the address row and left two more joins at
   zero: the address row against the product table, and the product table
   against the shipping table. Measuring every sibling in #center_column
   found them; measuring the pair I had already been told about would not
   have. */
body.studio.order-detail #center_column > *:not(.page-heading) {
  margin-bottom: 20px;
}
/* The heading stays close to the table it introduces — that pairing is the
   one piece of spacing on this page that means something. */
body.studio.order-detail #center_column > .page-heading { margin-bottom: 10px; }
body.studio.order-detail .address.box { margin-bottom: 0; }

/* AND THE ORDER'S FACTS READ AS RAW OUTPUT. They arrive as
 * <p><strong>Carrier</strong> My carrier</p> — label and value run together
 * on one line, in the same weight and size as everything else, which is what
 * an unstyled page looks like.
 *
 * Same treatment the order-history cards already use: the label small, quiet
 * and above the value it belongs to, so the eye gets a column of facts rather
 * than a paragraph. The invoice link has no label and is left alone.
 */
body.studio.order-detail .info-order { display: grid; gap: 14px; }
body.studio.order-detail .info-order p { margin: 0; }
body.studio.order-detail .info-order p > strong {
  display: block;
  margin-bottom: 3px;
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
}

/* ---- every "back" link, on every page that has one ----------------------
 * The pill treatment for .pager was written page by page — history,
 * addresses, identity, order-slip and the rest — so the MODULE account pages
 * never got it. My wishlists, loyalty points, referral programme, mail
 * alerts and favourite products all carry a body class like
 * `module-blockwishlist-mywishlist`, which appears in no list of page names
 * and never could: the list was written before those pages were looked at.
 *
 * They wore the vendor's 5px/#ddd rectangle instead, the same raw control
 * the 404 page had.
 *
 * `.pager` is only ever a back link in this theme — 20 templates use it and
 * every one is a "return to" control. Category pagination is `.pagination`,
 * a different class, so this cannot reach it.
 */
body.studio .pager { border: 0; margin: 22px 0 0; padding: 0; list-style: none; }
body.studio .pager li { display: inline-block; }
body.studio .pager li > a {
  display: inline-block;
  border: 1px solid rgba(128, 128, 128, .45);
  border-radius: 999px;
  padding: 8px 18px;
  background: none;
  color: inherit;
  font-size: .85rem;
  transition: border-color .15s, background-color .15s;
}
body.studio .pager li > a:hover {
  border-color: currentColor;
  background: rgba(128, 128, 128, .1);
}

/* ---- a page has one title ------------------------------------------------
 * The loyalty page prints TWO h1.page-heading — "My loyalty points" and "My
 * vouchers from loyalty points" — both at the full display size, so a section
 * heading sits on the page at the same weight as the page's own title. It
 * reads as two pages stacked, and it is two <h1>s to a screen reader.
 *
 * The template is the module's, not the theme's, so the tag stays what it is.
 * What this can fix is the SIZE: the first heading in the column is the
 * title, anything after it is a section within that page and is set as one.
 *
 * Sibling-scoped rather than page-scoped on purpose — the same shape turns up
 * on referral and favourite products, and none of them are pages I would have
 * thought to name.
 */
body.studio #center_column .page-heading ~ .page-heading {
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: 1.2;
  margin: 8px 0 12px;
}