/* ==========================================================================
   LÍRIO & CO. — TEMA "CANDY ATELIER" (v2)
   --------------------------------------------------------------------------
   Camada de TEMA, carregada DEPOIS de assets/css/style.css.
   Objetivo: trocar a identidade visual sem reescrever o site.

   Como funciona:
   - Os tokens abaixo definem a paleta/tipografia do tema.
   - partials/header.php injeta --brand, --brand-2, --ink-cfg, --page,
     --font-display e --font-body a partir do banco (admin → Identidade visual).
     Por isso todo token usa var(--x, fallback).
   - No fim do arquivo, as variáveis legadas (--lirio-*) são remapeadas para os
     tokens novos: assim páginas ainda não redesenhadas (checkout, blog, produto)
     herdam a paleta nova automaticamente.

   Princípios:
   1. Rosa é SUPERFÍCIE, não é texto. Tons claros só em fundo/borda/ornamento.
   2. No máximo 3 ornamentos por dobra.
   3. Dois raios, três fontes com papel fixo, uma sombra colorida.

   Rollback: remover o <link> do stylev2.css em partials/header.php.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root{
  /* --- rampa rosa --------------------------------------------------------
     contraste medido sobre branco; ver comentário de cada degrau           */
  --rose-50:#FFF4F7;    /* fundo de seção alternada                         */
  --rose-100:#FDE7EE;   /* chip, hover suave, listras do topo               */
  --rose-200:#F9CFDC;   /* bordas, anel do círculo de categoria             */
  --rose-300:#F2AEC4;   /* blob, ilustração, estado desativado              */
  --rose-400:#E886A6;   /* ícone decorativo grande                          */
  --rose-500:#DB6389;   /* dots, detalhe de UI (3,4:1 — não usar com texto) */
  --rose-600:#C9447A;   /* BOTÃO PRIMÁRIO, ribbon, badge (4,6:1 AA c/ branco)*/
  --rose-700:#A63A63;   /* link, preço promocional, hover (6,2:1 AA)        */
  --rose-900:#5E2038;   /* texto sobre rosa claro (11:1 AAA)                */

  /* --- superfícies ------------------------------------------------------ */
  --surface:#FFFFFF;    /* card, offcanvas, modal                           */
  --surface-2:#FFF4F7;  /* seção alternada, faixa de selos                  */
  --cream:#FBF3EC;      /* faixa editorial, respiro entre blocos rosa       */
  --border-c:#F3DDE4;
  --border-strong:#E7C2CF;

  /* --- tinta ------------------------------------------------------------ */
  --ink:#3B2A2F;        /* título, preço, texto principal (12,8:1 AAA)      */
  --ink-2:#6E5A5F;      /* corpo secundário, nome do produto (6,1:1 AA)     */
  --ink-3:#7D666B;      /* legenda, parcelamento (5,0:1 AA)                 */
  --ink-on-rose:#5E2038;

  /* --- acento e estados ------------------------------------------------- */
  --gold:#B08D4F;
  --gold-ink:#8A6A2F;
  --gold-soft:#F6EEDC;
  --success:#2E7D5B;
  --success-soft:#E6F3EC;
  --danger:#B3261E;
  --danger-soft:#FCEBEA;

  /* --- canais (resolve rgba() com alpha sem hardcode) -------------------- */
  --rose-rgb:201,68,122;
  --ink-rgb:59,42,47;
  --gold-rgb:176,141,79;

  /* --- papéis semânticos (o que os componentes consomem) -----------------
     Sobrescritos pelo <style> do header com os valores do admin.           */
  --brand:var(--rose-600);
  --brand-hover:var(--rose-700);
  --brand-soft:var(--rose-100);
  --page:#FFF9FA;
  --text:var(--ink);
  --text-muted:var(--ink-3);

  /* --- tipografia ------------------------------------------------------- */
  --font-display:'Fraunces','Playfair Display',Georgia,serif;
  --font-body:'DM Sans','Montserrat',system-ui,-apple-system,sans-serif;
  --font-script:'Dancing Script','Segoe Script',cursive;

  /* --- escala tipográfica (fluida) --------------------------------------- */
  --fs-2xs:11px;
  --fs-xs:12px;
  --fs-sm:13px;
  --fs-md:15px;
  --fs-lg:clamp(17px,2.2vw,19px);
  --fs-xl:clamp(21px,3.4vw,27px);
  --fs-2xl:clamp(27px,5vw,40px);
  --fs-3xl:clamp(34px,7vw,56px);

  /* --- raios / sombras / espaço ----------------------------------------- */
  --r-sm:10px;
  --r-md:18px;
  --r-lg:28px;
  --r-pill:999px;
  --sh-soft:0 10px 30px rgba(var(--rose-rgb),.10);
  --sh-card:0 6px 20px rgba(var(--ink-rgb),.06);
  --sh-lift:0 16px 38px rgba(var(--rose-rgb),.18);
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
body{
  background:var(--page);
  color:var(--text);
  font-family:var(--font-body);
  letter-spacing:0;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--rose-200);color:var(--rose-900)}

h1,h2,h3,h4,.font-display{
  font-family:var(--font-display);
  color:var(--ink);
  letter-spacing:-.01em;
}

/* Palavra/assinatura em script — uso restrito (logo, 1 palavra do H1, fita) */
.script{
  font-family:var(--font-script);
  font-weight:600;
  letter-spacing:0;
  line-height:1.15;
}

/* H1 de SEO da home (era 100% inline em pages/home.php) */
.home-seo-title{
  font-family:var(--font-body);
  font-size:var(--fs-xs);
  font-weight:500;
  color:var(--ink-3);
  text-align:center;
  letter-spacing:.02em;
  margin:var(--sp-2) 0;
  padding:0 var(--sp-4);
}

/* ==========================================================================
   3. TOPBAR LISTRADA + AVISO DE FRETE
   O mockup separa as listras decorativas da barra de frete.
   ========================================================================== */
/* Faixa de frete: fica ABAIXO do logo e desliza continuamente.
   A esteira tem 2 metades idênticas; a animação anda exatamente -50%, então o
   laço reinicia sem emenda. Pausa ao passar o mouse. */
.lirio-topbar{
  background:var(--rose-100);
  color:var(--ink);
  border-top:1px solid var(--rose-200);
  padding:9px 0;
  overflow:hidden;
}
.frete-track{
  display:flex;
  width:max-content;
  animation:frete-desliza 34s linear infinite;
  will-change:transform;
}
.frete-half{display:flex;align-items:center}
.frete-item{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:0 18px;
  white-space:nowrap;
  font-family:var(--font-body);
  font-size:var(--fs-xs);
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.frete-item i{font-size:15px;line-height:1}
.frete-sep{
  display:inline-flex;
  align-items:center;
  width:15px;
  flex:0 0 auto;
  color:var(--rose-300);
}
.frete-sep svg{width:100%;height:auto;display:block}
@keyframes frete-desliza{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.lirio-topbar:hover .frete-track{animation-play-state:paused}

/* Listras do topo, com barra ondulada embaixo (puro CSS — zero requisição). */
.candy-stripes{
  --scallop-h:9px;
  height:30px;
  background:repeating-linear-gradient(
    90deg,
    var(--rose-100) 0 15px,
    var(--surface)  15px 30px
  );
  -webkit-mask:
    radial-gradient(circle at 50% 0, transparent 0 7px, #000 7.5px) bottom left / 15px var(--scallop-h) repeat-x,
    linear-gradient(#000, #000) top left / 100% calc(100% - var(--scallop-h)) no-repeat;
  mask:
    radial-gradient(circle at 50% 0, transparent 0 7px, #000 7.5px) bottom left / 15px var(--scallop-h) repeat-x,
    linear-gradient(#000, #000) top left / 100% calc(100% - var(--scallop-h)) no-repeat;
}

/* ==========================================================================
   4. HEADER
   ========================================================================== */
.site-header{
  background:rgba(255,255,255,.94);
  border-bottom:1px solid var(--border-c);
  backdrop-filter:blur(14px);
}
.header-icon{
  color:var(--ink);
  font-size:26px;
  border-radius:var(--r-pill);
}
.header-icon:hover{background:var(--rose-100);color:var(--rose-700)}
.bag-icon{color:var(--ink);border-radius:var(--r-pill)}
.bag-icon:hover{background:var(--rose-100);color:var(--rose-700)}
/* Selo da sacola: círculo rosa na base do ícone (como no layout aprovado) */
.bag-icon span{
  top:auto;
  bottom:5px;
  right:0;
  background:var(--brand);
  color:#fff;
  border-radius:var(--r-pill);
  font-family:var(--font-body);
  font-weight:700;
  box-shadow:0 2px 6px rgba(var(--rose-rgb),.35);
}

/* ── Grade do topo: [menu] [logo centralizado] [busca + sacola] ─────────
   O style.css tem 4 definições de .header-shell em media queries diferentes,
   herdadas de um layout com mais elementos. Aqui a grade é redefinida de uma
   vez só, com 3 colunas — o mesmo número de filhos que o HTML tem hoje. */
/* Colunas laterais de MESMA largura (1fr cada) — é o que garante o logo
   exatamente no centro óptico, mesmo com 1 ícone à esquerda e 2 à direita. */
.header-shell-v2{
  display:grid;
  grid-template-columns:1fr minmax(0,auto) 1fr;
  align-items:center;
  gap:6px;
  height:auto;
  min-height:0;
  padding:12px clamp(10px,3.5vw,32px);
}
.header-shell-v2 .header-left{display:flex;align-items:center;justify-self:start}
.header-shell-v2 .brand-logo{justify-self:center}
.header-actions-v2{display:flex;align-items:center;gap:2px;justify-self:end}
/* O style.css esconde .header-icon dentro de .header-actions abaixo de 992px
   (a busca ficava do outro lado no layout antigo). Aqui ela vive à direita. */
.header-actions-v2 .header-icon{display:inline-flex!important}

/* ── Logo: só a logomarca, centralizada ─────────────────────────────────
   O laço decorativo continua existindo (candy_bow_svg) e é usado como
   separador na esteira da faixa de frete. */
.brand-logo{position:relative}
.brand-logo-v2{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
}
/* vence .brand-logo img{height:76px} e o max-height:34px de uma media query
   do style.css (mesma força; este arquivo carrega depois) */
.brand-logo-v2 img{
  height:clamp(26px,6.2vw,38px);
  width:auto;
  max-width:100%;
  max-height:none;
  display:block;
}

.header-nav-line a{font-family:var(--font-body);color:var(--ink-2)}
.header-nav-line a:hover{color:var(--rose-700)}
.nav-dropdown-menu{
  background:var(--surface);
  border:1px solid var(--border-c);
  border-radius:var(--r-md);
  box-shadow:var(--sh-soft);
}
.header-nav-line .nav-dropdown-menu a{
  color:var(--ink-2);
  border-bottom:1px solid var(--rose-50);
}
.header-nav-line .nav-dropdown-menu a:hover{background:var(--rose-50);color:var(--rose-700)}

/* Busca do topo */
.search-collapse .search-form{
  border:1px solid var(--border-strong);
  border-radius:var(--r-pill);
  background:var(--surface);
}
.search-collapse input{font-family:var(--font-body);color:var(--ink)}
.search-collapse button{
  background:var(--brand);
  color:#fff;
  border:0;
  border-radius:var(--r-pill);
  font-family:var(--font-body);
  font-weight:600;
}
.search-collapse button:hover{background:var(--brand-hover)}

/* Menu lateral */
.menu-offcanvas{background:var(--page)}
.menu-offcanvas h2{font-family:var(--font-display);color:var(--ink)}
.menu-offcanvas .offcanvas-body a{font-family:var(--font-body);color:var(--ink-2)}
.menu-offcanvas .offcanvas-body a:hover{color:var(--rose-700)}

/* ==========================================================================
   5. TÍTULOS DE SEÇÃO (com ornamento)
   ========================================================================== */
/* Ritmo vertical compacto — o site é consumido quase todo no celular, então a
   primeira tela precisa mostrar o máximo de produto. O style.css usava
   clamp(58px,8vw,90px) de padding e 48px abaixo do título; aqui cai para
   ~metade, mantendo respiro entre os blocos. */
.section-pad{padding:clamp(20px,4vw,52px) var(--side)}
.section-pad.pt-0{padding-top:0}
.section-heading{margin:0 auto clamp(12px,2.6vw,24px)}
.section-heading span{
  font-family:var(--font-body);
  color:var(--rose-700);
  letter-spacing:.28em;
  font-size:var(--fs-xs);
  font-weight:700;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  gap:var(--sp-3);
}
/* corações laterais como ornamento do título (::before/::after = zero markup) */
.section-heading span::before,
.section-heading span::after{
  content:"";
  width:14px;height:14px;
  background:var(--rose-300);
  -webkit-mask:var(--heart-mask) center/contain no-repeat;
  mask:var(--heart-mask) center/contain no-repeat;
}
:root{
  --heart-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8-4.9-8-10.4A4.6 4.6 0 0 1 12 7a4.6 4.6 0 0 1 8 3.6C20 16.1 12 21 12 21z'/%3E%3C/svg%3E");
}
.section-heading h2{
  font-family:var(--font-display);
  font-size:var(--fs-2xl);
  line-height:1.1;
  color:var(--ink);
}

/* ==========================================================================
   6. BOTÕES
   ========================================================================== */
.btn-candy,
.card-add-btn,
.primary-cta{
  font-family:var(--font-body);
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  border-radius:var(--r-pill);
  transition:.22s ease;
  cursor:pointer;
}
/* Primário: rosa 600 + branco = 4,6:1 (passa AA) */
.btn-candy,
.primary-cta{
  background:var(--brand);
  color:#fff;
  border:1px solid var(--brand);
  padding:13px 26px;
  font-size:var(--fs-sm);
  box-shadow:0 4px 14px rgba(var(--rose-rgb),.25);
}
.btn-candy:hover,
.primary-cta:hover{background:var(--brand-hover);border-color:var(--brand-hover);color:#fff}

/* Secundário: fundo rosa claro + texto rosa escuro = 11:1 */
.btn-candy--soft,
.secondary-cta{
  background:var(--rose-100);
  color:var(--rose-900);
  border:1px solid var(--rose-200);
  box-shadow:none;
}
.btn-candy--soft:hover,
.secondary-cta:hover{background:var(--rose-200);color:var(--rose-900)}

/* Botão do card ("COMPRAR") */
.card-add-btn{
  background:var(--rose-100);
  color:var(--rose-900);
  border:1px solid var(--rose-200);
  border-radius:var(--r-pill);
  font-size:var(--fs-2xs);
  letter-spacing:.1em;
  padding:10px 14px;
}
.card-add-btn:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
.card-add-btn i{font-size:13px}

/* ==========================================================================
   7. GRID + CARD DE PRODUTO
   ========================================================================== */
.product-grid{gap:var(--sp-4)}
.product-card{
  background:var(--surface);
  border:1px solid var(--border-c);
  border-radius:var(--r-md);
  box-shadow:var(--sh-card);
  overflow:hidden;
}
.product-card:hover{transform:translateY(-4px);box-shadow:var(--sh-lift)}
.product-image{background:var(--surface);border-radius:0}
.product-image img{background:var(--surface);padding:10px}
.product-body{padding:var(--sp-3) var(--sp-3) var(--sp-4)}
.product-body h3{
  font-family:var(--font-body);
  font-size:var(--fs-sm);
  font-weight:500;
  color:var(--ink-2);
  margin-bottom:var(--sp-1);
}
/* preço em tinta forte (12,8:1) — nunca rosa claro */
.product-footer strong{
  font-family:var(--font-body);
  font-size:var(--fs-md);
  font-weight:700;
  color:var(--ink);
}
.product-category{color:var(--rose-700);font-family:var(--font-body)}

/* ==========================================================================
   8. COMPONENTES NOVOS DO LAYOUT
   ========================================================================== */

/* 8.1 Carrossel de categorias (círculos + setas) -------------------------- */
.cat-carousel{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  max-width:var(--content-max);
  margin-inline:auto;
}
.categorias-swiper{flex:1 1 auto;min-width:0;overflow:hidden}
.cat-nav{
  flex:0 0 auto;
  width:34px;height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:50%;
  background:var(--rose-100);
  color:var(--rose-600);
  font-size:15px;
  cursor:pointer;
  transition:.2s ease;
}
.cat-nav:hover{background:var(--rose-200)}
.cat-nav.swiper-button-disabled{opacity:.3;cursor:default;pointer-events:none}

.cat-circle{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--sp-2);
  text-align:center;
}
/* anel tracejado por fora + foto em círculo por dentro (como no layout) */
.cat-circle__img{
  width:100%;
  max-width:132px;
  aspect-ratio:1/1;
  margin-inline:auto;
  border-radius:50%;
  background:var(--surface);
  border:1.5px dashed var(--rose-200);
  padding:5px;
  overflow:hidden;
  display:grid;
  place-items:center;
  transition:.25s ease;
}
.cat-circle__img img{
  width:100%;height:100%;
  object-fit:cover;
  border-radius:50%;
  display:block;
}
.cat-circle:hover .cat-circle__img{border-color:var(--rose-400);transform:translateY(-3px)}
.cat-circle__nome{
  font-family:var(--font-body);
  font-size:var(--fs-sm);
  font-weight:600;
  color:var(--ink-2);
  line-height:1.25;
}
/* fallback quando a categoria ainda não tem foto */
.cat-circle__img--vazio{
  background:radial-gradient(circle at 50% 40%,var(--rose-100),var(--rose-200));
}
.cat-circle__img--vazio i{font-size:28px;color:var(--rose-500)}

/* 8.1b Banner de seção da home (arte já vem com o texto embutido) --------- */
.home-secao__card{
  display:block;
  max-width:var(--content-max);
  margin-inline:auto;
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--sh-card);
}
.home-secao__card img{width:100%;height:auto;display:block}

/* 8.2 Fita / ribbon ------------------------------------------------------ */
.ribbon{
  display:inline-block;
  position:relative;
  background:var(--rose-200);
  color:var(--rose-900);
  font-family:var(--font-body);
  font-size:var(--fs-xs);
  font-weight:600;
  letter-spacing:.04em;
  padding:9px 22px;
  border-radius:var(--r-sm);
}
.ribbon::before,
.ribbon::after{
  content:"";
  position:absolute;
  top:50%;
  width:14px;height:18px;
  background:var(--rose-300);
  transform:translateY(-50%);
}
.ribbon::before{left:-10px;clip-path:polygon(100% 0,100% 100%,0 50%)}
.ribbon::after{right:-10px;clip-path:polygon(0 0,0 100%,100% 50%)}

/* 8.3 Máscara orgânica (nuvem/blob) para fotos --------------------------- */
.blob{
  border-radius:48% 52% 42% 58% / 52% 44% 56% 48%;
  overflow:hidden;
  background:var(--rose-50);
}
.blob img{width:100%;height:100%;object-fit:cover;display:block}
.blob--alt{border-radius:56% 44% 60% 40% / 44% 58% 42% 56%}

/* 8.4 Faixa de selos de confiança ----------------------------------------
   Ícone à esquerda, texto à direita, separados por filete vertical.
   Texto em --rose-700 (6,2:1) em vez do rosa claro do mockup: mantém a cara
   rosa e continua legível no celular sob luz forte. */
.selos{
  background:var(--surface);
  border-top:1px solid var(--rose-100);
  border-bottom:1px solid var(--rose-100);
}
.selos__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--sp-4) 0;
  max-width:var(--content-max);
  margin-inline:auto;
  padding:0;
  list-style:none;
}
.selo{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  padding:var(--sp-2) var(--sp-3);
  min-width:0;
}
.selo i{
  font-size:30px;
  line-height:1;
  color:var(--rose-400);
  flex:0 0 auto;
}
.selo span{
  font-family:var(--font-body);
  font-size:var(--fs-xs);
  font-weight:500;
  line-height:1.35;
  color:var(--rose-700);
  max-width:15ch;
}
/* Filete entre os selos: no celular são 2 colunas (divide os pares),
   a partir de 768px viram 4 colunas numa linha só. */
.selo:nth-child(even){border-left:1px solid var(--rose-100)}

@media (min-width:768px){
  .selos__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .selo{justify-content:center;padding:var(--sp-2) var(--sp-4)}
  .selo:nth-child(even){border-left:0}
  .selo:not(:first-child){border-left:1px solid var(--rose-100)}
  .selo i{font-size:34px}
}

/* 8.5 Faixa editorial ---------------------------------------------------- */
.editorial{
  background:var(--cream);
  padding:var(--sp-7) var(--side);
}
.editorial h2{font-family:var(--font-display);font-size:var(--fs-2xl);line-height:1.1}
.editorial .script{color:var(--rose-600);font-size:1.15em}

/* ==========================================================================
   9. RODAPÉ
   ========================================================================== */
.site-footer{background:var(--surface-2);border-top:1px solid var(--rose-200)}
.site-footer,
.site-footer p,
.site-footer a{font-family:var(--font-body);color:var(--ink-2)}
.site-footer a:hover{color:var(--rose-700)}
.site-footer h3,
.site-footer h4{font-family:var(--font-display);color:var(--ink)}

/* ==========================================================================
   10. CARRINHO / OFFCANVAS
   ========================================================================== */
.cart-float{
  background:var(--brand);
  color:#fff;
  border-radius:var(--r-pill);
  box-shadow:0 10px 28px rgba(var(--rose-rgb),.35);
  font-family:var(--font-body);
}
.cart-float:hover{background:var(--brand-hover)}
#cartOffcanvas{background:var(--page)}
#cartOffcanvas h5{font-family:var(--font-display);color:var(--ink)}

/* ==========================================================================
   11. SWIPER (dots)
   ========================================================================== */
.swiper-pagination-bullet{background:var(--rose-300);opacity:.6}
.swiper-pagination-bullet-active{background:var(--rose-600);opacity:1}
.categorias-swiper .swiper-button-next,
.categorias-swiper .swiper-button-prev{
  width:36px;height:36px;
  border-radius:50%;
  background:var(--surface);
  border:1px solid var(--rose-200);
  color:var(--rose-600);
  box-shadow:var(--sh-card);
}
.categorias-swiper .swiper-button-next::after,
.categorias-swiper .swiper-button-prev::after{font-size:14px;font-weight:700}

/* ==========================================================================
   12. FOCO / ACESSIBILIDADE
   ========================================================================== */
:focus-visible{outline:2px solid var(--rose-600);outline-offset:2px}

/* ==========================================================================
   13. DESKTOP
   ========================================================================== */
@media (min-width:768px){
  .selos__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .product-grid{gap:var(--sp-5)}
  .product-body{padding:var(--sp-4)}
}

/* ==========================================================================
   14. PONTE COM O TEMA LEGADO
   Remapeia as variáveis antigas para os tokens novos, para que páginas ainda
   não redesenhadas (checkout, blog, produto, notícia) herdem a paleta.
   Sai quando o style.css for aposentado.
   ========================================================================== */
:root{
  --lirio-bg:var(--page);
  --lirio-paper:var(--surface);
  --lirio-rose:var(--rose-200);
  --lirio-sand:var(--rose-300);
  --lirio-green:var(--brand);
  --lirio-brown:var(--ink);
  --lirio-text:var(--ink);
  --lirio-muted:var(--ink-3);
  --lirio-border:var(--border-c);
  --lirio-light:var(--page);        /* corrige bug: var inexistente em checkout.php:43 */
  --shadow-soft:var(--sh-soft);
}
/* Bootstrap: alinha os componentes nativos (checkout, formulários, offcanvas) */
:root{
  --bs-body-color:var(--ink);
  --bs-body-bg:var(--page);
  --bs-secondary-color:var(--ink-3);
  --bs-border-color:var(--border-c);
  --bs-link-color:var(--rose-700);
  --bs-link-hover-color:var(--rose-900);
}