/* =========================================================================
   THE PORTAL, IN THE SITE'S CLOTHES.
   19 September 2026.

   The portal screens are drawn by the console and reach the customer through
   /portal/ on this site. functions/portal/[[path]].js puts the site's head,
   header and footer on each one, and this file makes what is between them
   read as a page of britelounge.ca: the same type, the same pills, the same
   cards, a picture at the top, and photographs on the products.

   It loads AFTER base.css and after the console's own inline styles, so a
   plain class here wins. Nothing in this file decides what a customer sees or
   pays. It is paint, and the console stays the truth.
   ========================================================================= */

/* ---- The account strip. The console's bar, under the site's header ------ */
body.portal .account-strip {
  background: var(--white);
  color: var(--ink);
  border-bottom: 1px solid var(--neutral);
}
body.portal .account-strip .inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  min-height: 3.25rem;
  padding-block: 0.5rem;
  gap: var(--s-2);
  justify-content: flex-end;
}
/* The site's header already carries the logo. A second one is clutter. */
body.portal .account-strip .brand { display: none; }
body.portal .account-strip .who {
  margin-right: auto;
  color: var(--ink);
  opacity: 1;
  font-size: var(--t-small);
}
body.portal .account-strip a,
body.portal .account-strip button {
  color: var(--ink);
  letter-spacing: var(--tracking-label);
}
/* Their buttons arrive with inline white-on-white. Give them the site's ghost pill. */
body.portal .account-strip .btn {
  background: transparent !important;
  color: var(--green-deep) !important;
  border-color: var(--green) !important;
  padding: 0.55rem 1.1rem;
  font-size: 0.75rem;
}
body.portal .account-strip .btn:hover {
  border-color: var(--green-deep) !important;
  color: var(--ink) !important;
}
@media (max-width: 640px) {
  body.portal .account-strip .inner { justify-content: center; }
  body.portal .account-strip .who { margin-right: 0; width: 100%; text-align: center; }
}

/* ---- The page ------------------------------------------------------------ */
body.portal main.wrap {
  padding-block: var(--s-4) var(--s-7);
}
.portal-hero {
  margin: 0 0 var(--s-5);
  border-radius: var(--r-card);
  overflow: hidden;
  background: #eaf2ea;
}
.portal-hero img {
  width: 100%;
  height: clamp(160px, 26vw, 340px);
  object-fit: cover;
  display: block;
}
/* The screens a stranger sees are one card. The picture sits beside it on a
   wide screen, and above it on a phone. */
body.portal-out main.wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-5);
  align-items: start;
}
body.portal-out .portal-hero { margin: 0; order: 2; }
body.portal-out .portal-hero img { height: 100%; min-height: 360px; }
body.portal-out main.wrap > .card { order: 1; max-width: none; }
@media (max-width: 800px) {
  body.portal-out main.wrap { grid-template-columns: 1fr; }
  body.portal-out .portal-hero { order: 0; }
  body.portal-out .portal-hero img { min-height: 0; height: clamp(160px, 40vw, 280px); }
}

/* "Back to your account", which the console prints as the first line. */
body.portal main.wrap > p:first-of-type > a[href="/portal/home"] {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--t-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--green-deep);
}
body.portal main.wrap > p:first-of-type > a[href="/portal/home"]::before {
  content: "\2190\00a0";
}

/* Type. The site's sizes, the site's weights. */
body.portal h1 { margin-bottom: var(--s-3); }
body.portal .eyebrow { letter-spacing: var(--tracking-label); color: var(--green); }
body.portal .card { padding: var(--s-4); }
body.portal .card h2 { font-size: var(--t-h3); font-weight: var(--w-regular); margin-bottom: var(--s-2); }
body.portal .stack > * + * { margin-top: var(--s-3); }
body.portal .panelgrid { gap: var(--s-3); }

/* Notes read as the site's soft panels, not as alerts. */
body.portal .note {
  background: #f4f8f4;
  border: 0;
  border-left: 4px solid var(--green);
  border-radius: var(--r-input);
}
body.portal .note--bad { background: #fbf3f2; border-left-color: #b3261e; }

/* Buttons: the site's primary and ghost. */
body.portal .btn { font-size: var(--t-small); }
body.portal .btn--quiet { color: var(--ink); border-color: var(--green); background: transparent; }
body.portal .btn--quiet:hover { border-color: var(--green-deep); color: var(--green-deep); }

/* Tables. Room to breathe, numbers aligned, headings as eyebrows. */
body.portal table { font-size: var(--t-body); }
body.portal th { color: var(--green); letter-spacing: var(--tracking-label); font-size: 0.75rem; }
body.portal td { padding: var(--s-2) 0.75rem; vertical-align: middle; }
body.portal td:first-child, body.portal th:first-child { padding-left: 0; }
body.portal td:last-child, body.portal th:last-child { padding-right: 0; }

/* The product photo the script adds to each row. */
body.portal .row-wrap { display: flex; gap: var(--s-2); align-items: flex-start; }
body.portal .row-photo {
  flex: none;
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: 16px;
  background: #eaf2ea;
}
body.portal .row-text { min-width: 0; }
body.portal .row-more {
  display: inline-block;
  margin-top: 0.35rem;
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-deep);
  text-decoration: none;
}
@media (max-width: 640px) {
  body.portal .table--stack td:first-child { display: block; }
  body.portal .row-photo { width: 72px; height: 72px; }
}

/* Forms. The site's inputs. */
body.portal .field input,
body.portal .addform input, body.portal .addform select,
body.portal .qtyform input, body.portal .addr input {
  border-color: var(--neutral);
  border-radius: var(--r-input);
}
body.portal .field input:focus,
body.portal .addform input:focus, body.portal .addform select:focus,
body.portal .qtyform input:focus, body.portal .addr input:focus {
  outline: none;
  border-color: var(--green-deep);
}
body.portal .code input { font-family: var(--font-body); }

/* The tag pill. */
body.portal .tag { background: #eaf2ea; color: var(--green-deep); }

/* ---- The Resources library, drawn by the site itself ------------------- */
.library { display: grid; gap: var(--s-3); }
.library-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  gap: var(--s-3);
  align-items: center;
  background: var(--white);
  border: 1px solid var(--neutral);
  border-radius: var(--r-card);
  padding: var(--s-3);
}
.library-row img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 18px;
  background: #eaf2ea;
}
.library-row h3 { margin: 0 0 0.3rem; font-size: 1.2rem; }
.library-row p { margin: 0; max-width: none; }
.library-row .btn { white-space: nowrap; }
@media (max-width: 700px) {
  .library-row { grid-template-columns: 84px minmax(0, 1fr); }
  .library-row img { width: 84px; height: 84px; }
  .library-row .btn { grid-column: 1 / -1; justify-content: center; }
}
.library-head { margin: var(--s-6) 0 var(--s-3); }
.library-head:first-of-type { margin-top: 0; }
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; max-width: var(--measure); }
.checklist li { padding-left: 1.8rem; position: relative; }
.checklist li::before {
  content: "";
  position: absolute; left: 0; top: 0.45em;
  width: 0.9rem; height: 0.9rem;
  background: var(--green);
  clip-path: polygon(50% 0, 53% 30%, 70% 47%, 100% 50%, 70% 53%, 53% 70%, 50% 100%, 47% 70%, 30% 53%, 0 50%, 30% 47%, 47% 30%);
}

/* ---- The website's own portal screens (19 September 2026, evening) ------ */
body.portal main.wrap-wide { max-width: var(--page-max); }
.portal-form .field { margin-bottom: var(--s-3); max-width: 26rem; }
.portal-form .field label { display: block; font-family: var(--font-display); font-size: var(--t-small); font-weight: var(--w-medium); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.4rem; }
.portal-form .field input, .portal-form .field select {
  width: 100%; box-sizing: border-box; font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  background: var(--white); border: 1.5px solid var(--neutral); border-radius: var(--r-input); padding: 0.7rem 0.9rem;
}
.portal-form .field input:focus, .portal-form .field select:focus { outline: none; border-color: var(--green-deep); }
.portal-form .hint { display: block; margin-top: 0.3rem; }
.hint { font-size: var(--t-small); opacity: 0.8; }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--green-deep); text-decoration: underline; cursor: pointer; }
.small { font-size: var(--t-small); } .dim { opacity: 0.72; }
.num { text-align: right; }

/* Home */
.home-card { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.home-card h2 { font-size: var(--t-h3); }
.home-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }

/* The range and the cart */
.range-layout { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--s-4); align-items: start; }
.range-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--s-3); }
.range-card { background: var(--white); border: 1px solid var(--neutral); border-radius: var(--r-card); overflow: hidden; display: flex; flex-direction: column; }
.range-card img { width: 100%; aspect-ratio: 1; object-fit: cover; background: #eaf2ea; }
.range-body { padding: var(--s-3); display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.range-body h3 { margin: 0; font-size: 1.25rem; }
.range-body p { margin: 0; max-width: none; }
.range-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); margin-top: auto; padding-top: var(--s-2); }
.range-foot .price { font-size: 1.15rem; font-weight: var(--w-medium); }
.qty { display: inline-flex; align-items: center; border: 1.5px solid var(--neutral); border-radius: var(--r-pill); overflow: hidden; }
.qty input { width: 3rem; text-align: center; border: 0; font: inherit; padding: 0.45rem 0; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-btn { width: 2.4rem; height: 2.4rem; border: 0; background: transparent; font-size: 1.2rem; cursor: pointer; color: var(--green-deep); }
.qty-btn:hover { background: #eaf2ea; }
.cart { position: sticky; top: var(--s-3); }
.cart-lines { width: 100%; border-collapse: collapse; margin-bottom: var(--s-2); }
.cart-lines td { padding: 0.35rem 0; border-bottom: 1px solid var(--neutral); font-size: var(--t-small); }
.cart-sums { margin: 0 0 var(--s-2); }
.cart-sums div { display: flex; justify-content: space-between; gap: var(--s-2); padding: 0.3rem 0; }
.cart-sums dt, .cart-sums dd { margin: 0; }
.cart-sums .cart-total { border-top: 1px solid var(--ink); font-weight: var(--w-semi); margin-top: 0.3rem; padding-top: 0.5rem; }
.cart .btn { width: 100%; justify-content: center; margin: var(--s-2) 0; }
.cart .btn:disabled { opacity: 0.45; cursor: not-allowed; }
@media (max-width: 900px) {
  .range-layout { grid-template-columns: 1fr; }
  .cart { position: static; }
}

/* The posts */
.posts-stage { margin: var(--s-4) 0 var(--s-1); font-size: var(--t-h3); }
.posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--s-3); margin-bottom: var(--s-3); }
.post { margin: 0; background: var(--white); border: 1px solid var(--neutral); border-radius: var(--r-card); overflow: hidden; display: flex; flex-direction: column; }
.post img { width: 100%; aspect-ratio: 1; object-fit: cover; background: #eaf2ea; display: block; }
.post figcaption { padding: var(--s-2) var(--s-3) var(--s-3); display: flex; flex-direction: column; gap: 0.35rem; font-size: var(--t-small); }
.post-caption { opacity: 0.8; }
.post-tools { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: 0.3rem; }
.post-tools .copy { background: none; border: 0; padding: 0; cursor: pointer; }
.pill-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.btn-small { padding: 0.5rem 1rem; font-size: 0.75rem; }
body.portal .cta-block { text-align: center; padding-block: var(--s-6) 0; }
body.portal .cta-block h2, body.portal .cta-block p { margin-inline: auto; }
@media (max-width: 640px) {
  .home-card { justify-content: center; text-align: center; }
  .home-actions { justify-content: center; }
}

/* ---- The library as tiles (19 September, after the first look) ---------- */
.portal-hero img { height: auto; aspect-ratio: 16 / 6; max-height: 360px; }
@media (max-width: 640px) { .portal-hero { border-radius: 20px; } .portal-hero img { aspect-ratio: 4 / 3; max-height: none; } }
.tiles { display: grid; gap: var(--s-3); }
.tile-acc { background: var(--white); border: 1px solid var(--neutral); border-radius: var(--r-card); overflow: hidden; }
.tile-acc[open] { border-color: var(--green); }
.tile-acc summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; padding: var(--s-3); }
.tile-acc summary::-webkit-details-marker { display: none; }
.tile-acc summary img { width: 120px; height: 120px; object-fit: cover; border-radius: 18px; background: #eaf2ea; }
.tile-acc-text { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.tile-acc-text .eyebrow { margin: 0; }
.tile-acc-title { font-family: var(--font-display); font-size: 1.35rem; font-weight: var(--w-regular); }
.tile-count { display: inline-block; font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; background: #eaf2ea; color: var(--green-deep); border-radius: var(--r-pill); padding: 0.2rem 0.7rem; vertical-align: middle; margin-left: 0.4rem; }
.tile-acc-line { opacity: 0.8; }
.tile-acc-open { font-family: var(--font-display); font-size: 1.8rem; font-weight: 300; color: var(--green-deep); width: 2.6rem; height: 2.6rem; border: 1.5px solid var(--green); border-radius: 50%; display: grid; place-items: center; transition: transform var(--dur) var(--ease); }
.tile-acc[open] .tile-acc-open { transform: rotate(45deg); }
.tile-acc-body { padding: 0 var(--s-3) var(--s-4); border-top: 1px solid var(--neutral); padding-top: var(--s-3); }
@media (max-width: 640px) {
  .tile-acc summary { grid-template-columns: 72px minmax(0, 1fr) auto; gap: var(--s-2); padding: var(--s-2); text-align: left; }
  .tile-acc summary img { width: 72px; height: 72px; border-radius: 14px; }
  .tile-acc-title { font-size: 1.15rem; }
  .tile-acc-line { display: none; }
  .tile-acc-open { width: 2.2rem; height: 2.2rem; }
  .tile-acc-body { padding: var(--s-2) var(--s-2) var(--s-3); text-align: left; }
}
.pic-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s-3); align-items: start; padding: var(--s-2) 0; border-bottom: 1px solid var(--neutral); }
.pic-row:last-of-type { border-bottom: 0; }
.pic-row img { width: 96px; height: 96px; object-fit: cover; border-radius: 16px; background: #eaf2ea; }
.pic-row h4 { margin: 0 0 0.25rem; font-family: var(--font-display); font-weight: var(--w-medium); font-size: 1.05rem; }
.pic-row p { margin: 0; max-width: none; }
@media (max-width: 640px) { .pic-row { grid-template-columns: 64px minmax(0, 1fr); gap: var(--s-2); } .pic-row img { width: 64px; height: 64px; } }
.steps-plain { padding-left: 1.4rem; display: grid; gap: 0.6rem; max-width: var(--measure); }
.supply-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--s-2); }
.supply { display: flex; gap: 0.8rem; align-items: flex-start; background: #f4f8f4; border-radius: 18px; padding: var(--s-2); }
.supply-icon svg { width: 1.4rem; height: 1.4rem; fill: var(--green); display: block; margin-top: 0.15rem; }
.supply h4 { margin: 0 0 0.15rem; font-family: var(--font-display); font-weight: var(--w-medium); font-size: 1.05rem; }
.supply p { margin: 0; font-size: var(--t-small); max-width: none; }
table.qa { width: 100%; border-collapse: collapse; }
table.qa th { text-align: left; font-family: var(--font-display); font-size: 0.75rem; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--green); padding: 0.5rem 0.75rem 0.5rem 0; border-bottom: 1px solid var(--neutral); }
table.qa td { padding: 0.75rem 0.75rem 0.75rem 0; border-bottom: 1px solid var(--neutral); vertical-align: top; }
table.qa .qa-short { font-family: var(--font-display); font-size: 1.15rem; color: var(--green-deep); white-space: nowrap; }
@media (max-width: 760px) {
  table.qa thead { display: none; }
  table.qa tr { display: block; padding: 0.75rem 0; border-bottom: 1px solid var(--neutral); }
  table.qa td { display: block; border: 0; padding: 0.15rem 0; }
  table.qa td::before { content: attr(data-label); display: block; font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green); }
  table.qa td:first-child::before { display: none; }
  table.qa .qa-short { white-space: normal; }
}
body.in-site .account-strip .inner { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); justify-content: flex-end; min-height: 3.25rem; padding-block: 0.5rem; }

/* ---- The top of every portal page: words left, picture right, shown whole -- */
.portal-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s-5); align-items: center; margin-bottom: var(--s-5); }
.portal-top-plain { grid-template-columns: 1fr; margin-bottom: var(--s-4); }
.portal-top-copy h1 { margin-bottom: var(--s-2); }
.portal-top-copy .hero-lede { margin: 0; }
.portal-top-pic { border-radius: var(--r-card); overflow: hidden; background: #eaf2ea; aspect-ratio: 4 / 3; display: grid; place-items: center; }
.portal-top-pic img { width: 100%; height: 100%; display: block; }
.portal-top-pic.fit-contain img { object-fit: contain; padding: 6%; box-sizing: border-box; }
.portal-top-pic.fit-cover img { object-fit: cover; }
body.portal-out main.wrap { display: block; }
@media (max-width: 800px) {
  .portal-top { grid-template-columns: 1fr; gap: var(--s-3); text-align: center; }
  .portal-top-copy .hero-lede { margin-inline: auto; }
  .portal-top-pic { order: -1; aspect-ratio: 16 / 10; border-radius: 20px; }
}
/* The old strip is gone. */
.portal-hero { display: none; }

/* ---- The dashboard ------------------------------------------------------- */
.start-strip { background: #f4f8f4; border-left: 4px solid var(--green); border-radius: var(--r-input); padding: var(--s-2) var(--s-3); margin-bottom: var(--s-3); }
.start-strip .eyebrow { margin-bottom: 0.2rem; }
.start-strip p { margin: 0; max-width: none; }
.dash { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin-bottom: var(--s-3); }
.dash-tile { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--s-3); align-items: center; background: var(--white); border: 1px solid var(--neutral); border-radius: var(--r-card); overflow: hidden; text-decoration: none; color: var(--ink); transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.dash-tile:hover { border-color: var(--green); transform: translateY(-2px); }
.dash-tile img { width: 160px; height: 100%; min-height: 160px; object-fit: cover; background: #eaf2ea; display: block; }
.dash-body { display: flex; flex-direction: column; gap: 0.25rem; padding: var(--s-3) var(--s-3) var(--s-3) 0; min-width: 0; }
.dash-body .eyebrow { margin: 0; }
.dash-title { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.2; }
.dash-line { font-size: var(--t-small); opacity: 0.82; }
@media (max-width: 900px) { .dash { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .dash-tile { grid-template-columns: 96px minmax(0, 1fr); gap: var(--s-2); text-align: left; }
  .dash-tile img { width: 96px; min-height: 120px; }
  .dash-body { padding: var(--s-2) var(--s-2) var(--s-2) 0; }
  .dash-title { font-size: 1.15rem; }
  .start-strip { text-align: left; }
}
.again { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-3); }
.again h2 { font-size: 1.2rem; margin: 0.2rem 0; }
.details-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--s-3); }
@media (max-width: 640px) { .details-grid { text-align: center; } }

/* ---- Tables on a phone: each row becomes a little card, nothing scrolls sideways -- */
@media (max-width: 640px) {
  body.portal .table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  body.portal .table--stack, body.portal .table--stack tbody, body.portal .table--stack tr { display: block; width: 100%; }
  body.portal .table--stack tr { padding: 0.6rem 0; border-bottom: 1px solid var(--neutral); }
  body.portal .table--stack tr:last-child { border-bottom: 0; }
  body.portal .table--stack td { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; border: 0; padding: 0.2rem 0; text-align: right; }
  body.portal .table--stack td::before { content: attr(data-label); font-family: var(--font-display); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green-deep); text-align: left; flex: none; }
  body.portal .table--stack td:first-child { display: block; text-align: left; padding-bottom: 0.45rem; font-weight: 500; }
  body.portal .table--stack td:first-child::before { display: none; }
  body.portal .table--stack td:empty { display: none; }
}
/* Dashboard pictures shown whole, never cropped to a strip. */
.dash-tile img { object-fit: contain; padding: 6%; box-sizing: border-box; background: #eaf2ea; }
/* On a phone the strip is the name and Sign out. Orders and the library are on the dashboard. */
@media (max-width: 640px) {
  body.portal .account-strip .inner { justify-content: space-between; flex-wrap: nowrap; }
  body.portal .account-strip .who { width: auto; text-align: left; font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.portal .account-strip a.btn { display: none; }
}
body.portal .account-strip .btn { white-space: nowrap; }
/* Tile pictures shown whole too: the light is tall and was losing its head. */
.tile-acc summary img, .pic-row img { object-fit: contain; padding: 5%; box-sizing: border-box; background: #eaf2ea; }

/* ---- A distributor sees what they pay, what it sells for, and the difference -- */
.trade { display: grid; gap: 0.15rem; margin: 0 0 0.3rem; padding: 0.6rem 0.75rem; background: #f4f8f4; border-radius: 14px; }
.trade div { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; }
.trade dt { font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green-deep); margin: 0; }
.trade dd { margin: 0; font-size: var(--t-small); }
.trade .price { font-size: 1.15rem; font-weight: var(--w-medium); }