/* Э0 (T-13): эталон «атомы» specialty_v2 по паспорту docs/design/blocks/atoms.json. Размеры и отступы - числа паспорта (точно, 0 px),
   цвета, радиусы и шрифты - только токены tokens.css. Префикс sp-, БЭМ; роли проверки - data-sp-role (имена = sp_roles паспорта).
   Состояния: псевдоклассы (:hover, :focus-visible, :active, :disabled) и принудительные классы стенда is-hover / is-focus / is-active / is-disabled / is-loading /
   is-validation / is-error / is-success. Фокус - внутренняя обводка 2 px --stroke-focused (без смещения вёрстки). */

.sp-atoms {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}

.sp-atoms__group {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-4);
    margin: 0 0 var(--space-6);
}

/* ---------- кнопки ---------- */
.sp-btn {
    --btn-h: 54px;
    --btn-py: 16px;
    --btn-px: 32px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: var(--btn-h);
    margin: 0;
    padding: var(--btn-py) var(--btn-px);
    border: 0;
    border-radius: var(--radius-full);
    font: var(--font-btn-md-lg);
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease;
}

.sp-btn--large {
    --btn-h: 64px;
    --btn-py: 20px;
    --btn-px: 32px;
    font: var(--font-btn-lg);
}

.sp-btn--normal {
    --btn-h: 54px;
    --btn-py: 16px;
    --btn-px: 32px;
    font: var(--font-btn-md-lg);
}

.sp-btn--medium {
    --btn-h: 48px;
    --btn-py: 14px;
    --btn-px: 32px;
    font: var(--font-btn-md);
}

.sp-btn--small {
    --btn-h: 40px;
    --btn-py: 12px;
    --btn-px: 24px;
    font: var(--font-btn-sm);
}

.sp-btn--xsmall {
    --btn-h: 30px;
    --btn-py: 8px;
    --btn-px: 24px;
    font: var(--font-btn-xs);
}

.sp-btn--primary {
    color: var(--text-white);
    background: var(--color-main);
}

.sp-btn--secondary,
.sp-btn--secondary2 {
    border: 1px solid var(--color-main);
    color: var(--color-main);
    background: transparent;
}

.sp-btn--secondary2 {
    background: var(--color-main-xlight-blue);
}

.sp-btn--tertiary {
    border-radius: var(--radius-xs);
    color: var(--color-main);
    background: transparent;
}

/* Icon Only: квадрат, радиус 8 (Primary) и 4 (Secondary); отступы по размеру */
.sp-btn--icon {
    gap: 8px;
    width: var(--btn-h);
    padding: var(--btn-py);
}

.sp-btn--icon.sp-btn--large {
    --btn-h: 64px;
    --btn-py: 20px;
}

.sp-btn--icon.sp-btn--normal {
    --btn-h: 56px;
    --btn-py: 16px;
}

.sp-btn--icon.sp-btn--medium {
    --btn-h: 48px;
    --btn-py: 12px;
}

.sp-btn--icon.sp-btn--small {
    --btn-h: 40px;
    --btn-py: 8px;
}

.sp-btn--icon.sp-btn--xsmall {
    --btn-h: 32px;
    --btn-py: 8px;
}

.sp-btn--icon.sp-btn--primary {
    border-radius: var(--radius-sm);
}

.sp-btn--icon.sp-btn--secondary {
    border-radius: var(--radius-xs);
}

.sp-btn .sp-icon {
    flex: none;
}

/* состояния кнопок (паспорт atoms: states.hover/focus/active/click/disabled) */
.sp-btn--primary:is(:hover, .is-hover) {
    background: var(--color-main-hover);
}

.sp-btn--primary:is(:focus-visible, .is-focus) {
    background: var(--color-main-focused);
    box-shadow: inset 0 0 0 2px var(--stroke-focused);
    outline: 0;
}

.sp-btn--primary:is(.is-active) {
    background: var(--color-main);
}

.sp-btn--primary:active {
    background: var(--color-main-click);
}

.sp-btn--secondary:is(:hover, .is-hover),
.sp-btn--secondary2:is(:hover, .is-hover) {
    border-color: var(--color-main-hover);
    color: var(--color-main-hover);
    background: var(--bg-white);
}

.sp-btn--secondary2:is(:hover, .is-hover) {
    background: var(--color-hover);
}

.sp-btn--secondary:is(:focus-visible, .is-focus),
.sp-btn--secondary2:is(:focus-visible, .is-focus),
.sp-btn--tertiary:is(:focus-visible, .is-focus) {
    border-color: var(--stroke-focused);
    color: var(--color-main-focused);
    background: var(--bg-white);
    box-shadow: inset 0 0 0 1px var(--stroke-focused);
    outline: 0;
}

.sp-btn--secondary2:is(:focus-visible, .is-focus) {
    background: var(--color-hover);
}

.sp-btn--secondary:is(.is-active),
.sp-btn--secondary2:is(.is-active) {
    border-color: var(--color-main);
    color: var(--text-white);
    background: var(--color-main);
}

.sp-btn--secondary:active,
.sp-btn--secondary2:active {
    border-color: var(--color-main-click);
    color: var(--color-main-click);
    background: var(--bg-white);
}

.sp-btn--secondary2:active {
    background: var(--color-click);
}

.sp-btn--tertiary:is(:hover, .is-hover) {
    color: var(--color-main-hover);
    background: var(--bg-white);
}

.sp-btn--tertiary:active {
    color: var(--color-main-click);
}

.sp-btn--primary:is(:disabled, .is-disabled) {
    color: var(--color-main-disabled-text);
    background: var(--color-main-disabled-bg);
    cursor: default;
}

.sp-btn--secondary:is(:disabled, .is-disabled),
.sp-btn--secondary2:is(:disabled, .is-disabled) {
    border-color: var(--color-main-disabled-bg);
    color: var(--color-main-disabled-text);
    cursor: default;
}

.sp-btn--tertiary:is(:disabled, .is-disabled) {
    color: var(--color-main-disabled-text);
    background: var(--bg-white);
    cursor: default;
}

.sp-btn.is-loading {
    position: relative;
    cursor: progress;
    pointer-events: none;
}

.sp-btn.is-loading .sp-btn__label {
    opacity: 0.6;
}

/* ---------- ссылки-кнопки ---------- */
.sp-link {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: var(--radius-xs);
    color: var(--color-main);
    font: var(--font-btn-md-lg);
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
}

.sp-link--large {
    height: 24px;
    font: var(--font-btn-lg);
}

.sp-link--normal {
    height: 22px;
    font: var(--font-btn-md-lg);
}

.sp-link--medium {
    height: 20px;
    font: var(--font-btn-md);
}

.sp-link--small {
    height: 16px;
    font: var(--font-btn-sm);
}

.sp-link--xsmall {
    height: 14px;
    font: var(--font-btn-xs);
}

.sp-link:is(:hover, .is-hover) {
    color: var(--color-main-hover);
}

.sp-link:is(:focus-visible, .is-focus) {
    color: var(--color-main-focused);
    outline: 2px solid var(--stroke-focused);
    outline-offset: 2px;
}

.sp-link:active {
    color: var(--color-main-click);
}

/* ---------- поля ---------- */
.sp-field {
    transition: border-color var(--motion-fast) ease;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 340px;
    max-width: 100%;
    height: 56px;
    padding: 16px 20px;
    border: 1px solid var(--stroke-grey-light);
    border-radius: var(--radius-sm);
    color: var(--text-dark-grey);
    background: var(--bg-white);
    font: var(--font-field-placeholder);
}

.sp-field__control {
    box-sizing: border-box;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    color: inherit;
    background: transparent;
    font: inherit;
}

.sp-field__control::placeholder {
    color: var(--field-title);
    opacity: 1;
}

.sp-field--title {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    gap: 0 10px;
    padding: 8px 20px;
}

.sp-field__title {
    color: var(--text-gray);
    font: var(--font-field-title);
}

.sp-field--textarea {
    align-items: stretch;
    height: 138px;
    padding: 8px 20px;
    gap: 0;
}

.sp-field--textarea .sp-field__control {
    resize: none;
}

.sp-field--small-combined {
    height: 48px;
    font: var(--font-body-4);
}

.sp-field__icon {
    display: inline-flex;
    flex: none;
    width: 24px;
    height: 24px;
    color: var(--text-dark-grey);
}

.sp-field__status {
    display: inline-flex;
    flex: none;
    width: 16px;
    height: 16px;
}

.sp-field-group {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 340px;
    max-width: 100%;
    height: 80px;
}

.sp-field-group__description {
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    gap: 22px;
    height: 16px;
    color: var(--field-description);
    font: var(--font-field-description);
}

.sp-field:is(:hover, .is-hover) {
    border-color: var(--field-stroke-hover);
}

.sp-field:is(:focus-within, .is-focus) {
    border-color: var(--field-stroke-focused);
}

.sp-field:is(.is-disabled) {
    border-color: var(--stroke-grey-light);
    color: var(--text-gray);
}

.sp-field.is-validation {
    border-color: var(--field-stroke-validation);
}

.sp-field.is-validation .sp-field__icon {
    color: var(--text-validation);
}

.sp-field.is-error {
    border-color: var(--field-stroke-error);
}

.sp-field.is-error .sp-field__icon {
    color: var(--text-error);
}

.sp-field.is-loading {
    border-color: var(--color-main);
}

.sp-field.is-loading .sp-field__icon {
    color: var(--color-main);
}

.sp-field.is-success {
    border-color: var(--color-main);
}

.sp-field.is-success .sp-field__icon {
    color: var(--text-success);
}

/* ---------- степпер ---------- */
.sp-stepper {
    --stepper-w: 165px;
    --stepper-h: 56px;
    --stepper-py: 16px;
    --stepper-px: 24px;
    --stepper-gap: 10px;
    --stepper-icon: 24px;
    --stepper-qty: 49px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--stepper-gap);
    width: var(--stepper-w);
    height: var(--stepper-h);
    padding: var(--stepper-py) var(--stepper-px);
    border: 1px solid var(--color-main);
    border-radius: var(--radius-full);
    color: var(--color-main);
    background: transparent;
    font: var(--font-btn-md-lg);
}

.sp-stepper--large {
    --stepper-w: 171px;
    --stepper-h: 64px;
    --stepper-py: 20px;
    --stepper-qty: 55px;
    font: var(--font-btn-lg);
}

.sp-stepper--normal {
    --stepper-w: 165px;
    --stepper-h: 56px;
    --stepper-py: 16px;
    --stepper-qty: 49px;
    font: var(--font-btn-md-lg);
}

.sp-stepper--medium {
    --stepper-w: 144px;
    --stepper-h: 48px;
    --stepper-py: 14px;
    --stepper-icon: 16px;
    --stepper-qty: 44px;
    font: var(--font-btn-md);
}

.sp-stepper--small {
    --stepper-w: 119px;
    --stepper-h: 40px;
    --stepper-py: 12px;
    --stepper-px: 16px;
    --stepper-gap: 8px;
    --stepper-icon: 16px;
    --stepper-qty: 39px;
    font: var(--font-btn-sm);
}

.sp-stepper--xsmall {
    --stepper-w: 113px;
    --stepper-h: 32px;
    --stepper-py: 8px;
    --stepper-px: 16px;
    --stepper-gap: 8px;
    --stepper-icon: 16px;
    --stepper-qty: 33px;
    font: var(--font-btn-xs);
}

.sp-stepper__btn {
    box-sizing: border-box;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: var(--stepper-icon);
    height: var(--stepper-icon);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: var(--color-main);
    background: transparent;
    cursor: pointer;
}

.sp-stepper__btn:focus-visible {
    outline: 2px solid var(--stroke-focused);
    outline-offset: 2px;
}

.sp-stepper__qty {
    box-sizing: border-box;
    flex: none;
    width: var(--stepper-qty);
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    color: var(--color-main);
    background: transparent;
    font: inherit;
    text-align: center;
}

.sp-stepper--large .sp-stepper__qty {
    height: 24px;
}

.sp-stepper--normal .sp-stepper__qty {
    height: 22px;
}

.sp-stepper--medium .sp-stepper__qty {
    height: 20px;
}

.sp-stepper--small .sp-stepper__qty {
    height: 16px;
}

.sp-stepper--xsmall .sp-stepper__qty {
    height: 14px;
}

.sp-stepper:focus-within {
    box-shadow: inset 0 0 0 1px var(--stroke-focused);
}

/* ---------- теги, плашки, пилюли, счётчик ---------- */
.sp-tag {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin: 0;
    border: 0;
    text-decoration: none;
    white-space: nowrap;
    font: var(--font-btn-xs);
}

.sp-tag--tag {
    gap: 10px;
    height: 32px;
    padding: 8px 16px;
    border: 1px solid var(--color-main);
    border-radius: var(--radius-sm);
    color: var(--color-main);
    background: var(--bg-white);
    font: var(--font-body-4);
}

.sp-tag--tag-pill,
.sp-tag--tag-pill-secondary {
    gap: 10px;
    height: 40px;
    padding: 10px 16px;
    border: 1px solid var(--color-main);
    border-radius: var(--radius-full);
    color: var(--color-main);
    background: var(--bg-white);
    font: var(--font-tag);
}

.sp-tag--tag-pill-secondary {
    border-color: var(--stroke-grey-dark);
    color: var(--text-dark-grey);
}

.sp-tag--tag-selected {
    gap: 0;
    height: 40px;
    padding: 6px 16px;
    border-radius: var(--radius-full);
    color: var(--color-main);
    background: var(--color-main-xlight-blue);
    font: var(--font-tag);
}

.sp-tag--tag-filter-normal {
    height: 24px;
    padding: 4px 10px;
    border: 1px solid var(--color-main);
    border-radius: var(--radius-full);
    color: var(--color-main);
    background: var(--bg-white);
    font: var(--font-btn-sm);
}

.sp-tag--tag-filter-small,
.sp-tag--tag-filter-small-square {
    height: 22px;
    padding: 4px 8px;
    border: 1px solid var(--color-main);
    border-radius: var(--radius-full);
    color: var(--color-main);
    background: var(--bg-white);
}

.sp-tag--tag-filter-small-square {
    border-radius: var(--radius-0);
}

.sp-tag--tag-card-new,
.sp-tag--tag-card-sale,
.sp-tag--tag-card-advice,
.sp-tag--tag-card-unavailable,
.sp-tag--tag-card-on-order {
    height: 22px;
    padding: 4px 8px;
    border: 1px solid var(--color-main);
    border-radius: var(--radius-0);
    color: var(--color-main);
    background: var(--bg-badge);
}

.sp-tag--tag-card-sale {
    border-color: var(--color-pink-light);
    color: var(--color-pink-light);
    background: var(--bg-white);
}

.sp-tag--tag-card-advice {
    border-color: var(--color-main-xlight-blue);
    background: var(--color-main-xlight-blue);
}

.sp-tag--tag-card-unavailable {
    border-color: var(--stroke-grey-dark);
    color: var(--text-dark-grey);
    background: var(--bg-light-grey);
}

.sp-tag--tag-card-on-order {
    border: 0;
    color: var(--text-dark-grey);
    background: var(--color-main-xlight-blue);
}

.sp-tag--label-sca {
    gap: 10px;
    height: 24px;
    padding: 6px 16px;
    border-radius: var(--radius-0);
    color: var(--text-black);
    background: var(--color-main-xlight-blue);
    font: 500 12px/12px var(--font-base);
}

.sp-tag--pill-weight {
    gap: 10px;
    width: 43px;
    height: 24px;
    padding: 6px;
    border-radius: var(--radius-full);
    color: var(--text-dark-grey-2);
    background: var(--bg-white);
    font: var(--font-small-sb);
}

.sp-tag--pill-grind {
    width: 36px;
    height: 24px;
    padding: 6px 5px;
    border-radius: var(--radius-full);
    color: var(--text-dark-grey-2);
    background: var(--bg-white);
}

.sp-tag--counter {
    width: 29px;
    height: 18px;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    color: var(--text-white);
    background: var(--color-main);
}

/* состояния тегов (паспорт atoms: states) */
.sp-tag--tag-pill:is(:hover, .is-hover),
.sp-tag--tag-filter-normal:is(:hover, .is-hover),
.sp-tag--tag-filter-small:is(:hover, .is-hover),
.sp-tag--tag-filter-small-square:is(:hover, .is-hover) {
    border-color: var(--color-main-hover);
    color: var(--color-main-hover);
    background: var(--bg-white);
}

.sp-tag--tag-selected:is(:hover, .is-hover) {
    background: var(--color-hover);
}

.sp-tag--tag-pill:is(:focus-visible, .is-focus),
.sp-tag--tag-filter-normal:is(:focus-visible, .is-focus),
.sp-tag--tag-filter-small:is(:focus-visible, .is-focus),
.sp-tag--tag-filter-small-square:is(:focus-visible, .is-focus) {
    border-color: var(--stroke-focused);
    color: var(--color-main-focused);
    background: var(--bg-white);
    outline: 0;
}

.sp-tag--tag:is(:focus-visible, .is-focus) {
    border-color: var(--stroke-focused);
    color: var(--text-white);
    background: var(--color-main);
    outline: 0;
}

.sp-tag--tag-pill.is-active,
.sp-tag--tag-filter-normal.is-active,
.sp-tag--tag-filter-small.is-active,
.sp-tag--tag-filter-small-square.is-active,
.sp-tag--tag.is-active {
    border-color: var(--color-main);
    color: var(--text-white);
    background: var(--color-main);
}

.sp-tag--pill-weight.is-active {
    border: 1px solid var(--color-main);
    color: var(--color-main);
}

.sp-tag--tag-pill:is(.is-disabled),
.sp-tag--tag-filter-normal:is(.is-disabled),
.sp-tag--tag-filter-small:is(.is-disabled),
.sp-tag--tag-filter-small-square:is(.is-disabled) {
    border-color: var(--color-main-disabled-bg);
    color: var(--color-main-disabled-text);
    background: var(--color-main-disabled-bg);
}

.sp-tag--counter:is(:hover, .is-hover) {
    background: var(--color-main-dark);
}

@media (prefers-reduced-motion: reduce) {
    .sp-btn,
    .sp-field,
    .sp-stepper,
    .sp-tag {
        transition: none;
    }
}