@charset "ISO-8859-1";
/* ==========================================================================
DANI FERNANDES - PORTAL DO LOJISTA
========================================================================== */
/* --------------------------------------------------------------------------
1. TOKENS
-------------------------------------------------------------------------- */
:root{
/* Cores - todas as combinacoes de texto validadas em >= 4.5:1 sobre o fundo
indicado (WCAG 2.1 AA). */
--df-ink:#25282a; /* titulos / texto forte 16.4:1 s/ branco */
--df-body:#25282a; /* corpo de texto 8.9:1 s/ branco */
--df-muted:#726D66; /* texto secundario 5.2:1 s/ branco */
--df-faint:#9B958C; /* apenas decorativo / bordas */
--df-brand:#74765E; /* sage da marca (texto) 4.7:1 s/ branco */
--df-brand-dark:#5E6050; /* sage escuro (fundo de botao) 6.4:1 c/ branco */
--df-brand-tint:#F1F2EC;
--df-brand-line:#D8DAC9;
--df-price:#D3A76E; /* bronze - precos 5.0:1 s/ branco */
--df-price-tint:#D3A76E;
--df-danger:#B3261E; /* esgotado / erro 6.7:1 s/ branco */
--df-danger-tint:#FDEDEC;
--df-success:#2A6B3F; /* confirmacoes 6.3:1 s/ branco */
--df-success-tint:#EAF4EC;
--df-warn:#8A5A00; /* avisos 5.4:1 s/ branco */
--df-warn-tint:#FDF4E3;
--df-info:#2B5C79; /* informativo 6.2:1 s/ branco */
--df-info-tint:#EDF3F7;
--df-surface:#FFFFFF;
--df-surface-2:#FAF9F6;
--df-surface-3:#FFFDF4;
--df-line:#E6E3DC;
--df-line-strong:#CFCBC2;
/* Espacamento - escala densa, adequada a um portal de trabalho */
--df-s1:4px; --df-s2:8px; --df-s3:12px; --df-s4:16px;
--df-s5:24px; --df-s6:32px; --df-s7:48px; --df-s8:64px;
/* Raio e elevacao */
--df-r-sm:4px; --df-r:8px; --df-r-lg:14px; --df-r-pill:999px;
--df-shadow-1:0 1px 2px rgba(27,25,23,.06), 0 1px 3px rgba(27,25,23,.05);
--df-shadow-2:0 4px 12px rgba(27,25,23,.08), 0 2px 4px rgba(27,25,23,.05);
--df-shadow-3:0 12px 32px rgba(27,25,23,.12);
/* Tipografia */
--df-font-ui:"Reddit Sans","Didact Gothic",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
--df-font-display:"Julius Sans One","Reddit Sans",system-ui,sans-serif;
--df-font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
/* Alturas fixas usadas para offset de ancoras e sticky */
--df-header-h:64px;
/* Bootstrap overrides */
--bs-body-font-family:var(--df-font-ui);
--bs-body-color:var(--df-body);
--bs-body-bg:var(--df-surface);
--bs-link-color:var(--df-brand-dark);
--bs-link-hover-color:var(--df-ink);
--bs-border-color:var(--df-line);
--bs-focus-ring-color:rgba(94,96,80,.35);
}
/* --------------------------------------------------------------------------
2. BASE
-------------------------------------------------------------------------- */
html{ -webkit-text-size-adjust:100%; }
body{
font-family:var(--df-font-ui);
font-size:16px;
line-height:1.5;
color:var(--df-body);
background:var(--df-surface);
/* trava o scroll horizontal em qualquer viewport */
overflow-x:hidden;
}
/* Neutraliza os planos de fundo decorativos herdados das paginas antigas */
body[style]{ background-image:none !important; }
h1,h2,h3,h4,h5,h6{
font-family:var(--df-font-ui);
color:var(--df-ink);
font-weight:600;
letter-spacing:-.01em;
line-height:1.25;
margin:0 0 var(--df-s3);
text-wrap:balance;
}
h1,.df-h1{ font-size:clamp(1.5rem,1.2rem + 1.4vw,2rem); }
h2,.df-h2{ font-size:clamp(1.25rem,1.1rem + .8vw,1.5rem); }
h3,.df-h3{ font-size:1.125rem; }
h4,.df-h4{ font-size:1rem; }
h5,h6{ font-size:.875rem; }
p{ margin:0 0 var(--df-s3); }
a{ color:var(--df-brand-dark); text-decoration:none; }
a:hover{ color:var(--df-ink); text-decoration:underline; }
img{ max-width:100%; height:auto; }
hr{ border:0; border-top:1px solid var(--df-line); opacity:1; margin:var(--df-s5) 0; }
/* Foco sempre visivel - nunca remover */
:focus-visible{
outline:3px solid var(--df-brand-dark);
outline-offset:2px;
border-radius:var(--df-r-sm);
}
/* Salto para o conteudo (primeiro elemento focavel da pagina) */
.df-skip{
position:absolute; left:var(--df-s3); top:-100px; z-index:1100;
background:var(--df-ink); color:#fff; padding:var(--df-s3) var(--df-s4);
border-radius:var(--df-r); font-weight:600; transition:top .15s ease;
}
.df-skip:focus{ top:var(--df-s3); color:#fff; text-decoration:none; }
.df-visually-hidden{
position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
/* Alvos de toque: minimo 44x44 conforme WCAG 2.5.5 */
.df-tap{ min-height:44px; min-width:44px; display:inline-flex; align-items:center; justify-content:center; }
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:.01ms !important; animation-iteration-count:1 !important;
transition-duration:.01ms !important; scroll-behavior:auto !important;
}
}
/* --------------------------------------------------------------------------
3. UTILITARIOS DA MARCA
-------------------------------------------------------------------------- */
.df-shell{ width:100%; max-width:1320px; margin-inline:auto; padding-inline:var(--df-s4); }
@media (min-width:992px){ .df-shell{ padding-inline:var(--df-s5); } }
.df-eyebrow{
font-family:var(--df-font-display);
font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase;
color:var(--df-muted); margin:0 0 var(--df-s2); display:block;
}
.df-sku{
font-family:var(--df-font-mono); font-size:.75rem; letter-spacing:.02em;
color:var(--df-muted); text-transform:uppercase;
}
.df-num{ font-variant-numeric:tabular-nums; }
.df-stack > * + *{ margin-top:var(--df-s3); }
/* --------------------------------------------------------------------------
4. BARRAS DE AVISO + CABECALHO
-------------------------------------------------------------------------- */
.df-announce{
font-size:.8125rem; line-height:1.4; text-align:center;
padding:var(--df-s2) var(--df-s4);
}
.df-announce--light{ background:var(--df-surface-3); color:var(--df-body); border-bottom:1px solid var(--df-line); }
.df-announce--dark{ background:var(--df-ink); color:#F2F0EC; }
.df-announce strong{ font-weight:600; }
.df-announce:empty{ display:none; }
.df-header{
position:sticky; top:0; z-index:1030;
background:var(--df-surface);
border-bottom:1px solid var(--df-line);
}
.df-header__bar{
display:flex; align-items:center; gap:var(--df-s3);
min-height:var(--df-header-h); padding-block:var(--df-s2);
}
.df-logo{ display:inline-flex; align-items:center; flex:0 0 auto; }
/* logo.png tem 280x40 px nativos - 240px nao ultrapassa a resolucao original */
.df-logo img{ display:block; width:150px; height:auto; }
/* Tela de login (sem sessao): logo ocupa a barra inteira e fica centralizado */
.df-logo.df-login{ display:flex; flex:1 1 100%; justify-content:center; margin-inline:auto; }
@media (min-width:700px){ .df-logo img{ width:190px; } }
@media (min-width:1000px){ .df-logo img{ width:240px; } }
/* Busca */
.df-search{ position:relative; flex:1 1 auto; min-width:0; }
.df-search__input{
width:100%; height:44px;
padding:0 46px 0 var(--df-s4);
font-size:.9375rem; color:var(--df-ink);
background:var(--df-surface-2);
border:1px solid var(--df-line-strong);
border-radius:var(--df-r-pill);
transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.df-search__input::placeholder{ color:var(--df-muted); }
.df-search__input:focus{
outline:none; background:var(--df-surface);
border-color:var(--df-brand-dark);
box-shadow:0 0 0 3px rgba(94,96,80,.18);
}
.df-search__btn{
position:absolute; top:50%; right:4px; transform:translateY(-50%);
width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
border:0; border-radius:50%; background:transparent; color:var(--df-brand-dark);
font-size:1rem; cursor:pointer;
}
.df-search__btn:hover{ background:var(--df-brand-tint); color:var(--df-ink); }
/* Acoes do cabecalho */
.df-header__actions{ display:flex; align-items:center; gap:var(--df-s1); flex:0 0 auto; }
.df-iconbtn{
min-width:44px; min-height:44px;
display:inline-flex; align-items:center; justify-content:center; gap:var(--df-s2);
padding:0 var(--df-s3); border:1px solid transparent; border-radius:var(--df-r);
background:transparent; color:var(--df-body); font-size:.875rem; line-height:1;
cursor:pointer; transition:background .15s ease, color .15s ease;
}
.df-iconbtn:hover{ background:var(--df-surface-3); color:var(--df-ink); text-decoration:none; }
.df-iconbtn i{ font-size:1rem; }
.df-cart{
position:relative;
background:var(--df-ink); color:#fff; border-color:var(--df-ink);
font-weight:600; padding-inline:var(--df-s4);
}
.df-cart:hover{ background:var(--df-brand-dark); border-color:var(--df-brand-dark); color:#fff; }
.df-cart__count{
display:inline-flex; align-items:center; justify-content:center;
min-width:22px; height:22px; padding:0 6px;
background:var(--df-price); color:#fff;
border-radius:var(--df-r-pill); font-size:.75rem; font-weight:700;
font-variant-numeric:tabular-nums;
}
/* --------------------------------------------------------------------------
5. NAVEGACAO PRINCIPAL (desktop) + MEGA MENU
-------------------------------------------------------------------------- */
.df-nav{ border-top:1px solid var(--df-line); background:var(--df-surface); }
.df-nav__list{
display:flex; align-items:stretch; flex-wrap:wrap; gap:0;
list-style:none; margin:0; padding:0;
}
.df-nav__link{
display:inline-flex; align-items:center; gap:var(--df-s2);
min-height:46px; padding:0 var(--df-s3);
font-size:.8125rem; letter-spacing:.06em; text-transform:uppercase;
color:var(--df-body); background:transparent; border:0;
border-bottom:2px solid transparent;
cursor:pointer; white-space:nowrap;
transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.df-nav__link:hover,
.df-nav__link[aria-expanded="true"]{
color:var(--df-ink); border-bottom-color:var(--df-brand); text-decoration:none;
}
.df-nav__link--accent{ color:var(--df-price); font-weight:600; }
.df-nav__link--accent:hover{ color:var(--df-price); border-bottom-color:var(--df-price); }
@media (min-width:1200px){ .df-nav__link{ padding-inline:var(--df-s4); font-size:.875rem; } }
.df-nav__item{ position:relative; display:flex; }
/* Painel do mega menu: abre por hover no ponteiro e por foco no teclado */
.df-mega{
position:absolute; top:100%; left:0; z-index:1040;
display:none; min-width:280px; padding:var(--df-s4);
background:var(--df-surface);
border:1px solid var(--df-line);
border-radius:0 0 var(--df-r) var(--df-r);
box-shadow:var(--df-shadow-3);
}
.df-mega--wide{ left:auto; right:auto; width:min(920px,calc(100vw - 48px)); }
.df-nav__item:hover > .df-mega,
.df-nav__item:focus-within > .df-mega{ display:block; }
.df-mega__grid{
display:grid; gap:var(--df-s2) var(--df-s5);
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
}
.df-mega__title{
grid-column:1/-1;
font-family:var(--df-font-display); font-size:.6875rem; letter-spacing:.16em;
text-transform:uppercase; color:var(--df-muted);
padding-bottom:var(--df-s2); margin-bottom:var(--df-s2);
border-bottom:1px solid var(--df-line);
}
.df-mega a{
display:block; padding:var(--df-s2) var(--df-s2);
font-size:.875rem; color:var(--df-body); border-radius:var(--df-r-sm);
}
.df-mega a:hover{ background:var(--df-brand-tint); color:var(--df-ink); text-decoration:none; }
/* Os blocos de coluna herdados do PHP viram celulas do grid */
.df-mega__grid > div{ display:flex; flex-direction:column; }
.df-mega__grid p{ margin:0; }
/* --------------------------------------------------------------------------
6. OFFCANVAS (navegacao mobile)
-------------------------------------------------------------------------- */
.df-offcanvas{ width:min(340px,88vw); }
.df-offcanvas .offcanvas-header{ border-bottom:1px solid var(--df-line); }
.df-offcanvas .offcanvas-body{ padding:0; }
.df-offcanvas .accordion-button{
font-size:.9375rem; font-weight:600; color:var(--df-ink);
padding:var(--df-s3) var(--df-s4); background:transparent; box-shadow:none;
}
.df-offcanvas .accordion-button:not(.collapsed){ background:var(--df-brand-tint); color:var(--df-ink); }
.df-offcanvas .accordion-button:focus{ box-shadow:none; }
.df-offcanvas .accordion-item{ border:0; border-bottom:1px solid var(--df-line); }
.df-offcanvas .accordion-body{ padding:0 0 var(--df-s2); background:var(--df-surface-2); }
.df-mnav{
display:flex; align-items:center; gap:var(--df-s3);
min-height:48px; padding:var(--df-s2) var(--df-s4);
font-size:.9375rem; color:var(--df-body);
border-bottom:1px solid var(--df-line);
}
.df-mnav:hover{ background:var(--df-surface-3); color:var(--df-ink); text-decoration:none; }
.df-mnav--strong{ font-weight:600; color:var(--df-ink); }
.df-mnav--sub{ padding-left:var(--df-s6); min-height:44px; font-size:.875rem; border-bottom:0; }
.df-mnav i{ width:20px; text-align:center; color:var(--df-muted); }
/* --------------------------------------------------------------------------
7. ESTRUTURA DE PAGINA
-------------------------------------------------------------------------- */
.df-main{ min-height:60vh; padding-bottom:var(--df-s7); }
.df-page{ padding-top:var(--df-s5); }
.df-pagehead{
padding:var(--df-s5) 0 var(--df-s4);
border-bottom:1px solid var(--df-line);
margin-bottom:var(--df-s5);
}
.df-pagehead h1{ margin-bottom:var(--df-s1); }
.df-pagehead__meta{ font-size:.875rem; color:var(--df-muted); margin:0; }
/* Trilha de navegacao */
.df-crumb{ margin:0 0 var(--df-s3); font-size:.8125rem; }
.df-crumb ol{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--df-s2); list-style:none; margin:0; padding:0; }
.df-crumb li{ display:flex; align-items:center; gap:var(--df-s2); color:var(--df-muted); }
.df-crumb li + li::before{ content:"/"; color:var(--df-faint); }
.df-crumb a{ color:var(--df-muted); }
.df-crumb a:hover{ color:var(--df-ink); }
.df-crumb [aria-current="page"]{ color:var(--df-ink); font-weight:600; }
/* Cabecalho de secao */
.df-sechead{
display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
gap:var(--df-s3); margin-bottom:var(--df-s4);
}
.df-sechead h2{ margin:0; }
.df-sechead__link{
display:inline-flex; align-items:center; gap:var(--df-s2);
min-height:44px; font-size:.875rem; font-weight:600; color:var(--df-brand-dark);
}
/* --------------------------------------------------------------------------
8. BOTOES
-------------------------------------------------------------------------- */
.df-btn{
display:inline-flex; align-items:center; justify-content:center; gap:var(--df-s2);
min-height:44px; padding:0 var(--df-s5);
font-family:var(--df-font-ui); font-size:.9375rem; font-weight:600; line-height:1;
text-align:center; white-space:nowrap;
border:1px solid transparent; border-radius:var(--df-r);
cursor:pointer; transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.df-btn:hover{ text-decoration:none; }
.df-btn:disabled,.df-btn[aria-disabled="true"]{ opacity:.5; cursor:not-allowed; }
.df-btn--primary{ background:var(--df-ink); color:#fff; border-color:var(--df-ink); }
.df-btn--primary:hover{ background:var(--df-brand-dark); border-color:var(--df-brand-dark); color:#fff; }
.df-btn--brand{ background:var(--df-brand-dark); color:#fff; border-color:var(--df-brand-dark); }
.df-btn--brand:hover{ background:var(--df-ink); border-color:var(--df-ink); color:#fff; }
.df-btn--outline{ background:transparent; color:var(--df-ink); border-color:var(--df-line-strong); }
.df-btn--outline:hover{ background:var(--df-surface-3); border-color:var(--df-ink); color:var(--df-ink); }
.df-btn--ghost{ background:transparent; color:var(--df-brand-dark); border-color:transparent; padding-inline:var(--df-s3); }
.df-btn--ghost:hover{ background:var(--df-brand-tint); color:var(--df-ink); }
.df-btn--sm{ min-height:38px; padding-inline:var(--df-s4); font-size:.875rem; }
.df-btn--block{ width:100%; }
/* --------------------------------------------------------------------------
9. FORMULARIOS
-------------------------------------------------------------------------- */
.df-field{ margin-bottom:var(--df-s4); }
.df-label{
display:block; margin-bottom:var(--df-s2);
font-size:.875rem; font-weight:600; color:var(--df-ink);
}
.df-label .df-req{ color:var(--df-danger); font-weight:700; }
.df-hint{ display:block; margin-top:var(--df-s2); font-size:.8125rem; color:var(--df-muted); }
.df-input,.df-select,.df-textarea{
display:block; width:100%; min-height:44px;
padding:var(--df-s3) var(--df-s4);
font-family:var(--df-font-ui); font-size:1rem; color:var(--df-ink);
background:var(--df-surface);
border:1px solid var(--df-line-strong); border-radius:var(--df-r);
transition:border-color .15s ease, box-shadow .15s ease;
}
.df-textarea{ min-height:110px; resize:vertical; }
.df-select{
appearance:none;
padding-right:var(--df-s7);
background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23726D66'%3E%3Cpath d='M8 11.2 3.2 6.4l1.1-1.1L8 9l3.7-3.7 1.1 1.1z'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:right var(--df-s4) center; background-size:16px;
}
.df-input:focus,.df-select:focus,.df-textarea:focus{
outline:none; border-color:var(--df-brand-dark);
box-shadow:0 0 0 3px rgba(94,96,80,.18);
}
.df-input[readonly]{ background:var(--df-surface-3); color:var(--df-muted); }
.df-input::placeholder,.df-textarea::placeholder{ color:var(--df-faint); }
/* Bloco de senha / campos de arquivo */
.df-file{
display:block; width:100%; padding:var(--df-s3) var(--df-s4);
font-size:.9375rem; color:var(--df-body);
background:var(--df-surface-2);
border:1px dashed var(--df-line-strong); border-radius:var(--df-r);
}
/* --------------------------------------------------------------------------
10. ALERTAS
-------------------------------------------------------------------------- */
.df-alert{
display:flex; align-items:flex-start; gap:var(--df-s3);
padding:var(--df-s3) var(--df-s4); margin-bottom:var(--df-s4);
font-size:.9375rem; border:1px solid; border-radius:var(--df-r);
}
.df-alert i{ flex:0 0 auto; margin-top:2px; }
.df-alert--success{ background:var(--df-success-tint); border-color:#BBD9C4; color:var(--df-success); }
.df-alert--error{ background:var(--df-danger-tint); border-color:#F0C4C1; color:var(--df-danger); }
.df-alert--warn{ background:var(--df-warn-tint); border-color:#EBD5A8; color:var(--df-warn); }
.df-alert--info{ background:var(--df-info-tint); border-color:#BFD4E0; color:var(--df-info); }
/* Compatibilidade com as classes emitidas pelo PHP existente */
.alertSucesso,.alertErro,.alertAlerta{
display:block; padding:var(--df-s3) var(--df-s4); margin-bottom:var(--df-s4);
font-size:.9375rem; border:1px solid; border-radius:var(--df-r);
}
.alertSucesso{ background:var(--df-success-tint); border-color:#BBD9C4; color:var(--df-success); }
.alertErro{ background:var(--df-danger-tint); border-color:#F0C4C1; color:var(--df-danger); }
.alertAlerta{ background:var(--df-warn-tint); border-color:#EBD5A8; color:var(--df-warn); }
/* --------------------------------------------------------------------------
11. SELOS / ETIQUETAS
-------------------------------------------------------------------------- */
.df-badge{
display:inline-flex; align-items:center; gap:6px;
padding:4px 10px; border-radius:var(--df-r-pill);
font-size:.6875rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
white-space:nowrap;
}
.df-badge--outlet{ background:var(--df-ink); color:#fff; }
.df-badge--novo{ background:var(--df-info-tint); color:var(--df-info); }
.df-badge--promo{ background:var(--df-price-tint); color:var(--df-price); }
.df-badge--esgotado{ background:var(--df-danger-tint); color:var(--df-danger); }
.df-badge--especial{ background:var(--df-brand-tint); color:var(--df-brand-dark); }
/* --------------------------------------------------------------------------
12. CARTAO DE PRODUTO
-------------------------------------------------------------------------- */
.df-grid{
display:grid; gap:var(--df-s4);
grid-template-columns:repeat(2,minmax(0,1fr));
list-style:none; margin:0 0 var(--df-s6); padding:0;
}
@media (min-width:768px){ .df-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--df-s5); } }
@media (min-width:1200px){ .df-grid--4{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
/* Grade de categorias / informativos (cards de imagem) */
.df-grid--tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:768px){ .df-grid--tiles{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:1200px){ .df-grid--tiles{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.df-card{
position:relative; display:flex; flex-direction:column; height:100%;
background:var(--df-surface);
border:1px solid var(--df-line); border-radius:var(--df-r-lg);
overflow:hidden;
transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.df-card:hover{ border-color:var(--df-line-strong); box-shadow:var(--df-shadow-2); }
@media (hover:hover){ .df-card:hover{ transform:translateY(-2px); } }
.df-card:focus-within{ border-color:var(--df-brand-dark); box-shadow:0 0 0 3px rgba(94,96,80,.18); }
.df-card__media{
position:relative; display:block;
/* reserva de espaco: evita deslocamento de layout (CLS) */
aspect-ratio:1/1; background:var(--df-surface-3); overflow:hidden;
}
.df-card__media img{
width:100%; height:100%; object-fit:cover; display:block;
transition:transform .3s ease;
}
@media (hover:hover){ .df-card:hover .df-card__media img{ transform:scale(1.03); } }
.df-card__flags{
position:absolute; top:var(--df-s2); left:var(--df-s2); z-index:2;
display:flex; flex-direction:column; align-items:flex-start; gap:var(--df-s1);
}
.df-card__body{ display:flex; flex-direction:column; flex:1 1 auto; padding:var(--df-s4); gap:var(--df-s2); }
.df-card__title{ margin:0; font-size:.9375rem; font-weight:600; line-height:1.35; color:var(--df-ink); }
.df-card__title a{ color:inherit; }
/* O link do titulo cobre o cartao inteiro: um unico alvo de clique amplo,
sem repetir links identicos para leitores de tela. */
.df-card__title a::after{ content:""; position:absolute; inset:0; z-index:1; }
.df-card__title a:hover{ text-decoration:none; }
.df-card__price{ margin-top:auto; padding-top:var(--df-s2); }
.df-card__price .df-price{
font-size:1.125rem; font-weight:700; color:var(--df-price);
font-variant-numeric:tabular-nums;
}
.df-card__price .df-price-old{
display:block; font-size:.8125rem; color:var(--df-muted);
text-decoration:line-through; font-variant-numeric:tabular-nums;
}
/* Acoes ficam acima do link-cobertura */
.df-card__actions{ position:relative; z-index:2; padding:0 var(--df-s4) var(--df-s4); }
.df-card__actions form{ margin:0; }
/* Linha quantidade + botao */
.df-qty{ display:flex; align-items:stretch; gap:var(--df-s2); }
.df-qty__label{ flex:0 0 auto; display:flex; align-items:center; }
.df-qty__field{
width:100%; min-width:64px; min-height:44px;
padding:var(--df-s2) var(--df-s3);
font-size:.9375rem; text-align:center; color:var(--df-ink);
background:var(--df-surface); border:1px solid var(--df-line-strong);
border-radius:var(--df-r); font-variant-numeric:tabular-nums;
}
.df-qty__field:focus{ outline:none; border-color:var(--df-brand-dark); box-shadow:0 0 0 3px rgba(94,96,80,.18); }
.df-qty__add{ flex:1 1 auto; }
.df-card__out{
display:flex; align-items:center; justify-content:center; gap:var(--df-s2);
min-height:44px; padding:0 var(--df-s4);
background:var(--df-danger-tint); color:var(--df-danger);
border:1px solid #F0C4C1; border-radius:var(--df-r);
font-size:.875rem; font-weight:600;
}
/* Cartao de imagem simples (linhas, categorias, informativos) */
.df-tile{
display:flex; flex-direction:column; height:100%;
background:var(--df-surface); border:1px solid var(--df-line);
border-radius:var(--df-r-lg); overflow:hidden;
transition:border-color .15s ease, box-shadow .15s ease;
}
.df-tile:hover{ border-color:var(--df-line-strong); box-shadow:var(--df-shadow-2); text-decoration:none; }
.df-tile__media{ aspect-ratio:6/5; background:var(--df-surface-3); overflow:hidden; }
.df-tile__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.df-tile__label{
padding:var(--df-s3) var(--df-s4);
font-size:.9375rem; font-weight:600; color:var(--df-ink); line-height:1.35;
}
/* --------------------------------------------------------------------------
13. HOME - CARROSSEL E FAIXAS
-------------------------------------------------------------------------- */
.df-hero{ background:var(--df-surface-3); }
.df-hero .carousel-item > a,
.df-hero .carousel-item > div{
display:block; width:100%;
aspect-ratio:16/7;
background-position:center; background-repeat:no-repeat; background-size:cover;
}
@media (max-width:767.98px){
.df-hero .carousel-item > a,
.df-hero .carousel-item > div{ aspect-ratio:4/3; }
}
.df-hero .carousel-control-prev,
.df-hero .carousel-control-next{ width:56px; opacity:.85; }
.df-hero .carousel-control-prev-icon,
.df-hero .carousel-control-next-icon{
width:44px; height:44px; padding:12px; border-radius:50%;
background-color:rgba(27,25,23,.55);
}
.df-hero .carousel-indicators [data-bs-target]{
width:10px; height:10px; border-radius:50%; border:0;
background-color:#fff; opacity:.5; margin-inline:5px;
}
.df-hero .carousel-indicators .active{ opacity:1; }
/* Faixa de banners (posicao 3). A posicao 1 usa o mosaico .df-launch. */
.df-banners{ display:grid; gap:var(--df-s4); grid-template-columns:1fr; margin-bottom:var(--df-s6); }
.df-banners a{ display:block; border-radius:var(--df-r-lg); overflow:hidden; }
.df-banners img{ display:block; width:100%; height:auto; }
/* --------------------------------------------------------------------------
14. PRODUTO (detalhe)
-------------------------------------------------------------------------- */
.df-product{ display:grid; gap:var(--df-s5); grid-template-columns:1fr; }
@media (min-width:992px){ .df-product{ grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr); gap:var(--df-s7); } }
.df-product__media{
position:relative; background:var(--df-surface-2);
border:1px solid var(--df-line); border-radius:var(--df-r-lg); overflow:hidden;
}
.df-product__media img{ display:block; width:100%; height:auto; }
.df-product__buy{
padding:var(--df-s5);
background:var(--df-surface-2);
border:1px solid var(--df-line); border-radius:var(--df-r-lg);
}
@media (min-width:992px){ .df-product__buy{ position:sticky; top:calc(var(--df-header-h) + var(--df-s4)); } }
.df-product__price{ font-size:2rem; font-weight:700; color:var(--df-price); line-height:1.1; font-variant-numeric:tabular-nums; }
.df-product__price-old{ font-size:1rem; color:var(--df-muted); text-decoration:line-through; font-variant-numeric:tabular-nums; }
.df-product__specs{ margin:var(--df-s4) 0; border-top:1px solid var(--df-line); }
.df-product__specs dl{ display:grid; grid-template-columns:auto 1fr; gap:0; margin:0; }
.df-product__specs dt,
.df-product__specs dd{ padding:var(--df-s3) 0; margin:0; border-bottom:1px solid var(--df-line); font-size:.875rem; }
.df-product__specs dt{ color:var(--df-muted); padding-right:var(--df-s4); }
.df-product__specs dd{ color:var(--df-ink); font-weight:600; text-align:right; }
.df-prose{ font-size:1rem; line-height:1.65; color:var(--df-body); }
.df-prose img{ border-radius:var(--df-r); }
.df-prose h2,.df-prose h3{ margin-top:var(--df-s5); }
.df-prose table{ width:100%; border-collapse:collapse; }
.df-prose td,.df-prose th{ padding:var(--df-s2) var(--df-s3); border:1px solid var(--df-line); }
/* Navegacao lateral do catalogo */
.df-sidenav{
padding:var(--df-s4);
background:var(--df-surface-2);
border:1px solid var(--df-line); border-radius:var(--df-r-lg);
}
.df-sidenav h2{
font-family:var(--df-font-display); font-size:.6875rem; letter-spacing:.16em;
text-transform:uppercase; color:var(--df-muted); margin:0 0 var(--df-s2);
}
.df-sidenav h2 + a{ border-top:0; }
.df-sidenav a{
display:block; padding:var(--df-s2) var(--df-s2);
font-size:.875rem; color:var(--df-body);
border-top:1px solid var(--df-line); border-radius:var(--df-r-sm);
}
.df-sidenav a:hover{ background:var(--df-brand-tint); color:var(--df-ink); text-decoration:none; }
.df-sidenav__group + .df-sidenav__group{ margin-top:var(--df-s5); }
/* --------------------------------------------------------------------------
15. CARRINHO
-------------------------------------------------------------------------- */
.df-cartlayout{ display:grid; gap:var(--df-s5); grid-template-columns:1fr; align-items:start; }
@media (min-width:992px){ .df-cartlayout{ grid-template-columns:minmax(0,1.6fr) minmax(320px,1fr); gap:var(--df-s6); } }
.df-line{
display:grid; gap:var(--df-s3) var(--df-s4);
grid-template-columns:88px minmax(0,1fr);
padding:var(--df-s4) 0; border-bottom:1px solid var(--df-line);
}
@media (min-width:768px){
.df-line{ grid-template-columns:110px minmax(0,1fr) auto; align-items:start; }
}
.df-line__media{ border:1px solid var(--df-line); border-radius:var(--df-r); overflow:hidden; background:var(--df-surface-2); }
.df-line__media img{ display:block; width:100%; height:auto; }
.df-line__name{ font-size:.9375rem; font-weight:600; color:var(--df-ink); margin:0 0 var(--df-s1); }
.df-line__meta{ font-size:.8125rem; color:var(--df-muted); margin:0; }
.df-line__numbers{
grid-column:1/-1;
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--df-s2) var(--df-s4);
padding-top:var(--df-s3); margin-top:var(--df-s2); border-top:1px dashed var(--df-line);
}
@media (min-width:768px){
.df-line__numbers{ grid-column:3; grid-template-columns:1fr; width:220px; margin-top:0; padding-top:0; border-top:0; text-align:right; }
}
.df-line__num{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--df-s3); font-size:.875rem; }
.df-line__num dt{ color:var(--df-muted); font-weight:400; }
.df-line__num dd{ margin:0; color:var(--df-ink); font-weight:600; font-variant-numeric:tabular-nums; }
.df-line__num--total dd{ color:var(--df-price); font-size:1rem; }
/* Controle de quantidade do carrinho */
.df-stepper{ display:inline-flex; align-items:center; gap:var(--df-s1); }
.df-stepper a,
.df-stepper span{
display:inline-flex; align-items:center; justify-content:center;
min-width:40px; min-height:40px;
border:1px solid var(--df-line-strong); border-radius:var(--df-r);
background:var(--df-surface); color:var(--df-ink);
font-size:.875rem; font-weight:600; font-variant-numeric:tabular-nums;
}
.df-stepper a:hover{ background:var(--df-ink); border-color:var(--df-ink); color:#fff; text-decoration:none; }
.df-stepper span{ border-color:transparent; background:transparent; min-width:48px; }
.df-remove{
display:inline-flex; align-items:center; gap:var(--df-s2);
min-height:44px; padding:0 var(--df-s2);
font-size:.8125rem; color:var(--df-danger);
}
.df-remove:hover{ color:var(--df-danger); text-decoration:underline; }
.df-summary{
padding:var(--df-s5);
background:var(--df-surface-2);
border:1px solid var(--df-line); border-radius:var(--df-r-lg);
}
@media (min-width:992px){ .df-summary{ position:sticky; top:calc(var(--df-header-h) + var(--df-s4)); } }
.df-summary h2{ font-size:1.125rem; margin-bottom:var(--df-s4); }
.df-summary__row{
display:flex; align-items:baseline; justify-content:space-between; gap:var(--df-s4);
padding:var(--df-s3) 0; font-size:.9375rem; border-top:1px solid var(--df-line);
}
.df-summary__row dt{ color:var(--df-muted); font-weight:400; }
.df-summary__row dd{ margin:0; font-weight:600; color:var(--df-ink); font-variant-numeric:tabular-nums; }
.df-summary__row--total{ border-top:2px solid var(--df-ink); padding-top:var(--df-s4); }
.df-summary__row--total dt{ color:var(--df-ink); font-weight:700; font-size:1rem; }
.df-summary__row--total dd{ color:var(--df-price); font-weight:700; font-size:1.375rem; }
.df-summary__note{ font-size:.75rem; line-height:1.5; color:var(--df-muted); margin:var(--df-s3) 0 0; }
/* Cabecalho de tabela (visivel apenas em telas largas) */
.df-thead{
display:none;
padding-bottom:var(--df-s2); border-bottom:2px solid var(--df-ink);
font-family:var(--df-font-display); font-size:.6875rem; letter-spacing:.14em;
text-transform:uppercase; color:var(--df-muted);
}
@media (min-width:768px){
.df-thead{ display:grid; grid-template-columns:110px minmax(0,1fr) 220px; gap:var(--df-s4); }
.df-thead span:last-child{ text-align:right; }
}
/* --------------------------------------------------------------------------
16. PEDIDOS
-------------------------------------------------------------------------- */
.df-orders{ border-top:2px solid var(--df-ink); }
.df-order{
display:grid; gap:var(--df-s2) var(--df-s4);
grid-template-columns:repeat(2,minmax(0,1fr));
padding:var(--df-s4) 0; border-bottom:1px solid var(--df-line);
}
@media (min-width:768px){ .df-order{ grid-template-columns:2fr 2fr 1.2fr 1.2fr; align-items:center; } }
.df-order__k{
display:block; font-family:var(--df-font-display); font-size:.625rem;
letter-spacing:.14em; text-transform:uppercase; color:var(--df-muted); margin-bottom:2px;
}
@media (min-width:768px){ .df-order__k{ display:none; } }
.df-order__id{ font-weight:700; color:var(--df-ink); }
.df-order__value{ font-weight:700; color:var(--df-price); font-variant-numeric:tabular-nums; }
@media (min-width:768px){ .df-order__value{ text-align:right; } }
.df-orders__head{
display:none; padding-bottom:var(--df-s2);
font-family:var(--df-font-display); font-size:.6875rem; letter-spacing:.14em;
text-transform:uppercase; color:var(--df-muted);
}
@media (min-width:768px){
.df-orders__head{ display:grid; grid-template-columns:2fr 2fr 1.2fr 1.2fr; gap:var(--df-s4); }
.df-orders__head span:last-child{ text-align:right; }
}
.df-status{
display:inline-flex; align-items:center; gap:6px;
padding:4px 10px; border-radius:var(--df-r-pill);
background:var(--df-surface-3); color:var(--df-body);
font-size:.75rem; font-weight:600;
}
/* Documento do pedido (impressao) */
.df-doc{
padding:var(--df-s5); background:var(--df-surface);
border:1px solid var(--df-line); border-radius:var(--df-r-lg);
}
.df-doc .panel{ border:1px solid var(--df-line); border-radius:var(--df-r); overflow:hidden; margin-bottom:var(--df-s4) !important; box-shadow:none; }
.df-doc .panel-heading{ background:var(--df-surface-3) !important; color:var(--df-ink) !important; border-bottom:1px solid var(--df-line); padding:var(--df-s2) var(--df-s3) !important; }
.df-doc table{ width:100%; }
.df-doc td,.df-doc th{ padding:var(--df-s2) var(--df-s3) !important; font-size:.8125rem !important; border-color:var(--df-line) !important; }
.df-doc th{ background:var(--df-surface-2); text-align:left; font-weight:700; color:var(--df-ink); }
.df-doc .text-right{ text-align:right; }
.df-doc div{ font-size:.8125rem !important; font-family:var(--df-font-ui) !important; }
/* --------------------------------------------------------------------------
17. FORMULARIOS DE CONTA (cadastro / login)
-------------------------------------------------------------------------- */
.df-formcard{
padding:var(--df-s5);
background:var(--df-surface);
border:1px solid var(--df-line); border-radius:var(--df-r-lg);
box-shadow:var(--df-shadow-1);
}
@media (min-width:768px){ .df-formcard{ padding:var(--df-s6); } }
.df-formgrid{ display:grid; gap:0 var(--df-s4); grid-template-columns:1fr; }
@media (min-width:768px){
.df-formgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.df-formgrid .df-col-full{ grid-column:1/-1; }
}
.df-fieldset{ border:0; padding:0; margin:0 0 var(--df-s5); }
.df-fieldset legend{
float:none; width:auto; padding:0 0 var(--df-s3);
font-family:var(--df-font-display); font-size:.75rem; letter-spacing:.14em;
text-transform:uppercase; color:var(--df-muted);
border-bottom:1px solid var(--df-line); margin-bottom:var(--df-s4);
}
.df-authwrap{ max-width:520px; margin-inline:auto; }
.df-authwrap--wide{ max-width:840px; }
/* --------------------------------------------------------------------------
18. RODAPE
-------------------------------------------------------------------------- */
.df-footer{
margin-top:var(--df-s8);
padding:var(--df-s7) 0 var(--df-s5);
background:var(--df-surface-2);
border-top:1px solid var(--df-line);
font-size:.875rem;
}
.df-footer__grid{ display:grid; gap:var(--df-s5); grid-template-columns:1fr; }
@media (min-width:768px){ .df-footer__grid{ grid-template-columns:repeat(3,1fr); gap:var(--df-s6); } }
.df-footer h2{
font-family:var(--df-font-display); font-size:.6875rem; letter-spacing:.16em;
text-transform:uppercase; color:var(--df-muted); margin-bottom:var(--df-s3);
}
.df-footer a{ color:var(--df-body); }
.df-footer a:hover{ color:var(--df-ink); }
.df-footer ul{ list-style:none; margin:0; padding:0; }
.df-footer li a{ display:inline-flex; align-items:center; min-height:36px; }
.df-footer address{ font-style:normal; color:var(--df-body); }
.df-footer__bottom{
display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
gap:var(--df-s3);
margin-top:var(--df-s5); padding-top:var(--df-s4);
border-top:1px solid var(--df-line);
font-size:.75rem; color:var(--df-muted);
}
.df-footer__bottom img{ width:74px; height:auto; vertical-align:middle; }
.df-social{ display:flex; gap:var(--df-s2); }
.df-social a{
display:inline-flex; align-items:center; justify-content:center;
width:44px; height:44px; border-radius:50%;
background:var(--df-surface); border:1px solid var(--df-line); color:var(--df-body);
}
.df-social a:hover{ background:var(--df-ink); border-color:var(--df-ink); color:#fff; }
/* --------------------------------------------------------------------------
19. MODAIS HERDADOS (avisos do PHP)
Mantem o mesmo id/comportamento inline, apenas com aparencia nova.
-------------------------------------------------------------------------- */
#inicioAvisoBanner,#inicioAvisoBanner2,#inicioAvisoBanner3,#avisobanner{
position:fixed; inset:0; z-index:1080;
display:block; width:100%; height:100%; min-height:100%;
padding:var(--df-s4);
background:rgba(27,25,23,.6);
overflow-y:auto;
}
#inicioAvisoBanner > span,#inicioAvisoBanner2 > span,
#inicioAvisoBanner3 > span,#avisobanner > span{
display:block; text-align:center; font-size:1rem;
}
#inicioAvisoBanner > span > div,#inicioAvisoBanner2 > span > div,
#inicioAvisoBanner3 > span > div{
text-align:left;
border:1px solid var(--df-line) !important;
border-radius:var(--df-r-lg) !important;
box-shadow:var(--df-shadow-3);
margin-top:10vh !important;
}
#inicioAvisoBanner textarea{
width:100%; min-height:180px; padding:var(--df-s3);
border:1px solid var(--df-line-strong); border-radius:var(--df-r);
font-family:var(--df-font-ui); font-size:.875rem; line-height:1.6;
}
#inicioAvisoBanner input[type="text"],#inicioAvisoBanner input[type="email"]{
display:block; width:100%; min-height:44px; margin-bottom:var(--df-s3);
padding:var(--df-s3) var(--df-s4);
border:1px solid var(--df-line-strong); border-radius:var(--df-r); font-size:1rem;
}
#inicioAvisoBanner .button,#inicioAvisoBanner2 .button,
#inicioAvisoBanner3 .button,#inicioAvisoBanner input[type="submit"],
#inicioAvisoBanner2 input[type="button"]{
display:inline-flex; align-items:center; justify-content:center;
min-height:44px; padding:0 var(--df-s5); margin:var(--df-s1) var(--df-s1) 0 0;
background:var(--df-ink); color:#fff; border:1px solid var(--df-ink);
border-radius:var(--df-r); font-family:var(--df-font-ui);
font-size:.9375rem; font-weight:600; cursor:pointer;
}
#inicioAvisoBanner .button:hover,#inicioAvisoBanner input[type="submit"]:hover{
background:var(--df-brand-dark); border-color:var(--df-brand-dark); color:#fff;
}
#inicioAvisoBanner > span > a{
display:inline-flex; align-items:center; gap:var(--df-s2);
min-height:44px; margin-top:var(--df-s3); color:#fff; font-size:.875rem;
}
/* --------------------------------------------------------------------------
20. COMPATIBILIDADE
Classes antigas que ainda aparecem em conteudo vindo do banco (CKEditor)
ou em trechos de PHP nao reformulados.
-------------------------------------------------------------------------- */
.textCenter{ text-align:center; }
.textWeb{ display:none; }
@media (min-width:768px){ .textWeb{ display:inline; } .textMobile{ display:none; } }
/* .button / .btn / .bt_cadastro emitidos dentro de strings PHP */
.button,.bt_cadastro{
display:inline-flex; align-items:center; justify-content:center; gap:var(--df-s2);
min-height:44px; padding:0 var(--df-s5);
font-family:var(--df-font-ui); font-size:.9375rem; font-weight:600; line-height:1;
color:#fff; background:var(--df-ink); border:1px solid var(--df-ink);
border-radius:var(--df-r); cursor:pointer; text-align:center;
}
.button:hover,.bt_cadastro:hover{ background:var(--df-brand-dark); border-color:var(--df-brand-dark); color:#fff; text-decoration:none; }
/* Selo OUTLET posicionado sobre a imagem pelo PHP */
.produtosOutlet{
position:absolute; top:var(--df-s2); left:var(--df-s2); z-index:2;
min-height:0; padding:4px 10px;
background:var(--df-ink); color:#fff; border:0;
border-radius:var(--df-r-pill);
font-size:.6875rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
}
.produtosDourado{
position:absolute; top:var(--df-s2); right:var(--df-s2); z-index:2;
min-height:0; padding:4px 10px;
background:var(--df-brand-tint); color:var(--df-brand-dark);
border:1px solid var(--df-brand-line); border-radius:var(--df-r-pill);
font-size:.6875rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
-webkit-text-fill-color:currentColor;
}
.produtosDourado:hover{ color:var(--df-brand-dark); }
/* Bloco promocional da Scarf Me (conteudo do banco) */
.produtoScarf{
width:100%; padding:var(--df-s5); margin-bottom:var(--df-s4);
background:var(--df-surface-3); border-radius:var(--df-r-lg); text-align:center;
}
.produtoScarf span{
display:block; margin:0; padding:var(--df-s4);
background:var(--df-surface); border:1px solid var(--df-line-strong); border-radius:var(--df-r);
}
.produtoScarf p{ margin:0; text-transform:uppercase; font-size:.8125rem; color:var(--df-muted); }
.produtoScarf strong{ display:block; font-size:2.5rem; color:var(--df-ink); line-height:1.1; }
/* Amostras no carrinho */
.amostrasCarrinho{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--df-s3); width:100%; float:none; }
@media (min-width:768px){ .amostrasCarrinho{ grid-template-columns:repeat(4,1fr); } }
.amostrasCarrinho img{ width:100%; border-radius:var(--df-r); margin-bottom:var(--df-s2); display:block; }
/* Ancoras de produto compensam o cabecalho fixo */
[id^="produto_"]{ scroll-margin-top:calc(var(--df-header-h) + var(--df-s5)); }
/* --------------------------------------------------------------------------
21. IMPRESSAO
-------------------------------------------------------------------------- */
@media print{
.df-header,.df-nav,.df-footer,.df-announce,.df-skip,
.df-offcanvas,.offcanvas-backdrop,.df-sechead__link{ display:none !important; }
body{ background:#fff; font-size:11px; }
.df-doc{ border:0; padding:0; }
a[href]::after{ content:""; }
}
/* --------------------------------------------------------------------------
22. PONTOS DE QUEBRA DO CABECALHO (1000px)
O mmenu-light e a navegacao de desktop trocam exatamente em 1000px, que e o
ponto de quebra usado pelo js.js existente. Nao alterar sem ajustar o JS.
-------------------------------------------------------------------------- */
.df-lg-only{ display:none !important; }
.df-sm-only{ display:none; }
/* O rotulo "Meu pedido" so aparece quando ha espaco: com o logo em 150px,
abaixo de 440px o cartao seria empurrado para uma segunda linha. */
@media (min-width:440px){ .df-sm-only{ display:inline; } }
/* Navegacao horizontal escondida abaixo de 1000px */
#nav.df-nav{ display:none; }
@media (min-width:1000px){
#nav.df-nav{ display:block; }
#navMobile{ display:none; }
.df-lg-only{ display:inline-flex !important; }
}
/* --------------------------------------------------------------------------
23. GATILHO DO MENU MOBILE
-------------------------------------------------------------------------- */
#navMobile{ flex:0 0 auto; order:-1; }
#navMobile > a{
position:relative;
display:flex; flex-direction:column; justify-content:center; gap:5px;
width:44px; height:44px; padding:11px 9px;
border:1px solid var(--df-line); border-radius:var(--df-r);
background:var(--df-surface);
}
#navMobile > a:hover{ background:var(--df-surface-3); }
#navMobile > a::before,
#navMobile > a::after,
#navMobile > a > span{
content:""; display:block; height:2px; width:100%;
background:var(--df-ink); border-radius:1px;
}
#navMobile > a > span{ margin:0; }
/* Enquanto o mmenu nao inicializa, a arvore fica fora do fluxo. */
#navMobile > nav#menu{ position:absolute; left:-9999px; top:0; }
/* Aparencia do painel do mmenu-light dentro do design system */
.mm-spn.mm-spn--light{ color:var(--df-body); background:var(--df-surface); }
.mm-spn a,.mm-spn span{ font-size:.9375rem; letter-spacing:.02em; }
.mm-spn a{ color:var(--df-body); }
.mm-spn.mm-spn--navbar::after{ color:var(--df-ink); font-weight:600; opacity:1; }
:root{ --mm-spn-item-height:52px; --mm-spn-item-indent:20px; }
/* --------------------------------------------------------------------------
24. AJUSTES DE FLUXO DO CABECALHO NO CELULAR
Abaixo de 700px a busca ocupa uma linha inteira, mantendo alvos de 44px.
-------------------------------------------------------------------------- */
.df-header__bar{ flex-wrap:wrap; }
.df-logo{ margin-right:auto; }
@media (max-width:699.98px){
.df-search{ order:10; flex:0 0 100%; margin-bottom:var(--df-s2); }
}
@media (min-width:700px){
.df-search{ max-width:420px; margin-inline:var(--df-s4); }
}
/* Ancora herdada usada pelo js.js para o comportamento do logo */
#voltaLogo{ display:block; height:0; scroll-margin-top:calc(var(--df-header-h) + 16px); }
/* --------------------------------------------------------------------------
25. COMPLEMENTOS DE COMPONENTES
-------------------------------------------------------------------------- */
.df-search form{ margin:0; }
/* Cartao de imagem: o envolve spans, entao precisam ser bloco */
.df-tile{ text-decoration:none; }
.df-tile__media{ display:block; aspect-ratio:6/5; background:var(--df-surface-3); overflow:hidden; }
.df-tile__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.df-tile__label{ display:block; }
/* Pagina de produto */
.df-productpage{ margin-bottom:var(--df-s7); }
/* Navegacao do catalogo no rodape da pagina de produto */
.df-catalognav{ margin-top:var(--df-s7); padding-top:var(--df-s5); border-top:1px solid var(--df-line); }
@media (min-width:768px){
.df-catalognav .df-sidenav{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--df-s5); }
.df-catalognav .df-sidenav__group + .df-sidenav__group{ margin-top:0; }
}
@media (min-width:768px){
.df-catalognav .df-sidenav__group{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 var(--df-s4); align-content:start; }
.df-catalognav .df-sidenav__group h2{ grid-column:1/-1; }
}
/* Listas de download */
.df-downloads{ list-style:none; margin:0; padding:0; display:grid; gap:var(--df-s2); max-width:640px; }
.df-downloads a{
display:flex; align-items:center; gap:var(--df-s3);
min-height:52px; padding:var(--df-s3) var(--df-s4);
background:var(--df-surface-2); border:1px solid var(--df-line);
border-radius:var(--df-r); color:var(--df-body); font-weight:500;
}
.df-downloads a:hover{ border-color:var(--df-brand-dark); background:var(--df-brand-tint); color:var(--df-ink); text-decoration:none; }
.df-downloads i{ color:var(--df-brand-dark); }
/* Linha de botoes */
.df-btnrow{ display:flex; flex-wrap:wrap; gap:var(--df-s2); }
/* Tabelas largas rolam dentro do proprio bloco, nunca a pagina */
.df-tablewrap{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.df-tablewrap table{ min-width:640px; }
/* O do titulo do cartao cobre o cartao; o cartao precisa ancorar */
.df-card{ position:relative; }
/* Ajuste do rotulo de quantidade dentro do cartao */
.df-qty__label{ flex:0 0 auto; min-width:78px; }
.df-qty__label .df-qty__field{ width:100%; }
.df-card__actions .df-hint{ margin-top:var(--df-s2); }
/* Selo Outlet na pagina de produto (posicionado sobre a foto) */
.df-product__media .produtosOutlet{ position:absolute; top:var(--df-s3); left:var(--df-s3); z-index:2; }
/* --------------------------------------------------------------------------
26. CORRECOES DE LAYOUT VALIDADAS EM NAVEGADOR
-------------------------------------------------------------------------- */
/* O campo de quantidade precisa de largura fixa: com width:100% dentro de um
label auto-dimensionado, o assumia a largura intrinseca
e empurrava o botao "Adicionar" para fora do cartao. */
.df-qty{ align-items:center; }
.df-qty__label{ flex:0 0 88px; width:88px; min-width:88px; max-width:88px; }
.df-qty__field{ width:100%; min-width:0; padding-inline:var(--df-s2); }
.df-qty__add{ flex:1 1 auto; min-width:0; padding-inline:var(--df-s3); }
/* Reserva de espaco para a dica de pedido minimo, para que todos os cartoes
tenham a mesma altura de rodape e os precos fiquem alinhados na grade. */
.df-card__actions{ position:relative; padding-bottom:34px; }
.df-card__actions .df-hint{
position:absolute; left:var(--df-s4); right:var(--df-s4); bottom:10px;
margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* O banner nao deve dominar a tela em monitores largos. */
.df-hero .carousel-item > a,
.df-hero .carousel-item > div{ max-height:520px; }
@media (max-width:767.98px){
.df-hero .carousel-item > a,
.df-hero .carousel-item > div{ max-height:360px; }
}
/* Em cartoes estreitos (grade de 2 colunas no celular) a quantidade e o botao
nao cabem lado a lado: empilha para manter o rotulo do botao legivel e o
alvo de toque com 44px. */
@media (max-width:575.98px){
.df-grid .df-qty{ flex-direction:column; align-items:stretch; gap:var(--df-s2); }
.df-grid .df-qty__label{ flex:0 0 auto; width:100%; min-width:0; max-width:none; }
.df-grid .df-qty__add{ width:100%; }
.df-card__actions{ padding-bottom:30px; }
}
/* No celular o total da linha ocupa a largura toda, com rotulo e valor nas
extremidades - fica mais legivel do que dividir a linha em duas colunas. */
@media (max-width:767.98px){
.df-line__num--total{ grid-column:1/-1; padding-top:var(--df-s2); border-top:1px solid var(--df-line); }
}
/* --------------------------------------------------------------------------
27. ALVOS DE TOQUE (WCAG 2.5.8 - AA)
Auditado no navegador a 375px. Nenhum controle abaixo de 24x24; em telas
sensiveis ao toque os controles de uso repetido sobem para 44x44.
-------------------------------------------------------------------------- */
.df-search__btn{ width:44px; height:44px; right:2px; }
/* Indicadores do carrossel: o ponto continua com 10px, mas a area clicavel
passa a ter 24x24 atraves do proprio botao. */
.df-hero .carousel-indicators{ margin-bottom:var(--df-s3); }
.df-hero .carousel-indicators [data-bs-target]{
width:24px; height:24px; margin-inline:2px;
border:0; border-radius:50%; opacity:1;
background-color:transparent; background-image:none;
position:relative;
}
.df-hero .carousel-indicators [data-bs-target]::after{
content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
width:10px; height:10px; border-radius:50%;
background:#fff; opacity:.55; box-shadow:0 0 0 1px rgba(27,25,23,.25);
}
.df-hero .carousel-indicators .active::after{ opacity:1; }
/* Em dispositivos de toque, controles de uso repetido chegam a 44px. */
@media (pointer:coarse){
.df-btn--sm{ min-height:44px; }
.df-qty__field{ min-height:44px; }
.df-stepper a,
.df-stepper span{ min-width:44px; min-height:44px; }
.df-logo a{ display:inline-flex; align-items:center; min-height:44px; }
}
/* --------------------------------------------------------------------------
28. MARCA - LOGO AMPLIADO
logo.png = 280x40 px nativos. Nenhum tamanho abaixo ultrapassa esse limite,
entao a marca nunca aparece interpolada.
-------------------------------------------------------------------------- */
/* Cabecalho: 150px -> 190px -> 240px. A 240px a altura fica em 34px, dentro
dos 64px da barra, sem empurrar o cabecalho. */
.df-header__bar{ min-height:72px; }
/* Rodape: o logo substitui o texto "Dani Fernandes". Continua sendo o da
coluna - o alt carrega o nome, entao a estrutura de titulos nao se perde. */
/* Especificidade casada com ".df-footer h2" (classe + elemento), senao aquela
regra vence e o reset nao se aplica. A imagem e display:block, entao nao ha
gap de baseline para corrigir - basta margem e largura. */
.df-footer h2.df-footer__brand{ margin:0 0 var(--df-s4); line-height:0; }
.df-footer__brand img{ display:block; width:220px; max-width:100%; height:auto; }
@media (min-width:768px){ .df-footer__brand img{ width:240px; } }
/* Jordanie no carrinho: 300x224 e 312x850 px nativos - ha folga para ampliar. */
.df-jordanie{ display:flex; gap:var(--df-s5); align-items:center; flex-wrap:wrap; }
.df-jordanie__logo{ flex:0 0 170px; max-width:170px; }
.df-jordanie__text{ flex:1 1 260px; }
.df-jordanie__frasco{ flex:0 0 130px; max-width:130px; }
.df-jordanie img{ display:block; width:100%; height:auto; }
/* --------------------------------------------------------------------------
29. CABECALHO - PREVENCAO DE QUEBRA DE LINHA
Medido em 17 larguras entre 320 e 1920px. O flex-wrap decide a quebra pelo
flex-basis, ANTES de encolher: com basis "auto" a busca entrava na conta com
420px e empurrava o carrinho para uma segunda linha em 700px e 1000px.
Uma basis pequena resolve, e a busca continua crescendo ate 420px.
-------------------------------------------------------------------------- */
.df-search form{ min-width:0; }
@media (min-width:700px){
.df-search{ flex:1 1 180px; max-width:420px; margin-inline:var(--df-s4); }
}
/* Telas muito estreitas (320px): o logo cede para manter tudo em uma linha. */
@media (max-width:359.98px){
.df-logo img{ width:120px; }
}
/* --------------------------------------------------------------------------
30. LANCAMENTOS DA ESTACAO (mosaico editorial)
Baseado na "hero strip" da proposta. O 1o banner ocupa a coluna alta e os
demais empilham ao lado. Como df_shop_banner so tem foto e link (sem titulo,
tag ou SKU), as pecas nao recebem texto sobreposto - a arte do banner ja
carrega a mensagem.
-------------------------------------------------------------------------- */
.df-launch-sec{ margin-bottom:var(--df-s7); }
.df-launch-sec .df-sechead h2{ font-weight:400; }
.df-launch-sec .df-sechead h2 em{ font-style:italic; color:var(--df-brand-dark); font-weight:600; }
.df-launch{ display:grid; gap:var(--df-s3); grid-template-columns:1fr; }
.df-launch__main,
.df-launch__item{
position:relative; display:block; overflow:hidden;
background:var(--df-surface-3);
border:1px solid var(--df-line); border-radius:var(--df-r-lg);
}
.df-launch__main img,
.df-launch__item img{
display:block; width:100%; height:100%; object-fit:cover;
transition:transform .35s ease;
}
@media (hover:hover){
.df-launch__main:hover img,
.df-launch__item:hover img{ transform:scale(1.03); }
}
.df-launch__main:hover,
.df-launch__item:hover{ border-color:var(--df-line-strong); box-shadow:var(--df-shadow-2); }
.df-launch__main:focus-visible,
.df-launch__item:focus-visible{ outline:3px solid var(--df-brand-dark); outline-offset:2px; }
/* Reserva de espaco: evita deslocamento de layout enquanto a arte carrega */
.df-launch__main{ aspect-ratio:16/9; }
.df-launch__item{ aspect-ratio:16/9; }
/* As pecas 2..n vivem em .df-launch__side, entao a grade tem sempre 2 filhos.
Isso substitui um "grid-row:1/-1" no destaque, que nao funcionaria: o -1
aponta para o fim da grade EXPLICITA (1 linha), e a 3a peca voltava para a
coluna 1 em vez de empilhar ao lado. */
.df-launch__side{ display:grid; gap:var(--df-s3); grid-auto-rows:1fr; }
@media (min-width:768px){
.df-launch{ grid-template-columns:1.5fr 1fr; align-items:stretch; }
.df-launch__main{ aspect-ratio:auto; min-height:420px; }
/* piso para nao espremer: com 4+ banners a faixa cresce em vez de afinar */
.df-launch__side .df-launch__item{ aspect-ratio:auto; min-height:150px; }
/* com um unico banner nao ha coluna lateral para preencher */
.df-launch--single{ grid-template-columns:1fr; }
.df-launch--single .df-launch__main{ aspect-ratio:21/9; min-height:0; }
}