/* ===================================================================
   Makeup Artist Pro — Products Browse Page
   Design: Luxury Editorial · Cormorant Garamond + Outfit
   Color palette: Burgundy (#550000) / Cream (#ffe4e4)
   =================================================================== */

/* ── Shared product-media tokens ──────────────────────────────────
   One system for every product image box on the site (browse, category,
   brand, compare, search typeahead). Source imagery is square by
   contract (Ulta 1024x1024, Sephora 1200x1200), so the media box is
   square too: object-fit contain then wastes no space and never crops.
   Keep these values identical in product_category.css, brand.css,
   product_compare.css and product_search.css.
   ---------------------------------------------------------------- */
:root {
    --prod-media-ratio: 1 / 1;   /* fixed box ratio — no layout shift  */
    --prod-media-pad: 8%;        /* inset so products never touch edge */
    --prod-media-bg: #ffffff;    /* one background behind every shot   */
}

/* ── Design tokens ── */
.pb-page {
    --c-black:      #550000;
    --c-white:      #ffffff;
    --c-cream:      #ffe4e4;
    --c-warm-gray:  #ffc4c4;
    --c-mid-gray:   #cc9999;
    --c-text:       #550000;
    --c-text-light: #8a4444;
    --c-gold:       #890808;
    --c-gold-light: #992424;
    --c-blush:      #ffc4c4;
    --font-display: 'Cormorant Garamond', serif;
    --font-body:    'Outfit', sans-serif;
    --radius:       12px;

    background: var(--c-white);
    color: var(--c-text);
    font-family: var(--font-body);
}

/* ── Animations ── */
@keyframes pb-fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes pb-fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes pb-drawLine {
    from { width: 0; opacity: 0; }
    to   { width: 40px; opacity: 1; }
}

.pb-fade-in-up {
    opacity: 0;
    animation: pb-fadeInUp 0.85s ease forwards;
}

.pb-fade-in {
    opacity: 0;
    animation: pb-fadeIn 0.6s ease forwards;
}

/* Stagger delays */
.pb-stagger-1 { animation-delay: 0.10s; }
.pb-stagger-2 { animation-delay: 0.25s; }
.pb-stagger-3 { animation-delay: 0.40s; }
.pb-stagger-4 { animation-delay: 0.55s; }
.pb-stagger-5 { animation-delay: 0.70s; }
.pb-stagger-6 { animation-delay: 0.85s; }

/* ── Breadcrumbs ── */
.pb-breadcrumb {
    background: #fff5f5;
    border-bottom: 1px solid var(--c-warm-gray);
    padding: 0.75rem 1.5rem;
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: var(--c-text-light);
}

.pb-breadcrumb ol {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    max-width: 1200px;
}

.pb-breadcrumb li::after {
    content: '/';
    margin-left: 0.5rem;
    color: var(--c-mid-gray);
}

.pb-breadcrumb li:last-child::after { display: none; }

.pb-breadcrumb a {
    color: var(--c-gold);
    text-decoration: none;
    transition: opacity 0.2s;
}

.pb-breadcrumb a:hover { opacity: 0.75; }

/* ── Hero (editorial split: oversized type + floating product shots) ── */
.pb-hero {
    position: relative;
    /* Top padding tuned by feedback, settled at 4rem — search sits right
       under the headline (see markup) and its results dropdown needs
       headroom below it before the viewport fold. See .pb-hero__inner for
       the other half of this fix (align-items: start, not center). */
    padding: 4rem 1.5rem 3.5rem;
    isolation: isolate;
    background:
        linear-gradient(135deg, #ffffff 0%, #fff3f2 55%, #ffe3e6 100%);
}

/* Soft background stage (clips its own contents so the search dropdown
   can still overflow the hero — see product_search.css). */
.pb-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.pb-hero__blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    mix-blend-mode: multiply;
    will-change: transform;
}

.pb-hero__blob--1 {
    width: 38vw; height: 38vw;
    min-width: 340px; min-height: 340px;
    right: -6%; top: -16%;
    background: radial-gradient(circle at 40% 40%, #ffb0bd 0%, transparent 66%);
    opacity: 0.55;
    animation: pb-drift-1 18s ease-in-out infinite;
}

.pb-hero__blob--2 {
    width: 30vw; height: 30vw;
    min-width: 260px; min-height: 260px;
    left: -8%; bottom: -22%;
    background: radial-gradient(circle at 50% 50%, #f6c9a8 0%, transparent 64%);
    opacity: 0.5;
    animation: pb-drift-2 22s ease-in-out infinite;
}

.pb-hero__grain {
    position: absolute;
    inset: 0;
    opacity: 0.05;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@keyframes pb-drift-1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-5%, 6%) scale(1.1); }
}
@keyframes pb-drift-2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(6%, -5%) scale(1.12); }
}

/* Asymmetric two-column layout */
.pb-hero__inner {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    /* Was center: with the media column's fixed 420px height taller than the
       text column (now shorter since the eyebrow/badge were removed), that
       centered the text with visibly more empty space above the headline
       than below it. Top-align instead. */
    align-items: start;
    gap: 2.5rem;
}

.pb-hero__text {
    text-align: left;
}

.pb-hero__title {
    font-family: var(--font-display);
    font-size: clamp(3.4rem, 7.5vw, 6rem);
    font-weight: 400;
    letter-spacing: -0.015em;
    line-height: 0.98;
    margin: 0 0 1.1rem;
    color: var(--c-black);
}

.pb-hero__title span {
    display: block;
}

/* Second word in a warm rose-gold foil with a slow shimmer sweep */
.pb-hero__title span:last-child {
    background: linear-gradient(
        100deg,
        #8a0d1a 0%, #c2536b 28%, #e0997f 46%,
        #f2c2a8 52%, #e0997f 58%, #c2536b 74%, #8a0d1a 100%
    );
    background-size: 220% auto;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: pb-shimmer 7s linear infinite;
}

@keyframes pb-shimmer {
    to { background-position: 220% center; }
}

.pb-hero__subtitle {
    font-family: var(--font-body);
    font-size: 1.02rem;
    font-weight: 300;
    color: var(--c-text-light);
    max-width: 600px;
    /* Now trails the search bar (see markup) rather than leading it. */
    margin: 1.5rem 0 0;
    line-height: 1.7;
    letter-spacing: 0.01em;
}

/* Floating product shots — the image-led half of the hero */
.pb-hero__media {
    position: relative;
    height: 420px;
}

.pb-hero__shot {
    position: absolute;
    margin: 0;
    border-radius: 22px;
    background: linear-gradient(160deg, #ffffff 0%, #fff6f6 100%);
    border: 1px solid rgba(214, 160, 160, 0.3);
    box-shadow: 0 24px 60px rgba(137, 8, 8, 0.16);
    overflow: hidden;
    will-change: transform;
}

.pb-hero__shot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: var(--prod-media-pad);
    box-sizing: border-box;
}

/* Square frames: the collage keeps its staggered scale, but a square
   source no longer letterboxes inside a 4:5 frame. */
.pb-hero__shot--1 {
    width: 240px; height: 240px;
    left: 8%; top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    animation: pb-bob 7s ease-in-out infinite;
}

.pb-hero__shot--2 {
    width: 170px; height: 170px;
    right: 14%; top: 4%;
    z-index: 2;
    animation: pb-bob 8s ease-in-out infinite 0.6s;
}

.pb-hero__shot--3 {
    width: 160px; height: 160px;
    right: 6%; bottom: 2%;
    z-index: 2;
    animation: pb-bob 9s ease-in-out infinite 1.2s;
}

@keyframes pb-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-14px); }
}
.pb-hero__shot--1 {
    animation-name: pb-bob-center;
}
@keyframes pb-bob-center {
    0%, 100% { transform: translateY(-50%); }
    50%      { transform: translateY(calc(-50% - 14px)); }
}

/* Search bar — left-aligned, glowing (scoped to this hero only) */
.pb-hero .pb-search {
    max-width: 440px;
    /* Title's own margin-bottom already spaces it off the headline — this
       just needed a touch more, not the 1.5rem it had when it trailed the
       subtitle instead. */
    margin: 0.3rem 0 0;
}

.pb-hero .pb-search__input-wrap::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 999px;
    background: linear-gradient(120deg, #ffb0bd, #f6c9a8, #c2536b);
    filter: blur(15px);
    opacity: 0.4;
    z-index: -1;
    transition: opacity 0.35s ease;
}

.pb-hero .pb-search:focus-within .pb-search__input-wrap::after {
    opacity: 0.72;
}

.pb-hero .pb-search__input {
    padding: 0.95rem 2.5rem 0.95rem 2.75rem;
    font-size: 0.95rem;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow:
        0 10px 34px rgba(85, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.pb-hero .pb-search__icon {
    left: 1.1rem;
}

/* Editorial split → stacks on tablet/mobile */
@media (max-width: 900px) {
    .pb-hero__inner {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .pb-hero__text {
        text-align: center;
    }
    .pb-hero__subtitle {
        margin-left: auto;
        margin-right: auto;
    }
    .pb-hero .pb-search {
        margin-left: auto;
        margin-right: auto;
    }
    .pb-hero__media {
        order: -1;
        height: 280px;
    }
    .pb-hero__shot--1 { left: 50%; transform: translate(-50%, -50%); }
    @keyframes pb-bob-center {
        0%, 100% { transform: translate(-50%, -50%); }
        50%      { transform: translate(-50%, calc(-50% - 12px)); }
    }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    .pb-hero__blob,
    .pb-hero__shot,
    .pb-hero__title span:last-child {
        animation: none;
    }
}

/* ── Layout ── */
.pb-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.pb-section {
    padding: 4rem 0;
}

.pb-section--alt {
    background: #fff8f8;
}

/* ── Section header ── */
.pb-section__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 2.25rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pb-section__heading-wrap {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.pb-section__accent {
    display: block;
    width: 40px;
    height: 2px;
    background: var(--c-gold);
    margin-bottom: 0.85rem;
    border: none;
}

.pb-section__title {
    font-family: var(--font-display);
    font-size: clamp(1.55rem, 3vw, 2rem);
    font-weight: 500;
    font-style: italic;
    color: var(--c-text);
    margin: 0;
    line-height: 1.2;
}

.pb-section__link {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--c-gold);
    text-decoration: none;
    white-space: nowrap;
    align-self: flex-end;
    transition: text-decoration 0.2s;
}

.pb-section__link:hover {
    text-decoration: underline;
}

/* Category count pill badge */
.pb-category-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--c-gold);
    background: var(--c-cream);
    border: 1px solid var(--c-warm-gray);
    border-radius: 999px;
    padding: 0.15rem 0.65rem;
    vertical-align: middle;
    margin-left: 0.6rem;
    position: relative;
    top: -0.1em;
}

/* ── Separator ── */
.pb-sep {
    border: none;
    border-top: 1px solid var(--c-warm-gray);
    margin: 0 auto;
    max-width: 80%;
    opacity: 0.7;
}

/* Decorative dot separator */
.pb-sep--dots {
    border: none;
    text-align: center;
    margin: 1.5rem auto;
    font-size: 1.1rem;
    letter-spacing: 0.5em;
    color: var(--c-warm-gray);
    max-width: 80%;
    line-height: 1;
    user-select: none;
}

/* ── Category / Brand switcher ── */
.pb-shop-tabs-wrap {
    width: 100%;
}

.pb-shop-tabs {
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(0, auto));
    gap: 0.3rem;
    padding: 0.3rem;
    border: 1px solid rgba(214, 160, 160, 0.5);
    border-radius: 999px;
    background: #fff1f1;
}

.pb-shop-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    min-height: 52px;
    padding: 0.7rem 1.25rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--c-text-light);
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 2.4vw, 1.65rem);
    font-style: italic;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.pb-shop-tab:hover:not([aria-selected="true"]) {
    color: var(--c-text);
    background: rgba(255, 255, 255, 0.55);
}

.pb-shop-tab[aria-selected="true"] {
    color: var(--c-text);
    background: var(--c-white);
    box-shadow: 0 5px 18px rgba(85, 0, 0, 0.1);
}

.pb-shop-tab:focus-visible {
    outline: 2px solid var(--c-gold);
    outline-offset: 3px;
}

.pb-shop-tab .pb-category-badge {
    margin-left: 0.35rem;
    top: 0;
    flex-shrink: 0;
}

@keyframes pb-panelReveal {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.pb-shop-panel:not([hidden]) {
    animation: pb-panelReveal 0.3s ease both;
}

.pb-shop-panel[hidden] {
    display: none;
}

.pb-shop-col--brand {
    max-height: min(65vh, 680px);
    overflow-y: auto;
    overflow-anchor: none;
    padding: 0 1.25rem 1rem;
    border: 1px solid rgba(214, 160, 160, 0.35);
    border-radius: var(--radius);
    background: #fff8f8;
}

/* ── Category gallery ──
   A single editorial rail keeps all nine categories easy to browse without
   turning the landing page into several tall rows. The next card remains
   partially visible at narrower widths to make the horizontal motion clear. */
.pb-cats {
    display: flex;
    gap: 1.4rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    padding: 0.4rem 1.5rem 0.75rem;
    margin-inline: -1.5rem;
}

.pb-cats::-webkit-scrollbar {
    display: none;
}

.pb-cats[data-dragging="true"] {
    cursor: grabbing;
}

.pb-cats-controls {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.9rem;
    margin-top: 0.45rem;
}

.pb-cats-arrow {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--c-warm-gray);
    border-radius: 50%;
    background: var(--c-white);
    color: var(--c-gold);
    font-family: var(--font-body);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.pb-cats-arrow:hover:not(:disabled) {
    color: var(--c-white);
    background: var(--c-gold);
    border-color: var(--c-gold);
    transform: translateY(-2px);
}

.pb-cats-arrow:focus-visible,
.pb-cats-scrollbar__range:focus-visible {
    outline: 2px solid var(--c-gold);
    outline-offset: 3px;
}

.pb-cats-arrow:disabled {
    opacity: 0.32;
    cursor: default;
}

.pb-cats-scrollbar {
    display: flex;
    align-items: center;
    min-width: 0;
}

.pb-cats-scrollbar__range {
    --pb-cats-thumb-width: 90px;
    width: 100%;
    height: 28px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: ew-resize;
    appearance: none;
    -webkit-appearance: none;
}

.pb-cats-scrollbar__range::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 999px;
    background: #f9dddd;
}

.pb-cats-scrollbar__range::-webkit-slider-thumb {
    width: var(--pb-cats-thumb-width);
    height: 8px;
    margin-top: 0;
    border: 0;
    border-radius: 999px;
    background: var(--c-gold);
    box-shadow: 0 1px 4px rgba(85, 0, 0, 0.18);
    appearance: none;
    -webkit-appearance: none;
}

.pb-cats-scrollbar__range::-moz-range-track {
    height: 8px;
    border: 0;
    border-radius: 999px;
    background: #f9dddd;
}

.pb-cats-scrollbar__range::-moz-range-progress {
    height: 8px;
    border-radius: 999px;
    background: #f9dddd;
}

.pb-cats-scrollbar__range::-moz-range-thumb {
    width: var(--pb-cats-thumb-width);
    height: 8px;
    border: 0;
    border-radius: 999px;
    background: var(--c-gold);
    box-shadow: 0 1px 4px rgba(85, 0, 0, 0.18);
}

.pb-cat-card {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--c-white);
    border: 1px solid var(--c-warm-gray);
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    flex: 0 0 clamp(290px, 34vw, 390px);
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.pb-cat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 40px rgba(85, 0, 0, 0.1);
    border-color: transparent;
}

/* Category tiles are banners rather than product cards, so they keep the
   landscape proportion used by the review gallery elsewhere on the site. */
.pb-cat-card__img-wrap {
    width: 100%;
    aspect-ratio: 16 / 10;
    background: var(--c-cream);
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.pb-cat-card__img-wrap img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: var(--prod-media-pad);
    box-sizing: border-box;
    pointer-events: none;
    -webkit-user-drag: none;
    transition: transform 0.5s ease;
}

.pb-cat-card:hover .pb-cat-card__img-wrap img {
    transform: scale(1.06);
}

/* Burgundy gradient overlay on hover */
.pb-cat-card__img-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 40%, rgba(85, 0, 0, 0.55));
    opacity: 0;
    transition: opacity 0.35s ease;
}

.pb-cat-card:hover .pb-cat-card__img-wrap::after {
    opacity: 1;
}

.pb-cat-card__placeholder {
    color: var(--c-mid-gray);
    font-size: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.pb-cat-card__body {
    padding: 1.35rem 1.45rem 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.pb-cat-card__name {
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 500;
    color: var(--c-text);
    margin: 0;
    line-height: 1.2;
}

.pb-cat-card__count {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-gold);
    margin: 0;
}

.pb-cat-card__desc {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 300;
    color: var(--c-text-light);
    line-height: 1.55;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Product cards grid ── */
.pb-products {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

/* The product_card.html partial is rendered with card_class = 'pb-prod-card' */
.pb-prod-card {
    background: var(--c-white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(85, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    border: none;
}

.pb-prod-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 28px rgba(85, 0, 0, 0.12);
}

.pb-prod-card__img-wrap {
    width: 100%;
    aspect-ratio: var(--prod-media-ratio);
    background: var(--prod-media-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}

/* 'View Product' label that appears on hover */
.pb-prod-card__img-wrap::after {
    content: 'View Product';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.6rem 1rem;
    background: linear-gradient(to top, rgba(85, 0, 0, 0.75) 0%, transparent 100%);
    color: #ffffff;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.pb-prod-card:hover .pb-prod-card__img-wrap::after {
    opacity: 1;
    transform: translateY(0);
}

.pb-prod-card__img-wrap img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: var(--prod-media-pad);
    box-sizing: border-box;
    transition: transform 0.45s ease;
}

.pb-prod-card:hover .pb-prod-card__img-wrap img {
    transform: scale(1.04);
}

.pb-prod-card__placeholder {
    font-size: 2.5rem;
    color: var(--c-mid-gray);
}

.pb-prod-card__body {
    padding: 1.1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.pb-prod-card__brand {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-gold);
    margin: 0;
}

.pb-prod-card__name {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 400;
    color: var(--c-text);
    margin: 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pb-prod-card__meta {
    margin-top: auto;
    padding-top: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.pb-prod-card__price {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--c-text);
}

.pb-prod-card__price-sale {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--c-gold);
}

.pb-prod-card__price-orig {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--c-text-light);
    text-decoration: line-through;
    margin-left: 0.25rem;
}

.pb-prod-card__details {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.2rem;
}

.pb-prod-card__tag {
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-text-light);
    background: var(--c-cream);
    border: 1px solid var(--c-warm-gray);
    border-radius: 4px;
    padding: 0.15rem 0.45rem;
}

.pb-prod-card__shades {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--c-text-light);
    margin: 0;
}

.pb-prod-card__variants {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    color: #c9a882;
    background: rgba(201,168,130,.1);
    border-radius: 4px;
    padding: 0.1rem 0.45rem;
    margin: 0.15rem 0 0;
    letter-spacing: 0.02em;
}

.pb-prod-card__rating {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-family: var(--font-body);
    font-size: 0.78rem;
    color: var(--c-text-light);
}

.pb-prod-card__star {
    color: var(--c-gold);
    font-size: 0.85rem;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .pb-products {
        grid-template-columns: repeat(3, 1fr);
    }

    .pb-shop-col--brand {
        max-height: 65vh;
        padding: 0 1.25rem 1.25rem;
    }
}

@media (max-width: 768px) {
    .pb-hero {
        padding: 4rem 1rem 3.5rem;
    }

    .pb-products {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .pb-section {
        padding: 3rem 0;
    }
}

@media (max-width: 480px) {
    .pb-hero {
        padding: 3rem 1rem 2.75rem;
    }

    .pb-cats {
        gap: 1rem;
        padding-bottom: 0.65rem;
    }

    .pb-cat-card {
        flex-basis: min(82vw, 330px);
    }

    .pb-shop-tabs {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pb-shop-tab {
        min-height: 46px;
        padding: 0.6rem 0.55rem;
        font-size: 1rem;
    }

    .pb-shop-tab .pb-category-badge {
        padding-inline: 0.45rem;
        margin-left: 0.15rem;
    }

    .pb-cats-controls {
        gap: 0.65rem;
    }

    .pb-cats-arrow {
        width: 38px;
        height: 38px;
        font-size: 1.05rem;
    }

    /* Stay two-up: a single full-width column would blow the square media
       box up to ~430px tall. Matches .pc-products on the category page. */
    .pb-products {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.9rem;
    }

    .pb-section__header {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 400px) {
    .pb-products {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pb-shop-panel:not([hidden]) {
        animation: none;
    }
}