/* ---------- TOPBAR ---------- */
.topbar{
  background:#efefef;
  font-size:.85rem;
  letter-spacing:.02em;
  padding:.35rem 0;
}

/* ---------- LOGO ---------- */
.brand-logo{ height:65px; }

/* ---------- BUSCA (pílula cinza, ícone à direita) ---------- */
.search-inline{ /* só desktop */
  /* nada aqui; apenas marca o container */
}
.search-pill{
  background:#ededed;
  border-radius:999px;
  padding:.25rem .5rem;
  border:1px solid #e5e5e5;
  width: clamp(260px, 30vw, 420px);
}
.search-pill .form-control{
  background:transparent;
  border:0;
  box-shadow:none;
  font-size:.95rem;
  text-transform:uppercase;
  letter-spacing:.02em;
}
.search-pill .input-group-text{
  background:transparent;
  border:0;
  color:#6b7280;
}

/* ---------- ÍCONES ---------- */
.header-actions .btn{ color:#7a7a7a; }
.header-actions .btn:hover{ color:#111; }
.header-actions .badge.rounded-pill{
  font-size:.7rem; padding:.15rem .35rem;
}

/* ---------- CATBAR (igual a imagem 2) ---------- */
.catbar{
  border-top:1px solid #111;    /* linha preta superior */
  background:#fff;
}
.catnav{
  display:flex; align-items:center;
  gap:3.25rem;                   /* espaçamento entre itens */
  padding:.6rem 0 .8rem;
  white-space:nowrap;
  overflow-x:auto; scrollbar-width:none;
}
.catnav::-webkit-scrollbar{ display:none; }

.catlink{
  color:#161616; text-decoration:none;
  font-weight:200; line-height:1;
  padding:.35rem 0;
  font-size: 15px;
}
.catlink:hover{ color:#000; }

.catlink.twoline{
  display:flex; flex-direction:column;
  line-height:1.05;
}

/* botão Liquida à direita */
.btn-liquida{
  background:#e30613; color:#fff !important;
  padding:.38rem .85rem;
  border-radius:.28rem;
  font-weight:700; text-decoration:none;
}
.btn-liquida:hover{ background:#c6000f; color:#fff !important; }

/* ---------- HERO (mantém) ---------- */
.hero{ position:relative; }
.hero .carousel-item{ height:64vh; min-height:440px; }
.hero .carousel-item>img{ object-fit:cover; width:100%; height:100%; filter:contrast(1.02) saturate(1.05); }
.hero .caption{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; }
.hero .caption .title{ font-size:clamp(2rem,4vw,4rem); font-weight:600; letter-spacing:.08em; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.35); }
.hero .caption .lead{ color:#fff; opacity:.95; }
.hero .carousel-control-prev,.hero .carousel-control-next{ width:auto; padding:.25rem; }
.hero .control-btn{ width:40px; height:40px; display:grid; place-items:center; border-radius:999px; background:rgba(255,255,255,.9); color:#000; box-shadow:0 2px 10px rgba(0,0,0,.15); }

/* ---------- RESPONSIVO ---------- */
@media (max-width:991.98px){
  .search-inline{ display:none; }  /* esconde a busca desktop */
}









/*  */
/* ===== Seções / Títulos ===== */
.kf-lines{ display:flex; align-items:center; gap:.5rem; }
.kf-lines i{ display:block; height:4px; border-radius:2px; }
.kf-lines i.solid{ width:48px; background:#000; }
.kf-lines i.outline{ width:24px; border:2px solid #000; background:transparent; }

/* ===== Product Card ===== */
.product-card .thumb{ overflow:hidden; border-radius:.5rem; background:#f7f7f7; }
.product-card .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.product-card .thumb:hover img{ transform:scale(1.04); }
.product-card .badge-pill{
  position:absolute; top:.5rem; left:.5rem; 
  font-size:.7rem; letter-spacing:.04em;
  background:#000; color:#fff; border-radius:999px; padding:.25rem .5rem;
}
.product-card .btn-wish{
  position:absolute; top:.5rem; right:.5rem;
  width:34px; height:34px; display:grid; place-items:center;
  border-radius:999px; background:#fff; color:#000; border:1px solid rgba(0,0,0,.15);
}
.product-card .btn-wish.active, .product-card .btn-wish:hover{ color:#e11d48; }
.product-card .name{
  font-size:.9rem; line-height:1.25rem; text-decoration:none; color:var(--kf-ink);
}

.product-card .name:hover{ text-decoration:underline; }
.product-card .price{ font-weight:600; }
.product-card .install{ line-height:1.2; }

/*  */

/* destaque */
/* ratios extras */
.ratio-4x3 { --bs-aspect-ratio: 75%; }
.ratio-16x9{ --bs-aspect-ratio: 56.25%; }

/* ===== carrossel base (serve p/ qualquer seção) ===== */
/* ===== carrossel base (serve p/ qualquer seção) ===== */
.kf-carousel{
  overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.kf-carousel::-webkit-scrollbar{ display:none; }

.kf-carousel .track{
  --gap: 1rem;
  display: grid;
  grid-auto-flow: column;
  /* O TAMANHO DE CADA COLUNA do carrossel é definido AQUI: */
  grid-auto-columns: minmax(240px, 75vw);  /* mobile: 1 item por vez */
  gap: var(--gap);
  scroll-snap-type: x mandatory;
  padding-bottom: .25rem;
}
@media (min-width:576px){
  .kf-carousel .track{ grid-auto-columns: minmax(260px, 50vw); } /* ~2 itens */
}
@media (min-width:768px){
  .kf-carousel .track{ grid-auto-columns: minmax(280px, 33.333%); } /* ~3 itens */
}
@media (min-width:1200px){
  .kf-carousel .track{ grid-auto-columns: minmax(300px, 25%); } /* ~4, se quiser */
}

/* cada item ocupa 100% da coluna gerada pela regra acima */
.kf-carousel .item{ scroll-snap-align: start; width: 100%; }
/* Foco inteligente para destaques */
.hl-card .hl-img{
  /* padrão: olhar um pouco para cima pra não cortar rosto */
  object-fit: cover;
  object-position: var(--pos, 50% 30%);
}

/* no mobile normalmente precisamos subir um pouco mais */
@media (max-width: 575.98px){
  .hl-card .hl-img{
    object-position: var(--pos-sm, var(--pos, 50% 40%));
  }
}

/* ===== highlight tile (estilo DLK) ===== */
.hl-card .ratio{ border-radius:.75rem; overflow:hidden; background:#e9ecef; }
.hl-card .hl-img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.hl-card a:hover .hl-img{ transform:scale(1.05); }
.hl-card .hl-grad{
  position:absolute; inset:0; border-radius:.75rem;
  background:linear-gradient(to top, rgba(0,0,0,.65) 0%, rgba(0,0,0,.40) 35%, rgba(0,0,0,0) 70%);
  pointer-events:none;
}
.hl-card .hl-caption{
  position:absolute; left:1rem; right:1rem; bottom:1rem; color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.35);
}
.hl-card .hl-title{ font-size:1rem; letter-spacing:.02em; }

.hl-card .hl-sub{ opacity:.9; }

/* destaque */

/* promo */
/* estados de preço */
.product-card .price-sale{ color:#e30613; font-weight:700; }
.product-card .price-old{ text-decoration:line-through; color:#6b7280; }

/* badge de desconto / liquida */
.product-card .badge-pill.sale{ background:#e30613; color:#fff; }
.product-card .badge-pill.clearance{ background:#111; color:#fff; } /* “LIQUIDA” quando sem % */

/* promo */


/* mansory */
/* ---------- Masonry (CSS Columns) ---------- */
/* Masonry */
.kf-masonry{ column-count:1; column-gap:1rem; }
@media (min-width:768px){  .kf-masonry{ column-count:2; } }
@media (min-width:1200px){ .kf-masonry{ column-count:3; } }
@media (min-width:1536px){ .kf-masonry{ column-count:4; } }

.msn-card{ break-inside: avoid; margin:0 0 1rem; display:block; }
.msn-link{ text-decoration:none; color:inherit; display:block; }

/* wrapper com proporção fixa (sem Bootstrap .ratio) */
.msn-media-wrap{
  position:relative; overflow:hidden; border-radius:.75rem;
  aspect-ratio: var(--msn-ar, 4 / 3);   /* 4/3, 3/4, 16/9, etc. */
  background:#e9ecef;
}
.msn-media{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:var(--msn-pos, 50% 30%);
  transition:transform .45s ease;
}
.msn-link:hover .msn-media{ transform:scale(1.03); }

/* overlay/caption */
.msn-grad{ position:absolute; inset:0; pointer-events:none; }
.grad-dark { background:linear-gradient(to top, rgba(0,0,0,.60) 0%, rgba(0,0,0,.35) 35%, rgba(0,0,0,0) 65%); }
.grad-light{ background:linear-gradient(to top, rgba(255,255,255,.75) 0%, rgba(255,255,255,.35) 35%, rgba(255,255,255,0) 65%); }

.msn-caption{ position:absolute; left:1rem; right:1rem; bottom:1rem; text-shadow:0 2px 10px rgba(0,0,0,.25); }
.msn-caption.text-light{ color:#fff; }
.msn-caption.text-dark{ color:#111; text-shadow:none; }
.msn-badge{ display:inline-block; font-size:.7rem; letter-spacing:.05em; padding:.2rem .5rem; border-radius:999px; background:#111; color:#fff; margin-bottom:.25rem; }
.msn-caption.text-dark .msn-badge{ background:#fff; color:#111; border:1px solid #e5e5e5; }
.msn-title{ font-weight:700; font-size:1rem; text-transform:uppercase; }
.msn-sub{ font-size:.9rem; opacity:.9; margin-bottom:.35rem; }

/* faixa larga */
.msn-card.span-all{ width:100%; }
@supports (column-span:all){ .msn-card.span-all{ column-span:all; } }



/* footer */
/* ===== Footer ===== */
.site-footer { border-top: 1px solid var(--kf-line, #e5e7eb); }
.site-footer .press-logo { height: 42px; filter: grayscale(1); opacity:.9; }
.site-footer .press-logo:hover { filter:none; opacity:1; }

.footer-social { height: 56px; }
.footer-social .hr-left,
.footer-social .hr-right{
  position:absolute; top: 50%; width: 40%; height:1px; background:#000; opacity:.3;
}
.footer-social .hr-left{ left:0; transform:translateY(-50%); }
.footer-social .hr-right{ right:0; transform:translateY(-50%); }
.footer-social .icons { position:relative; z-index:1; }
.footer-social .soc{
  width:42px; height:42px; display:grid; place-items:center;
  border-radius:999px; background:#111; color:#fff; text-decoration:none;
}
.footer-social .soc:hover{ background:#000; color:#fff; }

.nl-form .btn-nl{
  background:#d9ff3f; color:#111; font-weight:700; padding:.85rem 1rem; border-radius:.6rem;
  border:1px solid rgba(17,17,17,.1);
}
.nl-form .btn-nl:hover{ filter: brightness(.96); }

.footer-links li+li{ margin-top:.4rem; }
.footer-links a{ color:#111; text-decoration:none; }
.footer-links a:hover{ text-decoration:underline; }

.pay-logo{ height:32px; border:1px solid #e6e6e6; border-radius:.4rem; padding:.35rem .6rem; background:#fff; }
.seal{ height:48px; }

@media (max-width: 991.98px){
  .footer-social .hr-left, .footer-social .hr-right{ width: 30%; }
}

/* footer */




/* ===== PDP ===== */
.pdp .breadcrumb a{ color:inherit; text-decoration:none; }
.pdp .breadcrumb a:hover{ text-decoration:underline; }

/* Galeria */
.pdp-gallery-main{ position:relative; }
.pdp-gallery-main .pdp-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .25s ease;
}
.pdp-gallery-main .pdp-img.active{ opacity:1; }
.pdp-thumbs{ display:flex; gap:.5rem; overflow:auto; }
.pdp-thumbs .thumb{
  border:0; padding:0; background:transparent; flex:0 0 80px; border-radius:.5rem; overflow:hidden; position:relative;
  outline:1px solid transparent;
}
.pdp-thumbs .thumb img{ width:100%; height:80px; object-fit:cover; display:block; }
.pdp-thumbs .thumb.active{ outline:2px solid #111; }

/* Buybox */
.pdp-buybox .swatch{
  --sw:#ddd; width:28px; height:28px; border-radius:999px; border:1px solid rgba(0,0,0,.15); background:var(--sw);
}
.pdp-buybox .swatch.active{ outline:2px solid #111; }
.pdp-buybox .sizes{ display:flex; gap:.5rem; flex-wrap:wrap; }
.pdp-buybox .size{
  min-width:44px; padding:1px .5rem; border:1px solid #000; background:#fff; border-radius:.4rem;
}
.pdp-buybox .size.disabled{ opacity:.4; text-decoration:line-through; pointer-events:none; }
.pdp-buybox .size.active{ background:#000; color:#fff; }

.pdp-buybox .qty{ display:inline-flex; align-items:center; gap:.25rem; }
.pdp-buybox .qty .form-control{ width:64px; }

/* Frete */
.pdp-frete input{ max-width:220px; }

/* Sticky na direita em telas largas */
@media (min-width: 992px){
  .pdp-buybox{ position:sticky; top:84px; }
}
.ratio-3x4 { --bs-aspect-ratio: 133.333%; }  /* 4/3 * 100% */



/* ===== Tema/cores rápidas ===== */
:root{
  --accent: #D6FF35;          /* cor do botão principal (neon/limão) */
  --accent-hover: #c7f22c;
  --ink: #111;
  --muted: #6b7280;
}

/* Buybox mais flat */
.pdp-buybox{ --bs-border-color: transparent; }
.pdp .breadcrumb { margin-bottom:.25rem; }
.pdp .breadcrumb a{ color:inherit; text-decoration:none; }
.pdp .breadcrumb a:hover{ text-decoration:underline; }
.pdp-price .h4{ font-weight:700; }
.pdp-price .small{ color:var(--muted); }

/* Botão destaque (accent) */
.btn-accent{
  background: var(--accent);
  color: var(--ink);
  border: 1px solid rgba(0,0,0,.12);
  font-weight: 800;
  letter-spacing:.02em;
}
.btn-accent:hover{ background: var(--accent-hover); color: var(--ink); }
.btn-accent:disabled{ opacity:.6; cursor:not-allowed; }

/* Swatches/sizes — flat */
.pdp-buybox .swatch{
  --sw:#ddd; width:30px; height:30px; border-radius:999px;
  border:1px solid rgba(0,0,0,.15); background:var(--sw);
}
.pdp-buybox .swatch.active{ outline:2px solid var(--ink); }

.pdp-buybox .sizes{ display:flex; gap:.5rem; flex-wrap:wrap; }
.pdp-buybox .size{
  min-width:46px; padding:.45rem .55rem;
  border:1.5px solid var(--ink); background:#fff; border-radius:.45rem;
  font-weight:600;
}
.pdp-buybox .size.disabled{ opacity:.35; text-decoration:line-through; pointer-events:none; }
.pdp-buybox .size.active{ background:var(--ink); color:#fff; }

/* Quantidade */
.pdp-buybox .qty .form-control{ width:64px; }

/* Acordeão “DLK style” */
.kf-acc .accordion-item{
  border:1px solid #e5e7eb; border-radius:.75rem; overflow:hidden; margin-bottom:.75rem;
}
.kf-acc .accordion-button{
  text-transform:uppercase; font-weight:800; letter-spacing:.02em; color:var(--ink);
  background:#fff; padding:.9rem 1rem;
}
.kf-acc .accordion-button:not(.collapsed){
  background:#f8f9fa; box-shadow:none;
}
.kf-acc .accordion-body{ background:#fff; padding:1rem; }

/* Tipografia da descrição (visual da imagem 1) */
/* Descrição PDP */
.pdp-desc{ font-size:12px; line-height:1.55; }
.pdp-desc h3, .pdp-desc h4{ font-weight:700; margin:1rem 0 .5rem; }
.pdp-desc p{ margin-bottom:.65rem; }
.pdp-desc strong{ font-weight:800; }
.pdp-desc ul{ list-style:none; padding-left:0; margin:.5rem 0 0; }
.pdp-desc ul li{
  position:relative; padding-left:1.2rem; margin:.55rem 0; line-height:1.5;
}
.pdp-desc ul li::before{
  content:"–"; position:absolute; left:0; top:0; color:var(--ink); font-weight:700;
}

/* Galeria (garante altura e transição) */
.ratio-3x4{ --bs-aspect-ratio:133.333%; }
.pdp-gallery-main{ position:relative; overflow:hidden; }
.pdp-gallery-main .pdp-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .25s ease; display:block;
}
.pdp-gallery-main .pdp-img.active{ opacity:1; }
.pdp-thumbs .thumb{ outline:1px solid transparent; }
.pdp-thumbs .thumb.active{ outline:2px solid var(--ink); }


.info-prod{
  text-decoration: none;
  font-size:12px;
  font-weight: 500
  ;
}



/* filter *//* ===== Search / Category ===== */
.search-page .breadcrumb a{ color:inherit; text-decoration:none; }
.search-page .breadcrumb a:hover{ text-decoration:underline; }

/* Grid toggles */
.btn-group .btn.js-grid.active{ background:#111; color:#fff; }

/* Facets (sidebar) */
.facets{ position:sticky; top:1rem; }
.facet{ padding: .75rem 0; border-bottom:1px solid #eee; }
.facet:last-child{ border-bottom:0; }
.facet-title{ font-weight:800; text-transform:uppercase; letter-spacing:.02em; margin-bottom:.4rem; }

.facet-chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chip{ cursor:pointer; }
.chip input{ display:none; }
.chip span{
  display:inline-block; padding:.35rem .55rem; border-radius:.4rem;
  border:1.4px solid #111; background:#fff; font-weight:600; font-size:.9rem;
}
.chip input:checked + span{ background:#111; color:#fff; }

.facet-swatches{ display:flex; gap:.5rem; flex-wrap:wrap; }
.swatch{ cursor:pointer; width:28px; height:28px; position:relative; }
.swatch input{ display:none; }
.swatch span{
  display:block; width:100%; height:100%; border-radius:999px; background:var(--sw, #ddd);
  border:1px solid rgba(0,0,0,.15);
}
.swatch input:checked + span{ outline:2px solid #111; }

/* Product grid spacing reuso do card existente */
.prd-grid .product-card{ height:100%; }

/* Offcanvas body spacing for filters on mobile */
#offFilters .facets{ position:static; }

/* filter */

/* ====== Filtro (sidebar) ====== */
.flt { font-size:.95rem; }
.flt-title{
  font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  font-size:.85rem; margin-bottom:.5rem;
}
.flt-divider{ height:1px; background:#e5e7eb; margin:1rem 0; }
.flt-block{ padding:.25rem 0 1rem; }

/* pílulas de tamanho */
.size-pill{ position:relative; display:inline-block; }
.size-pill input{ position:absolute; inset:0; opacity:0; pointer-events:none; }
.size-pill .pill{
  display:inline-block; padding:.45rem .85rem; line-height:1;
  border:1.5px solid #111; border-radius:999px; background:#fff;
  font-weight:600; font-size:.9rem; user-select:none;
}
.size-pill input:checked + .pill{ background:#111; color:#fff; }

/* lista de preços / checks */
.flt-list{ list-style:none; margin:0; padding:0; }
.flt-list li{ margin:.35rem 0; }
.flt-check{
  position:relative; display:flex; align-items:center; gap:.6rem;
  cursor:pointer; user-select:none;
}
.flt-check input{ position:absolute; inset:0; opacity:0; pointer-events:none; }
.flt-check .box{
  width:18px; height:18px; border:1.5px solid #111; border-radius:4px;
  display:inline-block; background:#fff;
}
.flt-check input:checked ~ .box{ background:#111; }
.flt-check .label{ line-height:1.2; }
.flt-check input:checked ~ .label{ font-weight:600; }

.flt-actions .btn-link{ text-decoration:none; }



/* login */
/* ===== Login (estilo DLK) ===== */
.auth-input{
  background:#fff;
  border:1.5px solid #e5e7eb;
  box-shadow:none;
}
.auth-input:focus{
  border-color:#111;
  box-shadow:0 0 0 .15rem rgba(17,17,17,.05);
}
.btn-lime{
  background:#d6f34a; /* tom semelhante ao print */
  color:#111;
  border:0;
}
.btn-lime:hover{ background:#cbe83d; color:#111; }

.auth-eye{
  position:absolute; right:.5rem; top:50%; transform:translateY(-50%);
  color:#6b7280; padding:.25rem .5rem;
}
.auth-eye:hover{ color:#111; }



/* account */
/* ===== Account (Minha Conta) ===== */
:root{ --acc-banner:#ff7a24; } /* troque esta cor se quiser outro tom */

.acc-banner{
  background:var(--acc-banner); color:#fff;
  border-radius:.6rem; padding:1rem 1.25rem;
  display:flex; align-items:center; justify-content:space-between;
}

.acc-sidebar .card{ border:1px solid #e6e6e6; }

.acc-menu .list-group-item{
  display:flex; align-items:center; gap:.65rem;
  border:1px solid #e6e6e6; border-radius:.5rem;
  margin-bottom:.5rem; background:#fff;
}
.acc-menu .list-group-item i{
  width:28px; height:28px; display:grid; place-items:center;
  background:#f3f4f6; border-radius:.4rem;
}
.acc-menu .list-group-item.active{
  border-color:#111; box-shadow:0 0 0 1px #111 inset;
  font-weight: bold;color:black;
}

.acc-title{ font-weight:800; letter-spacing:.02em; text-transform:uppercase; }
.acc-form .form-control{ border-radius:.5rem; padding:.6rem .75rem; }

.acc-btn{ background:#111; color:#fff; border-radius:.6rem; padding:.7rem 1.25rem; }
.acc-btn:hover{ background:#000; color:#fff; }


/* account */


/* ===== LOGIN / CADASTRO ===== */
.auth-wrap .card{ border-radius: .9rem; }
.auth-eye{
  position:absolute; right:.75rem; top:50%; transform:translateY(-50%);
  color:#6c757d;
}
.auth-eye:hover{ color:#111; }

.btn-lime{ background:#D9F857; border-color:#D9F857; }
.btn-lime:hover{ background:#c9eb49; border-color:#c9eb49; }

.form-floating > .form-control,
.form-floating > .form-select{
  border-radius:.65rem;
}