/* --------------------------------------------------------------
   Buttons
   -------------------------------------------------------------- */

.btn {
    min-height: 46px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);

    padding:
        0 var(--space-6);

    border:
        1px solid transparent;

    border-radius:
        var(--radius-pill);

    font-weight:
        var(--font-weight-semibold);

    line-height: 1;

    cursor: pointer;

    transition:
        background var(--transition-fast),
        color var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast);
}


.btn:hover {
    transform:
        translateY(-1px);
}


.btn-primary {
    background:
        var(--color-primary);

    color:
        var(--color-text-inverse);
}


.btn-primary:hover {
    background:
        var(--color-primary-hover);
}


.btn-secondary {
    border-color:
        var(--color-border);

    background:
        var(--color-surface);

    color:
        var(--color-text);
}


.btn-secondary:hover {
    border-color:
        var(--color-border-strong);
}


.btn-ghost {
    background:
        transparent;

    color:
        var(--color-text);
}


.btn-ghost:hover {
    background:
        var(--color-primary-soft);
}


/* --------------------------------------------------------------
   Badges
   -------------------------------------------------------------- */

.badge {
    display: inline-flex;
    align-items: center;

    min-height: 28px;

    padding:
        0 var(--space-3);

    border-radius:
        var(--radius-pill);

    background:
        var(--color-primary-soft);

    color:
        var(--color-primary);

    font-size:
        var(--font-size-xs);

    font-weight:
        var(--font-weight-bold);

    line-height: 1;
}


.badge-neutral {
    background:
        var(--color-surface-soft);

    color:
        var(--color-text-muted);
}


.badge-success {
    background:
        #e8f0e9;

    color:
        var(--color-success);
}


.badge-warning {
    background:
        #f6eddd;

    color:
        var(--color-warning);
}


.badge-danger {
    background:
        #f6e5e3;

    color:
        var(--color-danger);
}


/* --------------------------------------------------------------
   Form controls
   -------------------------------------------------------------- */

.field {
    display: grid;

    gap:
        var(--space-2);
}


.field-label {
    font-size:
        var(--font-size-sm);

    font-weight:
        var(--font-weight-semibold);
}


.field-help {
    color:
        var(--color-text-muted);

    font-size:
        var(--font-size-xs);
}


.input,
.select {
    width: 100%;

    min-height: 48px;

    padding:
        0 var(--space-4);

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius-md);

    background:
        var(--color-surface);

    color:
        var(--color-text);

    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
}


.input::placeholder {
    color:
        var(--color-text-muted);
}


.input:hover,
.select:hover {
    border-color:
        var(--color-border-strong);
}


.input:focus,
.select:focus {
    border-color:
        var(--color-primary);

    outline: none;

    box-shadow:
        0 0 0 3px
        var(--color-primary-soft);
}


/* --------------------------------------------------------------
   Generic card
   -------------------------------------------------------------- */

.card {
    overflow: hidden;

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius-lg);

    background:
        var(--color-surface);

    box-shadow:
        var(--shadow-sm);
}


.card-body {
    padding:
        var(--space-6);
}


/* --------------------------------------------------------------
   Product card foundation
   -------------------------------------------------------------- */

.product-card {
    position: relative;

    overflow: hidden;

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius-lg);

    background:
        var(--color-surface);

    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal);
}


.product-card:hover {
    transform:
        translateY(-4px);

    box-shadow:
        var(--shadow-md);
}


.product-card-media {
    aspect-ratio:
        1 / 1;

    display: grid;

    place-items: center;

    padding:
        var(--space-8);

    background:
        var(--color-surface-soft);
}


.product-card-placeholder {
    color:
        var(--color-text-muted);

    font-size:
        var(--font-size-sm);

    text-align:
        center;
}


.product-card-content {
    display: grid;

    gap:
        var(--space-3);

    padding:
        var(--space-5);
}


.product-card-brand {
    color:
        var(--color-text-muted);

    font-size:
        var(--font-size-xs);

    font-weight:
        var(--font-weight-semibold);

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.product-card-title {
    margin: 0;

    font-size:
        var(--font-size-lg);
}


.product-card-price {
    margin: 0;

    font-size:
        var(--font-size-xl);

    font-weight:
        var(--font-weight-bold);
}


/* --------------------------------------------------------------
   Component groups
   -------------------------------------------------------------- */

.button-group,
.badge-group {
    display: flex;
    flex-wrap: wrap;

    gap:
        var(--space-3);
}

/* --------------------------------------------------------------
   Styleguide
   Temporary development components
   -------------------------------------------------------------- */

.styleguide-hero {
    padding:
        var(--space-20) 0
        var(--space-12);
}


.styleguide-hero h1 {
    max-width: 760px;

    margin-bottom:
        var(--space-5);

    font-size:
        clamp(
            3.5rem,
            8vw,
            7rem
        );

    letter-spacing:
        -0.055em;

    line-height:
        0.9;
}


.styleguide-hero p {
    max-width: 640px;

    margin-bottom: 0;

    font-size:
        var(--font-size-lg);

    line-height:
        var(--line-height-relaxed);
}


.styleguide-section {
    padding-block:
        var(--space-12);

    border-top:
        1px solid var(--color-border);
}


.styleguide-section-header {
    max-width: 640px;

    margin-bottom:
        var(--space-8);
}


.styleguide-section-header h2 {
    margin-bottom:
        var(--space-3);

    font-size:
        var(--font-size-3xl);

    letter-spacing:
        -0.035em;
}


.styleguide-form {
    max-width: 480px;

    display: grid;

    gap:
        var(--space-6);
}


.styleguide-product {
    max-width: 320px;
}


.styleguide-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap:
        var(--space-4);
}


.color-swatch {
    overflow: hidden;

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius-lg);

    background:
        var(--color-surface);
}


.color-swatch-preview {
    min-height: 120px;
}


.color-swatch-content {
    padding:
        var(--space-4);
}


.color-swatch-content strong,
.color-swatch-content span {
    display: block;
}


.color-swatch-content span {
    margin-top:
        var(--space-1);

    color:
        var(--color-text-muted);

    font-size:
        var(--font-size-xs);
}


.swatch-olive {
    background:
        var(--color-olive-700);
}


.swatch-beige {
    background:
        var(--color-beige-300);
}


.swatch-background {
    background:
        var(--color-background);
}


.swatch-black {
    background:
        var(--color-black);
}


.type-display {
    margin-bottom:
        var(--space-6);

    font-size:
        clamp(
            2.75rem,
            6vw,
            5.5rem
        );

    letter-spacing:
        -0.05em;

    line-height:
        0.95;
}


.type-heading {
    margin-bottom:
        var(--space-4);

    font-size:
        var(--font-size-3xl);

    letter-spacing:
        -0.035em;
}


@media (max-width: 800px) {

    .styleguide-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 500px) {

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

}

/* Product card
   -------------------------------------------------------------- */

.product-card {
    min-width: 0;

    overflow: hidden;

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius-lg);

    background:
        var(--color-surface);
}


.product-card-media {
    aspect-ratio:
        1 / 1;

    overflow: hidden;

    background:
        var(--color-background);
}


.product-card-media img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.product-card-placeholder {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            145deg,
            var(--color-background) 0%,
            var(--color-secondary) 100%
        );
}


.product-card-placeholder span {
    color:
        var(--color-primary);

    font-size:
        clamp(1.4rem, 3vw, 2.2rem);

    font-weight:
        var(--font-weight-bold);

    letter-spacing:
        -0.04em;
}


.product-card-info {
    padding:
        var(--space-5);
}


.product-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap:
        var(--space-3);

    margin-bottom:
        var(--space-3);

    color:
        var(--color-text-muted);

    font-size:
        var(--font-size-xs);

    text-transform:
        uppercase;

    letter-spacing:
        0.06em;
}


.product-card-info h3 {
    margin:
        0 0 var(--space-3);

    font-size:
        var(--font-size-xl);

    line-height:
        1.1;

    letter-spacing:
        -0.025em;
}


.product-card-info > p {
    margin:
        0 0 var(--space-6);

    color:
        var(--color-text-muted);

    line-height:
        var(--line-height-relaxed);
}


.product-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap:
        var(--space-4);

    padding-top:
        var(--space-4);

    border-top:
        1px solid var(--color-border);
}


.product-card-price {
    font-size:
        var(--font-size-lg);
}


.product-card-arrow {
    color:
        var(--color-primary);

    font-size:
        1.5rem;
}


/* Product card link
   -------------------------------------------------------------- */

.product-card-link {
    display:
        block;

    height:
        100%;

    color:
        inherit;

    text-decoration:
        none;
}


.product-card-link:focus-visible {
    outline:
        2px solid var(--color-primary);

    outline-offset:
        -2px;

    border-radius:
        var(--radius-lg);
}


.product-card-link:hover
.product-card-arrow {
    transform:
        translateX(4px);
}


.product-card-arrow {
    transition:
        transform var(--transition-normal);
}
/* Pulso: compact card description + tags + purchase actions. */
.product-card { display: flex; flex-direction: column; min-width: 0; }
.product-card-link { height: auto; flex: 1; min-width: 0; }
.product-card-info { padding: 0.85rem 1rem 0; }
.product-card-meta { margin-bottom: 0.45rem; font-size: 0.68rem; }
.product-card-info h3 { margin-bottom: 0.45rem; }
.product-card-info > p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    min-height: 2.65em;
    max-height: 2.65em;
    margin: 0 0 0.35rem;
    font-size: 0.84rem;
    line-height: 1.325;
}
.product-card-badges {
    display: flex;
    gap: 0.3rem;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
    height: 1.55rem;
    margin: 0 0 0.45rem;
}
.product-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    max-width: calc(50% - 0.15rem);
    min-width: 0;
    padding: 0.18rem 0.4rem;
    border-radius: 999px;
    background: #eef1e7;
    color: #214638;
    font-size: 0.66rem;
    font-weight: 600;
    line-height: 1.15;
}
.product-card-badge-label { overflow: hidden; text-overflow: ellipsis; }
.product-card-bottom { padding-top: 0.55rem; }
.product-card-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 0.4rem;
    padding: 0.55rem 1rem 0.85rem;
}
.product-card-actions form { margin: 0; min-width: 0; }
.product-card-actions button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: 0.4rem 0.55rem;
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
}
.product-card-buy { background: #214638; color: #fff; border: 1px solid #214638; }
.product-card-cart { background: #f5f1e7; color: #214638; border: 1px solid #cbd5cb; }
.product-card-actions button:focus-visible { outline: 3px solid #b96b50; outline-offset: 2px; }
@media (max-width: 420px) {
    .product-card-info { padding-inline: 0.7rem; }
    .product-card-actions { padding-inline: 0.7rem; }
    .product-card-badge { font-size: 0.61rem; }
}

/* Feedback discreto sem alterar a altura do card. */
.product-card { position: relative; }
.product-card-feedback { position: absolute; top: 0.6rem; left: 0.6rem; right: 0.6rem; z-index: 2; pointer-events: none; }
.product-card-feedback .cart-add-feedback {
    display: inline-block; max-width: 100%; padding: 0.5rem 0.75rem;
    border-radius: 999px; background: #214638; color: #fff;
    box-shadow: 0 4px 18px rgb(0 0 0 / 12%); font-size: 0.75rem;
    animation: pulso-cart-feedback 3s ease-in forwards;
}
@keyframes pulso-cart-feedback {
    0%, 70% { opacity: 1; }
    100% { opacity: 0; visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
    .product-card-feedback .cart-add-feedback { animation: none; }
}