/* A care shop's own screens (src/examples/ex-store-care.js), laid over the Online Store engine's:
   the line about a chosen shelf, products side by side, the care-routine page and the quiet links
   from a product to the services it is suggested after. Layout only: every colour, radius and
   display face is the business's own (--x-* on main#main). Phone first; wider screens add columns. */

/* ---- the shop: the shelf that is chosen ------------------------------------------------- */
.xs-care-shelf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: clamp(14px, 2.4vw, 20px); border: 1px solid var(--x-hair); border-radius: var(--x-radius, 8px); background: var(--x-surface); }
.xs-care-shelf-text { display: grid; gap: 4px; flex: 1 1 18rem; min-width: 0; }
.xs-care-shelf h2 { font-size: 1.25rem; }
.xs-care-shelf p { color: var(--x-muted); }

/* ---- one product: beside another, and after a service ----------------------------------- */
.xs-care-with { display: grid; gap: 2px; padding-top: 12px; border-top: 1px solid var(--x-hair); }
.xs-care-with .x-row { --x-gap: 4px 20px; }
.xs-care-after { display: grid; gap: 14px; padding-top: clamp(18px, 3vw, 28px); border-top: 1px solid var(--x-hair); }
.xs-care-after-services { display: grid; gap: 6px; }
.xs-care-after h2 { font-size: 1.125rem; }
.xs-care-after .x-row { --x-gap: 4px 24px; }

/* ---- side by side ----------------------------------------------------------------------- */
.xs-care-tools { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 32px; padding-block: 16px; border-block: 1px solid var(--x-hair); }
.xs-care-add { flex: 1 1 16rem; max-width: 28rem; }
.xs-care-tools > .x-hint { flex: 1 1 16rem; }
/* What is being compared stays small, a photograph beside a name, so the comparison itself is close under it. */
.xs-care-picks { --x-min: 15rem; }
.xs-care-picks .x-card { flex-direction: row; }
.xs-care-picks .x-card-media { flex: 0 0 clamp(84px, 30%, 124px); border-radius: calc(var(--x-radius, 8px) - 1px) 0 0 calc(var(--x-radius, 8px) - 1px); }
.xs-care-picks .x-card-media .x-img { height: 100%; min-height: 112px; aspect-ratio: auto !important; }
.xs-care-picks .x-card-body { min-width: 0; padding: 12px 14px 14px; }
.xs-care-picks .x-card-actions { flex-wrap: wrap; gap: 4px 8px; }
@media (min-width: 37.5em) {
  .xs-care-picks--1, .xs-care-picks--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 48rem; }
  .xs-care-picks--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.xs-care-list { display: grid; gap: 4px; padding-inline-start: 1.2em; list-style: disc; }
.xs-care-list--steps { list-style: decimal; }
.xs-care-out { color: var(--x-danger); white-space: nowrap; }
.xs-care-shelves { display: grid; gap: 10px; }
.xs-care-shelves h2 { font-size: 1.125rem; }
/* The comparison reads down a column: every point starts at the top of its cell. */
#xs-care-table td, #xs-care-table th { vertical-align: top; }
@media (min-width: 37.5em) { #xs-care-table th:first-child { width: 11rem; } }

/* ---- the care routine ------------------------------------------------------------------- */
.xs-care-routine { display: grid; align-content: start; gap: clamp(22px, 4vw, 40px); }
.xs-care-routine > * { min-width: 0; }
.xs-care-steps { display: grid; }
.xs-care-step { display: grid; gap: 16px clamp(24px, 5vw, 64px); padding-block: clamp(20px, 3.4vw, 34px); border-top: 1px solid var(--x-hair); }
.xs-care-step:last-child { border-bottom: 1px solid var(--x-hair); }
.xs-care-step-text { display: grid; align-content: start; gap: 8px; max-width: 40rem; }
.xs-care-step-text h2 { font-size: clamp(1.5rem, 3.2vw, 2rem); }
.xs-care-step-uses { display: grid; align-content: start; gap: 8px; min-width: 0; }
.xs-care-uses-h { color: var(--x-muted); font: 700 .8125rem/var(--x-lh-label) var(--x-text); letter-spacing: var(--x-caps-track); text-transform: var(--x-caps); }
.xs-care-items { display: grid; }
.xs-care-item { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 4px 14px; padding-block: 10px; border-top: 1px solid var(--x-hair); }
.xs-care-item-img .x-img { width: 56px; border-radius: calc(var(--x-radius, 8px) * .6); }
.xs-care-item-main { display: grid; gap: 0; min-width: 0; overflow-wrap: anywhere; }
.xs-care-item-main .x-link { font-weight: 600; justify-self: start; max-width: 100%; }
.xs-care-block { display: grid; gap: 10px; }
.xs-care-block > h2 { font-size: clamp(1.25rem, 2.6vw, 1.5rem); }
.xs-care-services { display: grid; max-width: 44rem; }
.xs-care-services li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px; min-height: 48px; border-top: 1px solid var(--x-hair); }
.xs-care-services li:last-child { border-bottom: 1px solid var(--x-hair); }
@media (min-width: 53.75em) {
  .xs-care-step { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
}

/* ---- an order collected with an appointment --------------------------------------------- */
.xs-care-visit-ask { display: grid; gap: 12px; padding-top: 16px; border-top: 1px solid var(--x-hair); }
.xs-care-visit { display: grid; gap: 8px; padding: clamp(14px, 2.4vw, 20px); border: 1px solid var(--x-hair); border-radius: var(--x-radius, 8px); background: var(--x-surface); }
.xs-care-visit h2 { font-size: 1.125rem; }
/* On the customer's page it keeps to the column the order's own summary is set in. */
.xs-order .xs-care-visit { max-width: 44rem; }

/* ---- the checkout on a narrow screen ---------------------------------------------------- */
/* Under 64em the engine means the cart to be said once, in the line above the step, and its list beside the
   step to be hidden; a later rule of its own (.xs-cols-side) shows the list again, so it is hidden here. */
@media (max-width: 63.99em) { .xs-checkout--cols .xs-aside { display: none; } }