/**
 * DS-FOUNDATION-1 — Core components
 */

/* -------------------------------------------------------------------------- */
/* Button                                                                     */
/* -------------------------------------------------------------------------- */

.sks-btn {
  --sks-btn-bg: var(--action-primary-bg);
  --sks-btn-color: var(--action-primary-text);
  --sks-btn-border: transparent;
  --sks-btn-hover-bg: var(--action-primary-hover);
  --sks-btn-active-bg: var(--action-primary-active);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  min-height: 2.75rem;
  padding: 0.8125rem 1.25rem;
  border: var(--border-w-strong) solid var(--sks-btn-border);
  border-radius: var(--radius-md);
  background: var(--sks-btn-bg);
  color: var(--sks-btn-color);
  font-family: var(--font-sans);
  font-size: var(--type-button-size);
  line-height: var(--type-button-lh);
  font-weight: var(--type-button-weight);
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard);
}

.sks-btn:hover {
  background: var(--sks-btn-hover-bg);
  color: var(--sks-btn-color);
  text-decoration: none;
}

.sks-btn:active {
  background: var(--sks-btn-active-bg);
}

.sks-btn:focus-visible {
  box-shadow: var(--focus-ring);
}

.sks-btn:disabled,
.sks-btn[aria-disabled='true'] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.sks-btn--ghost {
  --sks-btn-bg: transparent;
  --sks-btn-color: var(--action-secondary-text);
  --sks-btn-border: transparent;
  --sks-btn-hover-bg: var(--surface-subtle);
  --sks-btn-active-bg: var(--border-subtle);
  min-height: 2.5rem;
  padding-inline: 0.75rem;
}

.sks-btn--accent {
  --sks-btn-bg: var(--action-accent-bg);
  --sks-btn-color: var(--action-accent-text);
  --sks-btn-border: transparent;
  --sks-btn-hover-bg: var(--action-accent-hover);
  --sks-btn-active-bg: var(--action-accent-active);
}

.sks-btn--accent:hover,
.sks-btn--accent:active,
.sks-btn--accent:focus-visible {
  color: var(--action-accent-text);
}

.sks-btn--secondary {
  --sks-btn-bg: var(--action-secondary-bg);
  --sks-btn-color: var(--action-secondary-text);
  --sks-btn-border: var(--action-secondary-border);
  --sks-btn-hover-bg: var(--surface-subtle);
  --sks-btn-active-bg: var(--border-subtle);
}

.sks-btn--danger {
  --sks-btn-bg: #9b1c1c;
  --sks-btn-color: #fff;
  --sks-btn-border: #9b1c1c;
  --sks-btn-hover-bg: #7f1d1d;
  --sks-btn-active-bg: #7f1d1d;
}

.sks-btn__icon {
  display: inline-flex;
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
}

.sks-btn__icon svg {
  width: 100%;
  height: 100%;
}

/* -------------------------------------------------------------------------- */
/* Field / Input / Select                                                     */
/* -------------------------------------------------------------------------- */

.sks-field {
  display: grid;
  gap: var(--space-8);
}

.sks-field__label {
  font-size: var(--type-label-size);
  line-height: var(--type-label-lh);
  font-weight: var(--type-label-weight);
  color: var(--text-primary);
}

.sks-field__hint,
.sks-field__error {
  font-size: var(--type-small-size);
  line-height: var(--type-small-lh);
  margin: 0;
}

.sks-field__hint {
  color: var(--text-muted);
}

.sks-field__error {
  color: var(--status-error);
}

.sks-input,
.sks-select {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.6875rem 0.875rem;
  border: var(--border-w-default) solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--type-body-size);
  line-height: 1.3;
  transition:
    border-color var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard);
}

.sks-input::placeholder {
  color: var(--text-muted);
}

.sks-input:hover,
.sks-select:hover {
  border-color: #b7c4cf;
}

.sks-input:focus,
.sks-select:focus {
  outline: none;
  border-color: var(--brand-navy);
  box-shadow: var(--focus-ring);
}

.sks-input:disabled,
.sks-select:disabled {
  background: var(--surface-subtle);
  color: var(--text-muted);
  cursor: not-allowed;
}

.sks-input--error,
.sks-field--error .sks-input,
.sks-field--error .sks-select {
  border-color: var(--status-error);
}

.sks-input-wrap {
  position: relative;
}

.sks-input-wrap--search .sks-input {
  padding-left: 2.75rem;
}

.sks-input-wrap__icon {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.125rem;
  height: 1.125rem;
  color: var(--text-muted);
  pointer-events: none;
}

.sks-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23232A30' stroke-width='1.5'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  padding-right: 2.5rem;
}

/* -------------------------------------------------------------------------- */
/* Badge                                                                      */
/* -------------------------------------------------------------------------- */

.sks-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 1.25rem;
  padding: 0.12rem 0.45rem;
  border-radius: 2px;
  font-size: 0.625rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sks-badge--new {
  background: var(--badge-new);
  color: var(--text-inverse);
}

.sks-badge--campaign {
  background: var(--badge-campaign);
  color: #ffffff;
}

.sks-badge--stock-in {
  background: rgb(27 107 74 / 0.14);
  color: var(--stock-in);
  text-transform: none;
  letter-spacing: 0.01em;
}

.sks-badge--stock-low {
  background: rgb(154 106 20 / 0.14);
  color: var(--stock-low);
}

.sks-badge--stock-out {
  background: rgb(106 128 144 / 0.14);
  color: var(--stock-out);
}

/* -------------------------------------------------------------------------- */
/* Price                                                                      */
/* -------------------------------------------------------------------------- */

.sks-price {
  display: grid;
  gap: var(--space-4);
}

.sks-price__main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-8);
  color: var(--price-primary);
  font-size: var(--type-price-size);
  line-height: var(--type-price-lh);
  font-weight: var(--type-price-weight);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.sks-price--lg .sks-price__main {
  font-size: var(--type-price-lg-size);
}

.sks-price__old {
  order: -1;
  font-size: var(--type-small-size);
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: line-through;
}

.sks-price--sale .sks-price__old {
  order: -1;
  width: 100%;
}

.sks-product-card .sks-price__old {
  display: block;
  width: 100%;
  min-height: calc(var(--type-small-size) * var(--type-small-lh));
}

.sks-price--sale .sks-price__current {
  font-size: 1.05em;
}

.sks-price__vat {
  font-size: var(--type-small-size);
  line-height: var(--type-small-lh);
  color: var(--text-muted);
}

/* -------------------------------------------------------------------------- */
/* Stock status                                                               */
/* -------------------------------------------------------------------------- */

.sks-stock {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--type-small-size);
  line-height: var(--type-small-lh);
  font-weight: 500;
}

.sks-stock__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-pill);
  background: currentColor;
  flex-shrink: 0;
}

.sks-stock--in {
  color: var(--stock-in);
}

.sks-stock--low {
  color: var(--stock-low);
}

.sks-stock--out {
  color: var(--stock-out);
}

/* -------------------------------------------------------------------------- */
/* Section heading                                                            */
/* -------------------------------------------------------------------------- */

.sks-section-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-16);
  margin-bottom: var(--space-24);
}

.sks-section-heading__copy {
  display: grid;
  gap: var(--space-8);
  max-width: 40rem;
}

.sks-section-heading__link {
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  text-decoration: none;
  white-space: nowrap;
}

.sks-section-heading__link:hover {
  text-decoration: underline;
}

/* -------------------------------------------------------------------------- */
/* Feature item                                                               */
/* -------------------------------------------------------------------------- */

.sks-feature {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-16);
  align-items: start;
}

.sks-feature__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
  color: var(--brand-navy);
  border: var(--border-w-default) solid var(--border-subtle);
}

.sks-feature__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.sks-feature__title {
  margin: 0 0 var(--space-4);
  font-size: var(--type-label-size);
  line-height: var(--type-label-lh);
  font-weight: 600;
}

.sks-feature__text {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--type-small-size);
  line-height: var(--type-small-lh);
}

/* -------------------------------------------------------------------------- */
/* Category card                                                              */
/* -------------------------------------------------------------------------- */

.sks-category-card {
  display: grid;
  gap: 0.45rem;
  text-decoration: none;
  color: inherit;
  transition: transform var(--motion-medium) var(--ease-standard);
}

.sks-category-card:hover {
  color: inherit;
  text-decoration: none;
  transform: translateY(-1px);
}

.sks-category-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--media-frame-bg);
  border: var(--border-w-default) solid var(--border-subtle);
}

.sks-category-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sks-category-card__title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: 0.875rem;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--brand-navy);
}

.sks-category-card__cta,
.sks-category-card__arrow {
  font-weight: 600;
  color: var(--brand-gold);
}

.sks-category-card__arrow {
  transition: transform var(--motion-fast) var(--ease-standard);
}

.sks-category-card:hover .sks-category-card__arrow {
  transform: translateX(2px);
}

/* -------------------------------------------------------------------------- */
/* Product card                                                               */
/* -------------------------------------------------------------------------- */

.sks-product-card {
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--surface-card);
  border: var(--border-w-default) solid var(--border-default);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: none;
  transition: border-color var(--motion-medium) var(--ease-standard);
}

.sks-product-card:hover {
  border-color: #b7c4d0;
}

.sks-product-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--media-frame-bg);
}

.sks-product-card__media-link {
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.sks-product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--space-12);
}

.sks-product-card__stock-chip {
  position: absolute;
  right: var(--space-8);
  bottom: var(--space-8);
  padding: 0.2rem 0.45rem;
  border-radius: var(--radius-sm);
  background: rgb(255 255 255 / 0.92);
  border: 1px solid var(--border-subtle);
}

.sks-product-card__stock-chip .sks-stock {
  font-size: 0.6875rem;
}

.sks-product-card__badges {
  position: absolute;
  top: var(--space-8);
  left: var(--space-8);
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  max-width: calc(100% - 1rem);
}

.sks-product-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.75rem 0.85rem 0.85rem;
}

.sks-product-card__brand {
  margin: 0;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.sks-product-card__title {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--brand-navy);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.25em;
}

.sks-product-card__title a {
  color: inherit;
  text-decoration: none;
}

.sks-product-card__title a:hover {
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.sks-product-card__meta {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--text-secondary);
}

.sks-product-card__footer {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  flex: 1;
  padding-top: 0.35rem;
}

.sks-product-card__footer .sks-btn {
  margin-top: auto;
}

.sks-product-card__actions {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: var(--space-8);
  align-items: center;
}

.sks-product-card__actions .sks-btn {
  width: 100%;
  min-height: 2.35rem;
  font-size: 0.8125rem;
  min-width: 0;
}

.sks-product-card__actions--icon-only {
  grid-template-columns: auto;
  justify-content: end;
}

.sks-product-card--compact .sks-product-card__body {
  padding-bottom: 0.9rem;
}

.sks-product-card__fav {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border: var(--border-w-default) solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-base);
  color: var(--brand-navy);
  cursor: pointer;
}

.sks-product-card__fav:hover {
  background: var(--surface-subtle);
}

.sks-product-card__fav svg {
  width: 1rem;
  height: 1rem;
}

.sks-product-card--used {
  border-color: #c5d0da;
  background: var(--surface-nav-elevated, #f4f7f9);
}

.sks-product-card--used .sks-product-card__media {
  background: #e8eef3;
}

.sks-product-card--campaign {
  border-color: rgb(215 25 32 / 0.35);
  box-shadow: inset 0 2px 0 0 var(--brand-gold);
}

.sks-product-card--campaign .sks-price__current {
  color: var(--brand-navy);
  font-weight: 700;
}

.sks-product-card--campaign .sks-price__savings {
  color: #D71920;
  font-weight: 600;
}

.sks-product-card__condition {
  margin: 0;
  font-size: 0.6875rem;
  line-height: 1.35;
  color: var(--text-secondary);
  padding-block: 0.15rem;
  border-top: 1px solid var(--border-subtle);
}

.sks-badge--sale {
  background: rgb(215 25 32 / 0.18);
  color: #8a6418;
}

.sks-badge--used {
  background: rgb(61 85 102 / 0.12);
  color: var(--badge-used);
}

.sks-badge--popular {
  background: rgb(11 92 171 / 0.12);
  color: var(--badge-popular);
  text-transform: none;
}

.sks-badge--recommended {
  background: rgb(35 42 48 / 0.1);
  color: var(--badge-recommend);
  text-transform: none;
}

.sks-badge--outgoing {
  background: rgb(106 128 144 / 0.16);
  color: var(--badge-outgoing);
  text-transform: none;
}

.sks-badge--stock-order {
  background: rgb(61 85 102 / 0.12);
  color: var(--badge-order);
  text-transform: none;
}

.sks-badge--neutral {
  background: var(--surface-subtle);
  color: var(--text-secondary);
  text-transform: none;
}

.sks-price__prefix {
  font-weight: 600;
  margin-inline-end: 0.25rem;
  color: var(--text-secondary);
}

.sks-price__savings {
  margin: 0;
  font-size: var(--type-small-size);
  font-weight: 600;
  color: var(--brand-navy);
}

.sks-price__note {
  margin: 0;
  font-size: var(--type-small-size);
  color: var(--text-muted);
}

.sks-stock--order {
  color: var(--badge-order);
}

.sks-category-card__copy {
  display: grid;
  gap: var(--space-4);
}

.sks-category-card__text {
  margin: 0;
  font-size: var(--type-small-size);
  line-height: var(--type-small-lh);
  color: var(--text-secondary);
}

.sks-category-card__media {
  position: relative;
}

.sks-category-card__promo {
  position: absolute;
  top: var(--space-8);
  left: var(--space-8);
  padding: 0.2rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--brand-gold);
  color: var(--brand-navy);
  border-radius: var(--radius-sm);
}

.sks-category-card--compact .sks-category-card__media {
  aspect-ratio: 4 / 3;
}

.sks-category-card--hero .sks-category-card__media {
  aspect-ratio: 16 / 10;
}

.sks-category-card--hero .sks-category-card__media img {
  object-fit: cover;
}

.sks-category-card--promo {
  padding: var(--space-8);
  background: var(--surface-nav-elevated, #f4f7f9);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

@media (prefers-reduced-motion: reduce) {
  .sks-btn,
  .sks-category-card,
  .sks-product-card,
  .sks-category-card__arrow {
    transition: none;
  }

  .sks-category-card:hover {
    transform: none;
  }
}