/* RESET */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html,
body{
  overflow-x:hidden;
}


/* IMAGENES */

img{
  max-width:100%;
  height:auto;
  display:block;
}


/* BODY */

body{

  font-family:'Montserrat',sans-serif;

  background:#f6f4ef;

  color:#111;
}


/* TOPBAR */

.topbar{

  background:#061426;

  color:white;

  text-align:center;

  padding:10px;

  font-size:12px;

  letter-spacing:1px;
}


/* NAVBAR */

.navbar{

  background:white;

  padding:22px 40px;

  display:grid;

  grid-template-columns:1fr auto 1fr;

  align-items:center;

  border-bottom:1px solid #eee;

  position:sticky;

  top:0;

  z-index:999;

  width:100%;
}

.navbar *{
  max-width:100%;
}


/* LINKS */

.nav-links{

  display:flex;

  gap:24px;

  align-items:center;

  flex-wrap:wrap;

  text-transform:uppercase;

  font-size:13px;
}

.nav-links a{

  color:#111;

  text-decoration:none;
}


/* LOGO */

.logo{

  font-family:'Cormorant Garamond',serif;

  font-size:54px;

  justify-self:center;

  width:auto;
}


/* ICONOS */

.icons{

  justify-self:end;

  display:flex;

  align-items:center;

  gap:18px;

  width:auto;

  font-size:22px;
}

.cart{
  width:auto;
}


/* HERO */

.products-hero{

  position:relative;

  min-height:45vh;

  overflow:hidden;

  display:flex;

  align-items:center;

  justify-content:center;

  text-align:center;

  color:white;

  padding:40px;

  background:
  linear-gradient(
    rgba(0,0,0,.45),
    rgba(0,0,0,.45)
  ),

  url("jean negro sweater gris.png");

  background-size:cover;

  background-position:center;
}

.products-hero-content{

  position:relative;

  z-index:2;
}

.products-hero h1{

  font-family:'Cormorant Garamond',serif;

  font-size:76px;

  font-weight:500;

  margin-bottom:14px;
}

.products-hero p{

  font-size:18px;

  max-width:700px;

  line-height:1.7;
}


/* PRODUCTOS */

.products-section{

  padding:70px 35px;
}

.product-container{

  display:grid;

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

  gap:28px;
}
@media(max-width:768px){

  .product-container{

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

    gap:12px;
  }

}
@media(max-width:480px){

  .product-container{

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

    gap:10px;
  }

  .product-card h2{
    font-size:14px;
  }

  .price{
    font-size:12px;
  }

}



/* CARD */

.product-card{

  background:white;

  /*border-radius:18px;*/

  overflow:hidden;
   display:flex;

  flex-direction:column;

  transition:.3s ease;

  box-shadow:
  0 4px 20px rgba(0,0,0,.05);

  padding-bottom:30px;
  padding-top:30px;
}

.product-card:hover{

  transform:translateY(-6px);

  box-shadow:
  0 14px 30px rgba(0,0,0,.12);
}


/* IMAGEN PRODUCTO */

.img-box{

  width:100%;

  aspect-ratio:3/4;

  overflow:hidden;

  background:#f3f3f3;

  position:relative;
}

.product-img{

  width:100%;

  height:100%;

  object-fit:cover;

  transition:.4s ease;

  cursor:pointer;
}

.product-card:hover .product-img{

  transform:scale(1.03);
}


/* DOTS */

.dots{

  position:absolute;

  bottom:14px;

  left:50%;

  transform:translateX(-50%);

  display:flex;

  gap:8px;
}

.dot{

  width:8px;
  height:8px;

  border-radius:50%;

  background:#d0d0d0;
}

.dot.active{

  background:#222;
}


/* INFO */

.product-card h2{

  font-size:22px;

  margin:22px 20px 12px;
   display:flex;

  flex-direction:column;

  flex:1;
}

.price{

  color:#0b63ff;

  font-size:25px;

  font-weight:700;

  margin:0 20px 24px;
}


/* TALLES */

.talles-container{

  display:flex;

  justify-content:center;

  flex-wrap:wrap;

  gap:8px;

  padding:0 12px;

  margin-bottom:16px;
}


.product-card input{

  display:block;

  margin:0 auto 20px;
   text-align:center;
}

.talle-btn{

  border:1px solid #ddd;

  background:white;

  min-width:clamp(30px, 4vw, 38px);

  height:clamp(30px, 4vw, 38px);

  border-radius:8px;

  cursor:pointer;

  font-size:clamp(11px, 1.4vw, 13px);

  transition:.2s;
}

.talle-btn:hover{

  border-color:#111;
}

.talle-btn.selected{

  background:#061426;

  color:white;

  border-color:#061426;
}

.talle-btn.disabled{

  opacity:.35;

  cursor:not-allowed;
}


/* COLORES */

.colores-container{

  display:flex;

  justify-content:center;

  align-items:center;

  gap:8px;

  padding:0 12px;

  margin-bottom:14px;

  flex-wrap:wrap;
}

.color-circle{

  width:clamp(18px, 3vw, 22px);

  height:clamp(18px, 3vw, 22px);

  border-radius:50%;

  border:2px solid white;

  box-shadow:0 0 0 1px #ccc;

  cursor:pointer;

  transition:.2s;
}


.color-circle.selected{

  transform:scale(1.15);

  box-shadow:0 0 0 2px #111;
}

.color-name{

  margin:0 20px 20px;

  font-size:14px;

  color:#666;
}


/* INPUT */

/* =========================
   TALLES
========================= */

.talles-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;

  padding: 0 12px;
  margin-bottom: 16px;

  width: 100%;
  box-sizing: border-box;
}

.talle-btn {
  border: 1px solid #ddd;
  background: white;

  min-width: clamp(34px, 8vw, 38px);
  height: clamp(34px, 8vw, 38px);

  border-radius: 8px;
  cursor: pointer;

  font-size: clamp(11px, 3vw, 13px);

  transition: 0.2s;

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

/* hover solo en desktop */
@media (hover: hover) {
  .talle-btn:hover {
    border-color: #999;
  }
}

/* tablets */
@media (max-width: 768px) {
  .talles-container {
    gap: 8px;
    padding: 0 8px;
  }
}

/* mobile chico */
@media (max-width: 480px) {
  .talles-container {
    gap: 6px;
  }

   .talle-btn{

    min-width:36px;

    height:36px;

    font-size:12px;

    border-radius:9px;
  }
}

/* mobile muy chico */
@media (max-width: 360px) {
  .talle-btn {
    min-width: 36px;
    height: 36px;
    font-size: 12px;
  }
}
/* =========================
   COLORES
========================= */

.colores-container{

  display:flex;

  justify-content:center;

  align-items:center;

  gap:8px;

  padding:0 12px;

  margin-bottom:14px;

  flex-wrap:wrap;
}

.color-circle{

  width:clamp(18px, 3vw, 22px);

  height:clamp(18px, 3vw, 22px);

  border-radius:50%;

  border:2px solid white;

  box-shadow:0 0 0 1px #ccc;

  cursor:pointer;

  transition:.2s;
}


/* =========================
   CANTIDAD
========================= */

.product-card input{

  width:clamp(42px, 7vw, 55px);

  height:clamp(30px, 4vw, 38px);

  display:block;

  margin:0 auto 18px;

  text-align:center;

  border:1px solid #ddd;

  border-radius:8px;

  font-size:clamp(11px, 1.5vw, 14px);

  outline:none;
}


/* =========================
   WHATSAPP
========================= */

.whatsapp-float{

  position:fixed;

  right:18px;
  bottom:18px;

  width:60px;
  height:60px;

  border-radius:50%;

  background:#25D366;

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

  color:white;

  font-size:32px;

  z-index:999999;

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

  transition:.3s;
}

.whatsapp-float:hover{

  transform:scale(1.08);

}
@media(max-width:768px){

  .whatsapp-float{

    width:52px;
    height:52px;

    font-size:28px;

    right:14px;
    bottom:14px;
  }

}
/* MOBILE EXTRA */

@media(max-width:480px){

 .talles-container {
    gap: 6px;
    justify-content: center;
  }

  .talle-btn {
    font-size: 12px;
    padding: 6px 8px;
  }
}
/* mobile muy chico */
@media (max-width: 360px) {
  .talle-btn{
    font-size: 11px;
    padding: 5px 7px;
  }
}


/* BOTON */

.add-to-cart{

  margin:0 20px;

  width:calc(100% - 40px);

  height:52px;

  border:none;

  background:#061426;

  color:white;

  font-size:15px;

  border-radius:12px;

  cursor:pointer;

  transition:.3s;
  margin-top: auto;
}

.add-to-cart:hover{

  background:#0d2340;
}


/* WHATSAPP */

.whatsapp-float{

  position:fixed;

  right:18px;

  bottom:18px;

  width: 50px;

  height:50px;

  border-radius:50%;

  background:#25d366;

  display:flex;

  align-items:center;

  justify-content:center;

  color:white;

  font-size:34px;

  z-index:9999;

  box-shadow:
  0 10px 25px rgba(0,0,0,.2);
}
#pant-icon{

  position:fixed;

  width:38px;

  height:38px;

  object-fit:contain;

  pointer-events:none;

  z-index:99999;

  display:none;
}
.cart img{
  width:auto;
  max-width:none;
}
.mini-logo{

  font-family:'Cormorant Garamond',serif;

  font-size:32px;

  letter-spacing:2px;

  font-weight:600;
}


/* NAV MAS PROLIJO */

.navbar{

  grid-template-columns:
  1fr auto auto;
}



/* RESPONSIVE */

@media(max-width:1100px){

  .product-container{

    grid-template-columns:
    repeat(3,1fr);
  }
}

@media(max-width:768px){

  .navbar{

    grid-template-columns:1fr;

    gap:16px;

    text-align:center;

    padding:18px;
  }

  .nav-links{

    justify-content:center;
  }

  .icons{

    justify-self:center;
  }

  .logo{

    font-size:42px;
  }

  .products-hero{

    min-height:34vh;

    padding:30px 20px;
  }

  .products-hero h1{

    font-size:52px;
  }

  .products-hero p{

    font-size:16px;
  }

  .product-container{

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

    gap:12px;
  }
  /* TALLES */

.talles-container{

  gap:6px;

  margin-top:8px;
}

.talle-btn{

  min-width:32px;

  height:32px;

  font-size:11px;

  padding:4px 8px;

  border-radius:8px;
}

/* COLORES */

.colores-container{

  gap:6px;

  margin-top:8px;
}

.color-circle{

  width:18px;

  height:18px;
}

/* CANTIDAD */

input[type="number"]{

  width:55px;

  height:34px;

  font-size:14px;
}
.add-to-cart{
    margin-top: auto;
}

  .product-card h2{

    font-size:18px;
  }

  .price{

    font-size:20px;
  }
}

@media(max-width:540px){

  .products-section{

    padding:40px 14px;
  }
  .talles-container{

  gap:6px;

  margin-top:8px;
}
 .talle-btn{

  min-width:20px;

  height:20px;

  font-size:10px;
}
}

  @media(max-width:480px){

  .product-container{

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

    gap:10px;
  }
  .talles-container{

  gap:6px;

  margin-top:8px;
}
  .talle-btn{

  min-width:10px;

  height:10px;

  font-size:10px;
}

  .product-card h2{
    font-size:14px;
  }

  .price{
    font-size:16px;
  }

}
.add-to-cart{
    margin-top: auto;
}

  .products-hero h1{

    font-size:42px;
  }

  .products-hero p{

    font-size:15px;
  }

  .product-card h2{

    font-size:20px;
  }

  .price{

    font-size:15px;
  }

/* MOBILE */

@media(max-width:768px){

  .mini-logo{

    font-size:24px;
  }

  .logo{

    font-size:28px;
  }

  .navbar{

    gap:10px;
  }
}
@media(max-width:768px){

  .cart-container{
    width:100%;
    padding:20px 12px;
  }

  .cart-items{
    width:100%;
  }

  .cart-item{

    width:100%;

    padding:18px 14px;

    border-radius:18px;
  }

  .cart-item img{

    width:90px;

    height:auto;

    object-fit:cover;
  }

  .cart-info h2{
    font-size:18px;
  }

  .quantity-controls{

    gap:14px;

    margin:18px 0;
  }

  .quantity-btn{

    width:38px;
    height:38px;

    font-size:18px;
  }

  .cart-total{
    font-size:28px;
  }

  .acciones-carrito{

    flex-direction:column;

    gap:14px;
  }

  .acciones-carrito button,
  .acciones-carrito a,
  .btn-confirmar{

    width:100%;
  }

  #confirmation-form{
    width:100%;
  }

  #confirmation-form input{
    width:100%;
  }

}
/* =========================
   MODAL PRODUCTO
========================= */

.product-modal{

  position:fixed !important;

  inset:0;

  width:100vw;

  height:100vh;

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

  display:none;

  align-items:center;

  justify-content:center;

  z-index:999999999;

  padding:20px;

  overflow:auto;

  transform:none !important;
}

.modal-box{

  position:relative;

  background:white;

  width:min(92vw, 520px);

  

  overflow:hidden;

  padding:20px;

  animation:modalFade .25s ease;
}

.modal-box img{

  width:100%;

  max-height:70vh;

  object-fit:cover;

  
}

.modal-box h2{

  margin-top:18px;

  font-size:28px;

  font-family:'Cormorant Garamond',serif;
}

.modal-box p{

  margin-top:8px;

  font-size:20px;

  font-weight:600;

  color:#0b63ff;
}


/* CERRAR */

.close-modal{

  position:absolute;

  top:10px;

  right:16px;

  font-size:34px;

  cursor:pointer;

  z-index:5;

  color:white;

  text-shadow:0 2px 10px rgba(0,0,0,.5);
}


/* FLECHAS */

.modal-arrows{

  position:absolute;

  inset:0;

  display:flex;

  align-items:center;

  justify-content:space-between;

  padding:0 14px;

  pointer-events:none;
}

.modal-arrows span{

  pointer-events:auto;

  width:42px;

  height:42px;

  border-radius:50%;

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

  display:flex;

  align-items:center;

  justify-content:center;

  cursor:pointer;

  font-size:22px;

  font-weight:bold;
}


/* ANIMACION */

@keyframes modalFade{

  from{
    opacity:0;
    transform:scale(.96);
  }

  to{
    opacity:1;
    transform:scale(1);
  }
}


/* MOBILE */

@media(max-width:768px){

  .modal-box{

    width:95vw;

    padding:14px;
  }

  .modal-box h2{

    font-size:22px;
  }

  .modal-box p{

    font-size:18px;
  }

  .close-modal{

    font-size:28px;

    top:8px;

    right:12px;
  }

  .modal-arrows span{

    width:36px;
    height:36px;

    font-size:18px;
  }
}