/* =========================================================================
   Temas 11–20: preto e branco, alternando escuro e claro. Carrega DEPOIS de temas.css.
   Cada um muda estrutura (capa, card, categorias) e o desenho (tipografia, borda, raio, sombra).
   ========================================================================= */

/* ---------- 11. GIZ — branco puro, quadrado, lista com fios finos (editorial) ---------- */
.tema-giz{--bg:#fff;--fg:#0a0a0a;--mute:#6f6f6f;--line:#e4e4e4;--card:#fff;--card2:#f3f3f3;--acc:#0a0a0a;--accfg:#fff;
  --r:0px;--rl:0px;--rs:0px;--font:"Inter Tight",system-ui,sans-serif;--fontT:"Inter Tight",system-ui,sans-serif;--pesoT:600;--lsT:-.065em;--pesoC:600;
  --nav-bg:rgba(255,255,255,.96);--nav-fg:#8a8a8a;--nav-on:#0a0a0a;--chip-bg:#fff;--chip-on-bg:#0a0a0a;--chip-on-fg:#fff;--fc-bg:#fff;--selo-bg:#0a0a0a;--selo-fg:#fff;--preco:#0a0a0a}
.tema-giz .ht h1{font-size:clamp(54px,15vw,150px);line-height:.88}
.tema-giz .ht-kick,.tema-giz .cd-kick{letter-spacing:.2em}
.tema-giz .bs,.tema-giz .fl,.tema-giz .cats-pill button,.tema-giz .ab-bt,.tema-giz .cond,.tema-giz .cond button,.tema-giz .ht-cta,.tema-giz .ht-cta span,.tema-giz .cd-ir,.tema-giz .fav,.tema-giz .hb-cta,.tema-giz .hb-cta span,.tema-giz .fc-cta,.tema-giz .cd-selo{border-radius:0}
.tema-giz .cd-linha{background:transparent;border:0;border-top:1px solid var(--line);padding:16px 0;gap:18px;box-shadow:none}
.tema-giz .cd-foto{background:#f3f3f3}
.tema-giz .st h2{font-size:15px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}

/* ---------- 12. BREU — preto total, título fino e largo, painéis com fio branco ---------- */
.tema-breu{--bg:#000;--fg:#f5f5f5;--mute:#8d8d8d;--line:rgba(255,255,255,.14);--card:#0d0d0d;--card2:#0d0d0d;--acc:#fff;--accfg:#000;
  --r:28px;--rl:34px;--rs:18px;--font:"Unbounded",system-ui,sans-serif;--fontT:"Unbounded",system-ui,sans-serif;--pesoT:300;--lsT:-.04em;--pesoC:400;
  --hc-bg:radial-gradient(ellipse at 50% 30%,#262626 0%,#000 70%);--hc-fg:#fff;--hc-ov:linear-gradient(180deg,rgba(0,0,0,0) 36%,rgba(0,0,0,.9) 82%);
  --nav-bg:rgba(20,20,20,.88);--nav-fg:#9a9a9a;--nav-on:#fff;--chip-bg:transparent;--chip-on-bg:#fff;--chip-on-fg:#000;--fav-bg:rgba(0,0,0,.5);--fav-fg:#fff;--selo-bg:#fff;--selo-fg:#000;--preco:#fff;--fc-bg:#0a0a0a;--ir-bg:#fff;--ir-fg:#000;--foto-bg:#050505;--line-card:rgba(255,255,255,.14)}
.tema-breu .hc h1{font-size:clamp(30px,7vw,68px);line-height:1.06;max-width:16ch}
.tema-breu .hc-kick{letter-spacing:.34em;font-size:10px}
.tema-breu .hc-cta{background:#fff;color:#000;border:0}
.tema-breu .hc-cta-ic{background:#000;color:#fff}
.tema-breu .hc-cta i{color:#000}
.tema-breu .cd h3{font-size:14.5px}
.tema-breu .bs,.tema-breu .fl,.tema-breu .ab-bt{background:#0d0d0d;border-color:rgba(255,255,255,.14)}
.tema-breu .cats-pill button{border-color:rgba(255,255,255,.22);font-weight:400;font-size:13px}

/* ---------- 13. PAPEL — off-white de jornal, serifa, fio duplo ---------- */
.tema-papel{--bg:#f6f3ec;--fg:#16140f;--mute:#7a7467;--line:rgba(22,20,15,.14);--card:#f6f3ec;--card2:#ebe6db;--acc:#16140f;--accfg:#f6f3ec;
  --r:4px;--rl:6px;--rs:4px;--font:"DM Sans",system-ui,sans-serif;--fontT:"Fraunces",Georgia,serif;--pesoT:400;--lsT:-.035em;--pesoC:500;
  --nav-bg:rgba(246,243,236,.96);--nav-fg:#8a8473;--nav-on:#16140f;--chip-bg:transparent;--chip-on-bg:#16140f;--chip-on-fg:#f6f3ec;--fc-bg:#f6f3ec;--selo-bg:#16140f;--selo-fg:#f6f3ec;--preco:#16140f}
.tema-papel .ht h1{font-size:clamp(46px,12vw,118px);line-height:.96;font-style:italic}
.tema-papel .ht-kick{letter-spacing:.24em}
.tema-papel .st{border-top:3px double var(--fg);padding-top:14px}
.tema-papel .st h2{font-size:28px;font-style:italic}
.tema-papel .cd-padrao{background:transparent;box-shadow:none;border:0;padding:0}
.tema-papel .cd-foto{border-radius:2px;background:#ebe6db}
.tema-papel .cd h3{font-size:18px;font-weight:400}
.tema-papel .cd-padrao .cd-txt{padding:12px 0 0}
.tema-papel .bs,.tema-papel .fl{border-radius:2px;background:transparent;border-color:var(--fg)}
.tema-papel .cats-pill button{border-radius:2px;border-color:var(--line)}
.tema-papel .ab-bt,.tema-papel .ht-cta,.tema-papel .ht-cta span,.tema-papel .cd-ir{border-radius:2px}

/* ---------- 14. OBSIDIANA — preto fosco, fio fino, rótulos em caixa alta, lista ---------- */
.tema-obsidiana{--bg:#0a0a0b;--fg:#ececec;--mute:#85858c;--line:#222226;--card:#111113;--card2:#16161a;--acc:#fff;--accfg:#0a0a0b;
  --r:10px;--rl:14px;--rs:8px;--font:"Space Grotesk",system-ui,sans-serif;--fontT:"Space Grotesk",system-ui,sans-serif;--pesoT:500;--lsT:-.04em;--pesoC:500;
  --hb-bg:linear-gradient(120deg,#16161a,#0d0d0f);--hb-fg:#fff;--hb-ov:linear-gradient(90deg,rgba(10,10,11,.96) 0%,rgba(10,10,11,.7) 46%,rgba(10,10,11,0) 80%);
  --nav-bg:rgba(17,17,19,.92);--nav-fg:#85858c;--nav-on:#fff;--chip-bg:#111113;--chip-on-bg:#fff;--chip-on-fg:#0a0a0b;--fav-bg:rgba(0,0,0,.5);--fav-fg:#fff;--selo-bg:#fff;--selo-fg:#0a0a0b;--preco:#fff;--fc-bg:#0e0e10;--line-card:#222226;--ir-bg:#fff;--ir-fg:#0a0a0b}
.tema-obsidiana .hb-selo,.tema-obsidiana .cd-kick,.tema-obsidiana .ht-kick,.tema-obsidiana .cd-selo{text-transform:uppercase;letter-spacing:.12em;font-size:10px}
.tema-obsidiana .bs,.tema-obsidiana .fl,.tema-obsidiana .ab-bt,.tema-obsidiana .cats-pill button,.tema-obsidiana .cond,.tema-obsidiana .cond button{border-radius:8px}
.tema-obsidiana .hb-cta,.tema-obsidiana .hb-cta span,.tema-obsidiana .cd-ir{border-radius:8px}
.tema-obsidiana .cd-linha{border-radius:10px}
.tema-obsidiana .cd-preco b{font-family:"Space Grotesk";font-weight:500}

/* ---------- 15. PORCELANA — branco gelo, cantos suaves, categorias em círculo ---------- */
.tema-porcelana{--bg:#f5f6f6;--fg:#101214;--mute:#6d7378;--line:rgba(16,18,20,.08);--card:#fff;--card2:#eceeef;--acc:#101214;--accfg:#fff;
  --r:18px;--rl:24px;--rs:14px;--sh:0 14px 30px -18px rgba(16,18,20,.28);--sh-s:0 6px 16px -10px rgba(16,18,20,.2);--font:"DM Sans",system-ui,sans-serif;--fontT:"DM Sans",system-ui,sans-serif;--pesoT:700;--lsT:-.045em;--pesoC:600;
  --hb-bg:linear-gradient(115deg,#fff 0%,#e6e9ea 100%);--hb-fg:#101214;--hb-ov:linear-gradient(90deg,rgba(245,246,246,.96) 0%,rgba(245,246,246,.7) 45%,rgba(245,246,246,0) 78%);
  --nav-bg:rgba(255,255,255,.94);--nav-fg:#8b9196;--nav-on:#101214;--chip-bg:#fff;--chip-on-bg:#101214;--chip-on-fg:#fff;--fc-bg:#f5f6f6;--selo-bg:#fff;--preco:#101214}
.tema-porcelana .cd-foto{background:linear-gradient(180deg,#f1f2f3,#e6e8e9)}
.tema-porcelana .st h2::after{content:"";position:absolute;left:0;bottom:-7px;width:22px;height:3px;border-radius:2px;background:var(--acc)}

/* ---------- 16. CARVÃO — cinza-grafite e branco, título gigante com foto, painéis ---------- */
.tema-carvao{--bg:#141414;--fg:#f2f2f2;--mute:#9a9a9a;--line:rgba(255,255,255,.08);--card:#1d1d1d;--card2:#1d1d1d;--acc:#fff;--accfg:#141414;
  --r:24px;--rl:30px;--rs:16px;--font:"Bricolage Grotesque",system-ui,sans-serif;--fontT:"Bricolage Grotesque",system-ui,sans-serif;--pesoT:700;--lsT:-.05em;--pesoC:600;
  --nav-bg:rgba(36,36,36,.92);--nav-fg:#a8a8a8;--nav-on:#fff;--chip-bg:#1d1d1d;--chip-on-bg:#fff;--chip-on-fg:#141414;--fav-bg:rgba(0,0,0,.45);--fav-fg:#fff;--selo-bg:#fff;--selo-fg:#141414;--preco:#fff;--fc-bg:#181818;--ir-bg:#fff;--ir-fg:#141414;--foto-bg:#262626}
.tema-carvao .ht h1{font-size:clamp(58px,16vw,150px);line-height:.86}
.tema-carvao .ht-foto{background:#232323}
.tema-carvao .ht-etq{background:#fff;color:#141414}
.tema-carvao .ht-etq small{color:#555}
.tema-carvao .bs,.tema-carvao .fl,.tema-carvao .ab-bt{background:#1d1d1d;border-color:transparent}

/* ---------- 17. GELO — branco com contorno preto grosso e sombra dura (brutalista claro) ---------- */
.tema-gelo{--bg:#fff;--fg:#000;--mute:#555;--line:#000;--card:#fff;--card2:#f1f1f1;--acc:#000;--accfg:#fff;
  --r:8px;--rl:10px;--rs:6px;--sh:5px 5px 0 #000;--sh-s:3px 3px 0 #000;--font:"Syne",system-ui,sans-serif;--fontT:"Syne",system-ui,sans-serif;--pesoT:800;--lsT:-.03em;--ttT:uppercase;--pesoC:700;
  --nav-bg:#fff;--nav-fg:#555;--nav-on:#000;--nav-line:#000;--chip-bg:#fff;--chip-on-bg:#000;--chip-on-fg:#fff;--fc-bg:#fff;--selo-bg:#000;--selo-fg:#fff;--preco:#000;--line-card:#000}
.tema-gelo .ht h1{font-size:clamp(36px,10.2vw,104px);line-height:.92;overflow-wrap:anywhere}
.tema-gelo .cd h3,.tema-gelo .fc h2{text-transform:uppercase}
.tema-gelo .cd-padrao{border:2px solid #000}
.tema-gelo .cd-foto{background:#f1f1f1;border:2px solid #000;border-radius:6px}
.tema-gelo .bs,.tema-gelo .fl,.tema-gelo .cats-pill button,.tema-gelo .ab-bt,.tema-gelo .cond{border:2px solid #000;box-shadow:3px 3px 0 #000}
.tema-gelo .cats-pill button.on{box-shadow:none;transform:translate(3px,3px)}
.tema-gelo .ht-cta{box-shadow:4px 4px 0 var(--mute)}
.tema-gelo .cd-ir{border:2px solid #000}

/* ---------- 18. NOIR — preto de cinema, serifa clássica, sem moldura nos cards ---------- */
.tema-noir{--bg:#050505;--fg:#f3efe8;--mute:#8f8a80;--line:rgba(243,239,232,.12);--card:transparent;--card2:#0f0f0f;--acc:#f3efe8;--accfg:#050505;
  --r:2px;--rl:2px;--rs:2px;--font:"DM Sans",system-ui,sans-serif;--fontT:"Playfair Display",Georgia,serif;--pesoT:500;--lsT:-.02em;--pesoC:500;
  --hc-bg:radial-gradient(ellipse at 50% 26%,#2a2723 0%,#050505 70%);--hc-fg:#f3efe8;--hc-ov:linear-gradient(180deg,rgba(5,5,5,0) 34%,rgba(5,5,5,.94) 80%);
  --nav-bg:rgba(243,239,232,.95);--nav-fg:#7d786d;--nav-on:#050505;--chip-bg:transparent;--chip-on-bg:#f3efe8;--chip-on-fg:#050505;--fav-bg:rgba(5,5,5,.5);--fav-fg:#f3efe8;--selo-bg:#f3efe8;--selo-fg:#050505;--preco:#f3efe8;--fc-bg:#0b0b0b;--ir-bg:#f3efe8;--ir-fg:#050505}
.tema-noir .hc h1{font-size:clamp(46px,12vw,118px);line-height:.98;font-style:italic;font-weight:400}
.tema-noir .hc-kick{letter-spacing:.4em;font-size:10px}
.tema-noir .hc-cta{background:#f3efe8;color:#050505;border:0;border-radius:2px}
.tema-noir .hc-cta-ic{background:#050505;color:#f3efe8;border-radius:2px}
.tema-noir .hc-cta i{color:#050505}
.tema-noir .cd-padrao{box-shadow:none;border:0;padding:0;background:transparent}
.tema-noir .cd-padrao .cd-txt{padding:12px 0 0}
.tema-noir .cd-foto{background:radial-gradient(ellipse at 50% 70%,#24221f,#0f0f0f 72%);border-radius:2px}
.tema-noir .cd h3{font-size:18px;font-style:italic;font-weight:400}
.tema-noir .st h2{font-style:italic;font-weight:400;font-size:26px}
.tema-noir .bs,.tema-noir .fl,.tema-noir .ab-bt{background:#0f0f0f;border-color:rgba(243,239,232,.14);border-radius:2px}
.tema-noir .cd-ir{border-radius:2px}

/* ---------- 19. LINHO — branco quente, leve, pílulas generosas, painéis claros ---------- */
.tema-linho{--bg:#faf8f4;--fg:#1c1a17;--mute:#8a847a;--line:rgba(28,26,23,.08);--card:#fff;--card2:#f1eee8;--acc:#1c1a17;--accfg:#faf8f4;
  --r:30px;--rl:34px;--rs:20px;--sh:0 18px 34px -22px rgba(60,50,35,.35);--sh-s:0 8px 18px -12px rgba(60,50,35,.28);--font:"Instrument Sans",system-ui,sans-serif;--fontT:"Instrument Sans",system-ui,sans-serif;--pesoT:500;--lsT:-.045em;--pesoC:500;
  --nav-bg:rgba(255,255,255,.95);--nav-fg:#9b9589;--nav-on:#1c1a17;--chip-bg:#fff;--chip-on-bg:#1c1a17;--chip-on-fg:#faf8f4;--fc-bg:#faf8f4;--selo-bg:#fff;--preco:#1c1a17;--foto-bg:#f4f1eb}
.tema-linho .ht h1{font-size:clamp(46px,12.5vw,118px);line-height:.94;font-weight:400}
.tema-linho .cd-painel{background:#fff}
.tema-linho .cd-painel .cd-foto{background:#f4f1eb}
.tema-linho .cd-painel .cd-txt{border-top:0}
.tema-linho .cd h3{font-weight:500}

/* ---------- 20. TINTA — preto absoluto, lista com preço enorme, círculos de categoria ---------- */
.tema-tinta{--bg:#000;--fg:#fff;--mute:#8a8a8a;--line:rgba(255,255,255,.12);--card:#0b0b0b;--card2:#111;--acc:#fff;--accfg:#000;
  --r:20px;--rl:26px;--rs:14px;--font:"Schibsted Grotesk",system-ui,sans-serif;--fontT:"Schibsted Grotesk",system-ui,sans-serif;--pesoT:800;--lsT:-.055em;--pesoC:700;
  --hc-bg:radial-gradient(ellipse at 50% 24%,#242424 0%,#000 66%);--hc-fg:#fff;--hc-ov:linear-gradient(180deg,rgba(0,0,0,0) 32%,rgba(0,0,0,.92) 80%);
  --nav-bg:rgba(24,24,24,.9);--nav-fg:#9a9a9a;--nav-on:#fff;--chip-bg:#0b0b0b;--chip-on-bg:#fff;--chip-on-fg:#000;--fav-bg:rgba(0,0,0,.5);--fav-fg:#fff;--selo-bg:#fff;--selo-fg:#000;--preco:#fff;--fc-bg:#080808;--ir-bg:#fff;--ir-fg:#000}
.tema-tinta .hc h1{font-size:clamp(54px,15vw,132px);line-height:.88;text-transform:uppercase}
.tema-tinta .hc-cta{background:#fff;color:#000;border:0}
.tema-tinta .hc-cta-ic{background:#000;color:#fff}
.tema-tinta .hc-cta i{color:#000}
.tema-tinta .cd-linha .cd-preco b{font-size:26px;letter-spacing:-.05em}
.tema-tinta .cd-linha{border:1px solid var(--line)}
.tema-tinta .bs,.tema-tinta .fl,.tema-tinta .ab-bt{background:#0b0b0b;border-color:rgba(255,255,255,.12)}

/* ---------- opção "1 produto por linha" (celular): vale para qualquer tema ---------- */
@media (max-width:820px){
  body.col-1 .ls-padrao,body.col-1 .ls-painel{grid-template-columns:minmax(0,1fr);gap:16px}
  body.col-1 .cd-foto,body.col-1 .cd-painel .cd-foto{aspect-ratio:4/3}
  body.col-1 .cd.real .cd-foto,body.col-1 .cd-painel.real .cd-foto{aspect-ratio:16/10}
  body.col-1 .cd h3{font-size:19px}
  body.col-1 .cd-sub{-webkit-line-clamp:2;font-size:13.5px}
  body.col-1 .cd-specs{font-size:12px}
  body.col-1 .cd-preco b{font-size:21px}
  body.col-1 .cd-painel .cd-preco b{font-size:21px}
}

/* ---------- capa com imagem escolhida pelo lojista (vale para qualquer tema): foto pura, nome e botão numa faixa embaixo ---------- */
.hi{max-width:1200px;margin:4px auto 0;padding:0 var(--gut)}
.hi-img{position:relative;border-radius:var(--rl);overflow:hidden;aspect-ratio:4/3;background:var(--card2)}
.hi-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.hi-txt{padding:16px 4px 0;color:var(--fg);display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.hi h1{font-family:var(--fontT);font-weight:var(--pesoT);font-size:clamp(28px,8vw,56px);line-height:.98;letter-spacing:var(--lsT);text-transform:var(--ttT);overflow-wrap:anywhere;min-width:0}
.hi-cta{display:inline-flex;align-items:center;gap:12px;background:var(--acc);color:var(--accfg);border-radius:999px;padding:6px 20px 6px 6px;font-weight:700;font-size:14px}
.hi-ic{width:38px;height:38px;border-radius:50%;background:var(--accfg);color:var(--acc);display:grid;place-items:center}
.hi-ic svg{width:16px;height:16px}
@media (min-width:700px){.hi-img{aspect-ratio:16/8}.hi-txt{padding-top:20px}}

/* ---------- logo da loja no lugar do nome ---------- */
.ab-logo{height:32px;max-width:58vw;width:auto;object-fit:contain;display:block}
.cp-logo{display:block;width:auto;height:auto;max-height:clamp(56px,16vw,120px);max-width:min(100%,520px);object-fit:contain}
h1:has(>.cp-logo){line-height:1;font-size:0}

.rd-logo{display:block;height:40px;width:auto;max-width:70%;object-fit:contain}