/* Tema base Detodito Store (WooCommerce) */

:root{
  /*--color-primary: #e91e63;*/
  --pColor: #893f90;
  --sColor: #5b61a9;
  --contrast: #fdc54f;
  --color-light: #f7d3d3;
  --color-dark: #2c2c2c;
  --color-white: #ffffff;
  --main-bg: #f9f9f9;
  --main-text: #333;
  --vMaxWidth: 1600px;
  --font: 'Segoe UI', sans-serif;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: var(--font);
  background: var(--main-bg);
  color: var(--main-text);
  overflow-x:hidden;
}
img, svg, video, iframe{max-width:100%; height:auto}

/* Layout wrapper similar to original project */
.clFullPage{width:100%; display:flex; flex-direction:column; align-items:center}
.clFullBody{width:100%; display:flex; flex-direction:column; align-items:center}
.clBodyBox{width:100%; max-width:var(--vMaxWidth); padding: 0 1rem}

/* Header (simplified, compatible with previous HTML) */
.clFullHeader{width:100%; border-bottom:1px solid rgba(0,0,0,.06)}


.clHeaderBox{width:100%; max-width:var(--vMaxWidth); margin:0 auto; padding:.75rem 1rem}

.clHeaderBody{display:flex; justify-content:space-between; align-items:center; gap:1rem; }

.clHeaderLogo{width:200px; min-width:180px!important; height:auto;}

.logo .site-title{font-weight:800; text-decoration:none; color:var(--color-primary ,#0d47a1 ); font-size:1.25rem}

.clHeaderNav{background:var(--color-primary ,#0d47a1 );}

#dvHeaderRight{display:flex; justify-content:flex-end; align-items:center; gap:1rem;  flex:1; }

.clHeaderNav{width:100%; height:30px; background:var(--color-primary ,#0d47a1 ); max-height:50px;
   display:flex; justify-content:flex-end; align-items:flex-end; flex-direction:row; padding-right:1rem; }

.navMenu{width:auto; float: right;color:#fff!important; }   
ul.navMenu{display:flex; gap:1rem; list-style:none; margin:0; padding:0; color:#fff!important;}
.navMenu a{color:#fff!important; text-decoration:none; font-weight:700}
.navMenu a:hover{color:var(--color-primary ,#0d47a1 )}
.clStoreBar{display:flex; gap:.75rem; justify-content:flex-end; margin-top:.5rem}
.storebar-link{color:#222; text-decoration:none; font-weight:700}
.storebar-link:hover{color:var(--color-primary ,#0d47a1 )}
.clMenuToggle{
  display:none;
  align-items:center;
  gap:.5rem;
  border:1px solid rgba(0,0,0,.15);
  background:#fff;
  color:#222;
  border-radius:8px;
  padding:.45rem .7rem;
  font-weight:700;
  cursor:pointer;
}
.clMenuToggleIcon{font-size:1.1rem; line-height:1}

/* Content blocks used on homepage templates */
.clgSection,
.clMainSection,
.home-products{
  width:100%;
  margin:2rem 0;
}

#dvHotCardsBody,
#dvOutanding,
#ibsStoreSection,
#dvPostsBody{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  gap:1rem;
}

.section-title,
.clHeaderH2{
  margin:0 0 1rem;
  font-size:clamp(1.25rem, 2.4vw, 2rem);
}

/* WooCommerce product cards on mobile/tablet */
.woocommerce ul.products{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:1rem;
}

.woocommerce ul.products li.product{
  width:auto !important;
  margin:0 !important;
}

/* Home hero */
.hero{
  padding: 3rem 0 2rem;
  text-align:center;
}
.hero-title{font-size:2.25rem; margin:0 0 .5rem}
.hero-subtitle{margin:0 0 1.25rem; opacity:.85}
.hero-cta{
  display:inline-block;
  background: var(--color-primary ,#0d47a1 );
  color:#fff;
  padding:.85rem 1.25rem;
  border-radius:10px;
  text-decoration:none;
  font-weight:700;
}
.hero-cta:hover{filter:brightness(.95)}

/* Footer (ported from your ibsgeneral footer styles with contrast) */
.clFullFooter {
  width: 100%;
  background: (var(--color-primary ,#0d47a1 ));
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
}
.footer-band {
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary ,#0d47a1 ) 0%, var(--contrast) 50%, var(--color-primary ,#0d47a1 ) 100%);
  box-shadow: 0 2px 8px rgba(233, 30, 99, 0.4);
}
.footer-container {
  min-height: 250px;
  width: 100%;
  max-width: var(--vMaxWidth);
  margin: 0 auto;
  padding: 3rem 2rem 2rem 2rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.clLeftFooter{text-align:left; color:#fff;}
.clCenterFooter{text-align:center; color:#fff;}
.clRightFooter{text-align:right; color:#fff;}


.clFooterBox{display:flex; margin:0 5px; padding:10px; flex-direction:row; justify-content:space-between; gap:1rem;
  max-width:var(--vMaxWidth,1800px);
  flex-wrap:wrap; color:#fff; background:var(--color-primary ,#0d47a1 ); 
}





.clFooterBox h3 { color:#fff;  font-weight:800; margin:0 0 1rem; text-transform:uppercase; letter-spacing:1px; text-shadow:0 2px 4px rgba(0,0,0,.3); }
.clFooterBox h4 { color:#fff; font-size:1.2rem; font-weight:700; margin:0 0 1rem; text-transform:uppercase; letter-spacing:.5px; border-bottom:2px solid rgba(255,255,255,.4); padding-bottom:.5rem; text-shadow:0 1px 2px rgba(0,0,0,.3); }



.footer-description { color:#fff; opacity:.95; line-height:1.6; margin:0; }
.social-links{display:flex; gap:1rem; flex-wrap:wrap}
.social-link{width:45px;height:45px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.15);border-radius:50%;color:#fff;font-size:1.3rem;text-decoration:none;
  
  border:2px solid rgba(255,255,255,.3);box-shadow:0 2px 8px rgba(0,0,0,.2);transition:all .2s ease}
.social-link:hover{background:#fff;color:var(--pColor);transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.4);border-color:#fff}
.footer-links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.75rem}
.footer-links a{color:#fff;opacity:.95;text-decoration:none;font-weight:600}
.footer-links a:hover{opacity:1;text-shadow:0 1px 3px rgba(0,0,0,.3)}
.contact-info{display:flex;flex-direction:column;gap:1rem}
.contact-item{display:flex;gap:1rem;color:#fff;opacity:.95;line-height:1.6}
.contact-item i{color:var(--contrast);min-width:22px;margin-top:2px}
.footer-bottom{width:100%;background:rgba(0,0,0,.4);padding:1.25rem 2rem;border-top:2px solid rgba(255,255,255,.2)}

.footer-bottom-content{max-width:var(--vMaxWidth);margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.footer-bottom-content p{margin:0;color:#fff;opacity:.9}
.footer-bottom-content strong{color:var(--contrast)}



@media (max-width: 1400px) {
  
  .card2{    min-width: 350px;
    margin:0 7px;
    max-width: 410px; 
    }


}



@media (max-width: 1200px) {
  
  .card2{    min-width: 350px;
    margin:0 10px;
    flex:1;
    max-width: 500px; 
    }


}

@media (max-width: 1024px) {
  .card2{    min-width: 350px;
    margin:0 10px;
    flex:1;
    max-width: 500px; 
    }


}




@media (max-width: 768px){

  .card2{    min-width: 300px!important;
    margin:0 20px;
    width: 40%, import !important;;
    max-width: 500px; 
    }



  .clHeaderBody{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
  }
  .clHeaderLogo{width:160px; min-width:160px !important}
  .clMenuToggle{display:inline-flex}
  #dvHeaderMenuHolder{display:none}
  #jsPrimaryNav{
    display:none;
    width:100%;
    height:auto;
    max-height:none;
    justify-content:flex-start;
    align-items:stretch;
    padding:.5rem .75rem;
    margin-top:.5rem;
  }
  #jsPrimaryNav.is-open{display:flex}
  #jsPrimaryNav ul.navMenu{
    flex-direction:column;
    align-items:stretch;
    overflow:visible;
    color:#fff!important;
    gap:.75rem;
    margin:0;
    width:100%;
  }
  #jsPrimaryNav ul.navMenu li{flex:0 0 auto}
  #jsPrimaryNav ul.navMenu a{
    display:block;
    padding:.5rem .25rem;
    border-bottom:1px solid rgba(255,255,255,.25);
  }
  .navMenu a{font-size:.95rem; color:#fff!important;}
  .clStoreBar{
    width:100%;
    justify-content:flex-start;
    flex-wrap:wrap;
    row-gap:.25rem;
  }
  .clBodyBox{padding:0 .75rem}
  #dvHotCardsBody,
  #dvOutanding,
  #ibsStoreSection,
  #dvPostsBody{
    grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
    gap:.75rem;
  }
  .woocommerce ul.products{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:.75rem;
  }
  .clFooterBox{
    margin:0;
    padding:2rem 1.25rem;
    flex-direction:column;
  }
  .footer-column,
  .clLeftFooter,
  .clCenterFooter,
  .clRightFooter{
    width:100%;
    text-align:left;
  }
  .contact-item{gap:.75rem}
  .footer-bottom-content{flex-direction:column; text-align:center}
}

@media (max-width: 480px){

  .card2{    min-width: 350px;
    margin:0 20px;
    flex:1;
    max-width: 450px; 
    }


  .hero{padding:2rem 0 1.25rem}
  .hero-title{font-size:1.6rem}
  .hero-subtitle{font-size:.95rem}
  .hero-cta{width:100%; text-align:center}
  .woocommerce ul.products{
    grid-template-columns:1fr;
  }
}