/* Tema da loja sobre o Bootstrap 5.3 pré-compilado (sem Sass/Node). Paleta: mar, pau-brasil, coqueiro, sol. */
:root {
    --bs-primary: #0B5563;   --bs-primary-rgb: 11, 85, 99;
    --bs-secondary: #4A5B60; --bs-secondary-rgb: 74, 91, 96;
    --bs-success: #2F6B4F;   --bs-success-rgb: 47, 107, 79;
    --bs-danger: #A3262A;    --bs-danger-rgb: 163, 38, 42;
    --bs-warning: #F2B632;   --bs-warning-rgb: 242, 182, 50;
    --bs-info: #16808F;      --bs-info-rgb: 22, 128, 143;
    --bs-dark: #12262B;      --bs-dark-rgb: 18, 38, 43;
    --bs-body-color: #12262B; --bs-body-color-rgb: 18, 38, 43;
    --bs-body-bg: #F6FAF9;   --bs-body-bg-rgb: 246, 250, 249;
    --bs-link-color: #0B5563; --bs-link-color-rgb: 11, 85, 99;
    --bs-link-hover-color: #083F49; --bs-link-hover-color-rgb: 8, 63, 73;
    --bs-font-sans-serif: "Avenir Next", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-heading-font: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    --bs-border-radius: .5rem;
    --focus: #F2B632;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--bs-heading-font); font-weight: 700; }

/* Botões e componentes nas cores da marca */
.btn-primary {
    --bs-btn-bg: #0B5563; --bs-btn-border-color: #0B5563; --bs-btn-color: #fff;
    --bs-btn-hover-bg: #094651; --bs-btn-hover-border-color: #083F49; --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #083F49; --bs-btn-active-border-color: #073740; --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: #0B5563; --bs-btn-disabled-border-color: #0B5563;
    --bs-btn-focus-shadow-rgb: 11, 85, 99;
}
.btn-outline-primary {
    --bs-btn-color: #0B5563; --bs-btn-border-color: #0B5563;
    --bs-btn-hover-bg: #0B5563; --bs-btn-hover-border-color: #0B5563; --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #083F49; --bs-btn-active-border-color: #083F49; --bs-btn-active-color: #fff;
    --bs-btn-focus-shadow-rgb: 11, 85, 99;
}
.btn-warning {
    --bs-btn-bg: #F2B632; --bs-btn-border-color: #F2B632; --bs-btn-color: #12262B;
    --bs-btn-hover-bg: #E3A41B; --bs-btn-hover-border-color: #E3A41B; --bs-btn-hover-color: #12262B;
    --bs-btn-active-bg: #D4960F; --bs-btn-active-border-color: #D4960F; --bs-btn-active-color: #12262B;
}
.btn-danger {
    --bs-btn-bg: #A3262A; --bs-btn-border-color: #A3262A;
    --bs-btn-hover-bg: #8A1F23; --bs-btn-hover-border-color: #8A1F23;
    --bs-btn-active-bg: #7A1B1F; --bs-btn-active-border-color: #7A1B1F;
}
.form-control:focus, .form-select:focus { border-color: #0B5563; box-shadow: 0 0 0 .25rem rgba(11, 85, 99, .25); }
.form-check-input:checked { background-color: #0B5563; border-color: #0B5563; }
.form-check-input:focus { border-color: #0B5563; box-shadow: 0 0 0 .25rem rgba(11, 85, 99, .25); }
.nav-pills { --bs-nav-pills-link-active-bg: #0B5563; }
.pagination {
    --bs-pagination-color: #0B5563; --bs-pagination-hover-color: #083F49;
    --bs-pagination-active-bg: #0B5563; --bs-pagination-active-border-color: #0B5563;
    --bs-pagination-focus-color: #083F49; --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(11, 85, 99, .25);
}
.list-group-item-action:hover { background: #E3EFEE; }

/* Único elemento "ousado": a fita do Bonfim como divisor de marca */
.fita {
    height: .5rem;
    background: linear-gradient(90deg,
        #A3262A 0 16.6%, #F2B632 0 33.3%, #2F6B4F 0 50%,
        #0B5563 0 66.6%, #E8E2D0 0 83.3%, #7A3E8E 0 100%);
}

.skip-link {
    position: absolute; left: -999px; top: .5rem; z-index: 2000;
    background: #12262B; color: #fff; padding: .5rem 1rem; border-radius: .25rem;
}
.skip-link:focus { left: .5rem; color: #fff; }

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

.brand { font-family: var(--bs-heading-font); font-weight: 700; letter-spacing: .01em; }

.hero { background: #0B5563; color: #fff; }
.hero h1 { font-size: clamp(2rem, 5vw, 3.4rem); max-width: 18ch; }
.hero p  { max-width: 52ch; color: #E3EFEE; }

.product-card { transition: box-shadow .2s ease; }
.product-card:hover { box-shadow: 0 .5rem 1.25rem rgba(18, 38, 43, .12); }
.product-card .ratio img { object-fit: cover; }
.price-old { text-decoration: line-through; color: #4A5B60; }
.price { font-weight: 700; color: #0B5563; font-variant-numeric: tabular-nums; }

.category-pill { border: 1px solid #0B5563; color: #0B5563; background: #fff; }
.category-pill:hover, .category-pill.active { background: #0B5563; color: #fff; }

.pix-box svg { max-width: 240px; height: auto; background: #fff; }
.legal-text { max-width: 75ch; }
.legal-text h2 { font-size: 1.35rem; margin-top: 2rem; }

#cookie-banner { position: fixed; inset: auto 0 0 0; z-index: 1080; }
.qty-input { width: 6rem; }
.narrow { max-width: 34rem; }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}