/* ===== Base ===== */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body.tdc{
  font:14px/1.5 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  margin:0; color:#111; background:#fff;
  -webkit-text-size-adjust: 100%;
}

/* Lock scroll when mobile mega-menu is open */
html.mega-lock, body.mega-lock{overflow:hidden;}
a{color:#0b57d0; text-decoration:none;}
a:hover{text-decoration:underline;}
.container{max-width:1200px; margin:0 auto; padding:0 16px;}
.page-title{font-size:20px; margin:16px 0;}
.muted{color:#6b7280;}

/* ===== Header & Footer ===== */
.tdc-header{background:#fff; border-bottom:1px solid #eee; position:sticky; top:0; z-index:50;}
.tdc-footer{border-top:1px solid #eee; margin-top:24px; padding:16px 0; color:#6b7280;}

/* ===== Breadcrumbs (eMAG-like) ===== */
.breadcrumbs{margin:10px 0 14px;}
.breadcrumbs ol{
  list-style:none; /* elimină numerotarea implicită */
  padding:0;
  margin:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0;
}
.breadcrumbs li{display:flex; align-items:center; color:#6b7280; font-size:13px;}
.breadcrumbs li+li::before{
  content:"›";
  margin:0 8px;
  color:#9ca3af;
}
.breadcrumbs a{color:#0b57d0; font-weight:700;}
.breadcrumbs a:hover{text-decoration:underline;}
.breadcrumbs [aria-current="page"]{color:#111; font-weight:900;}

/* Header layout (desktop like eMAG): logo + Categorii + search + account */
.tdc-header .header-inner{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:nowrap; /* desktop: o singură linie */
  padding:10px 16px;
  min-width:0;
}
.tdc-header .logo{display:flex; align-items:center; color:#111;}
.tdc-header .logo img{display:block; height:50px; width:auto;}

/* User links */
.user-links{display:flex; align-items:center; gap:10px; margin-left:auto;}
.user-btn{
  display:flex; align-items:center; gap:8px;
  color:#0b57d0; text-decoration:none; font-weight:700;
  border-radius:10px; padding:8px 10px;
  transition:background .15s ease, transform .1s ease;
}
.user-btn:hover{text-decoration:none; background:#eef5ff;}
.user-btn:active{transform:translateY(1px);}
.user-icon{width:22px; height:22px; display:inline-block;}

@media (max-width: 900px){
  .user-btn{padding:12px;}
  .user-btn .label{display:none;}
  .user-icon{width:32px; height:32px;}
}

/* Mobile / tablet header (cerut):
   rând 1 = logo + iconițe cont
   rând 2 = buton Categorii full-width
   rând 3 = search full-width
   (folosim grid ca să nu stea „Categorii” și search pe același rând)
*/
@media (max-width: 980px){
  .tdc-header .header-inner{
    display:grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "logo user"
      "mega mega"
      "search search";
    gap:10px;
    padding:10px 12px;
    align-items:center;
  }
  .tdc-header .logo{grid-area:logo; margin:0;}
  .tdc-header .logo img{height:45px;}
  .user-links{grid-area:user; justify-self:end; margin:0; gap:6px;}

  .mega-nav{grid-area:mega; width:100%;}
  .mega-btn{width:100%; height:50px; justify-content:center; border-radius:14px; font-size:17px;}
  .mega-label{display:inline;}

  .nav-main{grid-area:search; width:100%; display:block;}
  form.search{width:100%;}
  form.search input[type=search]{height:48px; line-height:48px; border-radius:14px;}
  form.search .search-btn{height:48px; border-radius:14px; padding:0 18px;}

  /* Compact account icons */
  .user-btn{padding:10px; border-radius:14px;}
  .user-btn .label{display:none;}
  .user-icon{width:26px; height:26px;}
}
/* ===== Mega menu (eMAG style) ===== */
.nav-main{display:flex; align-items:stretch; gap:10px; flex:1 1 auto; min-width:0;}
.mega-nav{position:relative; flex:0 0 auto;}
/* hover-bridge (doar desktop, ca să nu „îngroașe” header-ul pe mobil) */
@media (min-width: 769px){
  .mega-nav{padding-bottom:0px;}
  .mega-nav::after{content:""; position:absolute; left:0; top:100%; width:100%; height:12px;}
}
.mega-btn{
  height:44px; display:inline-flex; align-items:center; gap:10px;
  padding:0 14px;
  border:1px solid #e5e7eb; border-radius:10px;
  background:#fff; color:#111; font-weight:800;
  cursor:pointer; user-select:none;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.mega-btn:hover{background:#f9fafb;}
.mega-ico{font-size:18px; line-height:1;}

.mega-backdrop{display:none;}
.mega-nav.open .mega-backdrop{
  display:block;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.28);
  backdrop-filter:saturate(160%) blur(2px);
  z-index:79;
}

.mega-panel{
  position:absolute;
  top:100%;
  margin-top:10px;
  left:0;
  width:min(1120px, calc(100vw - 32px));
  height:520px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  box-shadow:0 18px 50px rgba(0,0,0,.12);
  z-index:80;
  display:none;
  overflow:hidden;
}
.mega-nav.open .mega-panel{display:block;}
/* Desktop open/close is handled in JS (hover intent + delay). */

.mega-mobile-header{display:none;}

.mega-shell{display:flex; height:100%;}
.mega-left{
  width:280px;
  background:#f7f7f8;
  border-right:1px solid #eef0f3;
  overflow:auto;
}
.mega-top{list-style:none; padding:10px; margin:0;}
.mega-top-link{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  color:#111;
  font-weight:700;
  text-decoration:none;
}
.mega-top-link:hover{background:#fff; text-decoration:none;}
.mega-top-link.is-active{background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.04);}
.mega-top-caret{color:#9ca3af;}

.mega-right{
  flex:1;
  padding:14px 16px;
  overflow:auto;
}
.mega-pane{display:none;}
.mega-pane.is-active{display:block;}
.mega-pane-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:10px;}
.mega-pane-title{font-weight:900; color:#111; font-size:16px; text-decoration:none;}
.mega-pane-title:hover{color:#0b57d0; text-decoration:none;}
.mega-pane-all{color:#0b57d0; font-weight:700; white-space:nowrap;}

.mega-subgrid{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px;}
.mega-subcol{min-width:0;}
.mega-subhead{display:block; font-weight:900; color:#111; margin:10px 0 8px;}
.mega-subhead:hover{text-decoration:none; color:#0b57d0;}
.mega-sublinks{display:flex; flex-direction:column; gap:6px;}
.mega-sublinks a{color:#374151; font-size:13px;}
.mega-sublinks a:hover{color:#0b57d0; text-decoration:underline;}
.mega-empty{padding:14px; color:#6b7280;}

/* Mobile view: full screen drawer + accordion */
@media (max-width: 900px){
  .nav-main{flex-direction:column; gap:10px; width:100%; flex:1 1 100%; min-width:0;}
  /* Keep the Categories button compact; the search goes on the next row */
  .mega-btn{width:100%; justify-content:center;}
  .mega-panel{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    border-radius:0;
    box-shadow:none;
    border:none;
    display:none;
  }
  .mega-nav.open .mega-panel{display:block;}
  .mega-mobile-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:14px 16px;
    border-bottom:1px solid #eef0f3;
    position:sticky;
    top:0;
    background:#fff;
    z-index:1;
  }
  .mega-mobile-title{font-weight:900; font-size:16px;}
  .mega-close{
    border:1px solid #e5e7eb;
    background:#fff;
    border-radius:12px;
    height:40px;
    width:44px;
    font-size:18px;
    cursor:pointer;
  }
  .mega-shell{display:none;}
  .mega-mobile{display:block; padding:8px 0 18px;}
  .mega-acc{border-bottom:1px solid #eef0f3;}
  .mega-acc summary{
    list-style:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:14px 16px;
    font-weight:900;
    cursor:pointer;
  }
  .mega-acc summary::-webkit-details-marker{display:none;}
  .mega-acc-top{color:#111;}
  .mega-acc[open] summary{background:#f7fbff;}
  .mega-acc-body{padding:0 16px 14px;}
  .mega-acc-all{display:inline-block; margin:4px 0 10px; font-weight:800;}
  .mega-acc-group{padding:10px 0; border-top:1px dashed #eef0f3;}
  .mega-acc-sub{display:block; font-weight:900; color:#111; margin-bottom:6px;}
  .mega-acc-links{display:flex; flex-wrap:wrap; gap:8px;}
  .mega-acc-links a{display:inline-flex; padding:6px 10px; border-radius:999px; background:#f3f4f6; color:#111; font-size:13px;}
  .mega-acc-links a:hover{background:#eef5ff; color:#0b57d0; text-decoration:none;}
  .mega-mobile-footer{padding:14px 16px;}
  .mega-mobile-footer a{font-weight:900;}
}

@media (min-width: 901px){
  .mega-mobile{display:none;}
}

/* Header mobile: pune search pe rând separat */
@media (max-width:900px){
  .tdc-header .header-inner{gap:10px; flex-wrap:wrap;}
  .nav-main{flex:1 1 100%; min-width:0;}
  form.search{flex:1 1 100%;}
  .user-links{width:100%; justify-content:flex-end;}
}

/* ===== Search form & suggestions (header) — REVAMP DROP-IN ===== */
form.search{
  position:relative; display:flex; align-items:center; gap:8px; flex:1; min-width:0;
}

/* INPUT — anti-zoom iOS + icon + shimmer clar la focus */
form.search input[type="search"]{
  flex:1; min-width:0;
  height:44px; line-height:44px;
  padding:0 12px 0 40px; /* loc pentru iconul de căutare */
  border:1px solid #e5e7eb; border-radius:10px;
  background:#fff;
  font-size:16px !important; /* PREVINE zoom pe iOS */
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;

  /* icon lupă (SVG) + fundal pentru shimmer */
  background-image:
    url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='7' stroke='%2367738b' stroke-width='2'/%3E%3Cpath d='M20 20L16.65 16.65' stroke='%2367738b' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"),
    linear-gradient(90deg,#fff 0%, #f7fbff 50%, #fff 100%);
  background-repeat:no-repeat, no-repeat;
  background-size:20px 20px, 200% 100%;
  background-position:12px center, 0% 50%;
}

@keyframes searchShimmer {
  0% { background-position: 12px center, 0% 50%; }
  100% { background-position: 12px center, 200% 50%; }
}

form.search input[type="search"]:focus{
  border-color:#b8d3ff;
  background-color:#fbfdff;
  box-shadow:0 6px 18px rgba(11,87,208,.16), 0 0 0 4px rgba(11,87,208,.10);
  animation: searchShimmer 2.2s linear infinite;
}

/* halo vizibil când form are focus în interior */
form.search:focus-within{
  filter: drop-shadow(0 8px 22px rgba(11,87,208,.18));
}

/* Placeholder mai vizibil + pulse subtil */
form.search input[type="search"]::placeholder{
  color:#8a93a2; opacity:1; transition:opacity .2s ease;
}
@keyframes phPulse { 0%{opacity:.8} 50%{opacity:1} 100%{opacity:.8} }
form.search:focus-within input[type="search"]::placeholder{
  animation: phPulse 1.8s ease-in-out infinite;
}

/* Buton — înălțime aliniată cu input-ul + relief */
form.search .search-btn{
  height:44px; padding:0 14px;
  border:1px solid #0b57d0; background:#0b57d0; color:#fff;
  border-radius:10px; font-weight:700; cursor:pointer;
  box-shadow:0 6px 16px rgba(11,87,208,.22);
  transition:transform .06s ease, filter .2s ease, box-shadow .2s ease;
  white-space:nowrap;
}
form.search .search-btn:hover{ filter:brightness(.97); }
form.search .search-btn:active{ transform:translateY(1px); }

/* Sugestii — z-index mare ca să apară peste glow/shadow */
.sug{
  position:absolute; top:100%; left:0; right:0; background:#fff;
  border:1px solid #e5e7eb; border-top:none; border-radius:0 0 10px 10px;
  box-shadow:0 8px 20px rgba(0,0,0,.06); max-height:320px; overflow:auto;
  z-index:50;
}
.sug[hidden]{display:none;}
.sug-item{display:block; padding:10px 12px; border-top:1px solid #f3f4f6; color:#111;}
.sug-item:hover{background:#f9fafb; text-decoration:none;}

/* iOS safety net: păstrează 16px pe toate controalele form */
@supports (-webkit-touch-callout: none) {
  input, select, textarea, button { font-size:16px !important; }
}

/* ===== Product cards grid ===== */
.grid-products{display:grid; gap:16px; grid-template-columns: repeat(2,1fr);}
@media (min-width:640px){ .grid-products{ grid-template-columns: repeat(3,1fr);} }
@media (min-width:900px){ .grid-products{ grid-template-columns: repeat(4,1fr);} }
@media (min-width:1200px){ .grid-products{ grid-template-columns: repeat(5,1fr);} }

.card{
  background:#fff; border:1px solid #eee; border-radius:12px; overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.card .thumb{display:block; background:#f7f7f7; aspect-ratio:3/4; position:relative;}
.card .thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain;}
.card .card-body{padding:10px;}
.card .card-title{display:block; font-weight:600; color:#111;}
.one-line{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.card-price.centered{display:flex; justify-content:center; margin:8px 0;}
.price-pill{
  display:inline-block; padding:6px 10px; border-radius:999px;
  background:#f0f7ff; color:#0b57d0; font-weight:700;
}

.btn.cta{
  display:block; text-align:center; padding:10px 12px; border-radius:10px;
  background:#0b57d0; color:#fff; font-weight:600; margin-top:8px;
}
.btn.cta:hover{filter:brightness(0.95); text-decoration:none;}
.btn[disabled]{opacity:.6; cursor:not-allowed;}

.card-vendor{margin-top:6px; font-size:12px; color:#6b7280;}
.card-vendor strong{color:#374151; font-weight:600;}

/* Pagination (categorii) */
.pagination{display:flex; gap:6px; justify-content:center; align-items:center; flex-wrap:wrap;}
.pagination .pg{
  min-width:36px; height:36px; padding:0 10px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid #e5e7eb; border-radius:12px;
  background:#fff; color:#111; text-decoration:none;
  box-shadow:0 1px 2px rgba(0,0,0,.03);
}
.pagination .pg:hover{background:#f9fafb;}
.pagination .pg.current{background:#111; color:#fff; border-color:#111;}
.pagination .pg.disabled{opacity:.4; cursor:not-allowed;}
.pagination .pg.dots{border:0; box-shadow:none; background:transparent; min-width:auto; padding:0 4px;}

/* ===== Product page ===== */
.product-grid{display:grid; gap:24px; grid-template-columns: 1fr;}
@media (min-width:900px){ .product-grid{ grid-template-columns: 1fr 1.2fr; } }

.product-img{
  width:100%; max-width:520px; aspect-ratio:3/4; object-fit:contain;
  background:#f7f7f7; border:1px solid #eee; border-radius:12px;
}
.product-title{font-size:22px; margin:0 0 8px 0;}
.product-meta{margin-bottom:12px; color:#374151;}
.product-meta .meta-row{margin:4px 0;}

.product-desc{margin-top:16px;}
.product-desc p{margin:0 0 12px 0;}
.product-desc ul, .product-desc ol{padding-left:20px;}
.product-desc b, .product-desc strong{font-weight:600;}

/* ===== Buybar (50/50 pe desktop, FĂRĂ sticky) ===== */
.buybar{
  display:flex; align-items:center; gap:12px; padding:10px 0;
  border-top:1px solid #eee; 
  position:static; left:auto; right:auto; bottom:auto; top:auto; /* not sticky on desktop */
  background:#fff;
}
.buybar .buybar-price{
  flex:1 1 50%;
  display:flex; align-items:center; justify-content:flex-start; /* schimbă în center dacă vrei centrat */
}
.buybar .btn.cta{
  flex:1 1 50%;
  width:100%; max-width:none; margin-top:0;
}

/* ===== Mobile: STICKY jos, 50/50, preț mai mare ===== */
@media (max-width:768px){
  .buybar{
    position:fixed; left:0; right:0; bottom:0; top:auto;
    padding:10px 16px; border-top:1px solid #e5e7eb; box-shadow:0 -4px 16px rgba(0,0,0,.06);
    justify-content:space-between; background:#fff; z-index:5;
  }
  .buybar .buybar-price{flex:1 1 50%; justify-content:flex-start;}
  .buybar .price-pill{font-size:18px; padding:8px 12px;}
  .buybar .btn.cta{flex:1 1 50%; min-width:0; width:100%; margin-top:0;}
  .product-right .product-title{margin-bottom:8px;}
  body{padding-bottom:70px;} /* spațiu pentru buybar fix pe mobil */
}

/* ===== Pagination ===== */
.pagination{display:flex; justify-content:center; gap:8px; margin:16px 0;}
.pagination a, .pagination span{
  display:inline-block; padding:8px 12px; border:1px solid #eee; border-radius:8px; color:#111; background:#fff;
}
.pagination .active{background:#0b57d0; color:#fff; border-color:#0b57d0;}
.pagination a:hover{text-decoration:none; background:#f9fafb;}