/* ══ eFull Lomadee — Mega Marketplace Visual ══ */



/* ── Grid ── */

.lmd-grid { display: grid; gap: 16px; margin: 32px 0 48px; padding: 8px 0 16px; --dept-color: #FF6B00; align-items: stretch; }

.lmd-grid .lmd-card { height: 100%; }

.lmd-cols-2 { grid-template-columns: repeat(2, 1fr); }

.lmd-cols-3 { grid-template-columns: repeat(3, 1fr); }

.lmd-cols-4 { grid-template-columns: repeat(4, 1fr); }

.lmd-cols-5 { grid-template-columns: repeat(5, 1fr); }



/* ── Card Principal ── */

.lmd-card {

    display: flex;

    flex-direction: column;

    background: #fff;

    border: none;

    border-radius: 8px;

    overflow: hidden;

    text-decoration: none !important;

    color: inherit !important;

    position: relative;

    transition: box-shadow .2s, transform .15s;

}



.lmd-card:hover {

    box-shadow: 0 8px 25px rgba(0,0,0,.1);

    transform: translateY(-3px);

}



/* ── Badges ── */

.lmd-badges {

    position: absolute;

    top: 8px;

    left: 8px;

    display: flex;

    flex-direction: column;

    gap: 4px;

    z-index: 3;

}



.lmd-badge {

    display: inline-block;

    padding: 3px 8px;

    border-radius: 4px;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .3px;

    line-height: 1.3;

}



.lmd-badge-desconto {

    background: #E63946;

    color: #fff;

}



.lmd-badge-exclusivo {

    background: #7C3AED;

    color: #fff;

}



.lmd-badge-vale {

    background: #16A34A;

    color: #fff;

}



/* ── Imagem ── */

.lmd-card-img {

    width: 100%;

    /* Proporção retrato 4:5 — mais compacto que 3:4 pra ocupar menos tela no PC,

       mantendo formato de capa de livro. No mobile horizontal (ver search.php)

       o aspect vira 2:3. */

    aspect-ratio: 4 / 5;

    max-height: 260px; /* limita altura em telas grandes */

    background: #FAFAFA;

    padding: 8px;

    box-sizing: border-box;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    border-bottom: none;

}



.lmd-card-img img {

    max-width: 100%;

    max-height: 100%;

    object-fit: contain;

    transition: transform .3s;

}



.lmd-card:hover .lmd-card-img img {

    transform: scale(1.05);

}



.lmd-no-img {

    color: #ccc;

    font-size: 12px;

}



/* ── Info ── */

.lmd-card-info {

    padding: 12px;

    display: flex;

    flex-direction: column;

    flex: 1;

}



/* Origem/Loja */

.lmd-origin {

    font-size: 10px;

    font-weight: 600;

    color: #0086FF;

    text-transform: uppercase;

    letter-spacing: .5px;

    margin-bottom: 4px;

}



/* Titulo */

.lmd-card-title {

    font-size: 13px;

    font-weight: 500;

    color: #333;

    line-height: 1.4;

    margin: 0 0 6px;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

    min-height: 36px;

}



.lmd-card:hover .lmd-card-title {

    color: var(--dept-color);

}



/* Estrelas */

.lmd-stars {

    font-size: 14px;

    margin-bottom: 6px;

    line-height: 1;

}



.lmd-star-full { color: #F59E0B; }

.lmd-star-half { color: #F59E0B; opacity: .5; }

.lmd-star-empty { color: #D1D5DB; }



.lmd-stars-num {

    font-size: 11px;

    color: #6B7280;

    font-weight: 500;

    vertical-align: 1px;

}



/* ── Precos ── */

.lmd-prices {

    margin-bottom: 8px;

    flex: 1;

}



.lmd-price-old {

    font-size: 12px;

    color: #999;

    text-decoration: line-through;

    line-height: 1;

}



.lmd-price-line {

    display: flex;

    align-items: center;

    gap: 6px;

    flex-wrap: wrap;

}



.lmd-price {

    font-size: 20px !important;

    font-weight: 800 !important;

    color: #FF6B00 !important;

    line-height: 1.2;

}



.lmd-off-badge {

    display: inline-block;

    background: #16A34A;

    color: #fff;

    font-size: 11px;

    font-weight: 700;

    padding: 2px 8px;

    border-radius: 4px;

    letter-spacing: .3px;

}



.lmd-installment {

    font-size: 11px;

    color: #16A34A;

    margin-top: 2px;

}



.lmd-installment strong {

    font-weight: 600;

}



.lmd-economy {

    font-size: 10px;

    color: #E63946;

    font-weight: 600;

    margin-top: 2px;

    background: #FEF2F2;

    display: inline-block;

    padding: 1px 6px;

    border-radius: 3px;

}



/* Frete */

.lmd-frete {

    font-size: 10px;

    font-weight: 700;

    color: #16A34A;

    background: #F0FDF4;

    padding: 4px 8px;

    border-radius: 4px;

    margin-bottom: 8px;

    text-align: center;

    letter-spacing: .3px;

}



/* ── Timer + Botao integrado ── */

.lmd-timer-bar {

    display: flex;

    align-items: stretch;

    overflow: hidden;

    margin-top: auto;

    border-radius: 0 0 8px 8px;

    min-height: 52px;

    width: 100%;

}



.lmd-timer-bar .lmd-timer {

    flex: 2;

    background: #EF4444;

    padding: 10px 14px;

    text-align: center;

    color: #fff;

    font-weight: 700;

    animation: lmd-timer-pulse 1.5s infinite;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    border-radius: 0;

    margin: 0;

}



@keyframes lmd-timer-pulse { 0%,100% { opacity: 1; } 50% { opacity: .85; } }



.lmd-timer-text { font-size: 11px; line-height: 1.2; text-align: left; }

.lmd-timer-text strong { font-size: 13px; font-weight: 800; letter-spacing: .5px; }

.lmd-timer-clock { font-family: 'Courier New', monospace; font-size: 17px; font-weight: 900; letter-spacing: 1px; white-space: nowrap; }



.lmd-btn-arrow {

    background: #FF6B00;

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 12px 22px;

    font-size: 15px;

    font-weight: 800;

    flex-shrink: 0;

    border-left: 3px solid rgba(255,255,255,.3);

    min-width: 100px;

}



.lmd-card:hover .lmd-btn-arrow { background: #E55A00; }



/* ── Botao "Ver Oferta" (quando desconto < 10%) ── */

.lmd-btn {

    display: block;

    text-align: center;

    background: var(--dept-color, #FF9900);

    color: #fff !important;

    padding: 14px 16px;

    border-radius: 0 0 8px 8px;

    font-size: 14px;

    font-weight: 800;

    text-decoration: none;

    transition: .2s;

    margin-top: auto;

    width: 100%;

    letter-spacing: .3px;

    text-transform: uppercase;

}



.lmd-card:hover .lmd-btn {

    filter: brightness(.85);

}



/* ── Flash Sale ── */

.lmd-flash {

    background: linear-gradient(135deg, #FFF7ED, #FEF3C7);

    border: 2px solid #FF6B00;

    border-radius: 12px;

    padding: 20px;

    margin: 20px 0;

    position: relative;

}



.lmd-flash-badge {

    background: #E63946;

    color: #fff;

    font-size: 13px;

    font-weight: 800;

    padding: 6px 16px;

    border-radius: 6px;

    display: inline-block;

    margin-bottom: 12px;

    animation: lmd-pulse 1.5s infinite;

    letter-spacing: 1px;

}



@keyframes lmd-pulse { 0%,100% { opacity:1; } 50% { opacity:.7; } }



.lmd-flash .lmd-card-large {

    max-width: 100%;

    flex-direction: row;

}



.lmd-flash .lmd-card-large .lmd-card-img {

    width: 250px;

    flex-shrink: 0;

    aspect-ratio: auto;

}



.lmd-countdown {

    font-size: 28px;

    font-weight: 800;

    color: #E63946;

    text-align: center;

    margin-top: 12px;

    font-variant-numeric: tabular-nums;

}



/* ── Categorias ── */

.lmd-cats {

    display: flex;

    gap: 8px;

    flex-wrap: wrap;

    margin: 20px 0;

    justify-content: center;

}



.lmd-cat-item {

    display: flex;

    align-items: center;

    gap: 6px;

    padding: 10px 18px;

    background: #fff;

    border: 1px solid #e8e8e8;

    border-radius: 24px;

    text-decoration: none;

    color: #333;

    font-size: 13px;

    font-weight: 500;

    transition: .2s;

}



.lmd-cat-item:hover {

    background: var(--dept-color, #FF6B00);

    color: #fff;

    border-color: var(--dept-color, #FF6B00);

    box-shadow: 0 4px 12px rgba(0,0,0,.15);

}



.lmd-cat-count {

    font-size: 10px;

    background: rgba(0,0,0,.06);

    padding: 2px 6px;

    border-radius: 10px;

    font-weight: 600;

}



.lmd-cat-item:hover .lmd-cat-count {

    background: rgba(255,255,255,.25);

}



/* ── Departamentos com icones ── */

.mbr-dept {

    background: #fff;

    border-bottom: 1px solid #eee;

    box-shadow: 0 1px 4px rgba(0,0,0,.04);

}

.lmd-dept-wrap {

    position: relative;

    padding: 0 36px;

}

.lmd-dept-bar {

    display: flex;

    gap: 0;

    padding: 10px 0;

    overflow-x: hidden;

    scroll-behavior: smooth;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;

}

.lmd-dept-bar::-webkit-scrollbar { display: none; }

.lmd-dept-bar.scrollable { overflow-x: auto; }



.lmd-dept-arrow {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 30px;

    height: 30px;

    border-radius: 50%;

    background: #fff;

    border: 1px solid #e0e0e0;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    z-index: 2;

    box-shadow: 0 2px 6px rgba(0,0,0,.08);

    transition: all .2s;

    color: #666;

    font-size: 14px;

    padding: 0;

}

.lmd-dept-arrow:hover {

    background: #FF6B00;

    color: #fff;

    border-color: #FF6B00;

    box-shadow: 0 3px 10px rgba(255,107,0,.25);

}

.lmd-dept-arrow.left { left: 0; }

.lmd-dept-arrow.right { right: 0; }

.lmd-dept-arrow.hidden { opacity: 0; pointer-events: none; }



.lmd-dept-item {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 5px;

    padding: 8px 0;

    width: calc(100% / 7);

    min-width: calc(100% / 7);

    border-radius: 10px;

    text-decoration: none !important;

    color: #555;

    font-size: 11px;

    font-weight: 600;

    text-align: center;

    transition: all .2s;

    background: transparent;

    flex-shrink: 0;

}



.lmd-dept-item:hover {

    background: color-mix(in srgb, var(--dept-clr) 8%, transparent);

    color: var(--dept-clr);

}



.lmd-dept-icon {

    width: 48px;

    height: 48px;

    border-radius: 50%;

    background: color-mix(in srgb, var(--dept-clr) 10%, white);

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all .2s;

    flex-shrink: 0;

}



.lmd-dept-icon svg {

    width: 22px;

    height: 22px;

    stroke: var(--dept-clr);

}



.lmd-dept-item:hover .lmd-dept-icon {

    background: var(--dept-clr);

    box-shadow: 0 4px 14px color-mix(in srgb, var(--dept-clr) 35%, transparent);

}



.lmd-dept-item:hover .lmd-dept-icon svg {

    stroke: #fff;

}



.lmd-dept-name {

    white-space: nowrap;

    letter-spacing: .02em;

}



@media (max-width: 768px) {

    .lmd-dept-item { width: calc(100% / 4); min-width: calc(100% / 4); }

}



/* ── Responsivo ── */

@media (max-width: 1024px) {

    .lmd-cols-5 { grid-template-columns: repeat(4, 1fr); }

}



/* ─────────────────────────────────────────────────────────────────────

   MOBILE — 1 produto por linha VERTICAL (igual desktop mas coluna única)

───────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {

    .lmd-cols-5, .lmd-cols-4, .lmd-cols-3, .lmd-cols-2 { grid-template-columns: 1fr; }

    .lmd-grid { gap: 14px; margin: 24px 0 36px; padding: 6px 0 14px; }

    .lmd-card-info { padding: 12px; }

    .lmd-card-title { font-size: 14px; min-height: 0; -webkit-line-clamp: 2; }

    .lmd-price { font-size: 20px; }

    .lmd-flash .lmd-card-large { flex-direction: column; }

    .lmd-flash .lmd-card-large .lmd-card-img { width: 100%; }

}



/* ─── Cupom de desconto (selo chamativo) ─── */

.lmd-cupom {

  display: flex; align-items: center; gap: 8px;

  margin: 8px 0 0; padding: 8px 10px;

  background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%);

  border: 1px dashed #FB923C; border-radius: 8px;

  cursor: pointer; position: relative;

  transition: transform .1s;

}

.lmd-cupom:hover { transform: translateY(-1px); background: linear-gradient(135deg, #FED7AA 0%, #FDBA74 100%); }

.lmd-cupom-tag {

  background: #FB923C; color: #fff;

  font-size: 9px; font-weight: 800; letter-spacing: .5px;

  padding: 3px 7px; border-radius: 4px; flex-shrink: 0;

}

.lmd-cupom-info { flex: 1; min-width: 0; line-height: 1.2; }

.lmd-cupom-codigo {

  display: block; font-size: 14px; font-weight: 800; color: #9A3412;

  font-family: 'Courier New', monospace; letter-spacing: 1px;

}

.lmd-cupom-info small { display: block; font-size: 10px; color: #9A3412; margin-top: 2px; }

.lmd-cupom-copy { font-size: 14px; color: #9A3412; flex-shrink: 0; }



/* Info extra (accordion) */

.lmd-info-extra {

  margin: 6px 0 0;

  border-top: 1px dashed #e5e7eb;

  padding-top: 6px;

}

.lmd-info-extra summary {

  cursor: pointer; font-size: 11px; font-weight: 600; color: #475569;

  list-style: none;

}

.lmd-info-extra summary::-webkit-details-marker { display: none; }

.lmd-info-extra[open] summary { color: #FF6B00; }

.lmd-info-extra ul { margin: 6px 0 0; padding-left: 18px; }

.lmd-info-extra li { font-size: 11px; color: #475569; margin-bottom: 3px; line-height: 1.4; }



/* ─── Linha de entrega (info dos portais) ─── */

.lmd-entrega {

  margin: 8px 0 0;

  padding: 6px 10px;

  background: #f0fdf4;

  border: 1px solid #bbf7d0;

  border-radius: 6px;

  font-size: 12px;

  color: #166534;

  line-height: 1.4;

}

.lmd-entrega strong { color: #14532D; font-weight: 700; }

@media (max-width: 768px) {

  .lmd-entrega { font-size: 11px; padding: 5px 8px; }

}



/* ─── Botão "Assistir" vídeo (quando produto tem _video_url) ─── */

.lmd-video-btn {

  position:absolute; bottom:8px; right:8px; z-index:5;

  display:inline-flex; align-items:center; gap:5px;

  background:rgba(0,0,0,.78); color:#fff !important;

  border:0; padding:5px 10px; border-radius:20px;

  font-size:11px; font-weight:700;

  cursor:pointer; font-family:inherit;

  backdrop-filter:blur(4px);

  transition:background .15s, transform .15s;

}

.lmd-video-btn:hover { background:#FF6B00; transform:scale(1.05); }

.lmd-video-btn svg { flex-shrink:0; }



/* Modal de vídeo */

.mbr-video-box {

  background:#000; border-radius:12px; padding:12px;

  max-width:880px; width:100%; position:relative;

  box-shadow:0 20px 60px rgba(0,0,0,.5);

}

.mbr-video-box .mbr-share-close { background:rgba(255,255,255,.15) !important; color:#fff !important; }

.mbr-video-title { margin:0 40px 10px 4px; color:#fff; font-size:15px; font-weight:600; }

.mbr-video-frame { position:relative; padding-top:56.25%; background:#000; border-radius:8px; overflow:hidden; }

.mbr-video-frame iframe, .mbr-video-frame video {

  position:absolute; top:0; left:0; width:100%; height:100%; border:0;

}



/* ─── Formato do livro (Capa Comum, eBook Kindle, Audiolivro, etc.) ─── */

.lmd-formato {

  display: inline-block;

  font-size: 12px;

  font-weight: 600;

  color: #565959;

  margin: 4px 0 6px;

  padding: 2px 0;

}



/* ─── Botão "Indicar pra amigo" no card ─── */

.lmd-card-wrap {

    position: relative;

    /* Garante altura igual entre cards do mesmo grid (alinha botão CTA na base) */

    display: flex;

    flex-direction: column;

    height: 100%;

}

.lmd-card-wrap > .lmd-card { flex: 1; }

.lmd-share-btn {

  position:absolute; top:8px; right:8px; z-index:5;

  width:34px; height:34px; border-radius:50%;

  background:rgba(255,255,255,.95); color:#25D366;

  border:1px solid rgba(0,0,0,.08);

  display:inline-flex; align-items:center; justify-content:center;

  cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.12);

  transition:transform .15s, box-shadow .2s, background .15s;

}

.lmd-share-btn:hover { transform:scale(1.1); background:#25D366; color:#fff; box-shadow:0 4px 12px rgba(37,211,102,.45); }



/* ─── Modal de compartilhamento ─── */

.mbr-share-overlay {

  display:none; position:fixed; inset:0; z-index:99999;

  background:rgba(15,23,42,.72); backdrop-filter:blur(4px);

  align-items:center; justify-content:center; padding:20px;

}

.mbr-share-overlay.open { display:flex; }

.mbr-share-box {

  background:#fff; border-radius:14px; padding:26px 22px;

  max-width:440px; width:100%; position:relative;

  box-shadow:0 20px 60px rgba(0,0,0,.3);

  animation:mbrShareIn .25s ease-out;

}

@keyframes mbrShareIn { from { transform:scale(.92); opacity:0; } to { transform:scale(1); opacity:1; } }

.mbr-share-box h3 { margin:0 0 8px; font-size:20px; font-weight:800; color:#0F172A; }

.mbr-share-product { margin:0 0 18px; font-size:13px; color:#64748b; line-height:1.4; }

button.mbr-share-close {

  all:unset;

  position:absolute; top:10px; right:14px;

  width:32px; height:32px; border-radius:50%;

  background:#f1f5f9 !important; border:1px solid #e2e8f0 !important;

  font-size:20px !important; color:#64748b !important;

  cursor:pointer; line-height:1;

  display:flex; align-items:center; justify-content:center;

  font-family:inherit; font-weight:400;

}

button.mbr-share-close:hover { background:#fee2e2 !important; color:#DC2626 !important; }

.mbr-share-options {

  display:grid; grid-template-columns:repeat(5,1fr);

  gap:8px; margin-bottom:14px;

}

@media (max-width:500px) {

  .mbr-share-options { grid-template-columns:repeat(3,1fr); }

}



/* Reset pra button e a se comportarem iguais */

button.mbr-share-opt, a.mbr-share-opt {

  all:unset;

  box-sizing:border-box;

  display:flex !important; flex-direction:column; align-items:center; justify-content:center; gap:6px;

  padding:14px 6px !important; border-radius:10px !important;

  background:#f8fafc !important; border:1px solid #e2e8f0 !important;

  color:#0F172A !important; font-size:12px; font-weight:600;

  cursor:pointer !important; transition:transform .12s, box-shadow .2s;

  text-align:center; font-family:inherit; width:100%;

  text-transform:none; letter-spacing:normal; line-height:1.2;

  min-height:76px;

}

button.mbr-share-opt:hover, a.mbr-share-opt:hover {

  transform:translateY(-2px); box-shadow:0 6px 14px rgba(0,0,0,.08);

  text-decoration:none !important;

}

a.mbr-share-opt.wa, button.mbr-share-opt.wa       { background:#f0fdf4 !important; border-color:#86efac !important; color:#16a34a !important; }

a.mbr-share-opt.email, button.mbr-share-opt.email { background:#fff7ed !important; border-color:#fed7aa !important; color:#b45309 !important; }

a.mbr-share-opt.fb, button.mbr-share-opt.fb       { background:#eff6ff !important; border-color:#bfdbfe !important; color:#1D4ED8 !important; }

a.mbr-share-opt.tg, button.mbr-share-opt.tg       { background:#f0f9ff !important; border-color:#bae6fd !important; color:#0369A1 !important; }

a.mbr-share-opt.copy, button.mbr-share-opt.copy   { background:#f1f5f9 !important; border-color:#cbd5e1 !important; color:#475569 !important; }

.mbr-share-opt svg { display:block; }

.mbr-share-ref {

  margin:12px 0 0; padding:10px 12px; background:#FFF7ED;

  border:1px solid #FED7AA; border-radius:8px;

  font-size:12px; color:#9A3412; line-height:1.5;

}

.mbr-share-ref a { color:#C2410C; font-weight:700; }