html,body{
	font-size:16px;
}

@font-face {
  font-family: "Boris";
  src: url("../fonts/Boris.ttf") format("truetype"); /* espacio → %20 */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Stolzl";
  src: url("../fonts/stolzl_regular.otf") format("truetype"); /* espacio → %20 */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Stolzlm";
  src: url("../fonts/stolzl_light.otf") format("truetype"); /* espacio → %20 */
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

header .navbar{
	background-color:#494740;
	font-family: "Stolzlm",Verdana, sans-serif;
}
header .navbar a,span{
	color:#f2AAF0;
	font-size:0.9rem;
}
header .navbar .nav-link.show {
	color:#fff;
}
header .navbar a:hover{
	color:#fff;
}
header .navbar .nav-link.active{
	color:#f2AAF0;
	text-decoration:underline;
}
body{
		font-family: "Stolzl",Verdana, sans-serif;
}
p{
	color:#494740;
	font-weight:600;
	font-family: "Stolzlm",Verdana, sans-serif;
}
h1{
	color:#f2AAF0;
	font-size:2.2rem;
	font-weight:500;
	font-family: "Boris",  Arial, sans-serif;
}
h2{
	color:#f2AAF0;
	font-size:1.8rem;
	font-family: "Boris", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
h5{
	font-size:1.1rem;
	color:#f2AAF0;
	font-weight:500;
	font-family: "Stolzl",Verdana, sans-serif;
}
a{
	color:#f2AAF0;
}
.btn-primary{
	background-color: #0165DD;
    border-radius: 20px;
}
.card .card-img-top{
  width: 100%;
  height: 240px;         /* elegí el alto que te guste */
  object-fit: cover;     /* recorta sin deformar */
  object-position: center;
  display: block;
}
.price-badge{
	font-size:1.1rem;
	color:#494740;
}
.list-group-item+.list-group-item.active {
	background-color: #0165DD;
}

.input-group input{
	border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    border:1px solid #f2AAF0;
    color:#f2AAF0;
    background-color:#Fff;
}
.input-group button{
	border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    background-color:#Fff;
    border:1px solid #f2AAF0;
    color:#f2AAF0;
}
 .input-group button:first-child{
	border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    background-color:#Fff;
    border:1px solid #f2AAF0;
    color:#f2AAF0;
}
.input-group button:last-child{
	border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    background-color:#Fff;
    border:1px solid #f2AAF0;
    color:#f2AAF0;
}
.dropdown-menu{
	background-color:#FFF;
	border:1px solid #f2AAF0;
}
.qty-input{
	max-width:50px;
}
.btn-outline-primary{
	border:1px solid #f2AAF0;
	border-radius:20px;
}
.btn-outline-primary:hover{
	background-color:#fff;
	color:#f2AAF0;
}
.btn-outline-secondary{
	border:1px solid #f2AAF0;
	border-radius:20px;
	color:#f2AAF0;
	
}
.btn-outline-danger{
	border:1px solid #EB1C2C;
	border-radius:20px;
	color:#f2AAF0;
}
.bg-danger{
	background-color: #EB1C2C !important;
}
main{
	padding-top:0.5rem;
	padding-bottom:1rem;
	min-height:calc(100vh - 156px);
}
footer{
	padding:2rem 0px;
	text-align:center;
	min-height:30px;
	background-color:#F8F3E0;
	color:#f2AAF0;
	max-height: 90px;
}
footer span{
	font-size:1.2rem;
	font-weight:600;
}
.navbar input{
	font-size:0.9rem;
}
.navbar button {
	font-size:0.8rem;
	display:flex;
	color:#f2AAF0;
	align-items:center;
	height:40px;
}
.navbar button span{
	font-size:0.8rem;
}
.navbar-brand{
	padding: 2px 0px;
}
.btn-wsp{
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
  z-index: 1080; /* por encima de navbar/offcanvas backdrop */
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn-wsp:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(0,0,0,.25); }
.btn-wsp:active { transform: translateY(0); }
/**/
.cart-icon { display:inline-block; }

/* Badge interno */
.cart-icon .badge-bg   { fill: var(--bs-danger); }   /* Rojo Bootstrap */
.cart-icon .badge-text { fill: #fff; font: 700 9px/1 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; }


/*categorias tile*/
.categoria-tile{
	background-color:#f2AAF0;
	color: #F8F3E0;
	border:none !important;
	font-family: "Boris",  Arial, sans-serif;
	font-size:1rem;
}
.categoria-tile.active{
	background-color:#F8F3E0 !important;
	color: #f2AAF0;
}

/* (Opcional) ocultar badge cuando es 0: tu JS pone el texto; si querés esconderlo: */
.cart-icon .badge-text:where(:is(:not(:empty))) { /* noop, solo para compat */ }
@media (min-width: 768px){
  .btn-wsp{ right: 24px; bottom: 24px; }
}
/*productos*/
@media (min-width: 768px) {
	  #sidebar.offcanvas {
	    position: static;
	    transform: none;
	    visibility: visible !important;
	    height: auto;
	    border: 0;
	    box-shadow: none;
	    background: transparent;
	    width: auto !important;     /* que ocupe el ancho de la col-md-3 */
	  }
	  /* Ocultamos header/cerrar que solo sirven en mobile */
	  #sidebar .offcanvas-header { display: none; }
	}
/*productos*/
.price-badge{ font-size:1.6rem; font-weight:800; }
    .qty-btn{ width: 42px; }
    .prod-img{ aspect-ratio: 4/3; object-fit: cover; }

    /* Estilos de selector de color */
    #prod-colors { display:flex; flex-wrap:wrap; gap:.5rem; }
    .color-swatch {
      width: 34px; height: 34px; border-radius: 50%;
      border: 1px solid rgba(0,0,0,.25);
      display:inline-block;
      cursor:pointer;
      box-shadow: inset 0 0 0 2px rgba(255,255,255,.7);
    }
    .btn-check:checked + label.color-swatch {
      outline: 2px solid #0d6efd;
      box-shadow: 0 0 0 3px rgba(13,110,253,.25), inset 0 0 0 2px rgba(255,255,255,.9);
    }
    .color-name {
      font-size: .8rem;
      text-align: center;
      width: 42px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #555;
    }
    .color-item { display:flex; flex-direction:column; align-items:center; }