/* ============================================================================
   The blood panels' commercial pages (T573): only what no standard element has.
   Every element on the category page (app/lab/panels.html) and the product page
   (app/lab/panel.html) is the standard's, drawn through design-system/js/ui.js
   in the design standard C's variants; this sheet names no `cx-` class.
   ========================================================================== */
/* one column for a visitor and a member alike: the public frame takes the member frame's width */
body[data-shop-page] .app--nonav .content__inner { max-width: var(--content-max); }

/* one line under a figure in a lead card */
.shop-line { margin: 8px 0 0; font-size: var(--t-sm); line-height: var(--lh-body); }

/* the head's order act: on a phone the action bar (.cx-bar, the standard's) holds it, so the head's copy is hidden there
   and one primary stays in view (Astra's plan read, finding 8) */
@media (max-width: 560px) { .shop-headact { display: none; } }

/* the three steps of the route: a number, a title, one sentence */
.shop-steps { list-style: none; counter-reset: shop; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 24px;
  margin: 16px 0 0; padding: 0; }
.shop-steps li { counter-increment: shop; display: grid; gap: 4px; align-content: start; }
.shop-steps b { font-weight: var(--w-semi); color: var(--ink); }
.shop-steps b::before { content: counter(shop) ". "; color: var(--bp-teal); }
.shop-steps span { color: var(--ink-2); font-size: var(--t-sm); line-height: var(--lh-body); }
@media (max-width: 719px) { .shop-steps { grid-template-columns: minmax(0, 1fr); } }

/* the questions: the standard's question rows (section 38 item 9), one under the other, a rule between them */
.shop-faq { margin-top: 8px; }

/* a package card (T573 Addendum 2): who it is for in the body's ink at weight 500; the number with its split and bar
   under a rule, starting on one line across a row (the offer's aligned cards, section 38 item 10); a quiet note; the
   areas as a quiet row */
.shop-for.shop-for--card { font-weight: var(--cx-w-section); }
.shop-count { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--cx-rule); }
.shop-note { margin: 8px 0 0; font-size: var(--cx-t-small); line-height: var(--cx-lh-small); color: var(--cx-ink-2); }
.shop-areas:not(:empty) { padding-top: 8px; }
/* the card's name is its way in: a thumb's height on a phone, the extra height taken back so the text sits where it did */
.shop-titlelink { color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; margin: -10px 0; }
.shop-titlelink:hover { color: var(--bp-teal); text-decoration: underline; }
.shop-foot { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; width: 100%; }
/* the acts at the right edge of the foot, on their own line too, so a wrapped button stands on the box's edge (C rule 9) */
.shop-foot__acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; margin-left: auto; }

/* the summary line under the filters: how many of all and the reset at its start, the sort at its end (T573 Addendum 2:
   the sort orders what the filters left, so it stands with the result, not among the filters) */
.shop-summary { display: grid; gap: 8px; margin: 24px 0 16px; }
.shop-summary__count { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.shop-summary p { margin: 0; color: var(--cx-ink-2); font-size: var(--cx-t-body); font-weight: var(--cx-w-section); }
.shop-sort { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* the sort's label as wide as a filter row's, so its first chip stands on the 8 px grid from the box's edge (c_rules 9) */
.shop-sort__label { flex: 0 0 7.5rem; font-size: var(--cx-t-small); font-weight: 500; color: var(--cx-ink-2); }

/* ---- T573 Addendum 1: the pages as e-commerce pages (Jesse 2026-10-07) -------------------------------------------- */
/* the head's purpose: who it is for, then the why in one line */
.shop-for { display: block; font-weight: var(--w-semi); color: var(--ink); }
.shop-whyline { display: block; margin-top: 8px; }
/* the price beside the order button at the top; the two wrap under each other when the head is narrow */
/* a section's opening paragraph and a small heading inside a section */
.shop-lede { margin: 16px 0 24px; max-width: 72ch; color: var(--ink-2); line-height: var(--lh-body); }
.shop-sub { margin: 24px 0 8px; font-size: var(--t-body); font-weight: var(--w-semi); color: var(--ink); }
/* "You may recognise yourself here": three lines, each after a teal dot */
.shop-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.shop-checks li { position: relative; padding-left: 24px; color: var(--ink-2); line-height: var(--lh-body); }
.shop-checks li::before { content: ""; position: absolute; left: 4px; top: .55em; width: 8px; height: 8px; border-radius: 999px; background: var(--bp-teal); }
.shop-compare p { margin: 8px 0 0; max-width: 72ch; line-height: var(--lh-body); }
/* the dots of a count, one per value, the page's own drawing of the layout, in the primary of their ground (white on the
   deep ground of the photo tile); hollow for the calculated values */
.shop-dots { display: flex; flex-wrap: wrap; gap: 4px; margin: 12px 0 4px; max-width: 100%; }
.shop-dots i { display: block; width: 8px; height: 8px; border-radius: 999px; background: var(--cx-primary); }
.shop-dots--calc i { background: transparent; box-shadow: inset 0 0 0 2px var(--cx-primary); }
/* the why's tiles side by side from 720 px, the row's height shared so no card ends a screen above the next (Addendum 6) */
.shop-why { display: grid; gap: 16px; margin-top: 24px; align-items: stretch; }
/* two tiles (the chart and "why test again", a panel without the study): one under the other at the full width, since the
   chart's card is three times the other's height and a half-empty card beside it is a void (Addendum 6) */
@media (min-width: 720px) { .shop-why--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* the three tiles from 900 px: the example chart (the tall one) on the left over two rows, the study and "why test again"
   stacked on the right, so the row's bottom is one line (Addendum 6: three across left two cards half empty beside the
   chart, which the void rule names); two tiles side by side where there is no chart */
.shop-why__t { display: grid; min-width: 0; }
@media (min-width: 900px) {
  .shop-why--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; }
  .shop-why--3 > .shop-why__t[data-why-trend] { grid-column: 1; grid-row: 1 / 3; }
  .shop-why--3 > .shop-why__t[data-why-study] { grid-column: 2; grid-row: 1; }
  .shop-why--3 > .shop-why__t[data-why-again] { grid-column: 2; grid-row: 2; }
}
/* what we measure (T573 Addendum 6): a card per health area in a flow of three columns from 1100 px (two from 720, one
   under), balanced by the browser so no column ends a screen above the others; inside a card the values as a list with
   a dot each, the calculated values hollow; a value's approved line under its name, its page link beside it */
.shop-measure { margin-top: 0; }
/* under 900 px the three column wrappers dissolve and the cards flow in two columns (one under 720); from 900 the three
   columns stand as the page filled them, each a grid of its cards */
.shop-measure__col { display: contents; }
@media (min-width: 720px) and (max-width: 899px) { .shop-measure { columns: 2; column-gap: 24px; } }
@media (min-width: 900px) { .shop-measure { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
  .shop-measure__col { display: grid; gap: 24px; align-content: start; min-width: 0; }
  .shop-measure__foot { grid-column: 1 / -1; } }
/* the calculated values' card under the columns at the full width (in a column its opened list left the others short) */
.shop-measure__foot { column-span: all; }
@media (min-width: 720px) { .shop-measure__foot .shop-values--calc { columns: 2; column-gap: 24px; } }
@media (min-width: 900px) { .shop-measure__foot .shop-values--calc { columns: 3; } }
.shop-measure .shop-area { margin: 0 0 24px; break-inside: avoid; page-break-inside: avoid; }
@media (min-width: 900px) { .shop-measure__col > .shop-area { margin: 0; } }
.shop-values { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; font-size: var(--cx-t-body); line-height: var(--cx-lh-body); color: var(--cx-ink-2); }
.shop-values li { position: relative; padding-left: 20px; }
.shop-values li > .shop-value__why { display: block; flex: 1 1 100%; }
/* a value with a page link is a 44 px row (the link's whole target, no overlap with the neighbour: Astra's code read); a
   value without one keeps its line */
.shop-values li:has(.shop-value__page) { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; min-height: 44px; }
.shop-values li:has(.shop-value__page)::before { top: calc(50% - 4px); }
.shop-values li::before { content: ""; position: absolute; left: 2px; top: .6em; width: 8px; height: 8px; border-radius: 999px; background: var(--bp-teal); }
.shop-values--calc li::before { background: transparent; box-shadow: inset 0 0 0 2px var(--bp-teal); }
.shop-values li > b { font-weight: 500; color: var(--ink); }
/* a sentence under a title keeps the measure, never the whole width of its card (Addendum 6: 165 characters a line) */
.shop-says { max-width: 72ch; }
/* a picture of the house's own (the example chart, the map) with its caption under it */
.shop-pic { margin: 0; display: grid; gap: 8px; min-width: 0; }
.shop-pic img { display: block; width: 100%; height: auto; border-radius: 8px; }
/* after the order: the steps beside the map from 900 px, the map at most 360 px wide */
.shop-how { display: grid; gap: 16px; margin-top: 16px; }
.shop-how__steps { min-width: 0; }
.shop-pic--map { max-width: 360px; }
@media (min-width: 900px) { .shop-how--map { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } }
/* a card's values against the largest package, the bar and its words */
.shop-cover { margin-top: 12px; }
.shop-coverline { margin: 4px 0 0; font-size: var(--t-xs); line-height: var(--lh-body); color: var(--ink-2); }
/* a control reached by the keyboard stops clear of the frame's top bar and, on a phone, of the order bar fixed at the
   bottom (the walk's focus check, Astra's corrective read of Addendum 1, finding 7) */
html:has(body[data-shop-page]) { scroll-padding-top: 80px; scroll-padding-bottom: 24px; }
@media (max-width: 560px) { html:has(body[data-shop-page="panel"]) { scroll-padding-bottom: 112px; } }

/* ---- T573 Addendum 3: the true e-commerce page (Jesse 2026-10-08) ------------------------------------------------- */
/* the head's order act with the request's note under it; the request's note never wider than the column */
.shop-request-note { flex: 1 1 100%; margin: 0; max-width: 48ch; font-size: var(--cx-t-small); line-height: var(--cx-lh-small); color: var(--cx-muted); }
/* a guideline fact: the question it holds for (the scan's own words) with the answers as quiet pills, its sentence, its
   source in one small line; the facts of a band one under the other with a rule between them */
.shop-facts { display: grid; gap: 16px; margin-top: 16px; }
.shop-fact { display: grid; gap: 8px; padding-top: 16px; border-top: 1px solid var(--cx-rule); }
.shop-fact:first-child { padding-top: 0; border-top: 0; }
.shop-fact__says { margin: 0; max-width: 72ch; line-height: var(--lh-body); }
.shop-rule { display: grid; gap: 8px; }
.shop-rule__q { margin: 0; font-weight: var(--w-semi); color: var(--ink); }
.shop-src { margin: 0; font-size: var(--cx-t-small); line-height: var(--cx-lh-small); color: var(--cx-muted); }
.shop-src a, .shop-value__page, .shop-sources a { display: inline-flex; align-items: center; min-height: 44px; }
.shop-sources li { padding-left: 4px; }
.shop-then { margin: 24px 0 0; font-weight: var(--w-semi); color: var(--ink); }
/* the explanations of the why band in two columns from 720 px, without rules, after the why's own sentence (Addendum 6) */
.shop-facts--grid { margin: 24px 0 0; gap: 24px; }
.shop-facts--grid .shop-fact { padding-top: 0; border-top: 0; align-content: start; }
@media (min-width: 720px) { .shop-facts--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* the line under the last band keeps its distance from it */
.shop-never { margin: 24px 0; }
.shop-value__why { color: var(--ink-2); font-size: var(--cx-t-small); line-height: var(--cx-lh-small); }
.shop-value__page { color: var(--bp-teal); }
/* what every buyer gets, four tiles on the deep band; the chart of one value over time under them */
.shop-gets { display: grid; gap: 24px; margin-top: 8px; }
@media (min-width: 720px) { .shop-gets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .shop-gets { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.shop-get { display: grid; gap: 8px; align-content: start; }
/* on the deep band the tiles take the band's white ink */
.shop-get__h { margin: 0; font-size: var(--t-body); font-weight: var(--w-semi); color: inherit; }
.shop-get__b { margin: 0; line-height: var(--lh-body); color: inherit; }
.shop-get__chart { margin-top: 24px; }
.shop-get__link { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: underline; }
.shop-cmp__apart { margin-top: 12px; }
.shop-cmp__apart a { display: inline-flex; align-items: center; min-height: 44px; color: var(--bp-teal); }
.shop-get__chart .shop-why { margin-top: 0; }
/* compare the packages: the areas down, the panels across, this panel's column marked; on a phone it scrolls inside
   its own box, never the page */
.shop-cmp { overflow-x: auto; margin-top: 8px; -webkit-overflow-scrolling: touch; }
.shop-cmp__t { width: 100%; min-width: 560px; border-collapse: collapse; font-size: var(--t-sm); }
.shop-cmp__cap { caption-side: bottom; text-align: left; padding-top: 8px; font-size: var(--cx-t-small); line-height: var(--cx-lh-small); color: var(--cx-muted); }
.shop-cmp__t th, .shop-cmp__t td { padding: 8px 12px; text-align: center; border-bottom: 1px solid var(--cx-rule); vertical-align: middle; }
.shop-cmp__t th[scope="row"] { text-align: left; font-weight: 500; color: var(--ink); }
.shop-cmp__t thead th { font-weight: var(--w-semi); color: var(--ink); }
.shop-cmp__t thead th a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; }
.shop-cmp__t thead th a:hover { text-decoration: underline; }
.shop-cmp__t .is-this { background: var(--cx-surface); }
.shop-cmp__t thead .is-this { box-shadow: inset 0 -3px 0 var(--bp-teal); }
.shop-cmp__n { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 999px; background: var(--cx-primary-wash); color: var(--bp-teal); font-weight: var(--w-semi); }
.shop-cmp__no { display: inline-block; width: 8px; height: 2px; background: var(--cx-rule); vertical-align: middle; }
/* the sources, numbered */
.shop-sources { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 8px; font-size: var(--t-sm); line-height: var(--lh-body); color: var(--ink-2); }
/* the quick test: one question a screen, the choices as the standard's rows (T568), the acts under them */
.shop-finder { display: grid; gap: 16px; max-width: 640px; }
.shop-finder__form { display: grid; gap: 16px; }
.shop-finder__q { display: grid; gap: 12px; }
.shop-finder__step { margin: 0; font-size: var(--cx-t-small); line-height: var(--cx-lh-small); color: var(--cx-muted); }
.shop-finder__h { margin: 0; font-size: var(--t-body); font-weight: var(--w-semi); line-height: var(--lh-body); }
.shop-finder__h:focus { outline: none; }
.shop-finder__choices { display: grid; gap: 8px; }
.shop-finder__year { display: grid; gap: 8px; max-width: 16rem; }
.shop-finder__known { display: block; }
/* the pre-fill's mark under the row's label, in the label's own width (wrapping), the info ink */
.shop-known { display: block; margin-top: 4px; max-width: 100%; overflow-wrap: anywhere; text-transform: none; letter-spacing: 0; font-size: var(--cx-t-label); font-weight: 500; color: var(--cx-info); }
/* the verdict of the test over the list: the fit in one line, the reasons closed under it */
.shop-verdict { display: grid; gap: 8px; margin: 0 0 16px; padding: 16px; background: var(--cx-ok-wash); border-radius: 12px; }
.shop-verdict__h { margin: 0; font-weight: var(--w-semi); color: var(--ink); }
.shop-verdict .shop-facts { margin-top: 8px; }
.shop-fitline { color: var(--ink); }
.shop-fitline[data-fit="fit"] { color: var(--cx-ok); font-weight: 500; }

/* ---- T573 Addendum 7 (Jesse 2026-10-09): the names, the references, the who-for lists, the ladder's why, the example as
   the software's own page, the quick test's scales -------------------------------------------------------------------- */
/* a panel's name of one to three words, beside the count (the title) and over the summary sentence */
.shop-name { display: block; margin: 0 0 8px; font-family: var(--cx-font-display, inherit); font-size: var(--cx-t-section, 1.375rem); line-height: 1.25; font-weight: var(--cx-w-section); color: var(--bp-teal); }
.shop-name--card { margin: 4px 0 0; font-size: var(--cx-t-body); }
/* a reference: a superscript number for its line in the page's own list (never a link to another site) */
.shop-ref { position: relative; font-size: .72em; line-height: 0; margin-left: 2px; color: var(--bp-teal); font-weight: var(--w-semi); }
.shop-refs { margin: 16px 0 0; padding-left: 28px; display: grid; gap: 8px; max-width: 96ch; font-size: var(--cx-t-small); line-height: var(--cx-lh-small); color: var(--cx-ink-2); }
.shop-refs li { padding-left: 4px; scroll-margin-top: 96px; }
/* T573 Addendum 11: the list shows its numbers (base.css resets every list to none; the numbers are what the superscripts
   point at) */
.shop-refs { list-style: decimal; }
.shop-refs li::marker { color: var(--bp-teal); font-weight: 600; }
/* T573 Addendum 11: the number a link to its entry, a 44 px target around it (nothing moves); the entry's way back */
.shop-ref__a { position: relative; color: inherit; text-decoration: none; }
.shop-ref__a::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.shop-ref__a:focus-visible, .shop-ref__back:focus-visible { outline: 2px solid var(--bp-teal); outline-offset: 2px; border-radius: 4px; }
.shop-ref__a:hover { text-decoration: underline; }
/* the way back: a thumb's 44 px around the small arrow, the line's height untouched */
.shop-ref__back { position: relative; margin-left: 8px; color: var(--bp-teal); text-decoration: none; }
.shop-ref__back::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.shop-site .shop-ref { font-size: .72em !important; line-height: 0 !important; vertical-align: super; margin-left: 2px; color: var(--bp-teal); font-weight: 600 !important; }
.shop-ref { scroll-margin-top: 96px; }
/* a heading inside a band (the who-for lists, the ladder's parts) */
.shop-h3 { margin: 24px 0 8px; font-size: var(--cx-t-body); font-weight: var(--cx-w-section); color: var(--cx-ink); }
.shop-fact__h { margin: 0 0 4px; font-size: var(--cx-t-body); font-weight: var(--cx-w-section); color: var(--cx-ink); }
.shop-why__shared { max-width: 72ch; }
.shop-why__shared .shop-line { font-size: var(--cx-t-body); color: var(--cx-ink-2); }
/* the complaints, the health issues and the family: three columns from 900 px, two from 720, one under */
.shop-who { display: grid; gap: 8px 32px; margin-top: 8px; }
@media (min-width: 720px) { .shop-who { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .shop-who { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.shop-who__col { min-width: 0; }
.shop-checks--small li { font-size: var(--cx-t-small); line-height: var(--cx-lh-small); }
/* the software's own results drawing inside a commercial card keeps its own sheet (app/css/lab-results.css) */
.shop-labx { margin-top: 16px; min-width: 0; }
/* the quick test: the long lists in two columns from 720 px; the 1 to 10 scale as ten cells with its two ends named */
@media (min-width: 720px) { .shop-finder__choices--two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; } }
.shop-scale { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
@media (min-width: 720px) { .shop-scale { grid-template-columns: repeat(10, minmax(0, 1fr)); } }
.shop-scale .choice { justify-content: center; min-height: 44px; }
.shop-scale__ends { display: flex; justify-content: space-between; gap: 16px; margin: 8px 0 0; }

/* ---- T573 Addendum 10: the filter sidebar (the website's sections take their own sheet since Addendum 11) ---- */
.shop-side__known { margin: 0 0 8px; }
.shop-side__list--ten { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 8px; }
.shop-side__g .shop-scale__ends { display: flex; justify-content: space-between; gap: 16px; margin: 8px 0 0; }
.shop-finder__edit { display: inline-flex; align-items: center; margin-left: 8px; font-size: var(--cx-t-small); font-weight: var(--w-semi); color: var(--bp-teal); vertical-align: middle; }
.shop-finder__edit:focus-visible { outline: 2px solid var(--bp-teal); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 719px) { .shop-finder__edit { min-height: 44px; } }
/* the packages beside the sidebar from 1024 px; under it the sidebar stands above the list (on a phone folded) */
.shop-browse { display: grid; gap: 24px; }
@media (min-width: 1024px) { .shop-browse { grid-template-columns: 280px minmax(0, 1fr); gap: 32px; align-items: start; } }
.shop-browse__main { min-width: 0; }
.shop-side { min-width: 0; }
.shop-side .cx-filters.shop-side__body { display: block; padding: 0; }
.shop-side .cx-filters.shop-side__body[hidden] { display: none; }
@media (min-width: 720px) { .shop-side .cx-filters.shop-side__body[hidden] { display: block; } }
@media (min-width: 720px) and (max-width: 1023px) { .shop-side__body { columns: 2; column-gap: 32px; } .shop-side__g { break-inside: avoid; } }
.shop-side__t { margin: 0 0 8px; font-size: var(--cx-t-body); font-weight: var(--w-semi); color: var(--cx-ink); }
.shop-side__t ~ .shop-side__t { margin-top: 24px; }
.shop-side__sub { margin: 0 0 8px; }
.shop-side__g { margin: 0; padding: 16px 0; border: 0; border-top: 1px solid var(--cx-rule); min-width: 0; }
.shop-side__h { float: left; width: 100%; padding: 0; margin: 0 0 8px; font-size: var(--cx-t-small); font-weight: var(--w-semi); color: var(--cx-ink); }
.shop-side__h + * { clear: both; }
.shop-side__list { list-style: none; margin: 0; padding: 0; display: grid; }
.shop-side__list > li[hidden] { display: none; }
.shop-side__l { flex: 1 1 auto; min-width: 0; line-height: var(--cx-lh-small); }
.shop-side__n { flex: none; color: var(--cx-muted); font-variant-numeric: tabular-nums; }
.shop-side__n::before { content: "("; } .shop-side__n::after { content: ")"; }
.shop-side__o:hover .shop-side__l { color: var(--bp-teal); }
.shop-side__more { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: var(--cx-t-small); font-weight: var(--w-semi); color: var(--bp-teal); }
.shop-side__more:focus-visible { outline: 2px solid var(--bp-teal); outline-offset: 2px; border-radius: 4px; }
.shop-side__year { width: 100%; max-width: 160px; }
.shop-side__show { position: sticky; bottom: 0; padding: 16px 0; background: var(--cx-surface); }
.shop-side__show .cx-btn { width: 100%; }