/* ==========================================================================
   02-base.css  --  reset, typography, containers, shared primitives
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--scs-surface-2);
    color: var(--scs-ink);
    font-family: var(--scs-font-body);
    font-size: var(--scs-fs-base);
    line-height: var(--scs-lh-base);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--scs-accent); }

h1, h2, h3, h4 {
    font-family: var(--scs-font-head);
    line-height: var(--scs-lh-tight);
    color: var(--scs-ink);
    margin: 0 0 var(--scs-3);
    font-weight: var(--scs-fw-bold);
}
h1 { font-size: var(--scs-fs-xl); }
h2 { font-size: var(--scs-fs-lg); }
h3 { font-size: var(--scs-fs-md); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--scs-accent);
    outline-offset: 2px;
    box-shadow: var(--scs-focus-ring);
    border-radius: var(--scs-radius-sm);
}

/* ---- layout primitives -------------------------------------------------- */
.scs-container {
    width: 100%;
    max-width: var(--scs-container);
    margin-inline: auto;
    padding-inline: var(--scs-container-pad);
}

.scs-section { margin-block: var(--scs-10); }

.scs-section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--scs-4);
    margin-bottom: var(--scs-5);
}
.scs-section__title {
    margin: 0;
    font-size: var(--scs-fs-lg);
    letter-spacing: -0.01em;
}
.scs-section__link {
    font-size: var(--scs-fs-sm);
    font-weight: var(--scs-fw-medium);
    color: var(--scs-accent);
    white-space: nowrap;
}
.scs-section__link:hover { text-decoration: underline; }

/* ---- buttons ------------------------------------------------------------ */
.scs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--scs-2);
    min-height: var(--scs-control-h);
    padding: 0 var(--scs-5);
    border: 1px solid transparent;
    border-radius: var(--scs-radius);
    background: var(--scs-accent);
    color: var(--scs-accent-contrast);
    font: var(--scs-fw-bold) var(--scs-fs-base)/1 var(--scs-font-body);
    cursor: pointer;
    transition: background var(--scs-t), border-color var(--scs-t), color var(--scs-t), transform var(--scs-t-fast);
    text-align: center;
}
.scs-btn:hover { background: var(--scs-accent-hover); color: var(--scs-accent-contrast); }
.scs-btn:active { transform: translateY(1px); }

.scs-btn--secondary {
    background: var(--scs-surface);
    color: var(--scs-ink);
    border-color: var(--scs-line-strong);
}
.scs-btn--secondary:hover {
    background: var(--scs-surface-3);
    color: var(--scs-ink);
    border-color: var(--scs-ink-3);
}
.scs-btn--ghost { background: transparent; color: var(--scs-ink); }
.scs-btn--sm { min-height: var(--scs-control-h-sm); padding-inline: var(--scs-4); font-size: var(--scs-fs-sm); }
.scs-btn--block { width: 100%; }

/* ---- form controls ------------------------------------------------------ */
.scs-input, .scs-select {
    width: 100%;
    min-height: var(--scs-control-h);
    padding: 0 var(--scs-3);
    border: 1px solid var(--scs-line-strong);
    border-radius: var(--scs-radius);
    background: var(--scs-surface);
    color: var(--scs-ink);
    font: var(--scs-fw-normal) var(--scs-fs-base)/1 var(--scs-font-body);
}
.scs-input::placeholder { color: var(--scs-ink-3); }

/* ---- badges ------------------------------------------------------------- */
.scs-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px var(--scs-2);
    border-radius: var(--scs-radius-sm);
    background: var(--scs-surface-3);
    color: var(--scs-ink-2);
    font-size: var(--scs-fs-xs);
    font-weight: var(--scs-fw-bold);
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.4;
}
.scs-badge--sale { background: var(--scs-sale-soft); color: var(--scs-sale); }
.scs-badge--new  { background: var(--scs-accent-soft); color: var(--scs-accent); }

/* ---- price presentation (shared by card and PDP) ------------------------ */
.scs-price { display: flex; align-items: baseline; gap: var(--scs-2); flex-wrap: wrap; }
.scs-price__now { font-weight: var(--scs-fw-bold); color: var(--scs-ink); }
.scs-price__was { color: var(--scs-ink-3); text-decoration: line-through; font-size: var(--scs-fs-sm); }
.scs-price--sale .scs-price__now { color: var(--scs-sale); }

/* WooCommerce emits <del>/<ins> for sale prices -- normalise to the same look. */
.price del { color: var(--scs-ink-3); text-decoration: line-through; font-size: var(--scs-fs-sm); margin-right: var(--scs-2); }
.price ins { text-decoration: none; color: var(--scs-sale); font-weight: var(--scs-fw-bold); }

/* ---- star rating -------------------------------------------------------- */
.scs-stars { display: inline-flex; gap: 1px; color: #f79009; font-size: var(--scs-fs-sm); line-height: 1; }
.scs-stars__empty { color: var(--scs-line-strong); }

/* ---- utility ------------------------------------------------------------ */
.scs-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}
.scs-scroll-lock { overflow: hidden; }