/*
 * HPM Sport brand layer (approved handover 2026-10-22, docs/brand/hpm-sport-2026-10-22).
 *
 * Static on purpose: the Vite/Tailwind build is not rebuilt for this rollout,
 * so every rule the new identity needs lives here. Unlayered CSS, so it wins
 * over the Tailwind utilities (which sit in @layer utilities). Every selector
 * is scoped to .hpm-* classes; global typography and the semantic
 * green/red/status colours are untouched.
 */
:root {
    --hpm-ink: #171717;
    --hpm-accent: #ff3c00;
    --hpm-frame: #f5f5f5;
    --hpm-surface: #fff;
    --hpm-text-muted: #555;
}

/* ---------- Wordmark (raster artwork; never CSS text) ---------- */
.hpm-brand-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    border-radius: 2px;
}
/* The ring takes the link's own text colour, which contrasts with its surface:
   charcoal on the white header, white on the dark auth photo panels
   (text-white), where a fixed charcoal ring around the light plate was
   invisible (WCAG 2.4.7). */
.hpm-brand-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}
.hpm-logo {
    display: block;
    width: 144px;
    max-width: 100%;
    height: auto;
}
.hpm-logo picture,
.hpm-logo-picture {
    display: block;
}
.hpm-logo--footer,
.hpm-logo--auth {
    width: 176px;
}
.hpm-logo--compact {
    width: 112px;
}
/* Dark surfaces: the charcoal mark sits on a light plate (no CSS inversion). */
.hpm-logo-plate {
    display: inline-flex;
    align-items: center;
    background: var(--hpm-surface);
    padding: 12px 16px;
    border-radius: 4px;
    line-height: 0;
}
@media (max-width: 767px) {
    .hpm-logo {
        width: 112px;
    }
    .hpm-logo--footer,
    .hpm-logo--auth {
        width: 144px;
    }
}

/* ---------- Product image frame / placeholder ---------- */
.hpm-pimg {
    width: 100%;
    height: 100%;
}
/* Unlayered rules beat Tailwind utilities, so never fight a caller's
   "flex" or "absolute" utility class on the wrapper. */
.hpm-pimg:not(.flex) {
    display: block;
}
.hpm-pimg:not(.absolute) {
    position: relative;
}
/* State rules use the data attributes, so a gallery frame that is not a
   .hpm-pimg wrapper (the PDP main image) follows the same contract. */
[data-hpm-pimg][data-hpm-state="placeholder"],
[data-hpm-pimg][data-hpm-state="failed"] {
    background: var(--hpm-frame);
}
.hpm-pimg picture {
    display: block;
    width: 100%;
    height: 100%;
}
.hpm-pimg__fallback,
[data-hpm-pimg][data-hpm-state="placeholder"] img[data-hpm-img] {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    padding: 0;
    object-fit: contain;
    object-position: center;
    transform: none;
}
[data-hpm-pimg][data-hpm-state="failed"] img[data-hpm-img],
img[data-hpm-img][data-hpm-state="failed"] {
    display: none;
}
.hpm-pimg__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4%;
    padding: 0 4px;
    text-align: center;
    color: var(--hpm-text-muted);
    font-size: 0.6875rem;
    line-height: 1.3;
    pointer-events: none;
}
.hpm-pimg__missing {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    text-align: center;
    color: var(--hpm-text-muted);
    font-size: 0.75rem;
    line-height: 1.4;
}
.hpm-pimg__caption[hidden],
.hpm-pimg__missing[hidden] {
    display: none;
}
/* Compact slots (cart, checkout, order lists): the alt text is enough. */
.hpm-pimg--compact .hpm-pimg__missing {
    font-size: 0.625rem;
    padding: 2px;
}

/* ---------- Service / help character (decorative) ---------- */
.hpm-mechanic {
    display: block;
    width: auto;
    height: 180px;
    max-width: 100%;
    object-fit: contain;
}
@media (min-width: 768px) {
    .hpm-mechanic {
        height: 260px;
    }
}