/*
 * KYPHI bridge styles.
 *
 * The commerce screens (product detail, checkout, account, wishlist, order
 * tracking) are rendered by public/js/site.js and the shared storefront
 * partials, so their class names are the historical `static-*` / `customer-*`
 * names. This file re-skins those primitives for the Kyphi shell without
 * touching the behaviour.
 */

:root {
    --kyphi-ink: #1b222c;
    --kyphi-deep: #191d26;
    --kyphi-burgundy: #9b3946;
    --kyphi-burgundy-dark: #86303c;
    --kyphi-bone: #f6f2e9;
    --kyphi-cream: #f7f4ef;
    --kyphi-line: rgb(255 255 255 / 12%);
}

/* -------------------------------------------------------------------------
 * Server-rendered product detail
 * ---------------------------------------------------------------------- */
.static-content:has(.static-product-detail) {
    max-width: 80.75rem;
    margin: 1.5rem auto 0;
    border-radius: 24px;
    background: var(--kyphi-cream);
    box-shadow: 0 24px 70px rgb(0 0 0 / 24%);
}

.static-content:has(.static-product-detail) .static-product-detail {
    margin-top: 0;
}

.static-content:has(.static-product-detail) .static-gold-button {
    border-color: var(--kyphi-burgundy);
    border-radius: 10px;
    background: var(--kyphi-burgundy);
    color: #fff;
}

.static-content:has(.static-product-detail) .static-gold-button:hover {
    border-color: var(--kyphi-burgundy-dark);
    background: var(--kyphi-burgundy-dark);
    color: #fff;
}

.static-content:has(.static-product-detail) .static-buy-now {
    border-color: var(--kyphi-deep);
    background: var(--kyphi-deep);
    color: #fff;
}

.static-content:has(.static-product-detail) .static-buy-now:hover {
    border-color: var(--kyphi-burgundy);
    background: var(--kyphi-burgundy);
}

.static-content:has(.static-product-detail) .static-tab-buttons button.active {
    color: var(--kyphi-burgundy);
    border-color: var(--kyphi-burgundy);
}

.static-content:has(.static-product-detail) .static-size-pill.active {
    border-color: var(--kyphi-deep);
    background: var(--kyphi-deep);
    color: #fff;
}

@media (max-width: 680px) {
    .static-content:has(.static-product-detail) {
        margin-top: 1rem;
        border-radius: 18px;
    }
}

/* -------------------------------------------------------------------------
 * Kyphi blog article body (raw HTML from the admin editor)
 * ---------------------------------------------------------------------- */
.kyphi-article > * + * {
    margin-top: 1.1em;
}

.kyphi-article h2,
.kyphi-article h3,
.kyphi-article h4 {
    margin-top: 1.9em;
    color: #f6f2e9;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 700;
    line-height: 1.2;
}

.kyphi-article h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.kyphi-article h3 { font-size: clamp(1.25rem, 2.1vw, 1.55rem); }

.kyphi-article a {
    color: #e0b9a1;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.kyphi-article ul,
.kyphi-article ol {
    padding-inline-start: 1.4em;
}

.kyphi-article ul { list-style: disc; }
.kyphi-article ol { list-style: decimal; }
.kyphi-article li + li { margin-top: 0.4em; }

.kyphi-article blockquote {
    margin-inline: 0;
    padding: 1rem 1.25rem;
    border-inline-start: 2px solid var(--kyphi-burgundy);
    border-radius: 0 12px 12px 0;
    background: rgb(255 255 255 / 4%);
    color: #ece7dc;
    font-style: italic;
}

.kyphi-article img {
    width: 100%;
    height: auto;
    border-radius: 18px;
}

.kyphi-article strong { color: #f6f2e9; }

/* -------------------------------------------------------------------------
 * Shop filters
 * ---------------------------------------------------------------------- */
[data-edition-filter] {
    border-radius: 6px;
    transition: color 160ms ease, background-color 160ms ease;
}

[data-edition-filter].is-active {
    background: var(--kyphi-deep);
    color: #fff;
    padding-inline: 0.5rem;
}

[data-edition-filter].is-active span { color: rgb(255 255 255 / 65%); }

[data-filter-pill][aria-pressed="true"] {
    border-color: var(--kyphi-deep);
    background: var(--kyphi-deep);
    color: #fff;
}

[data-mood].is-active span {
    outline: 2px solid var(--kyphi-burgundy);
    outline-offset: 3px;
}

[data-mood].is-active p {
    color: var(--kyphi-burgundy);
    font-weight: 700;
}

/* -------------------------------------------------------------------------
 * Customer area (checkout / account)
 * ---------------------------------------------------------------------- */
main:has(#storefront-app.customer-page) {
    background: var(--kyphi-cream);
}

#storefront-app.customer-page {
    width: 100%;
    max-width: 80.75rem;
    margin-inline: auto;
    padding-block: 2rem 4rem;
    color: #27231c;
}

#storefront-app.customer-page > header {
    padding-inline: 1rem;
}

#storefront-app.customer-page > header p {
    color: #514b3f;
}

#storefront-app.customer-page > header h1 {
    color: var(--kyphi-deep);
}

.customer-page .customer-button,
.customer-page .customer-button-gold {
    border-color: var(--kyphi-burgundy);
    background: var(--kyphi-burgundy);
    color: #fff;
}

.customer-page .customer-button:hover,
.customer-page .customer-button-gold:hover {
    border-color: var(--kyphi-burgundy-dark);
    background: var(--kyphi-burgundy-dark);
    color: #fff;
}

.customer-page .customer-button-gold {
    border-color: var(--kyphi-deep);
    background: var(--kyphi-deep);
}

.customer-page .customer-control:focus {
    border-color: var(--kyphi-burgundy);
    outline-color: rgb(155 57 70 / 22%);
}

.customer-page .account-avatar {
    border-color: var(--kyphi-burgundy);
    background: #f6eceb;
    color: var(--kyphi-burgundy);
}

/* -------------------------------------------------------------------------
 * Wishlist (site.js replaces <main> content)
 * ---------------------------------------------------------------------- */
.static-content:has(.wishlist-page) {
    max-width: 80.75rem;
}

.wishlist-page .static-gold-button {
    border-color: var(--kyphi-burgundy);
    background: var(--kyphi-burgundy);
    color: #fff;
}

.wishlist-page .static-gold-button:hover {
    border-color: var(--kyphi-burgundy-dark);
    background: var(--kyphi-burgundy-dark);
}

/* -------------------------------------------------------------------------
 * Order tracking results
 * ---------------------------------------------------------------------- */
[data-track-result] {
    border-radius: 16px;
    border-color: rgb(255 255 255 / 14%);
    background: var(--kyphi-deep);
    color: #eee9df;
}

[data-track-result] h2,
[data-track-result] strong,
[data-track-result] dd {
    color: #fff;
}

[data-track-result] dl {
    border-color: rgb(255 255 255 / 14%);
}

/* -------------------------------------------------------------------------
 * Small alignment fixes for the shared storefront overlays
 * ---------------------------------------------------------------------- */
#search-overlay #search-empty {
    display: block;
}

#toast:not(.hidden) {
    display: block;
}

.kyphi-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 680px) {
    #storefront-app.customer-page {
        padding-inline: 1rem;
    }

    .static-content:has(.wishlist-page) {
        padding-inline: 0.75rem;
    }
}