/* Portas do configurador de personalizados (lp.floty.com/maio-personalizado/, /sunga-personalizada/, /touca-personalizada/) — 28/10/2026.
   Gerado por ~/floty-lps/lps-produto/personalizados-portas/gerar_portas.py. Vem depois do /style.css e do /compra.css. */
[hidden] { display: none !important; }

/* ---------- topo: o desenho do configurador num «palco» claro, com a raia por baixo ---------- */
.pp-hero .pp-amarelo, .pp-amarelo { background: var(--cp-amarelo); color: #1C1C1C; min-height: 52px; font-weight: 800; }
.pp-hero .pp-amarelo:hover, .pp-amarelo:hover { background: #FFC93F; color: #1C1C1C; }
.pp-palco .media { display: block; position: relative; overflow: hidden; background: #EEF1F4; border-radius: 18px; }
.pp-palco .media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.pp-palco .media::after { content: "Abrir no configurador →"; position: absolute; right: 14px; bottom: 14px; padding: .55rem .85rem; border-radius: 999px;
  background: rgba(7, 42, 61, .88); color: #fff; font: 800 .82rem/1 var(--f-ui); letter-spacing: .02em; }
.pp-palco .media:hover img { transform: scale(1.03); }
.pp-palco .media::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; z-index: 1;
  background: repeating-linear-gradient(90deg, var(--cp-amarelo) 0 22px, #fff 22px 30px, var(--cp-azul) 30px 52px, #fff 52px 60px); }
@media (prefers-reduced-motion: reduce) { .pp-palco .media img { transition: none; } }

/* ---------- modelos ---------- */
.pp-mods { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 1.2rem; }
.pp-mod { display: grid; grid-template-rows: auto 1fr; background: #fff; border: 1px solid var(--cp-linha); border-radius: 18px; overflow: hidden; min-width: 0;
  transition: box-shadow .2s ease, border-color .2s ease; }
.pp-mod:hover { border-color: var(--cp-azul); box-shadow: 0 18px 40px -28px rgba(7, 42, 61, .55); }
.pp-mod-foto { display: block; background: #EEF1F4; }
.pp-mod-foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.pp-mod-txt { display: grid; gap: .6rem; align-content: start; padding: 1.1rem 1.2rem 1.25rem; }
.pp-mod-txt h3 { margin: 0; font: 700 1.35rem/1.15 var(--f-display); color: var(--cp-abismo); }
.pp-mod-txt p { margin: 0; color: #2A3C47; }
.pp-mod dl { margin: .2rem 0 .3rem; display: grid; gap: .35rem; }
.pp-mod dl div { display: grid; grid-template-columns: 6.2rem minmax(0, 1fr); gap: .6rem; padding-top: .35rem; border-top: 1px dashed var(--cp-linha); }
.pp-mod dt { font: 800 .74rem/1.5 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pp-mod dd { margin: 0; color: var(--cp-abismo); font-weight: 600; }
.pp-ir { min-height: 48px; justify-content: center; margin-top: .3rem; align-self: end; }
.pp-mod .btn-primary { background: var(--cp-azul); color: #fff; }
.pp-mod .btn-primary:hover { background: var(--cp-azul-2); color: #fff; }
.pp-via { justify-self: start; font: 800 .72rem/1 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; padding: .4rem .6rem; border-radius: 999px;
  background: var(--cp-amarelo-claro); color: #5A4300; }
.pp-mods--touca { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pp-mods--touca .pp-mat:first-child { grid-column: 1 / -1; grid-template-rows: none; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; }
.pp-mat--sem-foto { grid-template-rows: 1fr; border-top: 6px solid var(--cp-azul); }
.pp-mat--sem-foto .pp-mod-txt { height: 100%; grid-template-rows: auto auto 1fr auto; }
.pp-fonte { margin: .9rem 0 0; font-size: .88rem; color: var(--muted); }
.pp-fonte a { color: var(--cp-azul); font-weight: 700; }

/* ---------- como funciona ---------- */
.pp-passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; counter-reset: none; }
.pp-passos li { position: relative; background: #fff; border-radius: 16px; padding: 1.2rem 1.2rem 1.3rem; border: 1px solid var(--cp-linha); min-width: 0; }
.pp-passos > li > b { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--cp-amarelo); color: #1C1C1C; font: 800 1.15rem/1 var(--f-display); }
.pp-passos h3 { margin: .8rem 0 .35rem; font: 700 1.18rem/1.2 var(--f-display); color: var(--cp-abismo); }
.pp-passos p { margin: 0; color: #2A3C47; font-size: .97rem; }
.pp-cores { margin-top: 1.6rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(1rem, 3vw, 2.4rem); align-items: center;
  background: #fff; border-radius: 18px; padding: clamp(1.1rem, 2.5vw, 1.8rem); border: 1px solid var(--cp-linha); }
.pp-cores h3 { margin: 0 0 .4rem; font: 700 1.3rem/1.2 var(--f-display); color: var(--cp-abismo); }
.pp-cores p { margin: 0 0 .4rem; color: #2A3C47; }
.pp-cartela { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .8rem .6rem; }
.pp-cartela li { display: grid; justify-items: center; gap: .35rem; text-align: center; min-width: 0; }
.pp-cartela i { display: block; width: 100%; max-width: 64px; aspect-ratio: 1; border-radius: 14px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(7, 42, 61, .18); }
.pp-cartela span { font: 700 .8rem/1.2 var(--f-ui); color: var(--cp-abismo); }
.pp-centro { justify-content: center; margin-top: 1.6rem; display: flex; }

/* ---------- tecido, tamanhos ---------- */
.pp-tams { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .6rem; }
.pp-tams div { background: #fff; border: 1px solid var(--cp-linha); border-top: 5px solid var(--cp-azul); border-radius: 12px; padding: .6rem .7rem .7rem; text-align: center; min-width: 0; }
.pp-tams div:nth-child(n+7) { border-top-color: var(--cp-amarelo); }
.pp-tams dt { font: 800 1.35rem/1.1 var(--f-display); color: var(--cp-abismo); }
.pp-tams dd { margin: .2rem 0 0; font-size: .88rem; color: #2A3C47; }
.pp-cuidados { margin-top: 1.4rem; }

/* ---------- touca: cor por turma + ponte para a touca lisa ---------- */
.pp-duas { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(1.4rem, 4vw, 3rem); align-items: center; }
.pp-duas h2 { margin: .7rem 0 .8rem; }
.pp-ponte { background: var(--cp-fundo); border-radius: 18px; padding: clamp(1.1rem, 2.5vw, 1.8rem); border-left: 6px solid var(--cp-amarelo); display: grid; gap: .6rem; justify-items: start; }
.pp-ponte h3 { margin: 0; font: 700 1.35rem/1.2 var(--f-display); color: var(--cp-abismo); }
.pp-ponte p { margin: 0; color: #2A3C47; }
.pp-ponte .btn { min-height: 48px; }

/* ---------- dados técnicos ---------- */
.pp-dados { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.pp-dados li { background: #fff; border-radius: 16px; padding: 1.1rem 1.2rem; border: 1px solid var(--cp-linha); display: grid; gap: .35rem; align-content: start; }
.pp-dados b { font: 800 1.55rem/1.1 var(--f-display); color: var(--cp-azul); }
.pp-dados p { margin: 0; color: #2A3C47; }
.pp-dados small { color: var(--muted); font-size: .8rem; }
.pp-links { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-top: 1.4rem; }
.pp-links a { font-weight: 800; color: var(--cp-azul); min-height: 44px; display: inline-flex; align-items: center; }

@media (max-width: 1000px) {
  .pp-passos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-mods--touca { grid-template-columns: minmax(0, 1fr); }
  .pp-mods--touca .pp-mat:first-child { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .pp-cores, .pp-duas { grid-template-columns: minmax(0, 1fr); }
  .pp-dados { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 580px) {
  .pp-passos, .pp-dados { grid-template-columns: minmax(0, 1fr); }
  .pp-cartela { gap: .6rem .4rem; }
  .pp-cartela span { font-size: .72rem; }
  .pp-palco .media::after { font-size: .74rem; right: 10px; bottom: 16px; }
  .pp-hero .actions .btn { flex: 1 1 100%; justify-content: center; }
  .pp-ponte .btn { width: 100%; justify-content: center; }
}

/* ---------- cartões da loja (motor compra.css): preço e botão nos mínimos medidos ---------- */
.cp-preco-1 b { font-size: clamp(1.65rem, 1.45rem + .55vw, 1.8rem); }
.cp-card .cp-acoes .btn { min-height: 48px; }
.pp-hero .actions .btn-whatsapp { min-height: 48px; }
.pp-regra { display: block; margin-top: .6rem; padding: .55rem .7rem; border-radius: 10px; background: var(--cp-amarelo-claro); color: #3D2E00; font-size: .95rem; }
.pp-regra b { color: #1C1C1C; }