/* ==========================================================================
   skin.css — our additions to the coder's assets/css/skin.css (skin concern / quiz pages).
   - cart buttons are real POST forms: the form must not become a grid/flex item of its own
   - an Admin-uploaded concern image fills the coder's coloured placeholder box
   ========================================================================== */
.sg-skin-cart, .sg-skin-save { display: contents; }
/* "Save to My Page" as a real POST button (coder's .qr-save is an <a>); saved state = ink on gold-tint */
button.qr-save { width: 100%; border: 0; font-family: inherit; cursor: pointer; }
.qr-save:hover { filter: brightness(.96); }
.qr-save.sg-qr-saved { background: transparent; border: 1px solid var(--c-gold); color: var(--c-gold); }
.qr-save.sg-qr-saved:hover { background: rgba(255, 255, 255, .06); filter: none; }
.sk-tile_img.sg-has-img, .skd-hero_img.sg-has-img { overflow: hidden; padding: 0; }
.sk-tile_img.sg-has-img img, .skd-hero_img.sg-has-img img { width: 100%; height: 100%; object-fit: cover; }
.skd-step_name:is(span):hover, .qr-prod_name:is(span):hover { text-decoration: none; }

/* Concern page: Admin decides how many routines (1–4) and may fill only Do or only Don't
   (2026-10-12). The coder's grid is a fixed 2 columns on PC, which left an empty half. */
@media (min-width: 768px) {
    .skd-routines:has(> :only-child),
    .skd-dd:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
    .skd-routines:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Event / discount on routine + quiz-result lines (skin/partials/price-cut) — the product card's
   look: c-badge label, muted struck-through old price (.c-product_old), coral "-N%" (.c-product_off). */
.sg-cut { display: flex; flex-wrap: wrap; align-items: center; gap: .04rem .06rem; margin-top: .02rem; font-size: .12rem; line-height: .16rem; }
.sg-cut s { color: var(--c-ink-muted); }
.sg-cut_off { font-weight: 700; color: var(--c-coral); }
.sg-cut_total { margin-right: .04rem; font-size: .7em; font-weight: 500; color: var(--c-ink-muted); }
/* PC quiz-result cards: a line with an event/discount is a row taller — keep every card's
   "Add to Cart" on the same baseline (info row takes the spare height). */
@media (min-width: 768px) {
    .qr-step { display: flex; flex-direction: column; }
    .qr-prod { flex: 1; grid-template-rows: auto 1fr auto; align-items: start; }
}
/* Saved Skin Quiz result: a picked product that can't be bought today ("Out of stock" / "No longer available"). */
.qr-prod_note { margin-top: .02rem; font-size: .12rem; font-weight: 600; color: var(--c-ink); opacity: .6; }