:root {
        --bg: #FDFBF7;
        --surface: #FFFFFF;
        --stone: #EAE7E2;
        --sage: #8C927D;
        --sage-light: #F2F3EE;
        --clay: #B06A4B;
        --whatsapp: #1FA855;
        --text-main: #2D2A26;
        --text-muted: #6B6661;
        --border: #E5E1DA;
        --font-serif: "Playfair Display", serif;
        --font-sans: "Inter", sans-serif;
        --transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
        --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
        --shadow-md: 0 10px 30px rgba(45, 42, 38, 0.08);
    }

    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        -webkit-font-smoothing: antialiased;
    }

    html {
        scroll-behavior: smooth;
    }

    body {
        background: var(--bg);
        color: var(--text-main);
        font-family: var(--font-sans);
        line-height: 1.6;
        overflow-x: hidden;
    }

    body.no-scroll {
        overflow: hidden;
    }

    button,
    input,
    textarea {
        font: inherit;
    }

    button {
        color: inherit;
    }

    img {
        display: block;
        max-width: 100%;
    }

    :focus-visible {
        border-radius: 4px;
        outline: 2px solid var(--sage);
        outline-offset: 3px;
    }

    .page-shell {
        min-height: 100vh;
        padding-top: 82px;
    }

    .catalog-heading {
        max-width: 1400px;
        margin: 0 auto;
        padding: 2.4rem 2rem 0;
    }

    .catalog-heading h1 {
        font-family: var(--font-serif);
        font-size: clamp(1.75rem, 3.2vw, 2.85rem);
        font-weight: 400;
        line-height: 1.08;
        margin: 0;
        color: var(--text-main);
    }

    header {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1000;
        background: rgba(253, 251, 247, 0.86);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-bottom: 1px solid var(--border);
    }

    .nav-container {
        width: min(1400px, 100%);
        margin: 0 auto;
        padding: 1.15rem 2rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1.25rem;
    }

    .logo {
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        flex: 0 0 auto;
    }

    .logo img {
        display: block;
        width: auto;
        height: 42px;
        max-width: min(220px, 42vw);
        object-fit: contain;
    }

    nav ul {
        display: flex;
        list-style: none;
        gap: 1.3rem;
    }

    nav a {
        text-decoration: none;
        color: var(--text-main);
        font-size: 0.66rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        transition: var(--transition);
        padding: 0.3rem 0;
        border-bottom: 2px solid transparent;
    }

    nav a:hover,
    nav a.active {
        color: var(--sage);
        border-bottom-color: var(--sage);
    }

    .nav-actions {
        display: flex;
        gap: 0.85rem;
        align-items: center;
    }

    .nav-contact {
        min-height: auto;
        padding: 0.25rem 0;
        border: 0;
        background: transparent;
        color: var(--text-muted);
        font-size: 0.62rem;
        letter-spacing: 0.05em;
        white-space: nowrap;
    }

    .nav-contact:hover {
        color: var(--whatsapp);
        filter: none;
        transform: none;
    }

    .icon-btn {
        position: relative;
        width: 38px;
        height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        cursor: pointer;
        transition: var(--transition);
    }

    .icon-btn:hover {
        color: var(--sage);
        transform: translateY(-2px);
    }

    .badge {
        position: absolute;
        top: -4px;
        right: -5px;
        min-width: 18px;
        padding: 2px 6px;
        border-radius: 10px;
        background: var(--sage);
        color: #fff;
        font-size: 0.68rem;
        font-weight: 700;
        line-height: 1.2;
        text-align: center;
    }

    .hamburger {
        display: none;
    }

    /* Medidas iguais as da gaveta da home e do blog, conferidas uma a uma em
       03/09/2026: largura, folga interna, sombra, tamanho da marca, tamanho do
       botao de fechar e altura de cada linha. Antes a do catalogo era mais
       estreita por dentro, com a marca menor e as linhas mais altas, e por isso
       parecia outro menu. */
    .mobile-menu {
        position: fixed;
        inset: 0 auto 0 0;
        width: min(86vw, 340px);
        transform: translateX(-100%);
        z-index: 2100;
        background: var(--surface);
        padding: 1.5rem;
        display: flex;
        flex-direction: column;
        box-shadow: 18px 0 40px rgba(45, 42, 38, 0.14);
        transition: var(--transition);
    }

    .mobile-menu .logo img {
        height: 42px;
        width: auto;
    }

    .mobile-menu.active {
        transform: translateX(0);
    }

    /* Mesmo cabecalho da gaveta das outras telas: marca a esquerda, X a
       direita, e a lista de links comecando logo abaixo. */
    .mobile-menu-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        margin-bottom: 2rem;
    }

    .mobile-menu-head .logo {
        margin-bottom: 0;
    }

    .mobile-menu .icon-btn {
        flex: 0 0 auto;
        width: 42px;
        height: 42px;
        border: 1px solid var(--border);
        border-radius: 999px;
    }

    .mobile-menu ul {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
    }

    .mobile-menu a:not(.logo):not(.btn-whatsapp) {
        display: block;
        padding: 0.9rem 0.25rem;
        color: var(--text-main);
        text-decoration: none;
        font-family: var(--font-serif);
        font-size: 1.35rem;
        line-height: 1.1;
        border-bottom: 1px solid var(--border);
    }

    .mobile-menu-footer {
        margin-top: auto;
        padding-top: 1.5rem;
    }

    .hero {
        min-height: calc(90vh - 82px);
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .hero-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: -1;
    }

    .hero-content {
        text-align: center;
        max-width: 800px;
        padding: 2rem;
        animation: fadeIn 1s ease-out;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .hero h1 {
        font-family: var(--font-serif);
        font-size: clamp(2.6rem, 6vw, 4.5rem);
        font-weight: 400;
        line-height: 1.1;
        margin-bottom: 1.5rem;
    }

    .hero p {
        color: var(--text-muted);
        font-size: 1.08rem;
        letter-spacing: 0.02em;
        margin-bottom: 2.5rem;
    }

    .btn-primary,
    .btn-whatsapp {
        min-height: 46px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.6rem;
        padding: 0.95rem 1.7rem;
        border: none;
        border-radius: 4px;
        color: #fff;
        text-decoration: none;
        font-size: 0.82rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        cursor: pointer;
        transition: var(--transition);
    }

    .btn-primary {
        background: var(--text-main);
    }

    .btn-primary.added {
        background: var(--sage);
    }

    .btn-primary:hover {
        background: var(--sage);
        transform: translateY(-2px);
    }

    .btn-whatsapp {
        background: var(--whatsapp);
    }

    .btn-whatsapp.sold-cta {
        background: #B3271D;
    }

    .btn-whatsapp.sold-cta:hover {
        filter: brightness(1.08);
    }

    .btn-whatsapp:hover {
        filter: brightness(1.08);
        transform: translateY(-2px);
    }

    .btn-whatsapp.nav-contact {
        width: 38px;
        height: 38px;
        min-height: 38px;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--text-muted);
        box-shadow: none;
    }

    .btn-whatsapp.nav-contact:hover {
        color: var(--whatsapp);
        filter: none;
        transform: none;
    }

    .reveal {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .reveal.in {
        opacity: 1;
        transform: translateY(0);
    }

    .section-title {
        text-align: center;
        padding: 5rem 2rem 3rem;
    }

    .section-title h2 {
        font-family: var(--font-serif);
        font-size: clamp(2rem, 4vw, 2.5rem);
        margin-bottom: 1rem;
    }

    .section-title p {
        color: var(--text-muted);
        font-style: italic;
    }

    .categories {
        max-width: 1400px;
        margin: 0 auto 5rem;
        padding: 0 2rem;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1.5rem;
    }

    .category-card {
        position: relative;
        height: 450px;
        overflow: hidden;
        border-radius: 4px;
        border: none;
        background: var(--stone);
        text-align: left;
        cursor: pointer;
    }

    .category-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: var(--transition);
    }

    .category-card:hover img {
        transform: scale(1.06);
    }

    .category-overlay {
        position: absolute;
        inset: 0;
        padding: 2.4rem;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.45), transparent 62%);
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    .category-overlay h3 {
        font-family: var(--font-serif);
        font-size: 1.8rem;
    }

    .category-overlay span {
        font-size: 0.78rem;
        text-transform: uppercase;
        letter-spacing: 0.15em;
    }

    .shop-container,
    .content-container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 4rem 2rem;
        scroll-margin-top: 90px;
    }

    .controls {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 1.5rem;
        margin-bottom: 3rem;
    }

    .filters {
        display: flex;
        gap: 0.8rem;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
        padding-bottom: 2px;
    }

    .filters::-webkit-scrollbar {
        display: none;
    }

    .catalog-tools {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0.55rem;
        width: fit-content;
        max-width: 100%;
        margin-left: auto;
        padding: 0.38rem;
        border: 1px solid rgba(229, 225, 218, 0.78);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.62);
        box-shadow: 0 8px 18px rgba(45, 42, 38, 0.04);
    }


    .sort-box {
        position: relative;
        display: flex;
        align-items: center;
        gap: 0.55rem;
        flex: 0 0 auto;
        color: #6f7466;
        font-size: 0.68rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        white-space: nowrap;
    }


    .sort-box select {
        min-height: 44px;
        width: 132px;
        padding: 0 2rem 0 0.85rem;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--surface);
        color: var(--text-main);
        font: inherit;
        font-size: 0.86rem;
        font-weight: 700;
        cursor: pointer;
        outline: none;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
    }


    .sort-box select:focus {
        border-color: var(--sage);
        box-shadow: 0 0 0 4px var(--sage-light);
    }

    .color-filter-wrap {
        display: flex;
        align-items: center;
        gap: 0.9rem;
        margin: -1.6rem 0 2.8rem;
    }

    .color-filter-wrap>span {
        color: var(--text-muted);
        font-size: 0.78rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        white-space: nowrap;
    }

    .color-filters {
        display: flex;
        gap: 0.5rem;
        overflow-x: auto;
        padding: 0.2rem 0.1rem 0.35rem;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .color-filters::-webkit-scrollbar {
        display: none;
    }

    .color-tag {
        min-height: 30px;
        display: inline-flex;
        align-items: center;
        gap: 0.36rem;
        flex: 0 0 auto;
        padding: 0.34rem 0.62rem;
        border: 1px solid var(--border);
        border-radius: 999px;
        background: var(--surface);
        color: var(--text-main);
        font-size: 0.72rem;
        font-weight: 700;
        cursor: pointer;
        transition: var(--transition);
    }

    .color-tag small {
        color: var(--text-muted);
        font-size: 0.66rem;
        font-weight: 700;
    }

    .color-tag:hover,
    .color-tag.active {
        border-color: var(--sage);
        background: var(--sage-light);
    }

    .color-tag.active {
        box-shadow: 0 0 0 2px rgba(140, 146, 125, 0.18);
    }

    .color-dot {
        width: 0.66rem;
        height: 0.66rem;
        flex: 0 0 0.66rem;
        border-radius: 50%;
        background: var(--tag-color);
        border: 1px solid rgba(35, 31, 29, 0.18);
    }

    .color-dot.all {
        background: conic-gradient(#b6372f, #b89143, #7f8a61, #5c6f8f, #c88991, #b6372f);
    }

    .chip {
        display: inline-flex;
        align-items: center;
        flex: 0 0 auto;
        padding: 0.6rem 1.5rem;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 30px;
        color: inherit;
        cursor: pointer;
        font-size: 0.84rem;
        font-weight: 600;
        text-decoration: none;
        transition: var(--transition);
        white-space: nowrap;
    }

    .chip:hover,
    .chip.active,
    .chip[aria-pressed="true"] {
        background: var(--sage);
        color: #fff;
        border-color: var(--sage);
    }

    .search-box {
        position: relative;
        width: 100%;
        flex: 0 0 220px;
        max-width: 220px;
    }


    .search-box svg {
        position: absolute;
        left: 0.9rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-muted);
        pointer-events: none;
    }

    .search-box input {
        width: 100%;
        height: 44px;
        padding: 0 0.95rem 0 2.55rem;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--surface);
        color: var(--text-main);
        font-size: 0.9rem;
        outline: none;
        transition: var(--transition);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
    }


    .search-box input:focus {
        border-color: var(--sage);
        box-shadow: 0 0 0 4px var(--sage-light);
    }

    .view-toggle {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--surface);
        color: var(--text-main);
        display: none;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: var(--transition);
    }

    .view-toggle:hover,
    .view-toggle[aria-pressed="true"] {
        border-color: var(--sage);
        background: var(--sage-light);
        color: var(--sage);
    }

    .grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 3rem 2rem;
    }

    #productGrid.grid-compact {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 2.4rem 1.35rem;
    }

    #productGrid.grid-compact .card-img-wrap {
        margin-bottom: 0.85rem;
    }

    #productGrid.grid-compact .card-info {
        min-height: 190px;
    }

    #productGrid.grid-compact .card-title {
        font-size: 1.02rem;
        min-height: 3.95em;
    }

    #productGrid.grid-compact .payment-terms {
        font-size: 0.76rem;
    }

    #productGrid.grid-compact .card-actions {
        gap: 0.45rem;
    }

    #productGrid.grid-compact .action-btn {
        min-height: 38px;
        padding: 0.62rem 0.45rem;
        font-size: 0.58rem;
    }

    .card {
        min-width: 0;
        height: 100%;
        display: flex;
        flex-direction: column;
        transition: var(--transition);
    }

    .card:hover {
        transform: translateY(-3px);
    }

    .card-img-wrap {
        position: relative;
        --zoom-x: 50%;
        --zoom-y: 50%;
        width: 100%;
        aspect-ratio: 4 / 5;
        overflow: hidden;
        border-radius: 4px;
        margin-bottom: 1.15rem;
        background: var(--stone);
    }

    .card-img-wrap a {
        display: block;
        height: 100%;
        color: inherit;
        text-decoration: none;
    }

    .card-img-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform-origin: var(--zoom-x) var(--zoom-y);
        transition: transform 840ms cubic-bezier(0.2, 0.8, 0.2, 1);
        will-change: transform;
    }

    .product-placeholder {
        width: 100%;
        height: 100%;
        min-height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem;
        background:
            linear-gradient(135deg, rgba(140, 146, 125, 0.12), rgba(176, 106, 75, 0.12)),
            var(--stone);
        color: var(--text-muted);
        text-align: center;
        font-family: var(--font-serif);
        font-size: 1.1rem;
        text-decoration: none;
    }

    .product-placeholder span {
        max-width: 11rem;
        color: inherit;
        text-decoration: none;
    }

    .card:hover .card-img-wrap img {
        transform: scale(1.38);
    }

    .discount-badge {
        position: absolute;
        top: 1rem;
        left: 1rem;
        z-index: 2;
        background: var(--clay);
        color: #fff;
        font-size: 0.75rem;
        font-weight: 700;
        padding: 0.3rem 0.7rem;
        border-radius: 30px;
    }

    .sold-badge {
        position: absolute;
        top: 1rem;
        left: 1rem;
        z-index: 2;
        background: #B3271D;
        color: #fff;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        padding: 0.3rem 0.7rem;
        border-radius: 30px;
    }

    .sold-note {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        background: var(--sage-light);
        color: var(--text-main);
        font-size: 0.82rem;
        padding: 0.55rem 0.85rem;
        border-radius: 6px;
        border: 1px solid var(--border);
        margin: 0.5rem 0 1.5rem;
    }

    /* O coracao sobre a foto encolheu em 15/09/2026, a pedido do Junior: com
       38px ele pesava mais que a peca. O circulo agora tem 30px, e a area de
       toque continua com 42px pelo ::after invisivel logo abaixo, porque dedo
       nao mira em 30 pixels. */
    .wish-btn {
        position: absolute;
        top: 0.7rem;
        right: 0.7rem;
        z-index: 2;
        width: 30px;
        height: 30px;
        border: none;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.92);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: var(--shadow-sm);
        transition: var(--transition);
    }

    .wish-btn:hover {
        transform: scale(1.1);
    }

    /* Area de toque, invisivel, maior que o desenho. */
    .card-img-wrap .wish-btn::after {
        content: "";
        position: absolute;
        inset: -6px;
    }

    .card-img-wrap .wish-btn svg {
        width: 15px;
        height: 15px;
    }

    .card-info {
        display: flex;
        min-height: 220px;
        flex: 1;
        flex-direction: column;
        align-items: stretch;
    }

    .card-cat {
        color: var(--text-muted);
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        margin-bottom: 0.28rem;
    }

    .card-title {
        font-family: var(--font-serif);
        font-size: 1.15rem;
        font-weight: 400;
        line-height: 1.28;
        margin-bottom: 0.5rem;
        /* dois títulos de tamanhos diferentes não podem afastar o preço: o
           espaço reservado cobre duas linhas, e o preço desce sozinho para o
           pé do card, alinhado com os vizinhos */
        min-height: 2.6em;
    }

    .card-title a {
        color: inherit;
        text-decoration: none;
    }

    .card-title a:hover {
        color: var(--sage);
    }

    .card-price {
        display: flex;
        margin-top: auto;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0.18rem 0.6rem;
        /* o valor é a informação que a pessoa procura no card: um degrau acima
           do resto. O preço antigo e as parcelas ficam no tamanho de antes. */
        font-size: 1.15rem;
        font-weight: 700;
        line-height: 1.22;
    }

    .price-new,
    .price-amount {
        display: inline-flex;
        gap: 0.25em;
        white-space: nowrap;
    }

    .payment-terms {
        display: grid;
        gap: 0.18rem;
        color: var(--text-muted);
        font-size: 0.82rem;
        line-height: 1.35;
    }

    .product-info .payment-terms {
        font-size: 0.95rem;
        margin: 0.25rem 0 1.5rem;
    }

    .card-old-price {
        text-decoration: line-through;
        color: var(--text-muted);
        font-size: 0.85rem;
        font-weight: 400;
        white-space: nowrap;
    }

    .card-actions {
        display: flex;
        gap: 0.75rem;
        margin-top: auto;
        /* respiro entre o preço e os botões: com 1rem eles encostavam no preço */
        padding-top: 1.4rem;
        position: static;
        opacity: 1;
        transform: none;
    }

    .action-btn {
        flex: 1 1 0;
        min-width: 0;
        min-height: 42px;
        padding: 0.74rem 0.62rem;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 4px;
        font-weight: 700;
        font-size: 0.66rem;
        text-transform: uppercase;
        letter-spacing: 0.035em;
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        color: var(--text-main);
        transition: var(--transition);
        white-space: nowrap;
    }

    .action-btn.add {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
    }

    .action-btn.added {
        background: var(--sage);
        border-color: var(--sage);
        color: #fff;
        box-shadow: none;
        outline: none;
    }

    .action-btn:hover {
        background: var(--text-main);
        color: #fff;
        border-color: var(--text-main);
    }

    .action-btn.wa {
        background: var(--whatsapp);
        color: #fff;
        border-color: var(--whatsapp);
    }

    .action-btn.wa-sold {
        /* o texto encostava na borda: o botão fica mais largo que o "Detalhes",
           com folga dos lados, e a altura continua a mesma dos dois */
        flex-grow: 1.45;
        padding-left: 0.9rem;
        padding-right: 0.9rem;
        background: #B3271D;
        border-color: #B3271D;
        font-size: 0.72rem;
        box-shadow: 0 8px 20px rgba(179, 39, 29, 0.32);
        transform: scale(1.02);
    }

    .action-btn.wa:hover {
        filter: brightness(1.08);
    }

    .empty-state {
        grid-column: 1 / -1;
        text-align: center;
        padding: 4rem 2rem;
        color: var(--text-muted);
    }

    .empty-state h3 {
        font-family: var(--font-serif);
        font-size: 1.6rem;
        color: var(--text-main);
        margin-bottom: 0.8rem;
    }

    .empty-state button {
        margin-top: 1.2rem;
        background: none;
        border: 1px solid var(--border);
        padding: 0.7rem 1.6rem;
        border-radius: 30px;
        cursor: pointer;
        transition: var(--transition);
    }

    .empty-state button:hover {
        background: var(--sage);
        color: #fff;
        border-color: var(--sage);
    }

    .drawer {
        position: fixed;
        inset: 0 0 0 auto;
        transform: translateX(105%);
        width: min(100%, 450px);
        z-index: 2000;
        background: var(--surface);
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
        transition: var(--transition);
        display: flex;
        flex-direction: column;
    }

    .drawer.active {
        transform: translateX(0);
    }

    .overlay {
        position: fixed;
        inset: 0;
        z-index: 1999;
        opacity: 0;
        pointer-events: none;
        background: rgba(45, 42, 38, 0.4);
        transition: var(--transition);
    }

    .overlay.active {
        opacity: 1;
        pointer-events: auto;
    }

    .drawer-header {
        padding: 1.6rem 2rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid var(--border);
    }

    .drawer-header h2 {
        font-family: var(--font-serif);
        font-size: 1.5rem;
    }

    .drawer-content {
        flex: 1;
        overflow-y: auto;
        padding: 2rem;
    }

    .cart-item {
        display: grid;
        grid-template-columns: 72px 1fr auto;
        gap: 1.2rem;
        margin-bottom: 1.5rem;
        align-items: center;
    }

    .cart-item img {
        width: 72px;
        aspect-ratio: 1;
        object-fit: cover;
        border-radius: 4px;
        background: var(--stone);
    }

    .cart-placeholder {
        width: 72px;
        aspect-ratio: 1;
        border-radius: 4px;
        background: var(--stone);
        color: var(--text-muted);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.72rem;
    }

    .cart-item-info h4 {
        font-family: var(--font-serif);
        font-size: 1rem;
        margin-bottom: 0.2rem;
    }

    .qty-controls {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        margin-top: 0.3rem;
    }

    .qty-controls button {
        width: 24px;
        height: 24px;
        border: 1px solid var(--border);
        background: var(--surface);
        border-radius: 50%;
        cursor: pointer;
        line-height: 1;
        transition: var(--transition);
    }

    .qty-controls button:hover {
        background: var(--sage);
        color: #fff;
        border-color: var(--sage);
    }

    .remove-link {
        background: none;
        border: none;
        color: var(--clay);
        font-size: 0.72rem;
        cursor: pointer;
    }

    .drawer-footer {
        padding: 1.6rem 2rem;
        background: var(--bg);
        border-top: 1px solid var(--border);
    }

    .total-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 1rem;
        font-weight: 700;
    }

    .drawer-footer .hint {
        font-size: 0.75rem;
        color: var(--text-muted);
        text-align: center;
        margin-top: 0.8rem;
    }

    .bottom-bar {
        display: none;
        position: fixed;
        inset: auto 0 0;
        z-index: 1500;
        background: rgba(253, 251, 247, 0.96);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-top: 1px solid var(--border);
        padding: 0.5rem 0 calc(0.5rem + env(safe-area-inset-bottom));
    }

    .bottom-bar button,
    .bottom-bar a {
        flex: 1;
        background: none;
        border: none;
        color: var(--text-main);
        text-decoration: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        font-size: 0.65rem;
        cursor: pointer;
        position: relative;
        /* O item do WhatsApp e' um link, e por isso vinha em caixa alta, mais
           gordo e com as letras afastadas, enquanto os outros tres, que sao
           botoes, vinham normais. Na tela isso lia como se o quarto item fosse
           outra coisa. Aqui os quatro passam a se parecer. Junior, 03/09/2026. */
        font-weight: 400;
        text-transform: none;
        letter-spacing: normal;
        line-height: 1.2;
    }

    .bottom-bar .badge {
        top: -4px;
        right: calc(50% - 20px);
    }

    .product-page {
        max-width: 1320px;
        margin: 0 auto;
        /* o espaco do menu fixo ja vem do .page-shell; 3rem aqui em cima
           empurrava o caminho de volta para o meio da tela */
        padding: 0.75rem 2rem 4rem;
    }

    .breadcrumb {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        color: var(--text-muted);
        font-size: 0.82rem;
        margin-bottom: 2rem;
    }

    .breadcrumb a {
        color: inherit;
        text-decoration: none;
    }

    .breadcrumb a:hover {
        color: var(--sage);
    }

    .product-layout {
        display: grid;
        grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
        gap: clamp(2rem, 5vw, 5rem);
        align-items: start;
    }

    .product-gallery {
        display: grid;
        grid-template-columns: 92px minmax(0, 1fr);
        gap: 1rem;
        position: sticky;
        top: 105px;
    }

    .product-info {
        min-width: 0;
    }

    .thumbs {
        display: flex;
        flex-direction: column;
        gap: 0.8rem;
    }

    .thumb {
        border: 1px solid transparent;
        border-radius: 4px;
        background: var(--stone);
        overflow: hidden;
        cursor: pointer;
        aspect-ratio: 4 / 5;
        padding: 0;
    }

    .thumb[aria-current="true"] {
        border-color: var(--sage);
    }

    .thumb img,
    .main-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .main-media {
        position: relative;
        --zoom-x: 50%;
        --zoom-y: 50%;
        aspect-ratio: 4 / 5;
        overflow: hidden;
        border-radius: 4px;
        background: var(--stone);
    }

    .main-media img {
        transform-origin: var(--zoom-x) var(--zoom-y);
        transition: transform 1900ms cubic-bezier(0.4, 0, 0.25, 1);
        will-change: transform;
    }

    @media (hover: hover) and (pointer: fine) {

        .card-img-wrap,
        .main-media {
            cursor: zoom-in;
        }

        .main-media:hover img {
            transform: scale(2);
        }
    }

    .gallery-arrow {
        position: absolute;
        top: 50%;
        z-index: 3;
        width: 42px;
        height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, 0.7);
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.9);
        color: var(--text-main);
        box-shadow: var(--shadow-sm);
        cursor: pointer;
        transform: translateY(-50%);
        transition: var(--transition);
    }

    .gallery-arrow:hover {
        background: var(--text-main);
        border-color: var(--text-main);
        color: #fff;
    }

    .gallery-arrow.prev {
        left: 0.8rem;
    }

    .gallery-arrow.next {
        right: 0.8rem;
    }

    .image-lightbox {
        position: fixed;
        inset: 0;
        z-index: 6500;
        display: none;
        background: rgba(18, 16, 14, 0.92);
        backdrop-filter: blur(7px);
    }

    .image-lightbox.active {
        display: block;
    }

    .image-lightbox-close {
        position: fixed;
        top: max(1rem, env(safe-area-inset-top));
        right: max(1rem, env(safe-area-inset-right));
        z-index: 2;
        width: 54px;
        height: 54px;
        border: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.94);
        color: var(--text-main);
        font-size: 2.2rem;
        line-height: 1;
        cursor: pointer;
        box-shadow: var(--shadow-sm);
    }

    .image-lightbox-frame {
        width: 100%;
        height: 100%;
        overflow: auto;
        padding: calc(5rem + env(safe-area-inset-top)) 1rem calc(2rem + env(safe-area-inset-bottom));
        text-align: center;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y pinch-zoom;
    }

    .image-lightbox img {
        display: inline-block;
        width: min(220vw, 1600px);
        max-width: none;
        height: auto;
        border-radius: 8px;
        background: var(--stone);
        box-shadow: var(--shadow-lg);
    }

    @media (min-width: 769px) {
        .image-lightbox img {
            width: min(120vw, 1600px);
        }
    }

    .product-info h1 {
        font-family: var(--font-serif);
        font-size: clamp(1.9rem, 3.6vw, 3.1rem);
        font-weight: 400;
        line-height: 1.05;
        margin: 0.25rem 0 0.65rem;
        overflow-wrap: break-word;
    }

    .product-meta {
        color: var(--text-muted);
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
    }

    .product-price {
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 0.75rem;
        margin: 1.5rem 0 0.3rem;
    }

    .product-price strong {
        font-size: 1.95rem;
    }

    .installment {
        color: var(--text-muted);
        margin-bottom: 1.5rem;
    }

    .product-actions {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.65rem;
        margin-bottom: 2rem;
    }

    .product-actions>* {
        min-width: 0;
    }

    .product-actions .btn-primary,
    .product-actions .btn-whatsapp {
        min-height: 42px;
        padding: 0.72rem 1.05rem;
        font-size: 0.74rem;
        letter-spacing: 0.06em;
    }

    /* Botao de favoritar da ficha do produto. Virou so o coracao em
       07/09/2026: em texto ele competia com as duas acoes principais. O
       quadrado de 44px e a area de toque minima do padrao de acessibilidade. */
    .product-actions .wish-btn {
        /* position: relative e' o que ancora a etiqueta. So que o .wish-btn do
           card e' absolute com top e right de 1rem, e no relative esses dois
           voltaram a valer: o botao desceu 16px e saiu da linha. Zerar os dois
           aqui e' o conserto. */
        position: relative;
        top: auto;
        right: auto;
        /* stretch iguala a altura a' dos dois botoes ao lado, qualquer que seja
           ela, em vez de chutar um numero que envelhece. */
        align-self: stretch;
        width: 44px;
        min-width: 44px;
        height: auto;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 1px solid var(--border);
        border-radius: 4px;
        background: var(--surface);
        box-shadow: none;
        color: var(--text-muted);
    }

    .product-actions .wish-btn:hover {
        transform: none;
        border-color: var(--clay);
        color: var(--clay);
    }

    .product-actions .wish-btn:focus-visible {
        outline: 2px solid var(--clay);
        outline-offset: 2px;
    }

    /* A etiqueta. Sai de data-dica, que o javascript troca junto com o
       aria-label, entao os dois nunca discordam. So aparece onde existe mouse:
       no toque ela ficaria presa na tela depois do clique. */
    @media (hover: hover) {
        .product-actions .wish-btn::after {
            content: attr(data-dica);
            position: absolute;
            bottom: calc(100% + 8px);
            left: 50%;
            transform: translateX(-50%) translateY(4px);
            z-index: 5;
            padding: 0.4rem 0.6rem;
            border-radius: 4px;
            background: var(--text, #2a2622);
            color: #fff;
            font-size: 0.72rem;
            font-weight: 600;
            line-height: 1.2;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.16s ease, transform 0.16s ease;
        }

        .product-actions .wish-btn:hover::after,
        .product-actions .wish-btn:focus-visible::after {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }
    }

    .product-copy {
        color: var(--text-muted);
        font-size: 1rem;
        margin-bottom: 2rem;
    }

    .product-details {
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
        gap: clamp(2rem, 4vw, 4rem);
        margin-top: 2rem;
    }

    .product-details h2 {
        font-family: var(--font-serif);
        font-size: clamp(1.8rem, 3vw, 2.5rem);
        font-weight: 400;
        margin: 0 0 1rem;
    }

    .product-details .product-copy {
        max-width: 70ch;
        margin-bottom: 0;
    }

    .specs {
        width: 100%;
        border-collapse: collapse;
        margin-top: 1rem;
        background: var(--surface);
    }

    .specs th,
    .specs td {
        text-align: left;
        border-bottom: 1px solid var(--border);
        padding: 0.9rem 1rem;
        vertical-align: top;
    }

    .specs th {
        width: 36%;
        color: var(--text-main);
        font-weight: 700;
    }

    /* Os 40px embaixo sao o folego pedido pelo Junior em 07/09/2026: a
       prateleira de relacionados e a ultima coisa da pagina, e ela terminava
       colada no fim da tela. */
    .related {
        margin-top: 5rem;
        padding-bottom: 40px;
    }

    .product-modal {
        --modal-gutter: clamp(0.75rem, 2vw, 1.25rem);
        --modal-max: 1180px;
        position: fixed;
        inset: 0;
        z-index: 4500;
        width: 100vw;
        max-width: none;
        height: 100dvh;
        min-height: 100vh;
        margin: 0;
        display: none;
        overflow-y: hidden;
        overflow-x: hidden;
        padding: 5rem var(--modal-gutter) 2rem;
        background: rgba(18, 16, 14, 0.76);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }

    .product-modal.active {
        display: block;
    }

    .product-modal::before {
        content: none;
    }

    .product-modal-panel {
        position: relative;
        z-index: 1;
        width: 100%;
        max-width: var(--modal-max);
        margin-left: auto;
        margin-right: auto;
        background: var(--surface);
        border-radius: 8px;
        max-height: calc(100dvh - 7rem);
        overflow-y: auto;
        overscroll-behavior: contain;
        box-shadow: 0 24px 80px rgba(42, 38, 34, 0.28);
    }

    .product-modal .product-layout {
        padding: 1.5rem;
        gap: clamp(1.5rem, 3vw, 3rem);
    }

    .product-modal .product-gallery {
        position: static;
        grid-template-columns: 82px minmax(0, 1fr);
        align-items: stretch;
        height: min(68vh, 620px);
        max-height: calc(100dvh - 9rem);
    }

    .product-modal .thumbs {
        height: 100%;
        max-height: 100%;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-right: 0.2rem;
    }

    .product-modal .main-media {
        height: min(68vh, 620px);
        max-height: calc(100dvh - 9rem);
        aspect-ratio: auto;
    }

    .product-modal .product-info h1 {
        font-size: clamp(1.75rem, 2.8vw, 2.55rem);
        line-height: 1.06;
        margin-bottom: 0.55rem;
    }

    .product-modal .product-details {
        padding: 0 1.5rem 2rem;
    }

    .product-modal .related {
        margin-top: 0;
        padding: 0 1.5rem 1.5rem;
    }

    .product-modal .related .section-title {
        padding-top: 2rem !important;
        padding-bottom: 1.5rem;
    }

    .product-modal .modal-close {
        position: fixed;
        top: 1.2rem;
        right: max(1.2rem, env(safe-area-inset-right));
        z-index: 5;
        width: 46px;
        height: 46px;
        border: 0;
        border-radius: 50%;
        background: var(--surface);
        color: var(--text-main);
        box-shadow: 0 16px 40px rgba(42, 38, 34, 0.18);
        font-size: 2rem;
        line-height: 1;
        cursor: pointer;
    }

    footer {
        background: var(--stone);
        padding: 5rem 2rem;
        text-align: center;
        margin-top: 5rem;
    }

    .footer-logo {
        margin-bottom: 1rem;
        display: inline-flex;
        justify-content: center;
    }

    .footer-logo img {
        display: block;
        width: auto;
        height: 54px;
        max-width: min(260px, 70vw);
        object-fit: contain;
    }

    .footer-contact {
        display: grid;
        gap: 0.55rem;
        max-width: 760px;
        margin: 0 auto 2.5rem;
        color: var(--text-muted);
        font-size: 0.95rem;
        line-height: 1.6;
    }

    .footer-contact p {
        color: var(--text-main);
        font-weight: 700;
        margin: 0;
    }

    .footer-contact a {
        color: var(--text-muted);
        text-decoration: none;
    }

    .footer-contact a:hover {
        color: var(--text-main);
    }

    .footer-nav {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 2rem;
        margin-bottom: 3rem;
        list-style: none;
    }

    .footer-nav a {
        color: var(--text-muted);
        text-decoration: none;
        font-size: 0.9rem;
    }

    /* Lembrete de lista e de favoritos. Aparece so' quando a pessoa volta ao
       site com produtos guardados, no canto de baixo, sem cobrir a barra do
       celular nem o aviso rapido. */
    .lembrete {
        position: fixed;
        right: 1.25rem;
        bottom: 1.25rem;
        z-index: 2400;
        width: min(23rem, calc(100vw - 2.5rem));
        padding: 1.15rem 1.25rem 1.25rem;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 8px;
        box-shadow: 0 18px 44px rgba(0, 0, 0, 0.16);
        animation: lembrete-entra 420ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    @keyframes lembrete-entra {
        from { opacity: 0; transform: translateY(18px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    .lembrete-fechar {
        position: absolute;
        top: 0.35rem;
        right: 0.55rem;
        border: none;
        background: none;
        color: var(--text-muted);
        font-size: 1.4rem;
        line-height: 1;
        cursor: pointer;
    }

    .lembrete-titulo {
        margin: 0 1.2rem 0.4rem 0;
        font-family: var(--font-serif);
        font-size: 1.02rem;
        line-height: 1.35;
        color: var(--text-main);
    }

    .lembrete-texto {
        margin: 0 0 1rem;
        font-size: 0.88rem;
        line-height: 1.45;
        color: var(--text-muted);
    }

    .lembrete-acoes {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        flex-wrap: wrap;
    }

    .lembrete-acoes .btn-whatsapp {
        flex: 1 1 auto;
        min-height: 42px;
        padding: 0.72rem 1.05rem;
        border-radius: 4px;
        font-size: 0.74rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        cursor: pointer;
    }

    .lembrete-depois {
        border: none;
        background: none;
        color: var(--text-muted);
        font-size: 0.82rem;
        text-decoration: underline;
        cursor: pointer;
    }

    @media (max-width: 1024px) {
        .lembrete {
            right: 0.75rem;
            left: 0.75rem;
            width: auto;
            /* acima da barra de baixo do celular */
            bottom: calc(5.25rem + env(safe-area-inset-bottom));
        }
    }

    /* O aviso so' se escondia empurrando a si mesmo 140px para baixo. Como ele
       nasce a 5.5rem do fundo e tem 72px de altura, sobravam 20px de tarja
       escura permanentemente visiveis na base de toda pagina no celular, por
       cima do menu de baixo. Junior viu isso em 03/09/2026 e descreveu como
       "um botao preto que nao da' pra saber o que e'". Agora ele some de
       verdade, por visibilidade, que nao depende de a conta de pixels fechar. */
    #toast {
        position: fixed;
        bottom: 5.5rem;
        left: 50%;
        transform: translateX(-50%) translateY(140px);
        z-index: 3000;
        background: var(--text-main);
        color: #fff;
        padding: 0.8rem 2rem;
        border-radius: 30px;
        font-size: 0.9rem;
        text-align: center;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        /* a visibilidade nao pode ser animada junto com o resto: ela e' um
           liga-desliga, e dentro de "all" ela vira o ultimo passo da animacao.
           Por isso ela troca em 0s, com espera de 0.28s so' na hora de sumir. */
        transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                    transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                    visibility 0s linear 0.28s;
    }

    #toast.on {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
        visibility: visible;
        transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                    transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                    visibility 0s linear 0s;
    }

    @media (max-width: 1024px) {
        .catalog-heading {
            padding: 1.35rem 1rem 0;
        }

        .catalog-heading h1 {
            font-size: clamp(1.45rem, 5vw, 2.15rem);
        }

        .shop-container,
        .content-container {
            padding: 1.4rem 1rem 3rem;
        }

        .controls {
            align-items: stretch;
            flex-direction: column;
            gap: 1rem;
            margin-bottom: 1.4rem;
        }

        .catalog-tools {
            width: 100%;
            min-width: 0;
            flex: none;
            flex-direction: column;
            align-items: stretch;
            justify-content: stretch;
            gap: 0.75rem;
        }

.catalog-tools {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

        .sort-box {
            width: 100%;
            display: grid;
            grid-template-columns: auto minmax(0, 1fr);
            gap: 0.7rem;
        }

        .sort-box select,
        .search-box {
            width: 100%;
            max-width: none;
        }

        .view-toggle {
            display: inline-flex;
            align-self: flex-end;
        }

        .color-filter-wrap {
            align-items: flex-start;
            flex-direction: column;
            gap: 0.55rem;
            margin: 0 0 1.6rem;
        }

        .color-filters {
            width: 100%;
        }
    }

    @media (max-width: 920px) {
        header nav {
            display: none;
        }

        .nav-contact {
            display: none;
        }

        .hamburger,
        .bottom-bar {
            display: flex;
        }

        .product-layout {
            grid-template-columns: 1fr;
        }

        .product-details {
            grid-template-columns: 1fr;
        }

        .product-gallery {
            position: static;
        }
    }

    @media (max-width: 768px) {
        .nav-container {
            padding-inline: 1rem;
        }

        .page-shell {
            padding-top: 74px;
        }

        .hero {
            min-height: calc(82vh - 74px);
        }

        .grid {
            grid-template-columns: 1fr 1fr;
            gap: 2rem 1rem;
        }

        #productGrid.grid-compact {
            grid-template-columns: 1fr 1fr;
            gap: 1.6rem 0.8rem;
        }

        #productGrid.grid-compact .card-title {
            font-size: 0.98rem;
        }

        .category-card {
            height: 340px;
        }

        .section-title {
            padding: 3.5rem 1.5rem 2rem;
        }

        .shop-container,
        .content-container,
        .product-page {
            padding-inline: 1rem;
        }

        .product-modal {
            left: 0;
            right: 0;
            width: 100%;
            max-width: 100vw;
            overflow-y: auto;
            overflow-x: hidden;
            overscroll-behavior-x: none;
            touch-action: pan-y;
            padding: calc(4rem + env(safe-area-inset-top)) 0.65rem calc(1rem + env(safe-area-inset-bottom));
        }

        .product-modal-panel {
            width: 100%;
            max-width: 100%;
            min-width: 0;
            border-radius: 10px;
            max-height: none;
            overflow: hidden;
        }

        .product-modal .product-layout {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1.15rem;
            padding: 0.75rem;
            width: 100%;
            max-width: 100%;
            min-width: 0;
            overflow-x: hidden;
        }

        .product-modal .product-details,
        .product-modal .related {
            padding-inline: 0.85rem;
            width: 100%;
            max-width: 100%;
            min-width: 0;
            overflow-x: hidden;
        }

        .product-modal .product-gallery {
            display: flex;
            flex-direction: column;
            grid-template-columns: none;
            gap: 0.85rem;
            width: 100%;
            max-width: 100%;
            min-width: 0;
            height: auto;
            max-height: none;
            overflow: clip;
            contain: layout paint;
        }

        .product-gallery {
            grid-template-columns: 1fr;
        }

        /* A foto ampliada comecava 80px abaixo do topo, e o X de fechar ficava
           sozinho nessa faixa escura, acima da imagem. Junior apontou em
           03/09/2026: "o x ficou dentro de uma tarja preta". Agora a foto
           comeca no alto e o X fica sobre ela, no canto. So' no celular: no
           computador a faixa nao atrapalha e continua como estava. */
        .image-lightbox-frame {
            padding-top: calc(0.6rem + env(safe-area-inset-top));
            padding-inline: 0;
        }

        .image-lightbox-close {
            top: max(0.6rem, env(safe-area-inset-top));
            right: max(0.6rem, env(safe-area-inset-right));
            width: 46px;
            height: 46px;
            font-size: 1.9rem;
        }

        /* Era uma grade travada em 5 colunas: a sexta foto do produto caia
           para uma segunda linha no celular. Virou fila unica que rola de
           lado com o dedo, no mesmo padrao do filtro de cores
           (.color-filters, logo acima). Junior, 03/09/2026. */
        .thumbs,
        .product-modal .thumbs {
            order: 2;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            width: 100%;
            max-width: 100%;
            min-width: 0;
            height: auto;
            max-height: none;
            gap: 0.45rem;
            padding-inline: 0;
            padding-bottom: 0.3rem;
            overflow-x: auto;
            overflow-y: hidden;
            scrollbar-width: none;
            -webkit-overflow-scrolling: touch;
            touch-action: pan-x pan-y;
        }

        .thumbs::-webkit-scrollbar,
        .product-modal .thumbs::-webkit-scrollbar {
            display: none;
        }

        /* 4.5rem = 72px, contra os ~60px que sobravam dividindo a tela em 5.
           Numa tela de 360px aparecem quatro inteiras e metade da quinta, e
           essa metade e' o aviso de que a fila continua para o lado. */
        .thumb,
        .product-modal .thumb {
            flex: 0 0 auto;
            width: 4.5rem;
            min-width: 0;
            height: auto;
            aspect-ratio: 1 / 1;
        }

        .product-modal .main-media {
            order: 1;
            flex: 0 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            max-width: 100%;
            height: auto;
            max-height: none;
            aspect-ratio: 4 / 5;
            background: var(--stone);
            overflow: hidden;
            contain: layout paint;
        }

        .product-modal .main-media img {
            display: block;
            width: 100%;
            max-width: 100%;
            height: 100%;
            max-height: none;
            object-fit: cover;
        }

        .product-modal .product-info {
            width: 100%;
            max-width: 100%;
            min-width: 0;
            overflow-x: hidden;
        }

        .product-modal .product-info h1 {
            max-width: 100%;
            font-size: clamp(1.45rem, 6.8vw, 1.95rem);
            line-height: 1.12;
            overflow-wrap: anywhere;
        }

        .product-modal .product-meta {
            font-size: 0.68rem;
            letter-spacing: 0.12em;
        }

        .product-modal .product-copy {
            max-width: 100%;
            font-size: 0.94rem;
            line-height: 1.55;
            overflow-wrap: anywhere;
        }

        .cart-item {
            grid-template-columns: 64px 1fr;
        }

        .cart-item>div:last-child {
            grid-column: 2;
            text-align: left !important;
        }

        footer {
            padding-bottom: 8rem;
        }
    }

    @media (max-width: 480px) {
        .logo img {
            height: 34px;
            max-width: 160px;
        }

        .grid {
            grid-template-columns: 1fr;
        }

        #productGrid.grid-compact {
            grid-template-columns: 1fr 1fr;
        }

        #productGrid.grid-compact .card-cat {
            font-size: 0.58rem;
            letter-spacing: 0.08em;
        }

        #productGrid.grid-compact .card-title {
            font-size: 0.86rem;
            line-height: 1.22;
            min-height: 3.8em;
        }

        #productGrid.grid-compact .card-price {
            /* era 0.78rem e ficava miúdo demais para a informação que a pessoa
               mais procura no card. Subiu para 0.95rem a pedido do Junior em
               03/09/2026, ainda abaixo do 1.15rem do card grande. */
            font-size: 0.95rem;
            gap: 0.16rem 0.42rem;
        }

        /* As condições comerciais voltaram: o parcelado e o PIX são o motivo
           de muita gente decidir, e some-los para caber dois por linha tirava
           justamente o que ajuda a comprar. Os botões continuam escondidos,
           porque não cabem em meia tela. */
        #productGrid.grid-compact .card-actions {
            display: none;
        }

        /* O preço estava longe do título porque a grade compacta reservava
           190px de altura para o texto e quase 4 linhas para o título, para
           alinhar os preços entre os vizinhos. No celular isso vira um vão
           enorme, e o Junior apontou em 03/09/2026. O alinhamento entre os
           dois cards da linha foi trocado, de propósito, pelo preço colado
           no título. Medido numa moldura de 400px: 8px do título ao preço. */
        #productGrid.grid-compact .card-info {
            min-height: 0;
        }

        #productGrid.grid-compact .card-title {
            min-height: 0;
        }

        .catalog-tools {
            flex-direction: column;
            align-items: stretch;
        }

        .sort-box {
            flex: none;
        }

        .sort-box select {
            width: 100%;
        }

        .card-info {
            min-height: 0;
        }

        .card-title {
            min-height: 0;
        }

        .product-actions {
            align-items: stretch;
        }

        .product-actions .btn-primary,
        .product-actions .btn-whatsapp {
            flex: 1 1 150px;
        }

        /* No celular ele fica ao lado das duas acoes, e nao numa linha so
           dele: com 44px de coracao, uma linha inteira era desperdicio. */
        .product-actions .wish-btn {
            flex: 0 0 auto;
            border-radius: 4px;
        }

        .product-modal {
            padding: env(safe-area-inset-top) 0 calc(1rem + env(safe-area-inset-bottom));
        }

        .product-modal-panel {
            border-radius: 0;
            max-height: none;
            overflow: hidden;
        }

        .product-modal .thumbs {
            width: 100%;
            height: auto;
            max-height: none;
            overflow-x: auto;
            overflow-y: hidden;
        }

        .product-modal .main-media {
            height: auto;
            max-height: none;
            aspect-ratio: 4 / 5;
        }

        .product-modal .modal-close {
            top: calc(0.6rem + env(safe-area-inset-top));
            right: max(0.6rem, env(safe-area-inset-right));
            width: 38px;
            height: 38px;
            font-size: 1.6rem;
            /* fundo claro quase opaco e sombra funda: em cima de foto clara ou
               escura o X continua legivel */
            background: rgba(255, 255, 255, 0.94);
            box-shadow: 0 6px 18px rgba(20, 18, 16, 0.35);
        }
    }

    @media (max-width: 768px) {
        /* Os 4rem de folga no topo deixavam uma faixa escura acima da foto, com
           o X de fechar sozinho la' dentro. Junior apontou em 03/09/2026: a
           foto sobe ate' o alto e o X passa a ficar sobre ela. */
        .product-modal.active {
            inset: 0 !important;
            width: 100vw !important;
            max-width: 100vw !important;
            overflow-x: hidden !important;
            padding: env(safe-area-inset-top) 0 calc(1rem + env(safe-area-inset-bottom)) !important;
        }

        .product-modal.active .product-modal-panel,
        .product-modal.active .product-layout,
        .product-modal.active .product-gallery,
        .product-modal.active .product-info,
        .product-modal.active .product-details,
        .product-modal.active .related {
            width: 100% !important;
            max-width: 100% !important;
            min-width: 0 !important;
            overflow-x: hidden !important;
            box-sizing: border-box !important;
        }

        /* Android: a janela do produto não rolava com o dedo. O painel herdava
           overscroll-behavior: contain da versão de computador, mas no celular ele
           não rola (overflow hidden), e o Chrome parava o arraste nele em vez de
           passar para a janela. No iPhone funcionava. Junior apontou em 18/09/2026. */
        .product-modal.active .product-modal-panel {
            overscroll-behavior: auto !important;
        }

        .product-modal.active .product-layout {
            grid-template-columns: minmax(0, 1fr) !important;
            padding: 0.65rem !important;
        }

        .product-modal.active .main-media {
            width: 100% !important;
            max-width: 100% !important;
            min-width: 0 !important;
            aspect-ratio: 4 / 5 !important;
            overflow: hidden !important;
        }

        .product-modal.active .main-media img {
            width: 100% !important;
            max-width: 100% !important;
            height: 100% !important;
            object-fit: cover !important;
        }

        .product-modal.active .thumbs {
            display: flex !important;
            flex-direction: row !important;
            flex-wrap: nowrap !important;
            gap: 0.45rem !important;
            width: 100% !important;
            max-width: 100% !important;
            min-width: 0 !important;
            overflow-x: auto !important;
            overflow-y: hidden !important;
            padding: 0 0 0.3rem !important;
            touch-action: pan-x pan-y !important;
        }

        .product-modal.active .thumb {
            flex: 0 0 auto !important;
            width: 4.5rem !important;
            min-width: 0 !important;
            aspect-ratio: 1 / 1 !important;
        }

        .product-modal.active .product-info h1 {
            max-width: 100% !important;
            font-size: clamp(1.25rem, 5.8vw, 1.65rem) !important;
            line-height: 1.14 !important;
            overflow-wrap: anywhere !important;
            word-break: normal !important;
        }

        .product-modal.active .product-meta {
            font-size: 0.62rem !important;
            letter-spacing: 0.1em !important;
        }

        .product-modal.active .product-copy {
            font-size: 0.88rem !important;
            line-height: 1.5 !important;
        }
    }

    @media (prefers-reduced-motion: reduce) {

        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }

        .reveal {
            opacity: 1;
            transform: none;
        }
    }

    .card-img-wrap img.img-hidden,
    .main-media img.img-hidden,
    .cart-item img.img-hidden {
        display: none;
    }

    .product-placeholder.img-fallback {
        position: absolute;
        inset: 0;
        cursor: pointer;
    }

    .cart-item .product-placeholder.img-fallback {
        position: static;
        width: 72px;
        aspect-ratio: 1;
        font-size: 0.72rem;
    }

/* ==========================================================================
   Barra de filtros da categoria

   Antes, ordenar e buscar viviam num cartao proprio (borda, fundo e sombra),
   com 44px de altura, encostado a direita, enquanto os chips de cor ficavam
   a esquerda com 30px. Eram dois blocos concorrentes em escalas diferentes.
   Agora e uma barra so: cores a esquerda, ferramentas a direita, mesma
   altura e mesmo raio dos chips.
   ========================================================================== */

.catalog-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.9rem 1.75rem;
    margin: 0 0 2.4rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.catalog-bar .color-filter-wrap {
    flex: 1 1 22rem;
    min-width: 0;
    margin: 0;
}

.catalog-bar .catalog-tools {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    gap: 0.5rem;
}

/* mesma medida dos chips de cor: 30px de altura e raio total */
.catalog-bar .sort-box select,
.catalog-bar .search-box input,
.catalog-bar .view-toggle {
    min-height: 30px;
    height: 30px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    box-shadow: none;
}

.catalog-bar .sort-box {
    gap: 0.45rem;
    font-size: 0.72rem;
}

.catalog-bar .sort-box select {
    width: auto;
    min-width: 8.5rem;
    padding: 0 1.7rem 0 0.7rem;
}

.catalog-bar .search-box {
    flex: 0 0 11rem;
    max-width: 11rem;
}

.catalog-bar .search-box input {
    padding: 0 0.8rem 0 2rem;
}

.catalog-bar .search-box svg {
    left: 0.7rem;
    width: 16px;
    height: 16px;
}

.catalog-bar .view-toggle {
    width: 30px;
    flex: 0 0 30px;
}

/* o titulo da categoria ganhou linha de apoio; ela precisa de estilo proprio */
.catalog-heading p {
    /* o texto de abertura cabe em duas linhas: 62ch quebrava em tres e deixava
       um bloco estreito embaixo de um titulo largo */
    max-width: 78ch;
    margin: 0.55rem 0 0;
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* O vao entre o titulo e a barra era de 4rem, o que soltava as duas partes.
   Escopado ao desktop para nao vencer o padding menor de 1024px para baixo,
   que ja e definido antes neste arquivo. */
@media (min-width: 1025px) {
    .shop-container {
        padding-top: 2.1rem;
    }
}

@media (max-width: 860px) {
    .catalog-bar {
        align-items: stretch;
        flex-direction: column;
        gap: 0.85rem;
    }

    /* Aqui a barra vira coluna, e isso troca o eixo do flex. O
       "flex: 1 1 22rem" do bloco de cores, que no computador é largura,
       passa a valer como ALTURA: 352px de vazio embaixo das bolinhas, em
       toda página de catálogo no celular. E sem largura travada a fila de
       cores cresce até o tamanho de todas as cores somadas (1459px no
       teste) e arrasta a página inteira para o lado.

       Medido em 03/09/2026, na própria página de arranjos, a 500px de tela:
       vazio de 352px para 69px, e rolagem lateral de 975px para 32px. */
    .catalog-bar .color-filter-wrap {
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .catalog-bar .color-filters {
        min-width: 0;
        max-width: 100%;
    }

    .catalog-bar .catalog-tools {
        flex-direction: row;
        align-items: center;
        width: 100%;
    }

    /* Ordenar e Buscar dividem a linha em partes iguais. Antes o Ordenar
       crescia a partir do tamanho do conteúdo e o Buscar partia de 8rem, então
       a busca ficava espremida num canto. Base zero nos dois faz a conta ser
       metade e metade, seja qual for o texto dentro. Pedido do Junior em
       03/09/2026. */
    .catalog-bar .sort-box {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
    }

    .catalog-bar .sort-box select {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
    }

    .catalog-bar .search-box {
        flex: 1 1 0;
        min-width: 0;
        max-width: none;
    }

    .catalog-bar .search-box input {
        width: 100%;
        min-width: 0;
    }
}

/* Abaixo de 600px a palavra "Ordenar" come metade da caixa e o nome da opção
   sai cortado, "Desta…". Ela some da tela e a caixa inteira fica para a
   opção escolhida. Quem usa leitor de tela não perde nada: o próprio seletor
   já se apresenta como "Ordenar produtos". */
@media (max-width: 600px) {
    .catalog-bar .sort-box > span {
        display: none;
    }
}


/* Aviso de produto sem preco. Fica menor e mais discreto que um valor, tanto no
   card quanto na ficha, onde .product-price strong deixaria o texto em 1.8rem. */
/* "Consultar Preço" ocupa o lugar do preço, então tem o peso visual do preço:
   mesma cor, mesmo peso e, dentro do card, o mesmo tamanho. Em cinza e mais
   miúdo, o produto parecia estar com informação faltando. */
.preco-consulta {
    display: inline-block;
    color: var(--text-main);
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.01em;
    /* respiro até o título. O card com preço tem três linhas embaixo do título
       e não precisa disto; o "Consultar Preço" é uma linha só e ficava colado */
    margin-top: 0.3rem;
}

.card-price .preco-consulta {
    font-size: inherit;
}

.product-price .preco-consulta {
    font-size: 1.05rem;
}

/* "Produto Vendido" ocupa o lugar do preço no produto vendido. Em cinza, a
   pedido do Junior em 13/09/2026: não precisa chamar atenção, o selo já avisa. */
.preco-vendido {
    display: inline-block;
    color: var(--text-muted);
    font-weight: 600;
    line-height: 1.25;
    margin-top: 0.3rem;
}

/* No card, o tamanho e o peso são os do preço (herdados de .card-price), só a
   cor fica cinza. Pedido do Junior em 14/09/2026. O texto sobe para logo abaixo
   do nome: sem preço, parcelas e PIX embaixo dele, empurrá-lo para o pé do card
   deixava o vão. Os botões continuam no pé, alinhados com os vizinhos. */
.card-price:has(> .preco-vendido) {
    margin-top: 0;
}

.card-price .preco-vendido {
    font-size: inherit;
    font-weight: inherit;
    margin-top: 0;
}

.product-price .preco-vendido {
    font-size: 1.05rem;
}

/* --- páginas vitrine, montadas em seções ---------------------------------
   Cada seção tem o próprio título e a própria grade. O carrossel rola de lado
   no lugar de quebrar linha, e o destaque usa cards maiores. */
.vitrine-secao { margin-bottom: 3.5rem; }
.vitrine-secao > h2 {
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(1.35rem, 2.4vw, 1.9rem);
    margin: 0 0 1.4rem;
}
.vitrine-texto p { max-width: 68ch; line-height: 1.7; margin: 0; }

.grid.vitrine-carrossel {
    grid-auto-flow: column;
    grid-auto-columns: minmax(250px, 280px);
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.8rem;
}
.grid.vitrine-carrossel > * { scroll-snap-align: start; }

.grid.vitrine-destaque { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); }

@media (max-width: 640px) {
    .vitrine-secao { margin-bottom: 2.4rem; }
    .grid.vitrine-destaque { grid-template-columns: 1fr; }
}

/* --- faixa de promoção, o desenho da página antiga -----------------------
   Etiqueta pequena, chamada grande em serifa e uma linha de apoio, com a
   tarja vermelha na lateral. Recuperado da página de escapulários de agosto. */
.promo-banner {
    position: relative;
    display: block;
    margin: 0 0 2rem;
    padding: 1.55rem 1.75rem 1.55rem 2rem;
    overflow: hidden;
    border: 1px solid rgba(157, 30, 20, 0.22);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(157, 30, 20, 0.12), rgba(176, 106, 75, 0.16) 46%, rgba(140, 146, 125, 0.13)),
        var(--surface);
    box-shadow: 0 16px 38px rgba(157, 30, 20, 0.1);
}

.promo-banner::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 7px;
    background: #9D1E14;
}

.promo-banner::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 34%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(157, 30, 20, 0.08));
    pointer-events: none;
}

.promo-banner small {
    display: block;
    color: #8C927D;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.promo-banner strong {
    display: block;
    max-width: 860px;
    margin-top: 0.32rem;
    color: #9D1E14;
    font-family: var(--font-serif);
    font-size: 2.65rem;
    font-weight: 700;
    line-height: 1.04;
}

.promo-banner p {
    max-width: 720px;
    margin-top: 0.65rem;
    color: var(--text-main);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.5;
}

@media (max-width: 720px) {
    .promo-banner { padding: 1.2rem 1.1rem 1.25rem 1.35rem; }
    .promo-banner strong { font-size: 1.85rem; line-height: 1.08; }
    .promo-banner p { font-size: 0.95rem; }
}

/* Condições de compra: prazo e frete, discretos e fora do caminho do preço. */
.linha-condicoes {
    margin: -0.6rem 0 1.4rem;
    color: #6f6257;
    font-size: 0.9rem;
    text-align: center;
}
.product-condicoes {
    list-style: none;
    margin: 0.9rem 0 1.2rem;
    padding: 0;
    display: grid;
    gap: 0.3rem;
    color: #6f6257;
    font-size: 0.92rem;
}
.product-condicoes li { position: relative; padding-left: 1.1rem; }
.product-condicoes li::before { content: "•"; position: absolute; left: 0.25rem; }

/* ---------------------------------------------------------------------------
 * Quebra de linha: nunca uma palavra sozinha no fim.
 *
 * Título que quebra deixando uma palavra solta na segunda linha parece erro de
 * montagem. O navegador sabe distribuir isso: "balance" equilibra as linhas de
 * um bloco curto, e "pretty" cuida do fim de parágrafo, onde a palavra órfã
 * aparece. Navegador que não conhece as duas palavras ignora a regra e quebra
 * como sempre quebrou, sem estrago.
 * ------------------------------------------------------------------------- */

h1, h2, h3, h4,
.card-title, .card-title a,
.catalog-card-content h2,
.related-card h3,
.hero-panel h2,
.article-card h3 {
    text-wrap: balance;
}

p, .dek, .lead, .card-info p, .catalog-card-content p, .related-card p {
    text-wrap: pretty;
}

/* ---------------------------------------------------------------------------
 * Filtro por tipo de peça, 11/09/2026
 *
 * Aparece só nas páginas que reúnem mais de uma casa de produto, como a
 * Decoração de Natal, que junta decorações, enfeites e presentes. Quem liga e
 * desliga a barra é o renderTipoTags, no catalogo.js. O botão reaproveita o
 * visual do filtro de cor, sem a bolinha.
 * ------------------------------------------------------------------------- */

.tipo-filter-wrap {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin: -0.6rem 0 1.2rem;
}

.tipo-filter-wrap > span {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

/* A barra nasce escondida no HTML e o javascript decide se ela aparece. Sem
   esta linha, o atributo hidden perde para o display:flex acima. */
.tipo-filter-wrap[hidden] {
    display: none;
}

/* Ajuste pedido pelo Junior em 11/09/2026: botões de cor menores, fonte do
   rótulo menor, e as duas fileiras começando na mesma altura. O que desalinhava
   era a largura das palavras: TIPO é mais curta que CORES, então cada fileira
   de botões começava num ponto. A largura mínima igual resolve sem tabela. */
.color-filter-wrap > span,
.tipo-filter-wrap > span {
    min-width: 3.6rem;
    font-size: 0.68rem;
}

.color-tag {
    min-height: 26px;
    padding: 0.24rem 0.56rem;
    font-size: 0.68rem;
}

.color-tag small {
    font-size: 0.62rem;
}

.color-dot {
    width: 0.56rem;
    height: 0.56rem;
    flex: 0 0 0.56rem;
}

/* Setas das fileiras de filtro, 11/09/2026.
   A fileira de cores passava da largura da tela e sumia por baixo do Ordenar,
   sem nada indicando que dava para rolar. As setas aparecem só quando existe o
   que rolar, e a sombra na borda mostra de que lado ainda tem filtro. */
.filtros-rolagem {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
    flex: 1 1 auto;
}

.filtros-seta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-main);
    cursor: pointer;
    transition: var(--transition);
}

.filtros-seta:hover {
    border-color: var(--sage);
    background: var(--sage-light);
}

.filtros-seta[hidden] {
    display: none;
}

/* A borda desbotada avisa que a fileira continua, mesmo sem a seta em foco. */
.filtros-rolagem.tem-rolagem .color-filters {
    mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}

/* Os dois filtros, Tipo e Cores, no mesmo tamanho. Pedido do Junior em
   11/09/2026: o texto das cores ficava maior que o do tipo, e os dois precisam
   seguir o mesmo padrão. A especificidade aqui é de propósito, para ganhar de
   qualquer regra antiga da folha. */
.tipo-filter-wrap .color-tag,
.color-filter-wrap .color-tag {
    min-height: 26px;
    padding: 0.24rem 0.56rem;
    font-size: 0.68rem;
    line-height: 1.1;
    gap: 0.3rem;
}

.tipo-filter-wrap .color-tag small,
.color-filter-wrap .color-tag small {
    font-size: 0.62rem;
}