/* PremiBox theme — home module overrides. Linked right after the base
   site/home.css, so equal-specificity rules win by document order.

   The hero CTA is the app's PB.Button.Hero: dimmed-red #C4101F fill under a
   metal gloss, asymmetric cut (shallow/deep alternating corners), condensed
   uppercase label. White ink is 6.1:1 on #c4101f; the base module flips the
   label to dark ink for its own dark accent (#948af0 → coral here), so the
   flip must be undone at the same specificity it was applied with. */

.pb-hero-cta {
    background: #c4101f linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.02) 45%, rgba(0, 0, 0, 0.25));
    border: 1px solid rgba(255, 100, 112, 0.45);
    border-radius: 0;
    clip-path: var(--cut-hero);
    font-family: var(--cond);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 14.5px;
    box-shadow: none;
    transition: background-color 0.15s ease, transform 0.15s ease, filter 0.15s ease;
}

/* Beats BOTH base ink-flip forms ([data-theme="dark"] block and the
   prefers-color-scheme fallback) by document order at equal specificity. */
:root[data-theme="dark"] .pb-hero-cta {
    color: #ffffff;
}

.pb-hero-cta:hover {
    background-color: #d91527;
    box-shadow: none;
    filter: drop-shadow(0 0 12px rgba(255, 46, 60, 0.4));
}

/* The quiet twin: the app's outlined button — transparent plate, warm edge,
   symmetric cut. */
.pb-hero-ghost {
    background: transparent;
    border-color: var(--border);
    border-radius: 0;
    clip-path: var(--cut-m);
    font-family: var(--cond);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 13px;
}

.pb-hero-ghost:hover {
    border-color: var(--border-strong);
    background: var(--accent-soft);
    color: var(--accent);
}

/* Home search — the app's angular skin.

   The base module is built on tokens, so the colours already arrive right
   (coral ink, near-black plates, warm borders). What does NOT arrive is the
   SHAPE: this theme has no rounded corners anywhere, it bevels them, and a
   16px-radius pill sitting on top of a page of cut plates is the one thing
   that would give away that this section was added later.

   Cut corners are clip-path, and a clipped box loses its border on the
   diagonal and clips its own shadow — the same trade the rest of this theme
   makes. Glow is therefore drop-shadow (applied after the clip), never
   box-shadow, and the focus ring on the field becomes an outline (outside the
   clip) instead of the base module's spread shadow, which would vanish. */

/* The PLATE takes the bevel, never the section — .hs holds the results
   panel, and a clip-path there would slice it off at the section's edge. */
.hs-plate {
    border-radius: 0;
    clip-path: var(--cut-l);
    background: linear-gradient(180deg, var(--surface) 0%, #0d0d16 100%);
}

/* Condensed uppercase micro-label, like every other status chip in the app. */
.hs-eyebrow {
    clip-path: var(--cut-xs);
    border-radius: 0;
    font-family: var(--cond);
    font-weight: 800;
    letter-spacing: 0.1em;
}

.hs-title {
    font-family: var(--cond);
    font-weight: 800;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.hs-field {
    border-radius: 0;
    clip-path: var(--cut-m);
    box-shadow: none;
}

/* The clip eats a spread shadow, so the focus ring is an outline instead —
   drawn outside the element, where nothing clips it. */
.hs-field:focus-within {
    box-shadow: none;
    outline: 1px solid rgba(255, 46, 60, 0.55);
    outline-offset: 1px;
}

.hs-submit {
    border: 1px solid rgba(255, 100, 112, 0.45);
    border-radius: 0;
    clip-path: var(--cut-s);
    background: #c4101f linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.02) 45%, rgba(0, 0, 0, 0.25));
    font-family: var(--cond);
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* White ink is 6.1:1 on #c4101f. The base module flips the label to dark for
   its own pale dark-mode accent; undone here at the same specificity it was
   applied with, since the fill is the app's dimmed red either way. */
:root[data-theme="dark"] .hs-submit {
    color: #ffffff;
}

.hs-submit:hover {
    background-color: #d91527;
    filter: drop-shadow(0 0 10px rgba(255, 46, 60, 0.4));
}

.hs-panel {
    border-radius: 0;
    clip-path: var(--cut-m);
}

.hs-panel-head {
    font-family: var(--cond);
    letter-spacing: 0.1em;
}

.hs-item-link {
    border-radius: 0;
    clip-path: var(--cut-xs);
}

/* App icons wear the app's 18% bevel mask, exactly like the store cards. */
.hs-item-icon {
    border: 0;
    border-radius: 0;
    clip-path: var(--cut-icon);
}

.hs-item-tag,
.hs-chip {
    border-radius: 0;
    clip-path: var(--cut-xs);
    font-family: var(--cond);
    letter-spacing: 0.06em;
}

/* The app's icon bevel, same as the store cards and the result rows. */
.hs-chip-icon {
    border-radius: 0;
    clip-path: var(--cut-icon);
}

.hs-item-tag {
    text-transform: uppercase;
}

.hs-all {
    font-family: var(--cond);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* The section's own blooms are already --accent-derived; this theme just
   wants them hotter, because red bloom IS its shadow language. */
.hs-glow-a {
    background: radial-gradient(circle, rgba(255, 46, 60, 0.16) 0%, transparent 66%);
}

.hs-glow-b {
    background: radial-gradient(circle, rgba(255, 46, 60, 0.12) 0%, transparent 64%);
}