/** Shopify CDN: Minification failed

Line 34:0 All "@import" rules must come first

**/
/* ============================================================
   ROLL BY GRACE — Custom Branding Layer
   Horizon theme override — DO NOT remove Horizon base files
   ============================================================ */

/* ----------------------------------------
   1. CUSTOM PROPERTIES — RBG Brand Tokens
   ---------------------------------------- */
:root {
  /* Fontes */
  --rbg-font-display: 'Cinzel', Georgia, serif;
  --rbg-font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Paleta dark gold */
  --rbg-bg:              #0e0d0b;
  --rbg-surface:         #141310;
  --rbg-surface-soft:    #1a1815;
  --rbg-border:          #3a3730;
  --rbg-text:            #e8e4dc;
  --rbg-text-muted:      #9a9487;
  --rbg-accent:          #c8953a;
  --rbg-accent-hover:    #e0aa4a;
  --rbg-accent-rgb:      200, 149, 58;
}

/* ----------------------------------------
   2. GOOGLE FONTS — Cinzel + Inter
   ---------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Inter:wght@300;400;500;600&display=swap');

/* ----------------------------------------
   3. BASE OVERRIDES — body, fundo, texto
   ---------------------------------------- */
body {
  font-family: var(--rbg-font-body);
  color: var(--rbg-text);
  background-color: var(--rbg-bg);
  -webkit-font-smoothing: antialiased;
}

/* ----------------------------------------
   4. COLOR SCHEME OVERRIDES
   O Horizon usa .color-{id} com vars CSS
   Aqui sobrescrevemos os valores globais
   ---------------------------------------- */

/* Override no :root para o color scheme padrao */
body,
:root {
  --color-background:     var(--rbg-bg);
  --color-foreground:     var(--rbg-text);
  --color-foreground-heading: var(--rbg-text);
  --color-primary:        var(--rbg-accent);
  --color-primary-hover:  var(--rbg-accent-hover);
  --color-border:         var(--rbg-border);
  --color-shadow:         rgba(0,0,0,0.6);
  --color-foreground-muted: var(--rbg-text-muted);
}

/* Todos os color-schemes herdam o dark gold */
[class*='color-'] {
  --color-background:     var(--rbg-bg);
  --color-foreground:     var(--rbg-text);
  --color-foreground-heading: var(--rbg-text);
  --color-primary:        var(--rbg-accent);
  --color-primary-hover:  var(--rbg-accent-hover);
  --color-border:         var(--rbg-border);
  --color-foreground-muted: var(--rbg-text-muted);
}

/* ----------------------------------------
   5. TIPOGRAFIA — Headings
   ---------------------------------------- */
h1, h2, h3, h4, h5, h6,
.heading, .h1, .h2, .h3, .h4,
[class*='heading'] {
  font-family: var(--rbg-font-display);
  letter-spacing: 0.03em;
  color: var(--rbg-text);
}

body, p, li, input, textarea, select, button, span, a {
  font-family: var(--rbg-font-body);
}

/* ----------------------------------------
   6. HEADER
   ---------------------------------------- */
.header,
.header-wrapper,
header {
  background-color: rgba(14, 13, 11, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rbg-border);
  color: var(--rbg-text);
}

.header__heading-link,
.header__menu-item,
.header__icon {
  color: var(--rbg-text) !important;
}

.header__heading-link:hover,
.header__menu-item:hover {
  color: var(--rbg-accent) !important;
  transition: color 0.2s ease;
}

/* ----------------------------------------
   7. FOOTER
   ---------------------------------------- */
.footer,
footer {
  background-color: var(--rbg-surface);
  border-top: 1px solid var(--rbg-border);
  color: var(--rbg-text-muted);
}

.footer a,
footer a {
  color: var(--rbg-text-muted);
}

.footer a:hover,
footer a:hover {
  color: var(--rbg-accent);
}

/* ----------------------------------------
   8. BOTOES
   ---------------------------------------- */
.button,
.btn,
button[type="submit"],
[role="button"] {
  border-radius: 999px;
  font-family: var(--rbg-font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.75rem;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.button--primary,
.button[data-variant="primary"],
.shopify-payment-button__button {
  background-color: var(--rbg-accent) !important;
  color: #0e0d0b !important;
  border-color: var(--rbg-accent) !important;
}

.button--primary:hover,
.button[data-variant="primary"]:hover,
.shopify-payment-button__button:hover {
  background-color: var(--rbg-accent-hover) !important;
  border-color: var(--rbg-accent-hover) !important;
}

.button--secondary,
.button--outline {
  background-color: transparent;
  color: var(--rbg-text);
  border: 1px solid var(--rbg-border);
}

.button--secondary:hover,
.button--outline:hover {
  border-color: var(--rbg-accent);
  color: var(--rbg-accent);
}

/* ----------------------------------------
   9. CARDS DE PRODUTO
   ---------------------------------------- */
.card,
.card-wrapper,
[class*='card'] {
  background-color: var(--rbg-surface);
  border-color: var(--rbg-border);
}

.card__heading,
.card__title {
  font-family: var(--rbg-font-display);
  color: var(--rbg-text);
}

.card__price,
.price {
  color: var(--rbg-accent);
  font-weight: 500;
}

.card:hover {
  border-color: var(--rbg-accent);
  transition: border-color 0.2s ease;
}

/* ----------------------------------------
   10. SECCOES — Section background
   ---------------------------------------- */
.section-background {
  background-color: var(--rbg-bg);
}

.section {
  color: var(--rbg-text);
}

/* ----------------------------------------
   11. LINKS E OVERRIDES GERAIS
   ---------------------------------------- */
a {
  color: var(--rbg-text);
  text-decoration: none;
}

a:hover {
  color: var(--rbg-accent);
}

input, textarea, select {
  background-color: var(--rbg-surface);
  border-color: var(--rbg-border);
  color: var(--rbg-text);
}

input:focus, textarea:focus, select:focus {
  border-color: var(--rbg-accent);
  outline: none;
  box-shadow: 0 0 0 2px rgba(var(--rbg-accent-rgb), 0.2);
}

/* ----------------------------------------
   12. BADGES DE CATEGORIA (Printful)
   ---------------------------------------- */
.badge--devotional {
  background: rgba(200, 149, 58, 0.15);
  color: var(--rbg-accent);
  border: 1px solid rgba(200, 149, 58, 0.3);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--rbg-font-display);
}

.badge--comedy {
  background: rgba(139, 26, 26, 0.15);
  color: #ffb3b3;
  border: 1px solid rgba(139, 26, 26, 0.3);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.badge--bjj {
  background: rgba(26, 74, 139, 0.15);
  color: #b3d1ff;
  border: 1px solid rgba(26, 74, 139, 0.3);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ----------------------------------------
   13. SCROLLBAR CUSTOMIZADA
   ---------------------------------------- */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--rbg-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--rbg-border);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--rbg-accent);
}

/* ----------------------------------------
   14. MARQUEE / ANNOUNCEMENT BAR
   ---------------------------------------- */
.announcement-bar,
[class*='marquee'],
[class*='announcement'] {
  background-color: var(--rbg-surface-soft);
  border-bottom: 1px solid var(--rbg-border);
  color: var(--rbg-text-muted);
}

/* ----------------------------------------
   15. CART DRAWER
   ---------------------------------------- */
cart-drawer,
.cart-drawer,
[class*='cart-drawer'] {
  background-color: var(--rbg-surface);
  border-left: 1px solid var(--rbg-border);
}

.cart-drawer__title {
  font-family: var(--rbg-font-display);
  color: var(--rbg-text);
  letter-spacing: 0.05em;
}

/* ----------------------------------------
   16. PREDICTIVE SEARCH
   ---------------------------------------- */
.predictive-search,
[class*='predictive-search'] {
  background-color: var(--rbg-surface);
  border: 1px solid var(--rbg-border);
}

.predictive-search__item:hover {
  background-color: var(--rbg-surface-soft);
}

/* ----------------------------------------
   17. VARIANT PICKER / SWATCHES
   ---------------------------------------- */
.swatch,
[class*='swatch'] {
  border-color: var(--rbg-border);
}

.swatch--active,
[class*='swatch'][aria-checked='true'] {
  border-color: var(--rbg-accent);
  box-shadow: 0 0 0 2px rgba(var(--rbg-accent-rgb), 0.3);
}

/* ----------------------------------------
   18. MODAL / DIALOGS
   ---------------------------------------- */
dialog,
.modal,
[class*='modal'] {
  background-color: var(--rbg-surface);
  border: 1px solid var(--rbg-border);
  color: var(--rbg-text);
}

/* ----------------------------------------
   19. SECTION.LIQUID — Section wrapper
   ---------------------------------------- */
.section--full-width {
  width: 100%;
}

/* ----------------------------------------
   20. HERO — Estilos visuais
   ---------------------------------------- */
[class*='hero'] .heading,
[class*='hero'] h1,
[class*='hero'] h2 {
  font-family: var(--rbg-font-display);
  text-shadow: 0 2px 20px rgba(0,0,0,0.7);
}

/* ============================================================
   END OF ROLL BY GRACE CUSTOM CSS
   ============================================================ */

   /* ----------------------------------------
   21. PASSWORD PAGE — Dark override
   ---------------------------------------- */
.password-main-content,
.password-section,
[class*='password'] {
  background-color: var(--rbg-bg) !important;
  color: var(--rbg-text) !important;
}

/* Force dark background em todos os casos */
html, body {
  background-color: var(--rbg-bg) !important;
  color: var(--rbg-text) !important;
}

/* Password page specific button */
.password-button,
.password-form .button {
  background-color: var(--rbg-accent);
  color: #0e0d0b;
  border: none;
  border-radius: 999px;
  font-family: var(--rbg-font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ----------------------------------------
   22. HEADER — Override agressivo
   Horizon header usa #header-group e
   section-background com color-scheme
   ---------------------------------------- */
#header-group,
#header-group .section-background,
#header-group > sticky-header,
sticky-header,
.header-section,
[id='header-group'] {
  background-color: rgba(14, 13, 11, 0.95) !important;
  border-bottom: 1px solid var(--rbg-border) !important;
}

/* Override das vars CSS no header-group */
#header-group {
  --color-background: #0e0d0b !important;
  --color-foreground: #e8e4dc !important;
  --color-foreground-heading: #e8e4dc !important;
  --color-border: #3a3730 !important;
}

/* Logo e links do menu */
#header-group a,
#header-group .header__heading,
#header-group .header__menu-item span,
#header-group nav a {
  color: #e8e4dc !important;
}

#header-group a:hover,
#header-group .header__menu-item:hover span {
  color: #c8953a !important;
}

/* Cart icon e search icon */
#header-group button,
#header-group .header__icon svg {
  color: #e8e4dc !important;
  fill: #e8e4dc !important;
}

/* Announcement bar acima do header */
#header-group .announcement-bar {
  background-color: #141310 !important;
  color: #9a9487 !important;
  border-bottom: 1px solid #3a3730 !important;
}