/* Aphro Product Labels: short labels on product cards and product pages,
 * the brand above the name, and quick filters above the shop grid.
 * Colours come from the site's tokens, so dark mode follows them. */

/* ---- labels ------------------------------------------------------------ */
.aphro-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.aphro-labels > li {
    display: flex;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.aphro-labels__chip {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    min-height: 22px;
    box-sizing: border-box;
    padding: 2px 9px;
    overflow: hidden;
    border: 1px solid var(--adf-line, rgba(36, 22, 30, .12));
    border-radius: 999px;
    background: var(--adf-tile, #f8f3f1);
    color: var(--adf-ink, #24161e);
    font-family: var(--adf-sans, "Inter", ui-sans-serif, system-ui, sans-serif);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .01em;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Materials stand out a little: they are what shoppers ask about most. */
.aphro-labels__chip--material {
    border-color: rgba(178, 77, 100, .26);
    background: var(--adf-blush, #f8e9e8);
    color: var(--adf-rose-text, #a9475d);
}

html.aphro-dark .aphro-labels__chip--material {
    border-color: rgba(240, 161, 178, .34);
}

/* Cards: one line under the name. A label that does not fit on it is left
 * out whole (the line is one label high), so every card keeps its shape. */
.aphro-labels--card {
    height: 22px;
    overflow: hidden;
}

.product-card .aphro-labels--card {
    margin: 8px 0 0;
}

.aphro-codex-product .aphro-labels--card {
    margin: 8px 0 2px;
}

/* Prices and buttons stay level across a row whether or not a card has
 * labels or a brand: the card's text column fills the card and the price
 * sits at its foot. */
.product-grid .product-card {
    display: flex;
    flex-direction: column;
}

.product-grid .product-card > .product-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}

.product-grid .product-card .product-card__price {
    margin-top: auto;
    padding-top: 10px;
}

/* Product page: every label, each one a link to similar products. */
.aphro-labels--product {
    gap: 8px;
    margin: 16px 0 18px;
}

.aphro-labels--product .aphro-labels__chip {
    min-height: 32px;
    padding: 6px 13px;
    font-size: 13px;
    transition: border-color .15s ease, color .15s ease;
}

a.aphro-labels__chip:hover,
a.aphro-labels__chip:focus-visible {
    border-color: var(--adf-rose, #b24d64);
    color: var(--adf-rose-text, #a9475d);
}

/* ---- brand ------------------------------------------------------------- */
.aphro-label-brand {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: var(--adf-muted, #6f6770);
    font-family: var(--adf-sans, "Inter", ui-sans-serif, system-ui, sans-serif);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .12em;
    text-decoration: none;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.aphro-label-brand--card {
    margin: 0 0 5px;
}

.aphro-label-brand--product {
    display: inline-block;
    margin: 0 0 10px;
    color: var(--adf-rose-text, #a9475d);
    font-size: 12px;
    letter-spacing: .14em;
}

a.aphro-label-brand--product:hover,
a.aphro-label-brand--product:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---- quick filters above the shop grid ---------------------------------- */
.aphro-label-filter,
.aphro-brand-intro {
    width: min(1780px, calc(100% - 64px));
    margin: 0 auto 18px;
}

body.aphro-premium-catalog .aphro-label-filter {
    width: min(1820px, calc(100% - 72px));
}

.aphro-label-filter ul {
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 2px 2px 6px;
    overflow-x: auto;
    list-style: none;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.aphro-label-filter ul::-webkit-scrollbar {
    display: none;
}

.aphro-label-filter li {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

.aphro-label-filter__chip {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    box-sizing: border-box;
    padding: 8px 15px;
    border: 1px solid var(--adf-line, rgba(36, 22, 30, .12));
    border-radius: 999px;
    background: var(--adf-surface, #fff);
    color: var(--adf-ink, #24161e);
    font-family: var(--adf-sans, "Inter", ui-sans-serif, system-ui, sans-serif);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.aphro-label-filter__chip:hover,
.aphro-label-filter__chip:focus-visible {
    border-color: var(--adf-rose, #b24d64);
    color: var(--adf-rose-text, #a9475d);
}

.aphro-label-filter__chip.is-active,
.aphro-label-filter__chip.is-active:hover {
    border-color: var(--adf-ink, #24161e);
    background: var(--adf-ink, #24161e);
    color: var(--adf-bg, #fcfaf8);
}

/* ---- brand pages -------------------------------------------------------- */
.aphro-brand-intro {
    padding: 8px 0 4px;
}

.aphro-brand-intro__kicker {
    margin: 0 0 6px;
    color: var(--adf-rose-text, #a9475d);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.aphro-brand-intro h1 {
    margin: 0;
    color: var(--adf-ink, #24161e);
    font-family: var(--adf-serif, "Cardo", Georgia, serif);
    font-size: clamp(30px, 3.6vw, 48px);
    line-height: 1.1;
}

.aphro-brand-intro h1 + p {
    max-width: 70ch;
    margin: 12px 0 0;
    color: var(--adf-muted, #6f6770);
}

@media (max-width: 600px) {
    .aphro-label-filter,
    .aphro-brand-intro,
    body.aphro-premium-catalog .aphro-label-filter {
        width: calc(100% - 32px);
    }

    .aphro-label-filter__chip {
        min-height: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .aphro-labels__chip,
    .aphro-label-filter__chip {
        transition: none;
    }
}