/*
 * Base do tema Rose Poudré: fontes, reset, tipografia e peças comuns (gavetas, botões redondos, utilitários).
 * As variáveis de cor/fonte/tamanho vêm de data/settings.json (inc/header.php imprime o :root no <head>);
 * os valores abaixo são o padrão caso o <style> não exista. Medidas tiradas da loja publicada.
 */

@font-face {
  font-family: 'SF Pro Display Fexx';
  src: url('../fonts/SF-Pro-Display-Regular.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'SF Pro Display Fexx';
  src: url('../fonts/SF-Pro-Display-Medium.woff2') format('woff2');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'SF Pro Display Fexx';
  src: url('../fonts/SF-Pro-Display-Bold.woff2') format('woff2');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --color-base-text: 23 23 23;
  --color-base-background: 255 255 255;
  --color-base-button: 0 0 0;
  --color-base-button-text: 255 255 255;
  --color-keyboard-focus: 138 106 49;
  --color-placeholder: 250 250 250;
  --color-drawer-text: 0 0 0;
  --color-drawer-background: 255 255 255;
  --color-drawer-button-background: 23 23 23;
  --color-drawer-button-text: 255 255 255;
  --color-drawer-overlay: 23 23 23;
  --color-foreground: var(--color-base-text);
  --color-background: var(--color-base-background);

  --font-heading-family: 'SF Pro Display Fexx', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-heading-weight: 500;
  --font-heading-line-height: 0.8;
  --font-heading-letter-spacing: -0.03em;
  --font-body-family: 'SF Pro Display Fexx', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-body-weight: 400;
  --font-body-letter-spacing: -0.005em;
  --font-navigation-size: clamp(0.75rem, 0.748rem + 0.3174vw, 0.875rem);
  --text-xs: 0.6875rem;
  --text-sm: 0.75rem;
  --text-base: 0.75rem;
  --text-lg: 0.875rem;
  --text-2xl: 1.25rem;
  --text-3xl: 1.625rem;
  --icon-weight: 1.2px;

  /* Espaçamentos (escala do tema: 1 = 0,25rem) */
  --sp-0d5: 0.125rem;
  --sp-1: 0.25rem;
  --sp-1d5: 0.375rem;
  --sp-2: 0.5rem;
  --sp-2d5: 0.625rem;
  --sp-3: 0.75rem;
  --sp-3d5: 0.875rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-7: 1.75rem;
  --sp-8: 2rem;
  --sp-9: 2.25rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  --page-width: 1900px;
  --page-padding: var(--sp-5);
  --gap-padding: clamp(var(--sp-5), 2.526vw, var(--sp-12));
  --rounded-button: 3.75rem;
  --rounded-input: 0.375rem;

  /* Curvas de animação medidas na loja (gavetas, menus, topo) */
  --rp-ease-drawer: cubic-bezier(0.7, 0, 0.2, 1);
  --rp-ease-nav: cubic-bezier(0.6, 0, 0.4, 1);
  --rp-ease-soft: cubic-bezier(0.3, 1, 0.3, 1);
  --rp-header-offset: 0px;
}

@media screen and (min-width: 1024px) {
  :root { --page-padding: var(--sp-9); }
}

@media screen and (min-width: 1280px) {
  :root { --page-padding: var(--sp-12); --gap-padding: var(--sp-12); }
}

@media screen and (min-width: 1536px) {
  :root { --page-padding: max(var(--sp-12), 50vw - var(--page-width) / 2); }
}

/* ---------- Reset ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
  border: 0 solid currentColor;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background-color: rgb(var(--color-background));
  color: rgb(var(--color-foreground));
  font-family: var(--font-body-family);
  font-size: var(--text-base);
  font-style: var(--font-body-style, normal);
  font-weight: var(--font-body-weight);
  letter-spacing: var(--font-body-letter-spacing);
  line-height: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: weight style small-caps;
}

h1, h2, h3, h4, h5, h6, p, blockquote, figure, dl, dd, pre, hr, fieldset, legend {
  margin: 0;
}

h1, h2, h3, h4, h5, h6, blockquote, .heading {
  font-family: var(--font-heading-family);
  font-style: var(--font-heading-style, normal);
  font-weight: var(--font-heading-weight);
  line-height: var(--font-heading-line-height);
  letter-spacing: var(--font-heading-letter-spacing);
  text-transform: var(--font-heading-text-transform, none);
}

ul, ol, menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

b, strong { font-weight: 700; }

img, svg, video, canvas, iframe, picture {
  display: block;
  vertical-align: middle;
}

img, video {
  max-width: 100%;
  height: auto;
}

button, input, select, textarea, optgroup {
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: normal;
  color: inherit;
}

button, [role="button"] { cursor: pointer; }

button, select { text-transform: none; }

button, [type="button"], [type="reset"], [type="submit"] {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
}

input, textarea, select { background-color: #fff; }

input::placeholder, textarea::placeholder { color: rgb(117 117 117); opacity: 1; }

[type="search"] { -webkit-appearance: textfield; outline-offset: -2px; }
[type="search"]::-webkit-search-decoration,
[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

table { border-collapse: collapse; text-indent: 0; }

hr { height: 0; border-top-width: 1px; color: inherit; }

summary { display: list-item; cursor: pointer; }
summary::-webkit-details-marker { display: none; }

[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid rgb(var(--color-keyboard-focus));
  outline-offset: 2px;
}

/* ---------- Utilitários ---------- */

.sr-only,
.rp-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link:focus {
  position: fixed !important;
  z-index: 100;
  top: var(--sp-2);
  left: var(--sp-2);
  width: auto;
  height: auto;
  margin: 0;
  padding: var(--sp-3) var(--sp-5);
  clip: auto;
  border-radius: var(--rounded-button);
  background: rgb(var(--color-foreground));
  color: rgb(var(--color-background));
}

.page-width {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--page-padding);
}

.section {
  background-color: rgb(var(--color-background));
  color: rgb(var(--color-foreground));
}

/* Respiro das seções: 3/4 do configurado abaixo de 768px e o valor cheio acima (como na loja) */
.section--padding {
  padding-block-start: calc(var(--section-padding-top, 0px) * 0.75);
  padding-block-end: calc(var(--section-padding-bottom, 0px) * 0.75);
}

@media screen and (min-width: 768px) {
  .section--padding {
    padding-block-start: var(--section-padding-top, 0px);
    padding-block-end: var(--section-padding-bottom, 0px);
  }
}

.relative { position: relative; }

.page-container { position: relative; }

/* Texto do lojista (páginas, descrições) */
.rte { line-height: 1.6; }
.rte > * + * { margin-top: 1em; }
.rte ul, .rte ol { padding-inline-start: 1.25em; }
.rte ul { list-style: disc; }
.rte ol { list-style: decimal; }
.rte a { text-decoration: underline; text-underline-offset: 3px; }

/* Ícones (traço do tema) */
.rp-icon {
  flex: none;
  width: 24px;
  height: 24px;
  stroke-width: var(--icon-weight);
}

.rp-icon--sm { width: 20px; height: 20px; }
.rp-icon--xs { width: 16px; height: 16px; }

/* Link com sublinhado que entra da esquerda no passar do mouse (reversed-link do tema) */
.rp-link {
  background-image: linear-gradient(to right, currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 100% min(100%, 1.35em);
  background-size: 0 1px;
  transition: background-size 0.5s var(--rp-ease-soft);
}

@media (hover: hover) {
  .rp-link:hover {
    background-position: 0 min(100%, 1.35em);
    background-size: 100% 1px;
  }
}

/* Botão redondo (primário escuro, secundário com contorno) */
.rp-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2d5);
  min-height: 2.25rem;
  padding: 0.625rem 1.25rem;
  overflow: hidden;
  border-radius: var(--rounded-button);
  font-family: var(--font-button-family, inherit);
  font-size: var(--font-button-size, 0.75rem);
  font-weight: var(--font-button-weight, 500);
  line-height: 1;
  letter-spacing: normal;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
}

.rp-button--primary {
  background-color: rgb(var(--color-drawer-button-background));
  color: rgb(var(--color-drawer-button-text));
}

.rp-button--primary:hover { background-color: rgb(var(--color-drawer-button-background) / 0.85); }

.rp-button--block { width: 100%; min-height: 3.375rem; padding: 1.125rem 1.625rem; }

.rp-button--icon {
  width: 3rem;
  height: 3rem;
  min-height: 0;
  padding: 0;
  box-shadow: inset 0 0 0 1px rgb(var(--color-foreground) / 0.1);
  color: rgb(var(--color-foreground));
}

.rp-button--icon:hover {
  background-color: rgb(var(--color-foreground));
  color: rgb(var(--color-background));
  box-shadow: inset 0 0 0 1px rgb(var(--color-foreground));
}

/* Títulos quebram palavras longas em vez de vazar (como no tema publicado). */
h1, h2, h3, h4, h5, h6, .heading { word-break: break-word; }