/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/

/* =========================================================================
   Étienne Bridal — stiluri proprii
   Stau in tema copil, nu in "custom_css_global" al temei: acea optiune nu e
   randata de aceasta versiune Woodmart, iar pagina iesea complet nestilizata.
   ========================================================================= */

:root,
.wd-content-layout,
body {
  --wd-primary-color: #d5a69c;
  --wd-alternative-color: #c08d82;
  --wd-link-color-hover: #d5a69c;
}

/* ---------- hero cu video ---------- */
.etb-hero{
  position:relative; overflow:hidden;
  min-height:560px; display:flex; align-items:center;
  background-size:cover; background-position:center;
  margin:0 0 60px; padding:60px 7%;
}
.etb-hero .etb-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0;
}
.etb-hero::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.2) 55%,rgba(0,0,0,0) 100%);
}
.etb-hero-in{position:relative; z-index:2; max-width:470px; color:#fff}
.etb-hero-in .etb-supra{
  letter-spacing:.3em; text-transform:uppercase; font-size:12px; margin:0 0 14px; color:#fff;
}
.etb-hero-in h1,
.etb-hero-in h2{
  font-size:46px; line-height:1.12; font-weight:400; margin:0 0 16px; color:#fff;
}
.etb-hero-in .etb-sub{margin:0 0 30px; font-size:16px; color:#fff}

/* ---------- butonul ---------- */
.etb-btn{
  display:inline-block; padding:14px 36px; background:#d5a69c; color:#fff !important;
  text-transform:uppercase; letter-spacing:.1em; font-size:12px; font-weight:600;
  border:0; transition:background .25s; text-decoration:none;
}
.etb-btn:hover{background:#c08d82; color:#fff !important}

/* ---------- intro ---------- */
.etb-intro{max-width:800px; margin:0 auto 50px; text-align:center}
.etb-intro h2{font-weight:400; margin:0 0 18px}
.etb-intro p{color:#666; line-height:1.9; margin:0}

/* ---------- cele trei coloane ---------- */
.etb-trei{
  display:flex; gap:28px; flex-wrap:wrap; margin:0 0 60px; text-align:center;
}
.etb-trei .etb-col{
  flex:1 1 240px; padding:34px 20px; border:1px solid #f0e6e3; background:#fdfbfb;
}
.etb-trei h3{
  font-size:15px; text-transform:uppercase; letter-spacing:.1em;
  margin:0 0 12px; color:#d5a69c;
}
.etb-trei p{color:#666; margin:0; font-size:14px; line-height:1.6}

/* ---------- banerele ---------- */
.etb-doua{display:flex; gap:28px; flex-wrap:wrap; margin:0 0 60px}
.etb-doua-dr{flex:1 1 340px; display:flex; flex-direction:column; gap:28px}
.etb-banner{
  position:relative; display:flex; align-items:flex-end;
  background-size:cover; background-position:center;
  min-height:250px; text-decoration:none; overflow:hidden;
}
.etb-banner::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,0) 60%);
}
.etb-banner-mare{flex:1 1 400px; min-height:528px; align-items:center}
.etb-banner-in{position:relative; z-index:2; padding:34px; color:#fff}
.etb-banner-titlu{
  display:block; font-size:27px; line-height:1.2; margin:0 0 10px; color:#fff;
}
.etb-banner-mare .etb-banner-titlu{font-size:36px}
.etb-banner-sub{display:block; font-size:14px; margin:0 0 20px; color:#fff}

/* ---------- titlurile de sectiune ---------- */
.entry-content > h2{
  text-align:center; font-weight:400; font-size:28px; margin:56px 0 30px;
}

/* ---------- footer ---------- */
.etb-footer{display:flex; gap:40px; flex-wrap:wrap; padding:56px 0 32px}
.etb-f-col{flex:1 1 210px; font-size:14px; color:#666; line-height:1.7}
.etb-f-brand{flex:1 1 270px}
.etb-f-titlu{
  font-size:13px; text-transform:uppercase; letter-spacing:.12em;
  color:#000; margin:0 0 18px; font-weight:600;
}
.etb-footer ul{list-style:none !important; margin:0 !important; padding:0 !important}
.etb-footer li{margin:0 0 9px; line-height:1.5; list-style:none !important}
.etb-footer li::marker{content:""}
.etb-footer a{color:#666; text-decoration:none}
.etb-footer a:hover{color:#d5a69c}
.etb-f-contact span{color:#999; font-size:13px}
.etb-f-anpc{margin-top:20px; font-size:13px}
.etb-copy{
  border-top:1px solid #ececec; padding:24px 0; text-align:center;
  font-size:13px; color:#999;
}

/* ---------- mobil ---------- */
@media(max-width:1024px){
  .etb-banner-mare{min-height:360px}
}
@media(max-width:768px){
  .etb-hero{min-height:380px; padding:40px 22px}
  .etb-hero .etb-video{display:none}   /* pe mobil ramane imaginea, nu consumam trafic */
  .etb-hero-in h1, .etb-hero-in h2{font-size:30px}
  .etb-banner-mare{min-height:280px}
  .etb-banner-mare .etb-banner-titlu{font-size:26px}
  .etb-footer{gap:28px; padding:38px 0 22px}
}

/* ---------- headerul, colorat ca pe site-ul vechi ----------
   Logo-ul din header este cel ALB (verificat: luminozitate 255/255), deci fundalul
   trebuie sa fie inchis, altfel logo-ul e invizibil pe alb. Nuantele sunt cele din
   designul vechi: bara de sus mai inchisa, randul principal in taupe cald. */
.whb-top-bar,
.whb-top-bar .whb-column{ background-color:#454036 !important; color:#e6e2da }
.whb-top-bar a{ color:#e6e2da }
.whb-top-bar a:hover{ color:#d5a69c }

.whb-general-header,
.whb-main-header,
.whb-general-header-inner,
.whb-header .whb-main-header .whb-flex-row{ background-color:#8d8479 !important }

.whb-main-header .wd-nav > li > a,
.whb-main-header .wd-nav > li > a > .nav-link-text,
.whb-main-header .wd-tools-element > a{ color:#fff !important }
.whb-main-header .wd-nav > li > a:hover > .nav-link-text,
.whb-main-header .wd-nav > li.current-menu-item > a > .nav-link-text{ color:#f2ded9 !important }
.whb-main-header .wd-logo img{ max-height:56px; width:auto }

/* ---------- logo-ul din footer ---------- */
.etb-f-logo{ max-width:190px; height:auto; margin:0 0 18px; display:block }

/* ---------- corectie selectori header ----------
   Navigatia sta sub .whb-general-header-inner, nu sub .whb-main-header, deci regulile
   anterioare nu o prindeau si textul ramanea alb pe alb. Tintim direct .whb-header. */
.whb-header .wd-nav-main > li > a > .nav-link-text,
.whb-header .wd-nav-main > li > a{ color:#ffffff !important }
.whb-header .wd-nav-main > li > a:hover > .nav-link-text,
.whb-header .wd-nav-main > li.current-menu-item > a > .nav-link-text{ color:#f6e3de !important }
.whb-header .whb-general-header-inner,
.whb-header .whb-row.whb-not-sticky-row{ background-color:#8d8479 !important }
.whb-header .wd-tools-element > a,
.whb-header .wd-tools-icon{ color:#ffffff !important }

/* ---------- pozele de produs, netaiate ----------
   Tema pune object-fit:cover pe un container care nu e patrat, iar pozele de produs
   sunt 1280x1280. Rezultatul: pantoful iesea taiat sus si jos in grile.
   Facem containerul patrat si trecem pe "contain", ca sa se vada toata poza. */
.wd-product .product-image-link,
.wd-product .product-element-top,
.wd-product .hover-img{ aspect-ratio:1/1; background:#fff }
.wd-product .product-image-link img,
.wd-product .hover-img img,
.wd-product img.attachment-woocommerce_thumbnail{
  width:100%; height:100%; object-fit:contain !important; background:#fff;
}

/* ---------- banner de categorie ---------- */
.etb-cat-banner{
  position:relative; min-height:300px; display:flex; align-items:center;
  justify-content:center; background-size:cover; background-position:center;
  margin:0 0 40px;
}
.etb-cat-banner::after{content:""; position:absolute; inset:0; background:rgba(0,0,0,.28)}
.etb-cat-banner-in{position:relative; z-index:2; text-align:center; padding:20px}
.etb-cat-banner-in h1{
  color:#fff; font-size:38px; font-weight:400; margin:0;
  text-shadow:0 1px 16px rgba(0,0,0,.45); text-transform:uppercase; letter-spacing:.06em;
}
@media(max-width:768px){
  .etb-cat-banner{min-height:180px}
  .etb-cat-banner-in h1{font-size:24px}
}

/* ---------- descrierea categoriei, sub produse ----------
   Colapsare fara JavaScript: checkbox ascuns + max-height. Gradientul de jos arata ca
   textul continua, ca sa se inteleaga ca butonul face ceva. */
.etb-desc{
  position:relative; max-width:900px; margin:50px auto 10px; padding-top:34px;
  border-top:1px solid #ececec; color:#666; line-height:1.85; font-size:15px;
}
.etb-desc-text{position:relative; max-height:170px; overflow:hidden; transition:max-height .4s ease}
.etb-desc-text::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:90px;
  background:linear-gradient(to bottom,rgba(255,255,255,0),#fff); pointer-events:none;
  transition:opacity .3s;
}
.etb-desc-toggle:checked ~ .etb-desc-text{max-height:4000px}
.etb-desc-toggle:checked ~ .etb-desc-text::after{opacity:0}
.etb-desc-text h2{font-size:20px; font-weight:500; color:#000; margin:26px 0 12px}
.etb-desc-text h3{font-size:17px; font-weight:500; color:#000; margin:20px 0 10px}
.etb-desc-text p{margin:0 0 14px}
.etb-desc-text a{color:#d5a69c}
.etb-desc-btn{
  display:inline-block; margin-top:18px; cursor:pointer; font-size:12px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:#d5a69c;
  border-bottom:1px solid currentColor; padding-bottom:3px;
}
.etb-desc-btn:hover{color:#c08d82}
.etb-desc-btn .etb-desc-less{display:none}
.etb-desc-toggle:checked ~ .etb-desc-btn .etb-desc-more{display:none}
.etb-desc-toggle:checked ~ .etb-desc-btn .etb-desc-less{display:inline}

/* ---------- pozele de produs, clasele REALE ale temei ----------
   Tema foloseste .wd-product-img-link / .wd-product-thumb / .wd-product-img-hover,
   nu .product-image-link cum incercasem initial. Cu object-fit:cover taia pantoful
   sus si jos, pentru ca pozele sunt patrate (1280x1280) intr-un container dreptunghiular. */
.wd-product .wd-product-thumb,
.wd-product .wd-product-img-link,
.wd-product .wd-product-img-hover{ aspect-ratio:1/1 !important; background:#fff }
.wd-product .wd-product-thumb img,
.wd-product .wd-product-img-link img,
.wd-product .wd-product-img-hover img,
.wd-product img.wp-post-image{
  width:100% !important; height:100% !important;
  object-fit:contain !important; background:#fff;
}