/* Low-specificity foundation; independent from the previous homepage CSS. */
:where(.my-theme), :where(.my-theme *) { box-sizing: border-box; }
:where(.my-theme) {
  margin: 0;
  background: var(--my-bg-page);
  color: var(--my-text);
  font-family: var(--my-font);
  font-size: var(--my-type-body);
  font-weight: var(--my-weight-body);
  line-height: var(--my-leading-body);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
:where(.my-theme h1, .my-theme h2, .my-theme h3, .my-theme p, .my-theme figure, .my-theme dl, .my-theme dd) { margin: 0; }
:where(.my-theme button, .my-theme input, .my-theme textarea, .my-theme select) { font: inherit; }
:where(.my-theme button) { cursor: pointer; }
:where(.my-theme a) { color: var(--my-link); text-underline-offset: .2em; }
:where(.my-theme img) { max-width: 100%; display: block; }
:where(.my-theme [hidden]) { display: none !important; }
:where(.my-theme :focus-visible) { outline: 3px solid var(--my-focus); outline-offset: 3px; }
.my-container { width: min(var(--my-page-width), calc(100% - var(--my-page-gutter) * 2)); margin-inline: auto; }
.my-display { font-size: var(--my-type-display); font-weight: 700; line-height: var(--my-leading-title); letter-spacing: var(--my-tracking-title); }
.my-title { font-size: var(--my-type-title); font-weight: 700; line-height: 1.35; letter-spacing: -.025em; }
.my-heading { font-size: var(--my-type-heading); font-weight: 700; line-height: 1.4; letter-spacing: -.02em; }
.my-body { font-size: var(--my-type-body); line-height: var(--my-leading-body); max-width: var(--my-measure); }
.my-caption { font-size: var(--my-type-caption); line-height: 1.65; color: var(--my-text-secondary); }
.my-secondary { color: var(--my-text-secondary); }
.my-measure { max-width: var(--my-measure); }
.my-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.my-skip { position: fixed; top: -80px; left: 16px; background: var(--my-bg-surface); padding: 12px 18px; border: 1px solid var(--my-focus); z-index: 100; }
.my-skip:focus { top: 12px; }

.my-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--my-space-2);
  min-height: var(--my-control-height);
  padding: 11px 22px;
  border: 1px solid transparent;
  border-radius: var(--my-radius-control);
  background: var(--my-action);
  color: var(--my-action-text);
  font-size: var(--my-type-label);
  font-weight: 700;
  line-height: var(--my-leading-compact);
  text-decoration: none;
  text-align: center;
  transition: background var(--my-duration-fast) var(--my-ease), border-color var(--my-duration-fast) var(--my-ease);
}
.my-button:hover:not(:disabled) { background: var(--my-action-hover); }
.my-button:active:not(:disabled) { background: var(--my-action-pressed); }
.my-button--secondary { background: var(--my-bg-surface); color: var(--my-text); border-color: var(--my-border-control); }
.my-button--secondary:hover:not(:disabled) { background: var(--my-bg-page); border-color: var(--my-ink); }
.my-button--quiet { background: transparent; color: var(--my-text); border-color: transparent; }
.my-button--quiet:hover:not(:disabled) { background: var(--my-disabled-bg); }
.my-button--full { width: 100%; }
.my-button:disabled:not([aria-busy="true"]) { cursor: not-allowed; background: var(--my-disabled-bg); color: var(--my-disabled-text); border-color: transparent; }
.my-button[aria-busy="true"] { cursor: progress; }
.my-link-button { border: 0; padding: 6px 0; min-height: 44px; background: transparent; color: var(--my-link); text-decoration: underline; text-underline-offset: .22em; font-size: var(--my-type-caption); }
.my-icon-button { display: inline-grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--my-border-control); border-radius: var(--my-radius-control); background: var(--my-bg-surface); color: var(--my-text); }
.my-icon-button:disabled { color: var(--my-disabled-text); background: var(--my-disabled-bg); border-color: var(--my-border); cursor: not-allowed; }
.my-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

.my-field { display: grid; gap: var(--my-space-2); }
.my-field__label { font-size: var(--my-type-label); font-weight: 700; }
.my-input {
  width: 100%;
  min-height: var(--my-control-height);
  padding: 11px 14px;
  border: 1px solid var(--my-border-control);
  border-radius: var(--my-radius-control);
  background: var(--my-bg-surface);
  color: var(--my-text);
  font-size: var(--my-type-label);
  line-height: var(--my-leading-compact);
}
.my-input::placeholder { color: var(--my-text-secondary); }
.my-input[aria-invalid="true"] { border-color: var(--my-error); }
.my-input:disabled { background: var(--my-disabled-bg); color: var(--my-disabled-text); }
.my-help { color: var(--my-text-secondary); font-size: var(--my-type-caption); line-height: 1.6; }
.my-help--error { color: var(--my-error); }
.my-feedback { padding: 12px 15px; border-left: 3px solid var(--my-success); color: var(--my-success); background: var(--my-success-bg); font-size: var(--my-type-caption); line-height: 1.65; }
.my-feedback--error { border-color: var(--my-error); color: var(--my-error); background: var(--my-error-bg); }
.my-status { display: inline-flex; align-items: center; gap: 7px; font-size: var(--my-type-caption); font-weight: 700; line-height: 1.5; color: var(--my-text-secondary); }
.my-status svg { width: 16px; height: 16px; }
.my-status--success { color: var(--my-success); }
.my-status--error { color: var(--my-error); }

.my-price-card {
  width: 100%;
  max-width: var(--my-purchase-width);
  padding: var(--my-space-5);
  background: var(--my-bg-surface);
  border: 1px solid var(--my-border);
  border-radius: var(--my-radius-surface);
}
.my-price-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--my-space-4); }
.my-price-card__brand { display: flex; align-items: center; gap: 10px; }
.my-price-card__brand img { width: 30px; height: 30px; border-radius: 8px; }
.my-price { display: flex; align-items: baseline; gap: 6px; margin-top: var(--my-space-5); line-height: 1.15; }
.my-price strong { font-size: var(--my-type-price); letter-spacing: -.04em; }
.my-price span { font-size: var(--my-type-price-unit); }
.my-price-card__facts { padding: 0; margin: 18px 0 22px; list-style: none; display: grid; gap: 8px; }
.my-price-card__facts li { font-size: var(--my-type-label); line-height: var(--my-leading-body); }
.my-price-card .my-caption { margin-top: var(--my-space-2); }

.my-accordion { border-top: 1px solid var(--my-border); }
.my-accordion details { border-bottom: 1px solid var(--my-border); padding: 0; }
.my-accordion summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--my-space-5); padding: 19px 0; font-size: var(--my-type-label); font-weight: 700; line-height: 1.6; }
.my-accordion summary::-webkit-details-marker { display: none; }
.my-accordion summary svg { transition: transform var(--my-duration-fast) var(--my-ease); }
.my-accordion details[open] summary svg { transform: rotate(45deg); }
.my-accordion details p { padding: 0 32px 22px 0; color: var(--my-text-secondary); font-size: var(--my-type-label); max-width: var(--my-measure); }

.my-media { border: 1px solid var(--my-border); background: var(--my-bg-surface); border-radius: var(--my-radius-surface); padding: var(--my-space-5); }
.my-media__stage { min-height: 300px; display: grid; place-items: center; padding: var(--my-space-5); background: var(--my-bg-page); }
.my-media__stage.has-image { padding: 0; background: var(--my-bg-surface); }
.my-media__stage img { width: 100%; height: 350px; object-fit: contain; }
.my-media__empty { max-width: 25rem; text-align: center; }
.my-media__empty .my-icon { width: 32px; height: 32px; margin-bottom: 14px; color: var(--my-text-secondary); }
.my-media__empty p { margin: 10px 0 20px; font-size: var(--my-type-label); color: var(--my-text-secondary); }
.my-media__controls { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; }
.my-media__navigation { display: flex; align-items: center; gap: 10px; }
.my-media__caption { margin-top: 16px; }
.my-media__caption strong { display: block; font-size: var(--my-type-label); }
.my-media__caption p { font-size: var(--my-type-caption); color: var(--my-text-secondary); margin-top: 4px; }
.my-media__file { display: inline-flex; align-items: center; cursor: pointer; position: relative; }
.my-media__file:focus-within { outline: 3px solid var(--my-focus); outline-offset: 3px; }
.my-media__file input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.my-media__file .my-button { pointer-events: none; }

.my-dialog { width: min(34rem, calc(100% - 32px)); max-height: calc(100dvh - 40px); overflow: auto; padding: var(--my-space-6); border: 1px solid var(--my-border); border-radius: var(--my-radius-dialog); background: var(--my-bg-surface); color: var(--my-text); box-shadow: var(--my-shadow-dialog); }
.my-dialog::backdrop { background: var(--my-backdrop); }
.my-dialog__top { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.my-dialog p { margin-top: 18px; font-size: var(--my-type-label); }
.my-dialog__actions { display: flex; justify-content: flex-end; margin-top: 28px; }

@media (max-width: 600px) {
  .my-price-card, .my-media { padding: var(--my-space-4); }
  .my-price-card__top { display: block; }
  .my-price-card__top > .my-caption { margin-top: 10px; }
  .my-media__stage { min-height: 270px; padding: var(--my-space-4); }
  .my-media__stage img { height: 300px; }
  .my-media__controls { align-items: flex-start; flex-wrap: wrap; }
  .my-media__navigation { gap: 8px; }
  .my-dialog { padding: var(--my-space-5); }
}